test: 🔧 add test

Author: NelsonYong

packages/hooks/src/useDebounceFn/__tests__/index.spec.ts

@@ -35,4 +35,54 @@ describe('useDebounceFn', () => {
     await sleep(300)
     expect(count).toBe(7)
   })
+
+  it('should support leading option', async () => {
+    let value = 0
+    const fn = (v: number) => { value += v }
+    const { run } = useDebounceFn(fn, { wait: 100, leading: true, trailing: false })
+    run(1)
+    expect(value).toBe(1)
+    run(1)
+    run(1)
+    expect(value).toBe(1)
+    await sleep(150)
+    run(2)
+    expect(value).toBe(3)
+  })
+
+  it('should support trailing option', async () => {
+    let value = 0
+    const fn = (v: number) => { value += v }
+    const { run } = useDebounceFn(fn, { wait: 100, leading: false, trailing: true })
+    run(1)
+    run(2)
+    run(3)
+    expect(value).toBe(0)
+    await sleep(150)
+    expect(value).toBe(3)
+  })
+
+  it('should support maxWait option', async () => {
+    let value = 0
+    const fn = (v: number) => { value += v }
+    const { run } = useDebounceFn(fn, { wait: 100, maxWait: 200 })
+    run(1)
+    setTimeout(() => run(2), 50)
+    setTimeout(() => run(3), 120)
+    await sleep(250)
+    expect(value).toBe(3)
+  })
+
+  it('should update options dynamically', async () => {
+    let value = 0
+    const fn = (v: number) => { value += v }
+    const { run, updateOptions } = useDebounceFn(fn, { wait: 200 })
+    run(1)
+    await sleep(100)
+    updateOptions({ wait: 50 })
+    await sleep(0)
+    run(2)
+    await sleep(60)
+    expect(value).toBe(2)
+  })
 })

packages/hooks/src/useDrop/index.ts

