@pyreon/kinetic 0.24.4 → 0.24.6

package/src/__tests__/stagger-component-children-hydration.test.tsx

@@ -1,191 +0,0 @@
-/** @jsxImportSource @pyreon/core */
-/**
- * Regression: `kinetic('div').stagger()` with `show={() => true}` +
- * `appear` + multiple component-VNode children rendered `<undefined>`
- * tags in place of the children's actual DOM post-hydrate.
- *
- * Real-app reporter (examples/bokisch.com Intro section): SSG'd HTML
- * carried `<h1>Hello</h1>` + tagline + icons; client hydration produced
- * `<undefined></undefined>` tags (literal HTML element with tagName
- * "UNDEFINED") + `<!--pyreon-->` markers in place of every child.
- *
- * Bug class — Pyreon-compiler prop-inlining + cloneVNode-on-a-function:
- *
- *   1. The compiler rewrites local `const children = obj.x` then
- *      `<Comp>{children}</Comp>` as `Comp({..., children: () => obj.x})`.
- *      Component receives `props.children` as a FUNCTION, not an array.
- *
- *   2. StaggerRenderer iterated `(Array.isArray(children) ? children : [children])`
- *      directly. `[function].filter(isVNode)` collapsed to `[]` → the
- *      kinetic `<div>` rendered with zero children.
- *
- *   3. Even after StaggerRenderer's fix, TransitionItem's `cloneVNode(props.children, {ref})`
- *      tried to clone the same function-wrapped value (also auto-wrapped
- *      by the compiler one level down — `{cloneVNode(child, {style})}`
- *      became `() => cloneVNode(child, {style})`). Spreading a function
- *      via `{...fn, props: {...}}` yields `{props: {...}}` (no own
- *      enumerable properties on functions) — the resulting vnode had
- *      `type: undefined`. mountElement called `document.createElement(undefined)`
- *      → the browser produced literal `<undefined>` tags.
- *
- * Fix: `resolveChildren` helper in both StaggerRenderer (iteration) AND
- * TransitionItem (cloning). Unwraps function-wrapped children eagerly
- * since kinetic snapshots children at render time and does not observe
- * children changes.
- *
- * Bisect-verified: reverting either `resolveChildren` call in this PR
- * fails this spec — StaggerRenderer revert produces zero children in the
- * kinetic `<div>`; TransitionItem revert produces `<undefined>` tags
- * with the right cloned style.
- */
-import type { VNode } from '@pyreon/core'
-import { h } from '@pyreon/core'
-import { mount } from '@pyreon/runtime-dom'
-import { afterEach, describe, expect, it } from 'vitest'
-import kinetic from '../kinetic'
-import TransitionItem from '../kinetic/TransitionItem'
-
-// Build a kinetic Component VNode whose `props.children` is a FUNCTION
-// (not an array), mirroring what the Pyreon vite-plugin emits when JSX
-// children are inlined back at the call site (`<Entrance>{children}</Entrance>`
-// → `jsx(Entrance, { children: () => h.children })`). The kinetic test
-// pipeline uses `vl_rolldown_build` which does NOT do Pyreon's
-// prop-inlining, so we construct the shape directly.
-const buildEntranceWithFunctionChildren = (
-  // Wider call signature — kinetic('div').stagger() returns a stagger-mode
-  // component whose precise typed shape (`KineticComponent<'div', 'stagger'>`)
-  // is narrower than what `kinetic()`'s default returns. The function-
-  // children wrapper bypasses the strict children-required typing.
-  Entrance: (props: Record<string, unknown>) => VNode | null,
-  childArray: VNode[],
-): VNode => {
-  // h() puts children in vnode.children (rest args). For mountComponent's
-  // merge to leave props.children alone, set it explicitly here.
-  return h(Entrance, {
-    show: () => true,
-    appear: true,
-    children: (() => childArray) as unknown as VNode[],
-  })
-}
-
-let containers: HTMLElement[] = []
-afterEach(() => {
-  for (const c of containers) c.remove()
-  containers = []
-})
-
-describe('kinetic("div").stagger() — function-wrapped children survive render', () => {
-  it('iterates function-wrapped children correctly (no <undefined> tags)', () => {
-    const Entrance = kinetic('div')
-      .enter({ opacity: '0' })
-      .enterTo({ opacity: '1' })
-      .stagger({ interval: 20 })
-
-    const tree = buildEntranceWithFunctionChildren(Entrance as never, [
-      h('h1', { 'data-id': 'heading' }, 'Hello'),
-      h('p', { 'data-id': 'tagline' }, 'tagline'),
-      h('ul', { 'data-id': 'icons' }, h('li', null, 'icon-a')),
-    ])
-
-    const container = document.createElement('div')
-    document.body.appendChild(container)
-    containers.push(container)
-
-    const dispose = mount(tree as VNode, container)
-
-    // Children are rendered with proper element tags — NOT <undefined>
-    const heading = container.querySelector('[data-id="heading"]')
-    const tagline = container.querySelector('[data-id="tagline"]')
-    const icons = container.querySelector('[data-id="icons"]')
-
-    expect(
-      heading,
-      `heading missing — pre-fix the function-wrapped child got mounted as <undefined>. ` +
-        `container.innerHTML=${container.innerHTML.slice(0, 600)}`,
-    ).not.toBeNull()
-    expect(heading?.tagName).toBe('H1')
-    expect(heading?.textContent).toBe('Hello')
-
-    expect(tagline).not.toBeNull()
-    expect(tagline?.tagName).toBe('P')
-
-    expect(icons).not.toBeNull()
-    expect(icons?.tagName).toBe('UL')
-
-    // Sanity: no `<undefined>` tags should exist anywhere (pre-fix
-    // TransitionItem's cloneVNode(props.children, {ref}) on a function
-    // produced `{type: undefined, props: {ref}}` → mountElement called
-    // document.createElement(undefined) → `<undefined>` element).
-    expect(container.querySelector('undefined')).toBeNull()
-
-    dispose()
-  })
-
-  it('TransitionItem resolves function-wrapped children before cloneVNode (no <undefined> tag)', () => {
-    // Direct test for the SECOND fix-site — TransitionItem's
-    // `cloneVNode(props.children, {ref})`. Pre-fix, when the parent
-    // (StaggerRenderer/GroupRenderer) emits `<TransitionItem>{cloneVNode(c, {style})}</TransitionItem>`
-    // under the Pyreon vite-plugin, the compiler wraps the JSX child as
-    // `() => cloneVNode(c, {style})`. TransitionItem then receives
-    // `props.children = function`. `cloneVNode(function, {ref})` spreads
-    // the function (no own enumerable properties) → produces
-    // `{type: undefined, props: {ref}}` → mountElement creates literal
-    // `<undefined>` tag.
-    const childVNode = h('h1', { 'data-id': 'ti-heading' }, 'Hello')
-    const tree = h(TransitionItem, {
-      show: () => true,
-      appear: false,
-      timeout: 100,
-      enterStyle: { opacity: '0' },
-      enterToStyle: { opacity: '1' },
-      enterTransition: 'opacity 50ms ease',
-      // Function-wrapped children, mirroring the compiler's emit.
-      children: (() => childVNode) as unknown as VNode,
-    })
-
-    const container = document.createElement('div')
-    document.body.appendChild(container)
-    containers.push(container)
-
-    const dispose = mount(tree as VNode, container)
-
-    const heading = container.querySelector('[data-id="ti-heading"]')
-    expect(
-      heading,
-      `heading missing — pre-fix TransitionItem cloned the function, ` +
-        `producing <undefined>. container.innerHTML=${container.innerHTML.slice(0, 400)}`,
-    ).not.toBeNull()
-    expect(heading?.tagName).toBe('H1')
-    expect(heading?.textContent).toBe('Hello')
-    expect(container.querySelector('undefined')).toBeNull()
-
-    dispose()
-  })
-
-  it('iterates static-array children correctly (control — was always working)', () => {
-    const Entrance = kinetic('div')
-      .enter({ opacity: '0' })
-      .enterTo({ opacity: '1' })
-      .stagger({ interval: 20 })
-
-    // No compiler wrap — children as a plain array.
-    const tree = h(
-      Entrance,
-      { show: () => true, appear: true },
-      h('h1', { 'data-id': 'heading-static' }, 'Static'),
-      h('p', { 'data-id': 'tagline-static' }, 't'),
-    )
-
-    const container = document.createElement('div')
-    document.body.appendChild(container)
-    containers.push(container)
-
-    const dispose = mount(tree as VNode, container)
-
-    expect(container.querySelector('[data-id="heading-static"]')?.tagName).toBe('H1')
-    expect(container.querySelector('[data-id="tagline-static"]')?.tagName).toBe('P')
-    expect(container.querySelector('undefined')).toBeNull()
-
-    dispose()
-  })
-})

