-
-
Notifications
You must be signed in to change notification settings - Fork 2.4k
/
index.test.ts
145 lines (107 loc) · 4.96 KB
/
index.test.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
import { promiseTimeout } from '@vueuse/shared'
import type { Ref } from 'vue-demi'
import { ref } from 'vue-demi'
import { beforeEach, describe, expect, it, vi } from 'vitest'
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
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)
}
async function triggerCallbackWithDelay(isRef: boolean) {
const onLongPressCallback = vi.fn()
onLongPress(isRef ? element : element.value, onLongPressCallback, { delay: 1000 })
// first pointer down
element.value.dispatchEvent(pointerdownEvent)
// wait for 500ms after pointer down
await promiseTimeout(500)
expect(onLongPressCallback).toHaveBeenCalledTimes(0)
// pointer up to cancel callback
element.value.dispatchEvent(pointerUpEvent)
// wait for 500ms after pointer up
await promiseTimeout(500)
expect(onLongPressCallback).toHaveBeenCalledTimes(0)
// another pointer down
element.value.dispatchEvent(pointerdownEvent)
// wait for 1000ms after pointer down
await promiseTimeout(1000)
expect(onLongPressCallback).toHaveBeenCalledTimes(1)
}
async function notTriggerCallbackOnChildLongPress(isRef: boolean) {
const onLongPressCallback = vi.fn()
onLongPress(isRef ? element : element.value, onLongPressCallback, { modifiers: { self: true } })
childElement.value.dispatchEvent(pointerdownEvent)
await promiseTimeout(500)
expect(onLongPressCallback).toHaveBeenCalledTimes(0)
}
async function workOnceAndPreventModifiers(isRef: boolean) {
const onLongPressCallback = vi.fn()
onLongPress(isRef ? element : element.value, onLongPressCallback, { modifiers: { once: true, prevent: true } })
element.value.dispatchEvent(pointerdownEvent)
await promiseTimeout(500)
expect(onLongPressCallback).toHaveBeenCalledTimes(1)
expect(pointerdownEvent.defaultPrevented).toBe(true)
await promiseTimeout(500)
expect(onLongPressCallback).toHaveBeenCalledTimes(1)
}
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 } })
element.value.dispatchEvent(pointerdownEvent)
await promiseTimeout(500)
expect(onLongPressCallback).toHaveBeenCalledTimes(1)
expect(onParentLongPressCallback).toHaveBeenCalledTimes(0)
}
async function stopEventListeners(isRef: boolean) {
const onLongPressCallback = vi.fn()
const stop = onLongPress(isRef ? element : element.value, onLongPressCallback, { modifiers: { stop: true } })
// before calling stop, the callback should be called
element.value.dispatchEvent(pointerdownEvent)
await promiseTimeout(500)
expect(onLongPressCallback).toHaveBeenCalledTimes(1)
stop()
// before calling stop, the callback should no longer be called
onLongPressCallback.mockClear()
element.value.dispatchEvent(pointerdownEvent)
await promiseTimeout(500)
expect(onLongPressCallback).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))
it('should remove event listeners after being stopped', () => stopEventListeners(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))
})