-
Notifications
You must be signed in to change notification settings - Fork 315
/
Copy pathapi.test.tsx
104 lines (95 loc) · 5.01 KB
/
api.test.tsx
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
import React from 'react'
import { render, cleanup, fireEvent, createEvent } from '@testing-library/react'
import { patchCreateEvent } from './utils'
import '@testing-library/jest-dom/extend-expect'
import { BindProps, GenuineHandlers } from './components/Api'
import Interactive from './components/Interactive'
import InteractiveDom from './components/InteractiveDom'
afterEach(cleanup)
patchCreateEvent(createEvent)
test('bind should dispatch its arguments', () => {
const { getByTestId } = render(<BindProps args1={['args1']} args2={['args2']} />)
const firstElement = getByTestId('drag-el')
const secondElement = getByTestId('2-drag-el')
fireEvent.pointerDown(firstElement, { pointerId: 1, buttons: 1 })
expect(getByTestId('drag-args')).toHaveTextContent('args1')
fireEvent.pointerUp(firstElement, { pointerId: 1 })
expect(getByTestId('drag-args')).toHaveTextContent('args1')
fireEvent.pointerDown(secondElement, { pointerId: 2, buttons: 1 })
expect(getByTestId('2-drag-args')).toHaveTextContent('args2')
fireEvent.pointerUp(secondElement, { pointerId: 2 })
expect(getByTestId('2-drag-args')).toHaveTextContent('args2')
fireEvent.pointerDown(firstElement, { pointerId: 3, buttons: 1 })
expect(getByTestId('drag-args')).toHaveTextContent('args1')
fireEvent.pointerUp(firstElement, { pointerId: 3 })
expect(getByTestId('drag-args')).toHaveTextContent('args1')
})
test('native handlers should correctly execute', () => {
const { getByTestId } = render(<GenuineHandlers args="testArg" />)
const element = getByTestId('drag-el')
fireEvent.pointerDown(element, { pointerId: 4, buttons: 1 })
expect(getByTestId('drag-active')).toHaveTextContent('true')
expect(getByTestId('mouseDown')).toHaveTextContent('mouse down')
fireEvent.pointerUp(element, { pointerId: 4 })
fireEvent.click(element)
expect(getByTestId('click')).toHaveTextContent(/^clicked testArg$/)
})
test('testing memo', () => {
const { getByTestId, rerender } = render(<Interactive gestures={['Drag']} memoArg="memo" />)
const element = getByTestId('drag-el')
fireEvent.pointerDown(element, { pointerId: 5, buttons: 1 })
expect(getByTestId('drag-memo')).toHaveTextContent('memo')
fireEvent.pointerUp(element, { pointerId: 5 })
rerender(<Interactive gestures={['Drag']} memoArg={0} />)
fireEvent.pointerDown(element, { pointerId: 6, buttons: 1 })
expect(getByTestId('drag-memo')).toHaveTextContent('0')
fireEvent.pointerUp(element, { pointerId: 6 })
rerender(<Interactive gestures={['Drag']} memoArg={null} />)
fireEvent.pointerDown(element, { pointerId: 7, buttons: 1 })
expect(getByTestId('drag-memo')).toHaveTextContent('null')
fireEvent.pointerUp(element, { pointerId: 7 })
rerender(<Interactive gestures={['Drag']} memoArg={''} />)
fireEvent.pointerDown(element, { pointerId: 8, buttons: 1 })
expect(getByTestId('drag-memo')).toHaveTextContent(/^$/)
fireEvent.pointerUp(element, { pointerId: 8 })
})
test('testing timestamp', () => {
const { getByTestId } = render(<Interactive gestures={['Drag']} />)
const element = getByTestId('drag-el')
let event = createEvent.pointerDown(element, { pointerId: 9, clientX: 10, clientY: 20, buttons: 1 })
fireEvent(element, event)
const start = event.timeStamp
expect(getByTestId('drag-timeStamp').innerHTML).toBe(String(start))
expect(getByTestId('drag-startTime').innerHTML).toBe(String(start))
expect(getByTestId('drag-elapsedTime').innerHTML).toBe('0')
event = createEvent.pointerMove(element, { pointerId: 9, clientX: 20, clientY: 50, buttons: 1 })
fireEvent(element, event)
let time = event.timeStamp
expect(getByTestId('drag-timeStamp').innerHTML).toBe(String(time))
expect(getByTestId('drag-startTime').innerHTML).toBe(String(start))
expect(getByTestId('drag-elapsedTime').innerHTML).toBe(String(time - start))
})
test('testing transform', () => {
const { getByTestId } = render(
<Interactive gestures={['Drag']} config={{ transform: ([x, y]) => [1 + x / 2, y / 4] }} />
)
const element = getByTestId('drag-el')
fireEvent.pointerDown(element, { pointerId: 10, clientX: 20, clientY: 40, buttons: 1 })
expect(getByTestId('drag-xy')).toHaveTextContent('11,10')
fireEvent.pointerMove(element, { pointerId: 10, clientX: 30, clientY: 80, buttons: 1 })
expect(getByTestId('drag-xy')).toHaveTextContent('16,20')
expect(getByTestId('drag-initial')).toHaveTextContent('11,10')
expect(getByTestId('drag-movement')).toHaveTextContent('5,10')
expect(getByTestId('drag-offset')).toHaveTextContent('5,10')
expect(getByTestId('drag-delta')).toHaveTextContent('5,10')
expect(getByTestId('drag-distance')).toHaveTextContent('5,10')
fireEvent.pointerUp(element, { pointerId: 10 })
})
test('testing unmount with domTarget', () => {
const { getByTestId, unmount } = render(<InteractiveDom gestures={['Drag']} />)
const element = getByTestId('dom-drag-el')
fireEvent.pointerDown(element, { pointerId: 11, buttons: 1 })
fireEvent.pointerMove(element, { pointerId: 11, clientX: 20, clientY: 50, buttons: 1 })
expect(getByTestId('dom-drag-dragging')).toHaveTextContent('true')
unmount()
})