package/src/__tests__/top-level-transition-stagger-function-children.test.tsx

@@ -1,141 +0,0 @@
-/** @jsxImportSource @pyreon/core */
-/**
- * Regression: PR #731 fixed the kinetic-mode renderers (StaggerRenderer +
- * TransitionItem under `src/kinetic/`) but missed the parallel TOP-LEVEL
- * `<Transition>` and `<Stagger>` components in `src/Transition.tsx` and
- * `src/Stagger.tsx`. They have the SAME iteration + cloneVNode shape and
- * the SAME bug when the Pyreon compiler wraps the children prop in
- * `() => x` (the prop-inlining pass).
- *
- * The Pyreon vite-plugin auto-wraps `<Comp>{x}</Comp>` JSX child
- * expressions in `() => x` for stable prop-derived references; downstream
- * libraries that iterate `props.children` directly at the VNode level or
- * `cloneVNode` them silently break — the function spread produces
- * `{type: undefined}` → `<undefined>` DOM tags. PR #732 added the
- * compiler carve-out for stable references; library-side `resolveChildren`
- * is still needed for the CallExpression-inside-JSX-child shape that the
- * compiler (correctly) doesn't optimize.
- *
- * Bisect-verified: reverting the `resolveChildren` call in `Stagger.tsx`
- * fails the Stagger spec (no children rendered); reverting in
- * `Transition.tsx` fails the Transition spec (`<undefined>` tag rendered
- * instead of the cloned child).
- */
-import type { VNode } from '@pyreon/core'
-import { h } from '@pyreon/core'
-import { mount } from '@pyreon/runtime-dom'
-import { afterEach, describe, expect, it } from 'vitest'
-import Stagger from '../Stagger'
-import Transition from '../Transition'
-
-let containers: HTMLElement[] = []
-afterEach(() => {
-  for (const c of containers) c.remove()
-  containers = []
-})
-
-describe('top-level <Stagger> — function-wrapped children survive render', () => {
-  it('iterates function-wrapped children correctly (no empty render)', () => {
-    const childArray: VNode[] = [
-      h('h1', { 'data-id': 'st-h1' }, 'Hello'),
-      h('p', { 'data-id': 'st-p' }, 'tagline'),
-      h('ul', { 'data-id': 'st-ul' }, h('li', null, 'a')),
-    ]
-
-    const tree = h(Stagger, {
-      show: () => true,
-      appear: true,
-      interval: 20,
-      // Compiler-emitted shape: children is a function returning the array.
-      children: (() => childArray) as unknown as VNode[],
-    })
-
-    const container = document.createElement('div')
-    document.body.appendChild(container)
-    containers.push(container)
-
-    const dispose = mount(tree as VNode, container)
-
-    const h1 = container.querySelector('[data-id="st-h1"]')
-    const p = container.querySelector('[data-id="st-p"]')
-    const ul = container.querySelector('[data-id="st-ul"]')
-
-    expect(
-      h1,
-      `Stagger collapsed when children is a function — html=${container.innerHTML.slice(0, 400)}`,
-    ).not.toBeNull()
-    expect(h1?.tagName).toBe('H1')
-    expect(h1?.textContent).toBe('Hello')
-    expect(p?.tagName).toBe('P')
-    expect(ul?.tagName).toBe('UL')
-    expect(container.querySelector('undefined')).toBeNull()
-
-    dispose()
-  })
-
-  it('static-array children control — was always working', () => {
-    const tree = h(
-      Stagger,
-      { show: () => true, appear: true, interval: 20 },
-      h('h1', { 'data-id': 'st-static' }, 'Static'),
-      h('p', { 'data-id': 'st-static-p' }, 't'),
-    )
-
-    const container = document.createElement('div')
-    document.body.appendChild(container)
-    containers.push(container)
-    const dispose = mount(tree as VNode, container)
-
-    expect(container.querySelector('[data-id="st-static"]')?.tagName).toBe('H1')
-    expect(container.querySelector('[data-id="st-static-p"]')?.tagName).toBe('P')
-
-    dispose()
-  })
-})
-
-describe('top-level <Transition> — function-wrapped children survive render', () => {
-  it('resolves function-wrapped children before cloneVNode (no <undefined> tag)', () => {
-    const childVNode = h('h1', { 'data-id': 'tn-h1' }, 'Hello')
-
-    const tree = h(Transition, {
-      show: () => true,
-      appear: false,
-      // Compiler-emitted shape.
-      children: (() => childVNode) as unknown as VNode,
-    })
-
-    const container = document.createElement('div')
-    document.body.appendChild(container)
-    containers.push(container)
-
-    const dispose = mount(tree as VNode, container)
-
-    const h1 = container.querySelector('[data-id="tn-h1"]')
-    expect(
-      h1,
-      `Transition produced <undefined> — html=${container.innerHTML.slice(0, 400)}`,
-    ).not.toBeNull()
-    expect(h1?.tagName).toBe('H1')
-    expect(h1?.textContent).toBe('Hello')
-    expect(container.querySelector('undefined')).toBeNull()
-
-    dispose()
-  })
-
-  it('static-VNode child control — was always working', () => {
-    const tree = h(
-      Transition,
-      { show: () => true, appear: false },
-      h('h1', { 'data-id': 'tn-static' }, 'Static'),
-    )
-
-    const container = document.createElement('div')
-    document.body.appendChild(container)
-    containers.push(container)
-    const dispose = mount(tree as VNode, container)
-
-    expect(container.querySelector('[data-id="tn-static"]')?.tagName).toBe('H1')
-
-    dispose()
-  })
-})

