test(transitions): add on:introend test (#311)

test(transitions): add on:introend test

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",

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}

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