From 9ac080fcbc481ed5ee91560c356222fb4b121574 Mon Sep 17 00:00:00 2001
From: Phan An <me@phanan.net>
Date: Tue, 26 Jul 2022 17:08:35 +0200
Subject: [PATCH] feat(test): add MessageToast tests

---
 .../js/components/ui/MessageToast.spec.ts     | 40 +++++++++++++++++++
 .../__snapshots__/MessageToast.spec.ts.snap   |  8 ++++
 resources/assets/js/types.d.ts                |  2 +-
 3 files changed, 49 insertions(+), 1 deletion(-)
 create mode 100644 resources/assets/js/components/ui/MessageToast.spec.ts
 create mode 100644 resources/assets/js/components/ui/__snapshots__/MessageToast.spec.ts.snap

diff --git a/resources/assets/js/components/ui/MessageToast.spec.ts b/resources/assets/js/components/ui/MessageToast.spec.ts
new file mode 100644
index 00000000..eb072418
--- /dev/null
+++ b/resources/assets/js/components/ui/MessageToast.spec.ts
@@ -0,0 +1,40 @@
+import { expect, it, vi } from 'vitest'
+import UnitTestCase from '@/__tests__/UnitTestCase'
+import MessageToast from './MessageToast.vue'
+import { fireEvent } from '@testing-library/vue'
+
+new class extends UnitTestCase {
+  private renderComponent () {
+    return this.render(MessageToast, {
+      props: {
+        message: {
+          id: 101,
+          type: 'success',
+          message: 'Everything is fine',
+          timeout: 5
+        }
+      }
+    })
+  }
+
+  protected test () {
+    it('renders', () => expect(this.renderComponent().html()).toMatchSnapshot())
+
+    it('dismisses upon click', async () => {
+      const { emitted, getByTitle } = this.renderComponent()
+      await fireEvent.click(getByTitle('Click to dismiss'))
+
+      expect(emitted().dismiss).toBeTruthy()
+    })
+
+    it('dismisses upon timeout', async () => {
+      vi.useFakeTimers()
+
+      const { emitted } = this.renderComponent()
+      vi.advanceTimersByTime(5000)
+      expect(emitted().dismiss).toBeTruthy()
+
+      vi.useRealTimers()
+    })
+  }
+}
diff --git a/resources/assets/js/components/ui/__snapshots__/MessageToast.spec.ts.snap b/resources/assets/js/components/ui/__snapshots__/MessageToast.spec.ts.snap
new file mode 100644
index 00000000..69c30733
--- /dev/null
+++ b/resources/assets/js/components/ui/__snapshots__/MessageToast.spec.ts.snap
@@ -0,0 +1,8 @@
+// Vitest Snapshot v1
+
+exports[`renders 1`] = `
+<div class="message success" title="Click to dismiss" data-v-f05fd058="">
+  <aside data-v-f05fd058=""><br data-testid="icon" icon="[object Object]" class="icon" data-v-f05fd058=""><br data-testid="icon" icon="[object Object]" class="icon-dismiss" data-v-f05fd058=""></aside>
+  <main data-v-f05fd058=""></main>
+</div>
+`;
diff --git a/resources/assets/js/types.d.ts b/resources/assets/js/types.d.ts
index 9cd61afe..57856460 100644
--- a/resources/assets/js/types.d.ts
+++ b/resources/assets/js/types.d.ts
@@ -408,5 +408,5 @@ type ToastMessage = {
   id: string
   type: 'info' | 'success' | 'warning' | 'danger'
   content: string
-  timeout: number
+  timeout: number // seconds
 }