feat(components): add ErrorBoundary (#73)

src/components/ErrorBoundary/PdapErrorBoundary.vue

@@ -0,0 +1,38 @@
+<template>
+ <component
+ :is="component"
+ v-if="error"
+ class="pdap-flex-container-center h-[full]"
+ >
+ <h1>Oops, something went wrong!</h1>
+ <p class="max-w-full" data-test="error-boundary-message">
+ If you keep seeing this message, please email
+ <a href="mailto:[email protected]">[email protected]</a> for assistance.
+ </p>
+ </component>
+ <slot v-else />
+</template>
+<script>
+export default {
+ props: {
+ component: {
+ type: String,
+ default: 'div',
+ },
+ },
+ data() {
+ return {
+ error: false,
+ };
+ },
+ /* TODO: figure out how to cover this lifecycle method in tests */
+ errorCaptured(error) {
+ this.interceptError(error);
+ },
+ methods: {
+ interceptError(error) {
+ this.error = error;
+ },
+ },
+};
+</script>

src/components/ErrorBoundary/__snapshots__/error-boundary.spec.ts.snap

@@ -0,0 +1,10 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`ErrorBoundary > renders error content with error 1`] = `
+<div class="pdap-flex-container-center h-[full]">
+ <h1>Oops, something went wrong!</h1>
+ <p class="max-w-full"> If you keep seeing this message, please email <a href="mailto:[email protected]">[email protected]</a> for assistance. </p>
+</div>
+`;
+
+exports[`ErrorBoundary > renders slot content with no error 1`] = `<div></div>`;

src/components/ErrorBoundary/error-boundary.spec.ts

@@ -0,0 +1,31 @@
+import { mount } from '@vue/test-utils';
+import { beforeEach, describe, expect, it } from 'vitest';
+import ErrorBoundary from './PdapErrorBoundary.vue';
+import { nextTick } from 'vue';
+
+let wrapper;
+
+describe('ErrorBoundary', () => {
+ beforeEach(() => {
+ wrapper = mount(ErrorBoundary, {
+ slots: {
+ default: '<div data-test="default-slot" />',
+ },
+ });
+ });
+
+ it('renders slot content with no error', () => {
+ expect(wrapper.find('[data-test="default-slot"]').exists()).toBe(true);
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+
+ it('renders error content with error', async () => {
+ wrapper.vm.interceptError(new Error('Generic error'));
+ await nextTick();
+
+ expect(wrapper.find('[data-test="error-boundary-message"]').exists()).toBe(
+ true
+ );
+ expect(wrapper.html()).toMatchSnapshot();
+ });
+});