feat(test): add MessageToast tests

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()
+    })
+  }
+}

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>
+`;

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
 }