From 10d351c4fdfb0d1992bca1a876979512f107c254 Mon Sep 17 00:00:00 2001
From: Joshua Graber <68428039+joshuagraber@users.noreply.github.com>
Date: Tue, 28 May 2024 15:28:25 -0400
Subject: [PATCH] feat(components): add ErrorBoundary (#73)

---
 .../ErrorBoundary/PdapErrorBoundary.vue       | 38 +++++++++++++++++++
 .../__snapshots__/error-boundary.spec.ts.snap | 10 +++++
 .../ErrorBoundary/error-boundary.spec.ts      | 31 +++++++++++++++
 3 files changed, 79 insertions(+)
 create mode 100644 src/components/ErrorBoundary/PdapErrorBoundary.vue
 create mode 100644 src/components/ErrorBoundary/__snapshots__/error-boundary.spec.ts.snap
 create mode 100644 src/components/ErrorBoundary/error-boundary.spec.ts

diff --git a/src/components/ErrorBoundary/PdapErrorBoundary.vue b/src/components/ErrorBoundary/PdapErrorBoundary.vue
new file mode 100644
index 0000000..f96cfe7
--- /dev/null
+++ b/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:contact@pdap.io">contact@pdap.io</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>
diff --git a/src/components/ErrorBoundary/__snapshots__/error-boundary.spec.ts.snap b/src/components/ErrorBoundary/__snapshots__/error-boundary.spec.ts.snap
new file mode 100644
index 0000000..b90f116
--- /dev/null
+++ b/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:contact@pdap.io">contact@pdap.io</a> for assistance. </p>
+</div>
+`;
+
+exports[`ErrorBoundary > renders slot content with no error 1`] = `<div></div>`;
diff --git a/src/components/ErrorBoundary/error-boundary.spec.ts b/src/components/ErrorBoundary/error-boundary.spec.ts
new file mode 100644
index 0000000..562f106
--- /dev/null
+++ b/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();
+	});
+});