package/src/__tests__/useAnimationEnd.test.ts

@@ -1,194 +0,0 @@
-import { signal } from '@pyreon/reactivity'
-import useAnimationEnd from '../useAnimationEnd'
-
-const createMockRef = () => {
-  const el = document.createElement('div')
-  return { current: el }
-}
-
-describe('useAnimationEnd', () => {
-  beforeEach(() => vi.useFakeTimers())
-  afterEach(() => vi.useRealTimers())
-
-  it('calls onEnd when transitionend fires on the element', () => {
-    const onEnd = vi.fn()
-    const ref = createMockRef()
-    const active = signal(true)
-
-    useAnimationEnd({ ref, onEnd, active })
-
-    const event = new Event('transitionend', { bubbles: true })
-    Object.defineProperty(event, 'target', { value: ref.current })
-    ref.current.dispatchEvent(event)
-
-    expect(onEnd).toHaveBeenCalledTimes(1)
-  })
-
-  it('calls onEnd when animationend fires on the element', () => {
-    const onEnd = vi.fn()
-    const ref = createMockRef()
-    const active = signal(true)
-
-    useAnimationEnd({ ref, onEnd, active })
-
-    const event = new Event('animationend', { bubbles: true })
-    Object.defineProperty(event, 'target', { value: ref.current })
-    ref.current.dispatchEvent(event)
-
-    expect(onEnd).toHaveBeenCalledTimes(1)
-  })
-
-  it('ignores bubbled events from children', () => {
-    const onEnd = vi.fn()
-    const ref = createMockRef()
-    const child = document.createElement('span')
-    ref.current.appendChild(child)
-    const active = signal(true)
-
-    useAnimationEnd({ ref, onEnd, active })
-
-    const event = new Event('transitionend', { bubbles: true })
-    child.dispatchEvent(event)
-
-    expect(onEnd).not.toHaveBeenCalled()
-  })
-
-  it('fires timeout fallback when no event fires', () => {
-    const onEnd = vi.fn()
-    const ref = createMockRef()
-    const active = signal(true)
-
-    useAnimationEnd({ ref, onEnd, active, timeout: 1000 })
-
-    expect(onEnd).not.toHaveBeenCalled()
-
-    vi.advanceTimersByTime(1000)
-
-    expect(onEnd).toHaveBeenCalledTimes(1)
-  })
-
-  it('uses default timeout of 5000ms', () => {
-    const onEnd = vi.fn()
-    const ref = createMockRef()
-    const active = signal(true)
-
-    useAnimationEnd({ ref, onEnd, active })
-
-    vi.advanceTimersByTime(4999)
-    expect(onEnd).not.toHaveBeenCalled()
-
-    vi.advanceTimersByTime(1)
-    expect(onEnd).toHaveBeenCalledTimes(1)
-  })
-
-  it('only fires onEnd once even if multiple events fire', () => {
-    const onEnd = vi.fn()
-    const ref = createMockRef()
-    const active = signal(true)
-
-    useAnimationEnd({ ref, onEnd, active })
-
-    const event1 = new Event('transitionend', { bubbles: true })
-    Object.defineProperty(event1, 'target', { value: ref.current })
-    ref.current.dispatchEvent(event1)
-
-    const event2 = new Event('animationend', { bubbles: true })
-    Object.defineProperty(event2, 'target', { value: ref.current })
-    ref.current.dispatchEvent(event2)
-
-    expect(onEnd).toHaveBeenCalledTimes(1)
-  })
-
-  it('does not fire when active is false', () => {
-    const onEnd = vi.fn()
-    const ref = createMockRef()
-    const active = signal(false)
-
-    useAnimationEnd({ ref, onEnd, active, timeout: 100 })
-
-    vi.advanceTimersByTime(200)
-
-    expect(onEnd).not.toHaveBeenCalled()
-  })
-
-  it('does not fire when active=true but ref.current is null', () => {
-    const onEnd = vi.fn()
-    const ref = { current: null } as { current: HTMLElement | null }
-    const active = signal(true)
-
-    useAnimationEnd({ ref, onEnd, active, timeout: 100 })
-
-    // No timer should be set when ref is null
-    vi.advanceTimersByTime(200)
-
-    expect(onEnd).not.toHaveBeenCalled()
-  })
-
-  it('does not call onEnd twice when transitionend fires and then timeout fires', () => {
-    const onEnd = vi.fn()
-    const ref = createMockRef()
-    const active = signal(true)
-
-    useAnimationEnd({ ref, onEnd, active, timeout: 1000 })
-
-    // First: transitionend fires — calls done()
-    const event = new Event('transitionend', { bubbles: true })
-    Object.defineProperty(event, 'target', { value: ref.current })
-    ref.current.dispatchEvent(event)
-
-    expect(onEnd).toHaveBeenCalledTimes(1)
-
-    // Second: timeout fires — should be no-op because called is true
-    vi.advanceTimersByTime(1000)
-
-    expect(onEnd).toHaveBeenCalledTimes(1)
-  })
-
-  it('does not call onEnd twice when timeout fires and then transitionend fires', () => {
-    const onEnd = vi.fn()
-    const ref = createMockRef()
-    const active = signal(true)
-
-    useAnimationEnd({ ref, onEnd, active, timeout: 500 })
-
-    // First: timeout fires — calls done()
-    vi.advanceTimersByTime(500)
-
-    expect(onEnd).toHaveBeenCalledTimes(1)
-
-    // Second: transitionend fires — should be no-op via called guard
-    const event = new Event('transitionend', { bubbles: true })
-    Object.defineProperty(event, 'target', { value: ref.current })
-    ref.current.dispatchEvent(event)
-
-    expect(onEnd).toHaveBeenCalledTimes(1)
-  })
-
-  it('resets called when active transitions from true to false', () => {
-    const onEnd = vi.fn()
-    const ref = createMockRef()
-    const active = signal(true)
-
-    useAnimationEnd({ ref, onEnd, active, timeout: 1000 })
-
-    // Fire to set called = true
-    const event = new Event('transitionend', { bubbles: true })
-    Object.defineProperty(event, 'target', { value: ref.current })
-    ref.current.dispatchEvent(event)
-
-    expect(onEnd).toHaveBeenCalledTimes(1)
-
-    // Deactivate — resets called
-    active.set(false)
-
-    // Re-activate
-    active.set(true)
-
-    // Should be able to fire again
-    const event2 = new Event('transitionend', { bubbles: true })
-    Object.defineProperty(event2, 'target', { value: ref.current })
-    ref.current.dispatchEvent(event2)
-
-    expect(onEnd).toHaveBeenCalledTimes(2)
-  })
-})

