test(collapse-transition): add useCollapseTransition unit coverage

Cover the composable's raf/doubleRaf branches, element-removal
paths and init-trigger handling against the current source.

Author: aioya

packages/varlet-ui/src/collapse-transition/__tests__/index.spec.js

@@ -1,9 +1,11 @@
+import * as shared from '@varlet/shared'
 import { mount } from '@vue/test-utils'
-import { describe, expect, test } from 'vite-plus/test'
-import { createApp, ref } from 'vue'
+import { describe, expect, test, vi } from 'vite-plus/test'
+import { createApp, nextTick, ref } from 'vue'
 import CollapseTransition from '..'
 import { delay } from '../../utils/test'
 import VarCollapseTransition from '../CollapseTransition'
+import { useCollapseTransition } from '../useCollapseTransition'
 
 describe('test collapseTransition render', () => {
   test('collapseTransition use', () => {
@@ -56,3 +58,188 @@ describe('test collapseTransition props', () => {
     wrapper.unmount()
   })
 })
+
+describe('useCollapseTransition behaviors', () => {
+  test('useCollapseTransition returns early when contentEl is missing', async () => {
+    const contentEl = ref(null)
+    const showContent = ref(false)
+    const expand = ref(true)
+
+    useCollapseTransition({ contentEl, showContent, expand })
+
+    await nextTick()
+    await Promise.resolve()
+
+    expect(showContent.value).toBe(false)
+  })
+
+  test('useCollapseTransition skips init trigger after transition start', async () => {
+    const rafSpy = vi.spyOn(shared, 'raf').mockResolvedValue()
+    const doubleRafSpy = vi.spyOn(shared, 'doubleRaf').mockResolvedValue()
+
+    const element = document.createElement('div')
+    Object.defineProperty(element, 'offsetHeight', { value: 24, configurable: true })
+
+    const contentEl = ref(element)
+    const showContent = ref(false)
+    const expand = ref(false)
+
+    const { handleTransitionStart } = useCollapseTransition({ contentEl, showContent, expand })
+
+    handleTransitionStart()
+    expand.value = true
+    await nextTick()
+    await Promise.resolve()
+
+    expect(showContent.value).toBe(true)
+
+    rafSpy.mockRestore()
+    doubleRafSpy.mockRestore()
+  })
+
+  test('useCollapseTransition handles transition end when still expanding', () => {
+    const element = document.createElement('div')
+    const contentEl = ref(element)
+    const showContent = ref(true)
+    const expand = ref(true)
+
+    const { handleTransitionEnd } = useCollapseTransition({ contentEl, showContent, expand })
+
+    handleTransitionEnd()
+    expect(showContent.value).toBe(true)
+  })
+
+  test('useCollapseTransition triggers init transition end', async () => {
+    const rafSpy = vi.spyOn(shared, 'raf').mockResolvedValue()
+    const doubleRafSpy = vi.spyOn(shared, 'doubleRaf').mockResolvedValue()
+    const element = document.createElement('div')
+    Object.defineProperty(element, 'offsetHeight', { value: 24, configurable: true })
+
+    const contentEl = ref(element)
+    const showContent = ref(false)
+    const expand = ref(true)
+
+    useCollapseTransition({ contentEl, showContent, expand })
+
+    await nextTick()
+    for (let i = 0; i < 6; i += 1) {
+      if (contentEl.value?.style.height === '') {
+        break
+      }
+      await Promise.resolve()
+    }
+
+    expect(showContent.value).toBe(true)
+    expect(contentEl.value?.style.height).toBe('')
+
+    rafSpy.mockRestore()
+    doubleRafSpy.mockRestore()
+  })
+
+  test('useCollapseTransition close returns early when contentEl is missing', async () => {
+    const contentEl = ref(null)
+    const showContent = ref(false)
+    const expand = ref(false)
+
+    useCollapseTransition({ contentEl, showContent, expand })
+
+    await nextTick()
+    await Promise.resolve()
+
+    expect(showContent.value).toBe(false)
+  })
+
+  test('useCollapseTransition ignores transition events from other elements or properties', () => {
+    const element = document.createElement('div')
+    const contentEl = ref(element)
+    const showContent = ref(true)
+    const expand = ref(false)
+
+    const { handleTransitionEnd, handleTransitionStart } = useCollapseTransition({ contentEl, showContent, expand })
+
+    // Event from a different target is ignored (useCollapseTransition.ts lines 85, 101)
+    const otherElement = document.createElement('div')
+    const otherTargetEvent = new Event('transitionend')
+    Object.defineProperty(otherTargetEvent, 'target', { value: otherElement })
+    Object.assign(otherTargetEvent, { propertyName: 'height' })
+    handleTransitionEnd(otherTargetEvent)
+
+    // Event for a non-height property is ignored (useCollapseTransition.ts lines 85, 101)
+    const otherPropEvent = new Event('transitionend')
+    Object.defineProperty(otherPropEvent, 'target', { value: element })
+    Object.assign(otherPropEvent, { propertyName: 'width' })
+    handleTransitionEnd(otherPropEvent)
+
+    const otherStartEvent = new Event('transitionstart')
+    Object.defineProperty(otherStartEvent, 'target', { value: otherElement })
+    Object.assign(otherStartEvent, { propertyName: 'height' })
+    handleTransitionStart(otherStartEvent)
+
+    // Since all events were ignored, the showContent collapse logic never ran
+    expect(showContent.value).toBe(true)
+  })
+
+  test('useCollapseTransition ignores transition end from a stale version', async () => {
+    const element = document.createElement('div')
+    Object.defineProperty(element, 'offsetHeight', { value: 24, configurable: true })
+
+    const contentEl = ref(element)
+    const showContent = ref(true)
+    const expand = ref(false)
+
+    const { handleTransitionEnd, handleTransitionStart } = useCollapseTransition({ contentEl, showContent, expand })
+
+    // startedTransitionVersion is captured here from the current transitionVersion
+    handleTransitionStart()
+
+    // Bumping expand increments transitionVersion, so the started version is now stale
+    expand.value = true
+    await nextTick()
+
+    // Event-driven end with a stale startedTransitionVersion returns early
+    // (useCollapseTransition.ts lines 89-90); showContent is not flipped to false
+    const endEvent = new Event('transitionend')
+    Object.defineProperty(endEvent, 'target', { value: element })
+    Object.assign(endEvent, { propertyName: 'height' })
+    handleTransitionEnd(endEvent)
+
+    expect(showContent.value).toBe(true)
+  })
+
+  test('useCollapseTransition skips handleTransitionEnd when isInitToTrigger is false', async () => {
+    const rafSpy = vi.spyOn(shared, 'raf').mockResolvedValue()
+
+    let resolveDoubleRaf
+    const doubleRafSpy = vi.spyOn(shared, 'doubleRaf').mockImplementation(
+      () =>
+        new Promise((resolve) => {
+          resolveDoubleRaf = resolve
+        }),
+    )
+
+    const element = document.createElement('div')
+    Object.defineProperty(element, 'offsetHeight', { value: 24, configurable: true })
+
+    const contentEl = ref(element)
+    const showContent = ref(false)
+    const expand = ref(true)
+
+    const { handleTransitionStart } = useCollapseTransition({ contentEl, showContent, expand })
+
+    await nextTick()
+    await Promise.resolve()
+    await Promise.resolve()
+    await Promise.resolve()
+
+    handleTransitionStart()
+    resolveDoubleRaf?.()
+    await Promise.resolve()
+    await Promise.resolve()
+
+    expect(showContent.value).toBe(true)
+    expect(contentEl.value?.style.height).toBe('24px')
+
+    rafSpy.mockRestore()
+    doubleRafSpy.mockRestore()
+  })
+})