@@ -93,6 +93,7 @@ const useDrop = (target: BasicTarget, options: UseDropOptions = {}) => {
           let data = dom
           try {
             data = JSON.parse(dom)
+            // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars
           } catch (e) {
             data = dom
           }

packages/hooks/src/useElementBounding/__tests__/index.spec.ts

@@ -1,13 +1,115 @@
 import renderHook from 'test-utils/renderHook'
 import useElementBounding from '..'
-import { ref } from 'vue'
+import { ref, nextTick } from 'vue'
 import { UseElementBoundingReturnType } from '../index'
 
+// mock getBoundingClientRect for predictable values
+function mockRect(left: number, top: number, width: number, height: number) {
+  return {
+    width,
+    height,
+    top,
+    left,
+    bottom: top + height,
+    right: left + width,
+    x: left,
+    y: top,
+    toJSON: () => ({ left, top, width, height, bottom: top + height, right: left + width, x: left, y: top }),
+  }
+}
+
 describe('useElementBounding', () => {
-  it('callback element info', () => {
+  beforeEach(() => {
+    window.HTMLElement.prototype.getBoundingClientRect = function () {
+      return mockRect(20, 10, 100, 50)
+    }
+  })
+
+  it('should return all zeros when element is not mounted', () => {
     const el = ref<HTMLElement>()
-    const [callbackOptions] = renderHook(() => useElementBounding(el))
+    const [bounding] = renderHook(() => useElementBounding(el))
+    expect(bounding.width.value).toBe(0)
+    expect(bounding.height.value).toBe(0)
+    expect(bounding.top.value).toBe(0)
+    expect(bounding.left.value).toBe(0)
+    expect(bounding.bottom.value).toBe(0)
+    expect(bounding.right.value).toBe(0)
+  })
 
+  it('should return correct bounding values after element is mounted', async () => {
+    const el = ref<HTMLElement>()
+    const [bounding] = renderHook(() => useElementBounding(el))
+    const div = document.createElement('div')
+    el.value = div
+    await nextTick()
+    expect(bounding.width.value).toBe(100)
+    expect(bounding.height.value).toBe(50)
+    expect(bounding.top.value).toBe(10)
+    expect(bounding.left.value).toBe(20)
+    expect(bounding.bottom.value).toBe(60)
+    expect(bounding.right.value).toBe(120)
+  })
+
+  it('should update values when element size or position changes', async () => {
+    let rect = mockRect(20, 10, 100, 50)
+    window.HTMLElement.prototype.getBoundingClientRect = function () {
+      return rect
+    }
+    const el = ref<HTMLElement>()
+    const [bounding] = renderHook(() => useElementBounding(el))
+    const div = document.createElement('div')
+    el.value = div
+    await nextTick()
+    expect(bounding.width.value).toBe(100)
+    rect = mockRect(15, 5, 200, 80)
+    window.dispatchEvent(new Event('resize'))
+    await nextTick()
+    expect(bounding.width.value).toBe(200)
+    expect(bounding.height.value).toBe(80)
+    expect(bounding.top.value).toBe(5)
+    expect(bounding.left.value).toBe(15)
+    expect(bounding.bottom.value).toBe(85)
+    expect(bounding.right.value).toBe(215)
+  })
+
+  it('should not reset values to zero if reset option is false', async () => {
+    // 保证 mockRect 是 100
+    window.HTMLElement.prototype.getBoundingClientRect = function () {
+      return mockRect(20, 10, 100, 50)
+    }
+    const el = ref<HTMLElement>()
+    const [bounding] = renderHook(() => useElementBounding(el, { reset: false }))
+    const div = document.createElement('div')
+    el.value = div
+    await nextTick()
+    expect(bounding.width.value).toBe(100)
+    el.value = undefined
+    await nextTick()
+    expect(bounding.width.value).toBe(100)
+  })
+
+  it('should not update on window resize/scroll if corresponding option is false', async () => {
+    let rect = mockRect(20, 10, 100, 50)
+    window.HTMLElement.prototype.getBoundingClientRect = function () {
+      return rect
+    }
+    const el = ref<HTMLElement>()
+    const [bounding] = renderHook(() => useElementBounding(el, { windowResize: false, windowScroll: false }))
+    const div = document.createElement('div')
+    el.value = div
+    await nextTick()
+    expect(bounding.width.value).toBe(100)
+    rect = mockRect(40, 30, 300, 150)
+    window.dispatchEvent(new Event('resize'))
+    window.dispatchEvent(new Event('scroll'))
+    await nextTick()
+    // Should not update
+    expect(bounding.width.value).toBe(100)
+  })
+
+  it('should have correct return type', () => {
+    const el = ref<HTMLElement>()
+    const [callbackOptions] = renderHook(() => useElementBounding(el))
     assertType<UseElementBoundingReturnType>(callbackOptions)
   })
 })

packages/hooks/src/useElementBounding/index.ts

@@ -103,9 +103,8 @@ export default function useElementBounding(
 
   useResizeObserver(target, update)
   watch(() => getTargetElement(target), update)
-
   onMounted(() => {
-    immediate && update()
+    if (immediate) update()
   })
 
   return {

packages/hooks/src/useEventListener/__tests__/index.spec.ts

@@ -17,7 +17,7 @@ describe('useEventListener', () => {
     const onClick = () => {
       state++
     }
-    renderHook(() => useEventListener('click', onClick, { target: () => container }))
+    useEventListener('click', onClick, { target: () => container })
 
     document.body.click()
     expect(state).toEqual(0)
@@ -26,4 +26,82 @@ describe('useEventListener', () => {
     document.body.click()
     expect(state).toEqual(1)
   })
+
+  it('should listen to window resize event', async () => {
+    let called = false
+    const onResize = () => {
+      called = true
+    }
+    useEventListener('resize', onResize, { target: window })
+    window.dispatchEvent(new Event('resize'))
+    expect(called).toBe(true)
+  })
+
+  it('should listen to document keydown event', async () => {
+    let key = ''
+    const onKeyDown = (e: KeyboardEvent) => {
+      key = e.key
+    }
+    useEventListener('keydown', onKeyDown, { target: document })
+    const event = new KeyboardEvent('keydown', { key: 'a' })
+    document.dispatchEvent(event)
+    expect(key).toBe('a')
+  })
+
+  it('should support once option', async () => {
+    let count = 0
+    let triggered = false
+    const onClick = () => {
+      if (!triggered) {
+        count++
+        triggered = true
+      }
+    }
+    useEventListener('click', onClick, { target: () => container, once: true })
+    container.click()
+    container.click()
+    expect(count).toBe(1)
+  })
+
+  it('should support passive option', async () => {
+    let called = false
+    const onWheel = () => {
+      called = true
+    }
+    useEventListener('wheel', onWheel, { target: () => container, passive: true })
+    const event = new Event('wheel')
+    container.dispatchEvent(event)
+    expect(called).toBe(true)
+  })
+
+  it('should support capture option', async () => {
+    const phase: string[] = []
+    const onCapture = () => phase.push('capture')
+    const onBubble = () => phase.push('bubble')
+    useEventListener('click', onCapture, { target: () => container, capture: true })
+    container.addEventListener('click', onBubble)
+    container.click()
+    expect(phase[0]).toBe('capture')
+    expect(phase[1]).toBe('bubble')
+    container.removeEventListener('click', onBubble)
+  })
+
+  it('should remove event listener after unmount', async () => {
+    let count = 0
+    const onClick = () => {
+      count++
+    }
+    const [, app] = renderHook(() => useEventListener('click', onClick, { target: () => container }))
+    container.click()
+    expect(count).toBe(1)
+    app.unmount()
+    container.click()
+    expect(count).toBe(1)
+  })
+
+  it('should not throw if target is null', async () => {
+    expect(() => {
+      renderHook(() => useEventListener('click', () => { }, { target: null as any }))
+    }).not.toThrow()
+  })
 })

packages/hooks/src/useFetchs/__tests__/index.spec.ts

@@ -8,14 +8,14 @@ async function getUsername(params: { desc: string }): Promise<string> {
       () => {
         resolve(`vue-hooks-plus ${params.desc}`)
       },
-      params.desc === '大牛' ? 4000 : 2000,
+      params.desc === '3' ? 4000 : 2000,
     )
   })
 }
 
 describe('useFetchs', () => {
   it('should work', async () => {
-    const arr = ['牛', '小牛', '中牛', '大牛']
+    const arr = ['0', '1', '2', '3']
     const [{ fetchRun, fetchs }] = renderHook(() =>
       useFetchs(
         getUsername,
@@ -40,13 +40,13 @@ describe('useFetchs', () => {
     expect(fetchs.value[arr[3]].loading).toBeTruthy()
 
     await sleep(2000)
-    expect(fetchs.value[arr[0]].data).toBe('vue-hooks-plus 牛')
-    expect(fetchs.value[arr[1]].data).toBe('vue-hooks-plus 小牛')
-    expect(fetchs.value[arr[2]].data).toBe('vue-hooks-plus 中牛')
+    expect(fetchs.value[arr[0]].data).toBe('vue-hooks-plus 0')
+    expect(fetchs.value[arr[1]].data).toBe('vue-hooks-plus 1')
+    expect(fetchs.value[arr[2]].data).toBe('vue-hooks-plus 2')
     expect(fetchs.value[arr[3]].loading).toBeTruthy()
 
     await sleep(2000)
     await sleep(200)
-    expect(fetchs.value[arr[3]].data).toBe('vue-hooks-plus 大牛')
+    expect(fetchs.value[arr[3]].data).toBe('vue-hooks-plus 3')
   })
 })

packages/hooks/src/useFocusWithin/__tests__/index.spec.ts

@@ -0,0 +1,61 @@
+import renderHook from 'test-utils/renderHook'
+import useFocusWithin from '..'
+
+describe('useFocusWithin', () => {
+  let container: HTMLDivElement
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+  })
+
+  afterEach(() => {
+    document.body.removeChild(container)
+  })
+
+  it('should return false initially', () => {
+    const [state] = renderHook(() => useFocusWithin(container))
+    expect(state.value).toBe(false)
+  })
+
+  it('should call onFocus and onChange(true) when focusin event is triggered', () => {
+    const onFocus = vitest.fn()
+    const onChange = vitest.fn()
+    renderHook(() => useFocusWithin(container, { onFocus, onChange }))
+    const event = new FocusEvent('focusin', { bubbles: true })
+    container.dispatchEvent(event)
+    expect(onFocus).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenCalledWith(true)
+  })
+
+  it('should call onBlur and onChange(false) when focusout event is triggered and relatedTarget is outside', () => {
+    const onBlur = vitest.fn()
+    const onChange = vitest.fn()
+    renderHook(() => useFocusWithin(container, { onBlur, onChange }))
+    // First focusin to set state to true
+    container.dispatchEvent(new FocusEvent('focusin', { bubbles: true }))
+    // Then focusout with relatedTarget outside
+    const event = new FocusEvent('focusout', { bubbles: true, relatedTarget: document.body })
+    Object.defineProperty(event, 'currentTarget', { value: container })
+    container.dispatchEvent(event)
+    expect(onBlur).toHaveBeenCalledTimes(1)
+    expect(onChange).toHaveBeenCalledWith(false)
+  })
+
+  it('should not call onBlur if relatedTarget is inside container', () => {
+    const onBlur = vitest.fn()
+    const onChange = vitest.fn()
+    renderHook(() => useFocusWithin(container, { onBlur, onChange }))
+    // First focusin to set state to true
+    container.dispatchEvent(new FocusEvent('focusin', { bubbles: true }))
+    // Create a child element and set as relatedTarget
+    const child = document.createElement('div')
+    container.appendChild(child)
+    const event = new FocusEvent('focusout', { bubbles: true, relatedTarget: child })
+    Object.defineProperty(event, 'currentTarget', { value: container })
+    container.dispatchEvent(event)
+    expect(onBlur).not.toHaveBeenCalled()
+    // onChange(false) should not be called either
+    expect(onChange).not.toHaveBeenCalledWith(false)
+  })
+})