package/src/__tests__/useReducedMotion.test.ts

@@ -1,160 +0,0 @@
-// Track lifecycle callbacks
-let mountCallbacks: Array<() => undefined | (() => void)> = []
-let unmountCallbacks: Array<() => void> = []
-
-vi.mock('@pyreon/core', () => ({
-  onMount: vi.fn((cb: () => undefined | (() => void)) => {
-    mountCallbacks.push(cb)
-  }),
-  onUnmount: vi.fn((cb: () => void) => {
-    unmountCallbacks.push(cb)
-  }),
-}))
-
-vi.mock('@pyreon/reactivity', () => {
-  const signal = <T>(initial: T) => {
-    let value = initial
-    const s = (() => value) as (() => T) & {
-      set: (v: T) => void
-      update: (fn: (c: T) => T) => void
-      peek: () => T
-      subscribe: () => () => void
-      direct: () => () => void
-      label: string | undefined
-      debug: () => { name: string | undefined; value: T; subscriberCount: number }
-    }
-    s.set = (v: T) => {
-      value = v
-    }
-    s.update = (fn: (c: T) => T) => {
-      value = fn(value)
-    }
-    s.peek = () => value
-    s.subscribe = () => () => undefined
-    s.direct = () => () => undefined
-    s.label = undefined
-    s.debug = () => ({ name: undefined, value, subscriberCount: 0 })
-    return s
-  }
-  // No-op stub for the DI hook `@pyreon/core/context.ts` calls at module
-  // load. See sibling test mocks for the full rationale.
-  const setSnapshotCapture = () => {}
-  return { signal, setSnapshotCapture }
-})
-
-import { useReducedMotion } from '../useReducedMotion'
-
-describe('useReducedMotion', () => {
-  let changeHandlers: Array<(e: any) => void>
-  let removedHandlers: Array<(e: any) => void>
-
-  const createMockMQL = (matches: boolean) => ({
-    matches,
-    media: '(prefers-reduced-motion: reduce)',
-    addEventListener: vi.fn((event: string, handler: (e: any) => void) => {
-      if (event === 'change') changeHandlers.push(handler)
-    }),
-    removeEventListener: vi.fn((event: string, handler: (e: any) => void) => {
-      if (event === 'change') removedHandlers.push(handler)
-    }),
-  })
-
-  beforeEach(() => {
-    mountCallbacks = []
-    unmountCallbacks = []
-    changeHandlers = []
-    removedHandlers = []
-  })
-
-  afterEach(() => {
-    vi.restoreAllMocks()
-  })
-
-  it('returns false initially', () => {
-    vi.stubGlobal(
-      'matchMedia',
-      vi.fn(() => createMockMQL(false)),
-    )
-    const result = useReducedMotion()
-    expect(result()).toBe(false)
-  })
-
-  it('reads matchMedia state on mount (true)', () => {
-    vi.stubGlobal(
-      'matchMedia',
-      vi.fn(() => createMockMQL(true)),
-    )
-    const result = useReducedMotion()
-
-    // Fire mount callback
-    for (const cb of mountCallbacks) cb()
-
-    expect(result()).toBe(true)
-  })
-
-  it('reads matchMedia state on mount (false)', () => {
-    vi.stubGlobal(
-      'matchMedia',
-      vi.fn(() => createMockMQL(false)),
-    )
-    const result = useReducedMotion()
-
-    for (const cb of mountCallbacks) cb()
-
-    expect(result()).toBe(false)
-  })
-
-  it('reacts to change events', () => {
-    vi.stubGlobal(
-      'matchMedia',
-      vi.fn(() => createMockMQL(false)),
-    )
-    const result = useReducedMotion()
-
-    for (const cb of mountCallbacks) cb()
-    expect(result()).toBe(false)
-
-    // Simulate preference change
-    for (const handler of changeHandlers) {
-      handler({ matches: true })
-    }
-
-    expect(result()).toBe(true)
-  })
-
-  it('queries the correct media string', () => {
-    const mockMatchMedia = vi.fn(() => createMockMQL(false))
-    vi.stubGlobal('matchMedia', mockMatchMedia)
-
-    useReducedMotion()
-    for (const cb of mountCallbacks) cb()
-
-    expect(mockMatchMedia).toHaveBeenCalledWith('(prefers-reduced-motion: reduce)')
-  })
-
-  it('registers a change listener on mount', () => {
-    vi.stubGlobal(
-      'matchMedia',
-      vi.fn(() => createMockMQL(false)),
-    )
-    useReducedMotion()
-
-    for (const cb of mountCallbacks) cb()
-
-    expect(changeHandlers).toHaveLength(1)
-  })
-
-  it('removes the change listener on unmount', () => {
-    vi.stubGlobal(
-      'matchMedia',
-      vi.fn(() => createMockMQL(false)),
-    )
-    useReducedMotion()
-
-    for (const cb of mountCallbacks) cb()
-    expect(changeHandlers).toHaveLength(1)
-
-    for (const cb of unmountCallbacks) cb()
-    expect(removedHandlers).toHaveLength(1)
-  })
-})