@pyreon/kinetic 0.11.5 → 0.11.7

package/src/__tests__/TransitionItem.test.tsx

@@ -1,13 +1,13 @@
-import type { VNode } from "@pyreon/core"
-import { signal } from "@pyreon/reactivity"
+import type { VNode } from '@pyreon/core'
+import { signal } from '@pyreon/reactivity'
 
 let _reducedMotion = false
 
-vi.mock("../useReducedMotion", () => ({
+vi.mock('../useReducedMotion', () => ({
   useReducedMotion: () => () => _reducedMotion,
 }))
 
-import TransitionItem from "../kinetic/TransitionItem"
+import TransitionItem from '../kinetic/TransitionItem'
 
 // Mock rAF for deterministic double-rAF testing
 let rafCallbacks: (() => void)[] = []
@@ -19,20 +19,20 @@ beforeEach(() => {
   rafCallbacks = []
 
   vi.stubGlobal(
-    "requestAnimationFrame",
+    'requestAnimationFrame',
     vi.fn((cb: () => void) => {
       rafCallbacks.push(cb)
       return rafCallbacks.length
     }),
   )
 
-  vi.stubGlobal("cancelAnimationFrame", vi.fn())
+  vi.stubGlobal('cancelAnimationFrame', vi.fn())
 })
 
 afterEach(() => {
   vi.useRealTimers()
-  vi.stubGlobal("requestAnimationFrame", originalRaf)
-  vi.stubGlobal("cancelAnimationFrame", originalCaf)
+  vi.stubGlobal('requestAnimationFrame', originalRaf)
+  vi.stubGlobal('cancelAnimationFrame', originalCaf)
 })
 
 const flushRaf = () => {
@@ -42,8 +42,8 @@ const flushRaf = () => {
 }
 
 const fireTransitionEnd = (el: HTMLElement) => {
-  const event = new Event("transitionend", { bubbles: true })
-  Object.defineProperty(event, "target", { value: el })
+  const event = new Event('transitionend', { bubbles: true })
+  Object.defineProperty(event, 'target', { value: el })
   el.dispatchEvent(event)
 }
 
@@ -55,27 +55,27 @@ const wireRef = (vnode: VNode | null, el: HTMLElement) => {
   if (!vnode) return
   const visitNode = (node: VNode) => {
     const nodeProps = node.props as Record<string, unknown>
-    if (typeof nodeProps?.ref === "function") {
+    if (typeof nodeProps?.ref === 'function') {
       ;(nodeProps.ref as (element: HTMLElement | null) => void)(el)
-    } else if (nodeProps?.ref && typeof nodeProps.ref === "object") {
+    } else if (nodeProps?.ref && typeof nodeProps.ref === 'object') {
       ;(nodeProps.ref as { current: HTMLElement | null }).current = el
     }
     if (node.children) {
       const ch = Array.isArray(node.children) ? node.children : [node.children]
       for (const c of ch) {
-        if (c && typeof c === "object" && "type" in (c as object)) visitNode(c as VNode)
+        if (c && typeof c === 'object' && 'type' in (c as object)) visitNode(c as VNode)
       }
     }
     if (nodeProps?.children) {
       const pc = Array.isArray(nodeProps.children) ? nodeProps.children : [nodeProps.children]
       for (const c of pc) {
-        if (c && typeof c === "object" && "type" in (c as object)) visitNode(c as VNode)
+        if (c && typeof c === 'object' && 'type' in (c as object)) visitNode(c as VNode)
       }
     }
     if (
       nodeProps?.fallback &&
-      typeof nodeProps.fallback === "object" &&
-      "type" in (nodeProps.fallback as object)
+      typeof nodeProps.fallback === 'object' &&
+      'type' in (nodeProps.fallback as object)
     ) {
       visitNode(nodeProps.fallback as VNode)
     }
@@ -87,11 +87,11 @@ const wireRef = (vnode: VNode | null, el: HTMLElement) => {
  * Helper: call TransitionItem and wire a mock element to refs.
  */
 const setupTransitionItem = (props: Record<string, unknown>) => {
-  const el = document.createElement("div")
+  const el = document.createElement('div')
   const child: VNode = {
-    type: "div",
-    props: { "data-testid": "child" },
-    children: ["Hello"],
+    type: 'div',
+    props: { 'data-testid': 'child' },
+    children: ['Hello'],
     key: null,
   }
 
@@ -105,25 +105,25 @@ const setupTransitionItem = (props: Record<string, unknown>) => {
   return { vnode, el }
 }
 
-describe("TransitionItem", () => {
-  it("returns a VNode when show returns true", () => {
+describe('TransitionItem', () => {
+  it('returns a VNode when show returns true', () => {
     const show = () => true
-    const child: VNode = { type: "div", props: {}, children: ["Hello"], key: null }
+    const child: VNode = { type: 'div', props: {}, children: ['Hello'], key: null }
     const vnode = TransitionItem({ show, children: child })
     expect(vnode).not.toBeNull()
   })
 
-  it("wraps child in a Show component", () => {
+  it('wraps child in a Show component', () => {
     const show = () => true
-    const child: VNode = { type: "div", props: {}, children: ["Hello"], key: null }
+    const child: VNode = { type: 'div', props: {}, children: ['Hello'], key: null }
     const vnode = TransitionItem({ show, children: child })
     expect(vnode).not.toBeNull()
-    expect(typeof vnode?.type).toBe("function")
+    expect(typeof vnode?.type).toBe('function')
   })
 
-  it("clones child VNode with merged ref", () => {
+  it('clones child VNode with merged ref', () => {
     const show = () => true
-    const child: VNode = { type: "div", props: {}, children: ["Hello"], key: null }
+    const child: VNode = { type: 'div', props: {}, children: ['Hello'], key: null }
     const vnode = TransitionItem({ show, children: child })
 
     // The Show component's children (or fallback) should have a ref prop
@@ -132,11 +132,11 @@ describe("TransitionItem", () => {
     if (showChildren) {
       const childProps = showChildren.props as Record<string, unknown>
       expect(childProps?.ref).toBeDefined()
-      expect(typeof childProps?.ref).toBe("function")
+      expect(typeof childProps?.ref).toBe('function')
     }
   })
 
-  it("fires onEnter callback when entering", () => {
+  it('fires onEnter callback when entering', () => {
     const show = signal(false)
     const onEnter = vi.fn()
 
@@ -146,7 +146,7 @@ describe("TransitionItem", () => {
     expect(onEnter).toHaveBeenCalledTimes(1)
   })
 
-  it("fires onLeave callback when leaving", () => {
+  it('fires onLeave callback when leaving', () => {
     const show = signal(true)
     const onLeave = vi.fn()
 
@@ -156,29 +156,29 @@ describe("TransitionItem", () => {
     expect(onLeave).toHaveBeenCalledTimes(1)
   })
 
-  it("applies enter classes when entering", () => {
+  it('applies enter classes when entering', () => {
     const show = signal(false)
     const { el } = setupTransitionItem({
       show: () => show(),
-      enter: "ti-enter",
-      enterFrom: "ti-enter-from",
-      enterTo: "ti-enter-to",
+      enter: 'ti-enter',
+      enterFrom: 'ti-enter-from',
+      enterTo: 'ti-enter-to',
     })
 
     show.set(true)
 
-    expect(el.classList.contains("ti-enter")).toBe(true)
-    expect(el.classList.contains("ti-enter-from")).toBe(true)
-    expect(el.classList.contains("ti-enter-to")).toBe(false)
+    expect(el.classList.contains('ti-enter')).toBe(true)
+    expect(el.classList.contains('ti-enter-from')).toBe(true)
+    expect(el.classList.contains('ti-enter-to')).toBe(false)
   })
 
-  it("swaps enterFrom to enterTo after double rAF", () => {
+  it('swaps enterFrom to enterTo after double rAF', () => {
     const show = signal(false)
     const { el } = setupTransitionItem({
       show: () => show(),
-      enter: "ti-enter",
-      enterFrom: "ti-enter-from",
-      enterTo: "ti-enter-to",
+      enter: 'ti-enter',
+      enterFrom: 'ti-enter-from',
+      enterTo: 'ti-enter-to',
     })
 
     show.set(true)
@@ -186,73 +186,73 @@ describe("TransitionItem", () => {
     flushRaf()
     flushRaf()
 
-    expect(el.classList.contains("ti-enter")).toBe(true)
-    expect(el.classList.contains("ti-enter-from")).toBe(false)
-    expect(el.classList.contains("ti-enter-to")).toBe(true)
+    expect(el.classList.contains('ti-enter')).toBe(true)
+    expect(el.classList.contains('ti-enter-from')).toBe(false)
+    expect(el.classList.contains('ti-enter-to')).toBe(true)
   })
 
-  it("applies leave classes when leaving", () => {
+  it('applies leave classes when leaving', () => {
     const show = signal(true)
     const { el } = setupTransitionItem({
       show: () => show(),
-      leave: "ti-leave",
-      leaveFrom: "ti-leave-from",
-      leaveTo: "ti-leave-to",
+      leave: 'ti-leave',
+      leaveFrom: 'ti-leave-from',
+      leaveTo: 'ti-leave-to',
     })
 
     show.set(false)
 
-    expect(el.classList.contains("ti-leave")).toBe(true)
-    expect(el.classList.contains("ti-leave-from")).toBe(true)
+    expect(el.classList.contains('ti-leave')).toBe(true)
+    expect(el.classList.contains('ti-leave-from')).toBe(true)
 
     flushRaf()
     flushRaf()
 
-    expect(el.classList.contains("ti-leave-from")).toBe(false)
-    expect(el.classList.contains("ti-leave-to")).toBe(true)
+    expect(el.classList.contains('ti-leave-from')).toBe(false)
+    expect(el.classList.contains('ti-leave-to')).toBe(true)
   })
 
-  it("applies enter style transitions", () => {
+  it('applies enter style transitions', () => {
     const show = signal(false)
     const { el } = setupTransitionItem({
       show: () => show(),
       enterStyle: { opacity: 0 },
       enterToStyle: { opacity: 1 },
-      enterTransition: "opacity 300ms ease",
+      enterTransition: 'opacity 300ms ease',
     })
 
     show.set(true)
 
-    expect(el.style.opacity).toBe("0")
-    expect(el.style.transition).toBe("opacity 300ms ease")
+    expect(el.style.opacity).toBe('0')
+    expect(el.style.transition).toBe('opacity 300ms ease')
 
     flushRaf()
     flushRaf()
 
-    expect(el.style.opacity).toBe("1")
+    expect(el.style.opacity).toBe('1')
   })
 
-  it("applies leave style transitions", () => {
+  it('applies leave style transitions', () => {
     const show = signal(true)
     const { el } = setupTransitionItem({
       show: () => show(),
       leaveStyle: { opacity: 1 },
       leaveToStyle: { opacity: 0 },
-      leaveTransition: "opacity 200ms ease-in",
+      leaveTransition: 'opacity 200ms ease-in',
     })
 
     show.set(false)
 
-    expect(el.style.opacity).toBe("1")
-    expect(el.style.transition).toBe("opacity 200ms ease-in")
+    expect(el.style.opacity).toBe('1')
+    expect(el.style.transition).toBe('opacity 200ms ease-in')
 
     flushRaf()
     flushRaf()
 
-    expect(el.style.opacity).toBe("0")
+    expect(el.style.opacity).toBe('0')
   })
 
-  it("fires onAfterEnter after transitionend", () => {
+  it('fires onAfterEnter after transitionend', () => {
     const show = signal(false)
     const onAfterEnter = vi.fn()
 
@@ -268,7 +268,7 @@ describe("TransitionItem", () => {
     expect(onAfterEnter).toHaveBeenCalledTimes(1)
   })
 
-  it("fires onAfterLeave after transitionend", () => {
+  it('fires onAfterLeave after transitionend', () => {
     const show = signal(true)
     const onAfterLeave = vi.fn()
 
@@ -284,13 +284,13 @@ describe("TransitionItem", () => {
     expect(onAfterLeave).toHaveBeenCalledTimes(1)
   })
 
-  it("cleans up enter classes after transitionend", () => {
+  it('cleans up enter classes after transitionend', () => {
     const show = signal(false)
     const { el } = setupTransitionItem({
       show: () => show(),
-      enter: "ti-enter",
-      enterFrom: "ti-enter-from",
-      enterTo: "ti-enter-to",
+      enter: 'ti-enter',
+      enterFrom: 'ti-enter-from',
+      enterTo: 'ti-enter-to',
     })
 
     show.set(true)
@@ -299,32 +299,32 @@ describe("TransitionItem", () => {
     fireTransitionEnd(el)
 
     // enter class should be removed on entered stage
-    expect(el.classList.contains("ti-enter")).toBe(false)
+    expect(el.classList.contains('ti-enter')).toBe(false)
   })
 
-  it("cleans up transition style on entered stage", () => {
+  it('cleans up transition style on entered stage', () => {
     const show = signal(false)
     const { el } = setupTransitionItem({
       show: () => show(),
-      enter: "ti-enter",
-      enterTransition: "opacity 300ms ease",
+      enter: 'ti-enter',
+      enterTransition: 'opacity 300ms ease',
       enterStyle: { opacity: 0 },
       enterToStyle: { opacity: 1 },
     })
 
     show.set(true)
-    expect(el.style.transition).toBe("opacity 300ms ease")
-    expect(el.classList.contains("ti-enter")).toBe(true)
+    expect(el.style.transition).toBe('opacity 300ms ease')
+    expect(el.classList.contains('ti-enter')).toBe(true)
 
     flushRaf()
     flushRaf()
     fireTransitionEnd(el)
 
-    expect(el.style.transition).toBe("")
-    expect(el.classList.contains("ti-enter")).toBe(false)
+    expect(el.style.transition).toBe('')
+    expect(el.classList.contains('ti-enter')).toBe(false)
   })
 
-  it("appear=true fires onEnter on initial mount", () => {
+  it('appear=true fires onEnter on initial mount', () => {
     const show = signal(true)
     const onEnter = vi.fn()
 
@@ -333,7 +333,7 @@ describe("TransitionItem", () => {
     expect(onEnter).toHaveBeenCalledTimes(1)
   })
 
-  it("appear=false does not fire onEnter on initial mount when show is true", () => {
+  it('appear=false does not fire onEnter on initial mount when show is true', () => {
     const show = signal(true)
     const onEnter = vi.fn()
 
@@ -342,7 +342,7 @@ describe("TransitionItem", () => {
     expect(onEnter).not.toHaveBeenCalled()
   })
 
-  it("timeout fallback completes transition when transitionend never fires", () => {
+  it('timeout fallback completes transition when transitionend never fires', () => {
     const show = signal(false)
     const onAfterEnter = vi.fn()
 
@@ -356,79 +356,79 @@ describe("TransitionItem", () => {
     expect(onAfterEnter).toHaveBeenCalledTimes(1)
   })
 
-  it("unmount=false keeps element with display:none when hidden", () => {
+  it('unmount=false keeps element with display:none when hidden', () => {
     const show = () => false
-    const child: VNode = { type: "div", props: {}, children: ["Hello"], key: null }
+    const child: VNode = { type: 'div', props: {}, children: ['Hello'], key: null }
     const vnode = TransitionItem({ show, unmount: false, children: child })
 
     expect(vnode).not.toBeNull()
     // With unmount=false, the fallback should contain a cloned VNode with display:none
     const showProps = vnode?.props as Record<string, unknown>
-    if (showProps?.fallback && typeof showProps.fallback === "object") {
+    if (showProps?.fallback && typeof showProps.fallback === 'object') {
       const fallbackNode = showProps.fallback as VNode
       const fallbackProps = fallbackNode.props as Record<string, unknown>
       const style = fallbackProps?.style as Record<string, unknown> | undefined
-      expect(style?.display).toBe("none")
+      expect(style?.display).toBe('none')
     }
   })
 
-  it("unmount=false fallback has a merged ref", () => {
+  it('unmount=false fallback has a merged ref', () => {
     const show = () => false
-    const child: VNode = { type: "div", props: {}, children: ["Hello"], key: null }
+    const child: VNode = { type: 'div', props: {}, children: ['Hello'], key: null }
     const vnode = TransitionItem({ show, unmount: false, children: child })
 
     const showProps = vnode?.props as Record<string, unknown>
-    if (showProps?.fallback && typeof showProps.fallback === "object") {
+    if (showProps?.fallback && typeof showProps.fallback === 'object') {
       const fallbackNode = showProps.fallback as VNode
       const fallbackProps = fallbackNode.props as Record<string, unknown>
       expect(fallbackProps?.ref).toBeDefined()
-      expect(typeof fallbackProps?.ref).toBe("function")
+      expect(typeof fallbackProps?.ref).toBe('function')
     }
   })
 
-  it("unmount=false merges existing child style with display:none", () => {
+  it('unmount=false merges existing child style with display:none', () => {
     const show = () => false
     const child: VNode = {
-      type: "div",
-      props: { style: { color: "red", opacity: 1 } },
-      children: ["Hello"],
+      type: 'div',
+      props: { style: { color: 'red', opacity: 1 } },
+      children: ['Hello'],
       key: null,
     }
     const vnode = TransitionItem({ show, unmount: false, children: child })
 
     const showProps = vnode?.props as Record<string, unknown>
-    if (showProps?.fallback && typeof showProps.fallback === "object") {
+    if (showProps?.fallback && typeof showProps.fallback === 'object') {
       const fallbackNode = showProps.fallback as VNode
       const fallbackProps = fallbackNode.props as Record<string, unknown>
       const style = fallbackProps?.style as Record<string, unknown> | undefined
-      expect(style?.color).toBe("red")
+      expect(style?.color).toBe('red')
       expect(style?.opacity).toBe(1)
-      expect(style?.display).toBe("none")
+      expect(style?.display).toBe('none')
     }
   })
 
-  it("appear=true applies enter classes on initial mount when show is true", () => {
+  it('appear=true applies enter classes on initial mount when show is true', () => {
     const show = signal(true)
     const { el } = setupTransitionItem({
       show: () => show(),
       appear: true,
-      enter: "ti-enter",
-      enterFrom: "ti-enter-from",
-      enterTo: "ti-enter-to",
+      enter: 'ti-enter',
+      enterFrom: 'ti-enter-from',
+      enterTo: 'ti-enter-to',
     })
 
     // After appear, entering classes should be applied
-    expect(el.classList.contains("ti-enter")).toBe(true)
-    expect(el.classList.contains("ti-enter-from")).toBe(true)
+    expect(el.classList.contains('ti-enter')).toBe(true)
+    expect(el.classList.contains('ti-enter-from')).toBe(true)
 
     flushRaf()
     flushRaf()
 
-    expect(el.classList.contains("ti-enter-from")).toBe(false)
-    expect(el.classList.contains("ti-enter-to")).toBe(true)
+    expect(el.classList.contains('ti-enter-from')).toBe(false)
+    expect(el.classList.contains('ti-enter-to')).toBe(true)
   })
 
-  it("appear=true completes full enter lifecycle", () => {
+  it('appear=true completes full enter lifecycle', () => {
     const show = signal(true)
     const onEnter = vi.fn()
     const onAfterEnter = vi.fn()
@@ -438,7 +438,7 @@ describe("TransitionItem", () => {
       appear: true,
       onEnter,
       onAfterEnter,
-      enter: "ti-enter",
+      enter: 'ti-enter',
     })
 
     expect(onEnter).toHaveBeenCalledTimes(1)
@@ -449,35 +449,35 @@ describe("TransitionItem", () => {
 
     expect(onAfterEnter).toHaveBeenCalledTimes(1)
     // After entered stage, enter class should be cleaned up
-    expect(el.classList.contains("ti-enter")).toBe(false)
-    expect(el.style.transition).toBe("")
+    expect(el.classList.contains('ti-enter')).toBe(false)
+    expect(el.style.transition).toBe('')
   })
 })
 
-describe("TransitionItem — reduced motion", () => {
+describe('TransitionItem — reduced motion', () => {
   beforeEach(() => {
     vi.useFakeTimers()
     rafCallbacks = []
     _reducedMotion = true
 
     vi.stubGlobal(
-      "requestAnimationFrame",
+      'requestAnimationFrame',
       vi.fn((cb: () => void) => {
         rafCallbacks.push(cb)
         return rafCallbacks.length
       }),
     )
-    vi.stubGlobal("cancelAnimationFrame", vi.fn())
+    vi.stubGlobal('cancelAnimationFrame', vi.fn())
   })
 
   afterEach(() => {
     vi.useRealTimers()
-    vi.stubGlobal("requestAnimationFrame", originalRaf)
-    vi.stubGlobal("cancelAnimationFrame", originalCaf)
+    vi.stubGlobal('requestAnimationFrame', originalRaf)
+    vi.stubGlobal('cancelAnimationFrame', originalCaf)
     _reducedMotion = false
   })
 
-  it("reduced motion: entering fires onEnter and onAfterEnter immediately", () => {
+  it('reduced motion: entering fires onEnter and onAfterEnter immediately', () => {
     const show = signal(false)
     const onEnter = vi.fn()
     const onAfterEnter = vi.fn()
@@ -490,7 +490,7 @@ describe("TransitionItem — reduced motion", () => {
     expect(onAfterEnter).toHaveBeenCalledTimes(1)
   })
 
-  it("reduced motion: leaving fires onLeave and onAfterLeave immediately", () => {
+  it('reduced motion: leaving fires onLeave and onAfterLeave immediately', () => {
     const show = signal(true)
     const onLeave = vi.fn()
     const onAfterLeave = vi.fn()
@@ -503,20 +503,20 @@ describe("TransitionItem — reduced motion", () => {
     expect(onAfterLeave).toHaveBeenCalledTimes(1)
   })
 
-  it("reduced motion: does not apply CSS classes or rAF", () => {
+  it('reduced motion: does not apply CSS classes or rAF', () => {
     const show = signal(false)
     const { el } = setupTransitionItem({
       show: () => show(),
-      enter: "ti-enter",
-      enterFrom: "ti-enter-from",
-      enterTo: "ti-enter-to",
+      enter: 'ti-enter',
+      enterFrom: 'ti-enter-from',
+      enterTo: 'ti-enter-to',
     })
 
     show.set(true)
 
     // No classes should be applied — reduced motion skips CSS transitions
-    expect(el.classList.contains("ti-enter")).toBe(false)
-    expect(el.classList.contains("ti-enter-from")).toBe(false)
+    expect(el.classList.contains('ti-enter')).toBe(false)
+    expect(el.classList.contains('ti-enter-from')).toBe(false)
     expect(rafCallbacks.length).toBe(0)
   })
 })