writing unit tests in experimental event Drag API (#15297)
* writing unit tests in experimental event Drag API * add onDragMove unit test * fix dragstart event type
Behzad Abbasi committed
Apr 3, 2019 at 16:00 UTC
73187239afeda1016313652a776e96c023b8646b
2 files changed
+205
-1
packages/react-events/src/Drag.js
+15
-1
@@ -37,7 +37,7 @@ type EventData = {
37
diffX: number,
38
diffY: number,
39
};
40
-type DragEventType = 'dragend' | 'dragchange' | 'dragmove';
40
+type DragEventType = 'dragstart' | 'dragend' | 'dragchange' | 'dragmove';
41
42
type DragEvent = {|
43
listener: DragEvent => void,
@@ -99,6 +99,9 @@ const DragResponder = {
99
case 'mousedown':
100
case 'pointerdown': {
101
if (!state.isDragging) {
102
+ if (props.onShouldClaimOwnership) {
103
+ context.releaseOwnership(state.dragTarget);
104
+ }
105
const obj =
106
eventType === 'touchstart' ? (event: any).changedTouches[0] : event;
107
const x = (state.startX = (obj: any).screenX);
@@ -107,6 +110,17 @@ const DragResponder = {
110
state.y = y;
111
state.dragTarget = eventTarget;
112
state.isPointerDown = true;
113
+
114
+ if (props.onDragStart) {
115
+ dispatchDragEvent(
116
+ context,
117
+ 'dragstart',
118
+ props.onDragStart,
119
+ state,
120
+ true,
121
+ );
122
+ }
123
+
124
context.addRootEventTypes(rootEventTypes);
125
}
126
break;
packages/react-events/src/__tests__/Drag-test.internal.js
new
+190
@@ -0,0 +1,190 @@
1
+/**
2
+ * Copyright (c) Facebook, Inc. and its affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ * @emails react-core
8
+ */
9
+
10
+'use strict';
11
+
12
+let React;
13
+let ReactFeatureFlags;
14
+let ReactDOM;
15
+let Drag;
16
+describe('Drag event responder', () => {
17
+ let container;
18
+
19
+ beforeEach(() => {
20
+ jest.resetModules();
21
+ ReactFeatureFlags = require('shared/ReactFeatureFlags');
22
+ ReactFeatureFlags.enableEventAPI = true;
23
+ React = require('react');
24
+ ReactDOM = require('react-dom');
25
+ Drag = require('react-events/drag');
26
+
27
+ container = document.createElement('div');
28
+ document.body.appendChild(container);
29
+ });
30
+
31
+ afterEach(() => {
32
+ document.body.removeChild(container);
33
+ container = null;
34
+ });
35
+
36
+ it('should support onDragChange', () => {
37
+ let divRef = React.createRef();
38
+ let events = [];
39
+
40
+ function handleOnDrag() {
41
+ events.push({isChanged: true});
42
+ }
43
+
44
+ function Component() {
45
+ return (
46
+ <Drag onDragChange={handleOnDrag}>
47
+ <div ref={divRef}>Drag me!</div>
48
+ </Drag>
49
+ );
50
+ }
51
+
52
+ ReactDOM.render(<Component />, container);
53
+
54
+ const mouseOverEvent = document.createEvent('MouseEvents');
55
+ mouseOverEvent.initEvent('mousedown', true, true);
56
+ divRef.current.dispatchEvent(mouseOverEvent);
57
+
58
+ const mouseMoveEvent = document.createEvent('MouseEvents');
59
+ for (let index = 0; index <= 20; index++) {
60
+ mouseMoveEvent.initMouseEvent(
61
+ 'mousemove',
62
+ true,
63
+ true,
64
+ window,
65
+ 1,
66
+ index,
67
+ index,
68
+ 50,
69
+ 50,
70
+ );
71
+ divRef.current.dispatchEvent(mouseMoveEvent);
72
+ }
73
+ divRef.current.dispatchEvent(mouseMoveEvent);
74
+
75
+ const mouseUpEvent = document.createEvent('MouseEvents');
76
+ mouseUpEvent.initEvent('mouseup', true, true);
77
+ divRef.current.dispatchEvent(mouseUpEvent);
78
+
79
+ expect(events).toHaveLength(2);
80
+ expect(events).toEqual(
81
+ expect.arrayContaining([expect.objectContaining({isChanged: true})]),
82
+ );
83
+ });
84
+
85
+ it('should support onDragStart and onDragEnd', () => {
86
+ let divRef = React.createRef();
87
+ let events = [];
88
+
89
+ function handleDragStart() {
90
+ events.push('dragstart');
91
+ }
92
+
93
+ function handleDragEnd() {
94
+ events.push('dragend');
95
+ }
96
+
97
+ function Component() {
98
+ return (
99
+ <Drag onDragStart={handleDragStart} onDragEnd={handleDragEnd}>
100
+ <div ref={divRef}>Drag me!</div>
101
+ </Drag>
102
+ );
103
+ }
104
+
105
+ ReactDOM.render(<Component />, container);
106
+
107
+ const mouseOverEvent = document.createEvent('MouseEvents');
108
+ mouseOverEvent.initEvent('mousedown', true, true);
109
+ divRef.current.dispatchEvent(mouseOverEvent);
110
+
111
+ const mouseMoveEvent = document.createEvent('MouseEvents');
112
+ for (let index = 0; index <= 20; index++) {
113
+ mouseMoveEvent.initMouseEvent(
114
+ 'mousemove',
115
+ true,
116
+ true,
117
+ window,
118
+ 1,
119
+ index,
120
+ index,
121
+ 50,
122
+ 50,
123
+ );
124
+ divRef.current.dispatchEvent(mouseMoveEvent);
125
+ }
126
+ divRef.current.dispatchEvent(mouseMoveEvent);
127
+
128
+ const mouseUpEvent = document.createEvent('MouseEvents');
129
+ mouseUpEvent.initEvent('mouseup', true, true);
130
+ divRef.current.dispatchEvent(mouseUpEvent);
131
+
132
+ expect(events).toEqual(['dragstart', 'dragend']);
133
+ });
134
+
135
+ it('should support onDragMove', () => {
136
+ let divRef = React.createRef();
137
+ let events = [];
138
+
139
+ function handleDragMove(e) {
140
+ events.push({
141
+ diffX: e.diffX,
142
+ diffY: e.diffY,
143
+ });
144
+ }
145
+
146
+ function Component() {
147
+ return (
148
+ <Drag onDragMove={handleDragMove}>
149
+ <div ref={divRef}>Drag me!</div>
150
+ </Drag>
151
+ );
152
+ }
153
+
154
+ ReactDOM.render(<Component />, container);
155
+
156
+ const mouseOverEvent = document.createEvent('MouseEvents');
157
+ mouseOverEvent.initEvent('mousedown', true, true);
158
+ divRef.current.dispatchEvent(mouseOverEvent);
159
+
160
+ const mouseMoveEvent = document.createEvent('MouseEvents');
161
+ for (let index = 0; index <= 20; index++) {
162
+ mouseMoveEvent.initMouseEvent(
163
+ 'mousemove',
164
+ true,
165
+ true,
166
+ window,
167
+ 1,
168
+ index,
169
+ index,
170
+ 50,
171
+ 50,
172
+ );
173
+ divRef.current.dispatchEvent(mouseMoveEvent);
174
+ }
175
+
176
+ const mouseUpEvent = document.createEvent('MouseEvents');
177
+ mouseUpEvent.initEvent('mouseup', true, true);
178
+ divRef.current.dispatchEvent(mouseUpEvent);
179
+ expect(events).toHaveLength(20);
180
+ let index = 0;
181
+ expect(events).toEqual(
182
+ expect.arrayContaining([
183
+ expect.objectContaining({
184
+ diffX: index,
185
+ diffY: index++,
186
+ }),
187
+ ]),
188
+ );
189
+ });
190
+});