From cc68c261db98de1dfd263d436378f42778fce4db Mon Sep 17 00:00:00 2001
From: Michael Cousins <michael.cousins@viam.com>
Date: Sat, 3 Feb 2024 11:35:52 +1000
Subject: [PATCH] test(transitions): add on:introend test

---
 package.json                               |  1 +
 src/__tests__/fixtures/Transitioner.svelte | 18 +++++++++++++
 src/__tests__/transition.test.js           | 30 ++++++++++++++++++++++
 3 files changed, 49 insertions(+)
 create mode 100644 src/__tests__/fixtures/Transitioner.svelte
 create mode 100644 src/__tests__/transition.test.js

diff --git a/package.json b/package.json
index d6a153d..20bc1c2 100644
--- a/package.json
+++ b/package.json
@@ -72,6 +72,7 @@
   "devDependencies": {
     "@sveltejs/vite-plugin-svelte": "^2.4.2",
     "@testing-library/jest-dom": "^6.3.0",
+    "@testing-library/user-event": "^14.5.2",
     "@typescript-eslint/eslint-plugin": "6.19.1",
     "@typescript-eslint/parser": "6.19.1",
     "@vitest/coverage-v8": "^0.33.0",
diff --git a/src/__tests__/fixtures/Transitioner.svelte b/src/__tests__/fixtures/Transitioner.svelte
new file mode 100644
index 0000000..2ee1557
--- /dev/null
+++ b/src/__tests__/fixtures/Transitioner.svelte
@@ -0,0 +1,18 @@
+<script>
+  import { blur } from 'svelte/transition'
+
+  let show = false
+  let introDone = false
+</script>
+
+<button on:click={() => (show = true)}>Show</button>
+
+{#if show}
+  <div in:blur={{ duration: 64 }} on:introend={() => (introDone = true)}>
+    {#if introDone}
+      <p data-testid="intro-done">Done</p>
+    {:else}
+      <p data-testid="intro-pending">Pending</p>
+    {/if}
+  </div>
+{/if}
diff --git a/src/__tests__/transition.test.js b/src/__tests__/transition.test.js
new file mode 100644
index 0000000..5b1ff18
--- /dev/null
+++ b/src/__tests__/transition.test.js
@@ -0,0 +1,30 @@
+import { userEvent } from '@testing-library/user-event'
+import { beforeEach, describe, expect, test, vi } from 'vitest'
+
+import { render, screen, waitFor } from '..'
+import Transitioner from './fixtures/Transitioner.svelte'
+
+describe('transitions', () => {
+  beforeEach(() => {
+    if (window.navigator.userAgent.includes('jsdom')) {
+      const raf = (fn) => setTimeout(() => fn(new Date()), 16)
+      vi.stubGlobal('requestAnimationFrame', raf)
+    }
+  })
+
+  test('on:introend', async () => {
+    const user = userEvent.setup()
+
+    render(Transitioner)
+    const start = screen.getByRole('button')
+    await user.click(start)
+
+    const pending = screen.getByTestId('intro-pending')
+    expect(pending).toBeInTheDocument()
+
+    await waitFor(() => {
+      const done = screen.queryByTestId('intro-done')
+      expect(done).toBeInTheDocument()
+    })
+  })
+})