test: improve test coverage (#2233)

.gitignore

@@ -15,3 +15,4 @@ packages/public/badge-*
 packages/*/index.mjs
 playgrounds/*/pnpm-lock.yaml
 types
+coverage

package.json

@@ -27,6 +27,7 @@
     "test:2": "vue-demi-switch 2.7 vue2 && vitest run --silent",
     "test:3": "vue-demi-switch 3 && vitest run",
     "test:all": "nr test:3 && nr test:2 && vue-demi-switch 3",
+    "test:cov": "vitest run --coverage",
     "typecheck": "tsc --noEmit",
     "types:fix": "esno scripts/fix-types.ts",
     "update": "nr -C packages/metadata update && esno scripts/update.ts",
@@ -47,6 +48,7 @@
     "@types/prettier": "^2.7.0",
     "@types/semver": "^7.3.12",
     "@types/sharp": "^0.30.5",
+    "@vitest/coverage-c8": "^0.23.4",
     "@vitest/ui": "^0.23.2",
     "@vue/compiler-sfc": "^3.2.39",
     "@vue/test-utils": "^2.0.2",

packages/core/computedAsync/index.test.ts

@@ -1,6 +1,6 @@
 import { computed, nextTick, ref } from 'vue-demi'
 import { promiseTimeout } from '@vueuse/shared'
-import { computedAsync } from '.'
+import { asyncComputed, computedAsync } from '.'
 
 describe('computed', () => {
   it('is lazy', () => {
@@ -17,6 +17,11 @@ describe('computed', () => {
 })
 
 describe('computedAsync', () => {
+  it('export module', () => {
+    expect(computedAsync).toBeDefined()
+    expect(asyncComputed).toBeDefined()
+  })
+
   it('is not lazy by default', async () => {
     const func = vitest.fn(() => Promise.resolve('data'))
 
@@ -196,19 +201,20 @@ describe('computedAsync', () => {
 
   test('cancel is called', async () => {
     const onCancel = vitest.fn()
+    const evaluating = ref(false)
 
     const data = ref('initial')
     const uppercase = computedAsync((cancel) => {
-      cancel(() => onCancel())
+      cancel(onCancel)
 
       const uppercased = data.value.toUpperCase()
 
       return new Promise((resolve) => {
-        setTimeout(resolve.bind(null, uppercased), 0)
+        setTimeout(resolve.bind(null, uppercased), 5)
       })
-    })
+    }, '', evaluating)
 
-    expect(uppercase.value).toBeUndefined()
+    expect(uppercase.value).toBe('')
 
     await promiseTimeout(10)
 
@@ -239,7 +245,7 @@ describe('computedAsync', () => {
       const uppercased = data.value.toUpperCase()
 
       return new Promise((resolve) => {
-        setTimeout(resolve.bind(null, uppercased), 0)
+        setTimeout(resolve.bind(null, uppercased), 5)
       })
     }, '', { lazy: true })
 

packages/core/onLongPress/directive.test.ts

@@ -4,7 +4,7 @@ import type { VueWrapper } from '@vue/test-utils'
 import { mount } from '@vue/test-utils'
 import { promiseTimeout } from '@vueuse/shared'
 
-import { vOnLongPress } from './directive'
+import { VOnLongPress, vOnLongPress } from './directive'
 import type { OnLongPressOptions } from '.'
 
 const App = defineComponent({
@@ -30,6 +30,11 @@ describe('vOnLongPress', () => {
   let onLongPress = vi.fn()
   let wrapper: VueWrapper<any>
 
+  it('export module', () => {
+    expect(vOnLongPress).toBeDefined()
+    expect(VOnLongPress).toBeDefined()
+  })
+
   describe('given no options', () => {
     beforeEach(() => {
       onLongPress = vi.fn()

packages/core/onLongPress/index.test.ts

@@ -1,101 +1,120 @@
 import { promiseTimeout } from '@vueuse/shared'
 import type { Ref } from 'vue-demi'
 import { ref } from 'vue-demi'
+import { useEventListener } from '../useEventListener'
 import { onLongPress } from '.'
 
 describe('onLongPress', () => {
   let element: Ref<HTMLElement>
+  let parentElement: Ref<HTMLElement>
+  let childElement: Ref<HTMLElement>
   let pointerdownEvent: PointerEvent
+  let pointerUpEvent: PointerEvent
 
-  beforeEach(() => {
-    element = ref(document.createElement('div'))
+  async function triggerCallback(isRef: boolean) {
+    const onLongPressCallback = vi.fn()
+    onLongPress(isRef ? element : element.value, onLongPressCallback)
+    element.value.dispatchEvent(pointerdownEvent)
+    expect(onLongPressCallback).toHaveBeenCalledTimes(0)
+    await promiseTimeout(500)
+    expect(onLongPressCallback).toHaveBeenCalledTimes(1)
+  }
 
-    pointerdownEvent = new PointerEvent('pointerdown', { cancelable: true, bubbles: true })
-  })
+  async function triggerCallbackWithDelay(isRef: boolean) {
+    const onLongPressCallback = vi.fn()
+    onLongPress(isRef ? element : element.value, onLongPressCallback, { delay: 1000 })
+    // first pointer down
+    element.value.dispatchEvent(pointerdownEvent)
 
-  it('should be defined', () => {
-    expect(onLongPress).toBeDefined()
-  })
+    // wait for 500ms after pointer down
+    await promiseTimeout(500)
+    expect(onLongPressCallback).toHaveBeenCalledTimes(0)
 
-  describe('given argument is ref', () => {
-    describe('given no options', () => {
-      it('should trigger longpress after 500ms', async () => {
-        const onLongPressCallback = vi.fn()
-        onLongPress(element, onLongPressCallback)
-        element.value.dispatchEvent(pointerdownEvent)
-        expect(onLongPressCallback).toHaveBeenCalledTimes(0)
-        await promiseTimeout(500)
-        expect(onLongPressCallback).toHaveBeenCalledTimes(1)
-      })
-    })
+    // pointer up to cancel callback
+    element.value.dispatchEvent(pointerUpEvent)
 
-    describe('given options', () => {
-      it('should trigger longpress after options.delay ms', async () => {
-        const onLongPressCallback = vi.fn()
-        onLongPress(element, onLongPressCallback, { delay: 1000 })
-        element.value.dispatchEvent(pointerdownEvent)
-        await promiseTimeout(500)
-        expect(onLongPressCallback).toHaveBeenCalledTimes(0)
-        await promiseTimeout(500)
-        expect(onLongPressCallback).toHaveBeenCalledTimes(1)
-      })
+    // wait for 500ms after pointer up
+    await promiseTimeout(500)
+    expect(onLongPressCallback).toHaveBeenCalledTimes(0)
 
-      it('should work with once and prevent modefiers', async () => {
-        const onLongPressCallback = vi.fn()
-        onLongPress(element, onLongPressCallback, { modifiers: { once: true, prevent: true } })
+    // another pointer down
+    element.value.dispatchEvent(pointerdownEvent)
 
-        element.value.dispatchEvent(pointerdownEvent)
+    // wait for 1000ms after pointer down
+    await promiseTimeout(1000)
+    expect(onLongPressCallback).toHaveBeenCalledTimes(1)
+  }
 
-        await promiseTimeout(500)
+  async function notTriggerCallbackOnChildLongPress(isRef: boolean) {
+    const onLongPressCallback = vi.fn()
+    onLongPress(isRef ? element : element.value, onLongPressCallback, { modifiers: { self: true } })
 
-        expect(onLongPressCallback).toHaveBeenCalledTimes(1)
-        expect(pointerdownEvent.defaultPrevented).toBe(true)
+    childElement.value.dispatchEvent(pointerdownEvent)
 
-        await promiseTimeout(500)
+    await promiseTimeout(500)
 
-        expect(onLongPressCallback).toHaveBeenCalledTimes(1)
-      })
-    })
-  })
+    expect(onLongPressCallback).toHaveBeenCalledTimes(0)
+  }
 
-  describe('given argument is no ref', () => {
-    describe('given no options', () => {
-      it('should trigger longpress after 500ms', async () => {
-        const onLongPressCallback = vi.fn()
-        onLongPress(element.value, onLongPressCallback)
-        element.value.dispatchEvent(pointerdownEvent)
-        expect(onLongPressCallback).toHaveBeenCalledTimes(0)
-        await promiseTimeout(500)
-        expect(onLongPressCallback).toHaveBeenCalledTimes(1)
-      })
-    })
+  async function workOnceAndPreventModifiers(isRef: boolean) {
+    const onLongPressCallback = vi.fn()
+    onLongPress(isRef ? element : element.value, onLongPressCallback, { modifiers: { once: true, prevent: true } })
 
-    describe('given options', () => {
-      it('should trigger longpress after options.delay ms', async () => {
-        const onLongPressCallback = vi.fn()
-        onLongPress(element.value, onLongPressCallback, { delay: 1000 })
-        element.value.dispatchEvent(pointerdownEvent)
-        await promiseTimeout(500)
-        expect(onLongPressCallback).toHaveBeenCalledTimes(0)
-        await promiseTimeout(500)
-        expect(onLongPressCallback).toHaveBeenCalledTimes(1)
-      })
+    element.value.dispatchEvent(pointerdownEvent)
+
+    await promiseTimeout(500)
+
+    expect(onLongPressCallback).toHaveBeenCalledTimes(1)
+    expect(pointerdownEvent.defaultPrevented).toBe(true)
 
-      it('should work with once and prevent modefiers', async () => {
-        const onLongPressCallback = vi.fn()
-        onLongPress(element.value, onLongPressCallback, { modifiers: { once: true, prevent: true } })
+    await promiseTimeout(500)
 
-        element.value.dispatchEvent(pointerdownEvent)
+    expect(onLongPressCallback).toHaveBeenCalledTimes(1)
+  }
 
-        await promiseTimeout(500)
+  async function stopPropagation(isRef: boolean) {
+    const onLongPressCallback = vi.fn()
+    const onParentLongPressCallback = vi.fn()
+    useEventListener(parentElement, 'pointerdown', onParentLongPressCallback)
+    onLongPress(isRef ? element : element.value, onLongPressCallback, { modifiers: { stop: true } })
 
-        expect(onLongPressCallback).toHaveBeenCalledTimes(1)
-        expect(pointerdownEvent.defaultPrevented).toBe(true)
+    element.value.dispatchEvent(pointerdownEvent)
 
-        await promiseTimeout(500)
+    await promiseTimeout(500)
 
-        expect(onLongPressCallback).toHaveBeenCalledTimes(1)
-      })
+    expect(onLongPressCallback).toHaveBeenCalledTimes(1)
+    expect(onParentLongPressCallback).toHaveBeenCalledTimes(0)
+  }
+
+  function suites(isRef: boolean) {
+    describe('given no options', () => {
+      it('should trigger longpress after 500ms', () => triggerCallback(isRef))
+    })
+
+    describe('given options', () => {
+      it('should trigger longpress after options.delay ms', () => triggerCallbackWithDelay(isRef))
+      it('should not tirgger longpress when child element on longpress', () => notTriggerCallbackOnChildLongPress(isRef))
+      it('should work with once and prevent modifiers', () => workOnceAndPreventModifiers(isRef))
+      it('should stop propagation', () => stopPropagation(isRef))
     })
+  }
+
+  beforeEach(() => {
+    element = ref(document.createElement('div'))
+    parentElement = ref(document.createElement('div'))
+    childElement = ref(document.createElement('div'))
+    parentElement.value.appendChild(element.value)
+    element.value.appendChild(childElement.value)
+
+    pointerdownEvent = new PointerEvent('pointerdown', { cancelable: true, bubbles: true })
+    pointerUpEvent = new PointerEvent('pointerup', { cancelable: true, bubbles: true })
+  })
+
+  it('should be defined', () => {
+    expect(onLongPress).toBeDefined()
   })
+
+  describe('given argument is ref', () => suites(true))
+
+  describe('given argument is no ref', () => suites(false))
 })

packages/core/useEventBus/index.test.ts

@@ -6,6 +6,9 @@ import { useEventBus } from '.'
 
 describe('useEventBus', () => {
   const emptyMap = new Map()
+  beforeEach(() => {
+    events.clear()
+  })
   it('on event and off listener', () => {
     const { on, off } = useEventBus<number>('foo')
     const { inc } = useCounter(0)
@@ -46,6 +49,31 @@ describe('useEventBus', () => {
     expect(count.value).toBe(1)
     expect(events).toEqual(emptyMap)
   })
+  it('not off non-exist listener', () => {
+    const bus1 = useEventBus<number>('foo')
+    const bus2 = useEventBus<number>('bar')
+    const listener = vi.fn()
+
+    bus1.on(listener)
+    bus2.off(listener)
+
+    expect(events.get('foo')).toBeDefined()
+    expect(events.get('bar')).toBeUndefined()
+  })
+  it('not off other events listener', () => {
+    const bus1 = useEventBus<number>('foo')
+    const bus2 = useEventBus<number>('bar')
+    const listener1 = vi.fn()
+    const listener2 = vi.fn()
+
+    bus1.on(listener1)
+    bus2.on(listener2)
+    bus1.off(listener2)
+    bus2.off(listener1)
+
+    expect(events.get('foo')).toBeDefined()
+    expect(events.get('bar')).toBeDefined()
+  })
   it('useEventBus off event', () => {
     const { emit, on, reset } = useEventBus<number>('useEventBus-off')
     const { count, inc } = useCounter(0)

packages/core/useTimestamp/index.test.ts

@@ -12,7 +12,7 @@ describe('useTimestamp', () => {
     expect(timestamp.value).greaterThan(initial)
   })
 
-  it('allows for a delayed start', async () => {
+  it('allows for a delayed start using requestAnimationFrame', async () => {
     const { resume, timestamp } = useTimestamp({
       controls: true,
       immediate: false,
@@ -30,4 +30,24 @@ describe('useTimestamp', () => {
 
     expect(timestamp.value).greaterThan(initial)
   })
+
+  it('allows for a delayed start using common interval', async () => {
+    const { resume, timestamp } = useTimestamp({
+      controls: true,
+      immediate: false,
+      interval: 50,
+    })
+
+    const initial = timestamp.value
+
+    await promiseTimeout(50)
+
+    expect(timestamp.value).toBe(initial)
+
+    resume()
+
+    await promiseTimeout(50)
+
+    expect(timestamp.value).greaterThan(initial)
+  })
 })