-
Notifications
You must be signed in to change notification settings - Fork 4k
/
index.native.js
130 lines (121 loc) · 3.81 KB
/
index.native.js
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
/**
* External dependencies
*/
import { render } from 'test/helpers';
import {
fireGestureHandler,
getByGestureTestId,
} from 'react-native-gesture-handler/jest-utils';
import { State } from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';
/**
* WordPress dependencies
*/
import { Draggable, DraggableTrigger } from '@wordpress/components';
// Touch event type constants have been extracted from original source code, as they are not exported in the package.
// Reference: https://github.com/software-mansion/react-native-gesture-handler/blob/90895e5f38616a6be256fceec6c6a391cd9ad7c7/src/TouchEventType.ts
const TouchEventType = {
UNDETERMINED: 0,
TOUCHES_DOWN: 1,
TOUCHES_MOVE: 2,
TOUCHES_UP: 3,
TOUCHES_CANCELLED: 4,
};
// Reanimated uses "requestAnimationFrame" for notifying shared value updates when using "useAnimatedReaction" hook.
// For testing, we mock the "requestAnimationFrame" so it calls the callback passed instantly.
let requestAnimationFrameCopy;
beforeEach( () => {
requestAnimationFrameCopy = global.requestAnimationFrame;
global.requestAnimationFrame = ( callback ) => callback();
} );
afterEach( () => {
global.requestAnimationFrame = requestAnimationFrameCopy;
} );
describe( 'Draggable', () => {
it( 'triggers onLongPress handler', () => {
const triggerId = 'trigger-id';
const onLongPress = jest.fn();
const { getByTestId } = render(
<Draggable>
<DraggableTrigger
id={ triggerId }
enabled={ true }
minDuration={ 500 }
onLongPress={ onLongPress }
testID="draggableTrigger"
>
<Animated.View />
</DraggableTrigger>
</Draggable>
);
const draggableTrigger = getByTestId( 'draggableTrigger' );
fireGestureHandler( draggableTrigger, [
{ oldState: State.BEGAN, state: State.ACTIVE },
{ state: State.ACTIVE },
] );
expect( onLongPress ).toHaveBeenCalledTimes( 1 );
expect( onLongPress ).toHaveBeenCalledWith( triggerId );
} );
it( 'triggers dragging handlers', () => {
const triggerId = 'trigger-id';
const onDragStart = jest.fn();
const onDragOver = jest.fn();
const onDragEnd = jest.fn();
const { getByTestId } = render(
<Draggable
onDragStart={ onDragStart }
onDragOver={ onDragOver }
onDragEnd={ onDragEnd }
testID="draggable"
>
<DraggableTrigger id={ triggerId } testID="draggableTrigger">
<Animated.View />
</DraggableTrigger>
</Draggable>
);
const draggableTrigger = getByTestId( 'draggableTrigger' );
const draggable = getByGestureTestId( 'draggable' );
const touchEventId = 1;
const touchEvents = [
{ id: touchEventId, x: 0, y: 0 },
{ id: touchEventId, x: 100, y: 100 },
{ id: touchEventId, x: 50, y: 50 },
];
fireGestureHandler( draggableTrigger, [
{ oldState: State.BEGAN, state: State.ACTIVE },
{ state: State.ACTIVE },
] );
fireGestureHandler( draggable, [
// TOUCHES_DOWN event is only received on ACTIVE state, so we have to fire it manually.
{ oldState: State.BEGAN, state: State.ACTIVE },
{
allTouches: [ touchEvents[ 0 ] ],
eventType: TouchEventType.TOUCHES_DOWN,
},
{
allTouches: [ touchEvents[ 1 ] ],
eventType: TouchEventType.TOUCHES_MOVE,
},
{
allTouches: [ touchEvents[ 2 ] ],
eventType: TouchEventType.TOUCHES_MOVE,
},
{ state: State.END },
] );
expect( onDragStart ).toHaveBeenCalledTimes( 1 );
expect( onDragStart ).toHaveBeenCalledWith( {
id: triggerId,
x: touchEvents[ 0 ].x,
y: touchEvents[ 0 ].y,
} );
expect( onDragOver ).toHaveBeenCalledTimes( 2 );
expect( onDragOver ).toHaveBeenNthCalledWith( 1, touchEvents[ 1 ] );
expect( onDragOver ).toHaveBeenNthCalledWith( 2, touchEvents[ 2 ] );
expect( onDragEnd ).toHaveBeenCalledTimes( 1 );
expect( onDragEnd ).toHaveBeenCalledWith( {
id: triggerId,
x: touchEvents[ 2 ].x,
y: touchEvents[ 2 ].y,
} );
} );
} );