Skip to content

Commit ebd1f5d

Browse files
necolasnecolas
authored
[react-events] Press: improve test coverage (#16397)
1. Run the tests in both an environment without PointerEvent and one with PointerEvent. 2. Improve test coverage to include both mouse and touch pointers. 3. Change 'Press' so that it only listens to either pointer events or fallbacks events.
1 parent a9304e7 commit ebd1f5d

File tree

6 files changed

+858
-1702
lines changed

6 files changed

+858
-1702
lines changed

‎packages/react-events/src/dom/Press.js‎

Lines changed: 33 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -95,48 +95,47 @@ type PressEvent = {|
9595
shiftKey: boolean,
9696
|};
9797

98+
const hasPointerEvents =
99+
typeof window !== 'undefined' && window.PointerEvent !== undefined;
100+
98101
const isMac =
99102
typeof window !== 'undefined' && window.navigator != null
100103
? /^Mac/.test(window.navigator.platform)
101104
: false;
105+
102106
const DEFAULT_PRESS_RETENTION_OFFSET = {
103107
bottom: 20,
104108
top: 20,
105109
left: 20,
106110
right: 20,
107111
};
108112

109-
const targetEventTypes = [
110-
'keydown_active',
111-
// We need to preventDefault on pointerdown for mouse/pen events
112-
// that are in hit target area but not the element area.
113-
'pointerdown_active',
114-
'click_active',
115-
];
116-
const rootEventTypes = [
117-
'click',
118-
'keyup',
119-
'pointerup',
120-
'pointermove',
121-
'scroll',
122-
'pointercancel',
123-
// We listen to this here so stopPropagation can
124-
// block other mouseup events used internally
125-
'mouseup_active',
126-
'touchend',
127-
];
128-
129-
// If PointerEvents is not supported (e.g., Safari), also listen to touch and mouse events.
130-
if (typeof window !== 'undefined' && window.PointerEvent === undefined) {
131-
targetEventTypes.push('touchstart', 'mousedown');
132-
rootEventTypes.push(
133-
'mousemove',
134-
'touchmove',
135-
'touchcancel',
136-
// Used as a 'cancel' signal for mouse interactions
137-
'dragstart',
138-
);
139-
}
113+
const targetEventTypes = hasPointerEvents
114+
? [
115+
'keydown_active',
116+
// We need to preventDefault on pointerdown for mouse/pen events
117+
// that are in hit target area but not the element area.
118+
'pointerdown_active',
119+
'click_active',
120+
]
121+
: ['keydown_active', 'touchstart', 'mousedown', 'click_active'];
122+
123+
const rootEventTypes = hasPointerEvents
124+
? ['pointerup', 'pointermove', 'pointercancel', 'click', 'keyup', 'scroll']
125+
: [
126+
'click',
127+
'keyup',
128+
'scroll',
129+
'mousemove',
130+
'touchmove',
131+
'touchcancel',
132+
// Used as a 'cancel' signal for mouse interactions
133+
'dragstart',
134+
// We listen to this here so stopPropagation can
135+
// block other mouseup events used internally
136+
'mouseup_active',
137+
'touchend',
138+
];
140139

141140
function isFunction(obj): boolean {
142141
return typeof obj === 'function';
@@ -539,7 +538,7 @@ const pressResponderImpl = {
539538
}
540539

541540
state.shouldPreventClick = false;
542-
if (isPointerEvent || isTouchEvent) {
541+
if (isTouchEvent) {
543542
state.ignoreEmulatedMouseEvents = true;
544543
} else if (isKeyboardEvent) {
545544
// Ignore unrelated key events
@@ -676,6 +675,7 @@ const pressResponderImpl = {
676675
if (state.isPressWithinResponderRegion) {
677676
if (isPressed) {
678677
const onPressMove = props.onPressMove;
678+
679679
if (isFunction(onPressMove)) {
680680
dispatchEvent(
681681
event,
@@ -777,6 +777,7 @@ const pressResponderImpl = {
777777
);
778778
}
779779
}
780+
780781
if (state.isPressWithinResponderRegion && button !== 1) {
781782
dispatchEvent(
782783
event,

‎packages/react-events/src/dom/__tests__/Focus-test.internal.js‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import {
1515
keydown,
1616
setPointerEvent,
1717
platform,
18-
dispatchPointerPressDown,
19-
dispatchPointerPressRelease,
18+
dispatchPointerDown,
19+
dispatchPointerUp,
2020
} from '../test-utils';
2121

2222
let React;
@@ -138,8 +138,8 @@ describe.each(table)('Focus responder', hasPointerEvents => {
138138

139139
it('is called with the correct pointerType: mouse', () => {
140140
const target = ref.current;
141-
dispatchPointerPressDown(target, {pointerType: 'mouse'});
142-
dispatchPointerPressRelease(target, {pointerType: 'mouse'});
141+
dispatchPointerDown(target, {pointerType: 'mouse'});
142+
dispatchPointerUp(target, {pointerType: 'mouse'});
143143
expect(onFocus).toHaveBeenCalledTimes(1);
144144
expect(onFocus).toHaveBeenCalledWith(
145145
expect.objectContaining({pointerType: 'mouse'}),
@@ -148,8 +148,8 @@ describe.each(table)('Focus responder', hasPointerEvents => {
148148

149149
it('is called with the correct pointerType: touch', () => {
150150
const target = ref.current;
151-
dispatchPointerPressDown(target, {pointerType: 'touch'});
152-
dispatchPointerPressRelease(target, {pointerType: 'touch'});
151+
dispatchPointerDown(target, {pointerType: 'touch'});
152+
dispatchPointerUp(target, {pointerType: 'touch'});
153153
expect(onFocus).toHaveBeenCalledTimes(1);
154154
expect(onFocus).toHaveBeenCalledWith(
155155
expect.objectContaining({pointerType: 'touch'}),
@@ -159,8 +159,8 @@ describe.each(table)('Focus responder', hasPointerEvents => {
159159
if (hasPointerEvents) {
160160
it('is called with the correct pointerType: pen', () => {
161161
const target = ref.current;
162-
dispatchPointerPressDown(target, {pointerType: 'pen'});
163-
dispatchPointerPressRelease(target, {pointerType: 'pen'});
162+
dispatchPointerDown(target, {pointerType: 'pen'});
163+
dispatchPointerUp(target, {pointerType: 'pen'});
164164
expect(onFocus).toHaveBeenCalledTimes(1);
165165
expect(onFocus).toHaveBeenCalledWith(
166166
expect.objectContaining({pointerType: 'pen'}),
@@ -278,7 +278,7 @@ describe.each(table)('Focus responder', hasPointerEvents => {
278278
expect(onFocusVisibleChange).toHaveBeenCalledTimes(1);
279279
expect(onFocusVisibleChange).toHaveBeenCalledWith(true);
280280
// then use pointer on the target, focus should no longer be visible
281-
dispatchPointerPressDown(target);
281+
dispatchPointerDown(target);
282282
expect(onFocusVisibleChange).toHaveBeenCalledTimes(2);
283283
expect(onFocusVisibleChange).toHaveBeenCalledWith(false);
284284
// onFocusVisibleChange should not be called again
@@ -288,9 +288,9 @@ describe.each(table)('Focus responder', hasPointerEvents => {
288288

289289
it('is not called after "focus" and "blur" events without keyboard', () => {
290290
const target = ref.current;
291-
dispatchPointerPressDown(target);
292-
dispatchPointerPressRelease(target);
293-
dispatchPointerPressDown(container);
291+
dispatchPointerDown(target);
292+
dispatchPointerUp(target);
293+
dispatchPointerDown(container);
294294
target.dispatchEvent(blur({relatedTarget: container}));
295295
expect(onFocusVisibleChange).toHaveBeenCalledTimes(0);
296296
});

‎packages/react-events/src/dom/__tests__/FocusWithin-test.internal.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@ import {
1414
focus,
1515
keydown,
1616
setPointerEvent,
17-
dispatchPointerPressDown,
18-
dispatchPointerPressRelease,
17+
dispatchPointerDown,
18+
dispatchPointerUp,
1919
} from '../test-utils';
2020

2121
let React;
@@ -203,7 +203,7 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
203203
expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(1);
204204
expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
205205
// then use pointer on the next target, focus should no longer be visible
206-
dispatchPointerPressDown(innerTarget2);
206+
dispatchPointerDown(innerTarget2);
207207
innerTarget1.dispatchEvent(blur({relatedTarget: innerTarget2}));
208208
innerTarget2.dispatchEvent(focus());
209209
expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(2);
@@ -215,7 +215,7 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
215215
expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(3);
216216
expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(true);
217217
// then use pointer on the target, focus should no longer be visible
218-
dispatchPointerPressDown(innerTarget1);
218+
dispatchPointerDown(innerTarget1);
219219
expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(4);
220220
expect(onFocusWithinVisibleChange).toHaveBeenCalledWith(false);
221221
// onFocusVisibleChange should not be called again
@@ -225,8 +225,8 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
225225

226226
it('is not called after "focus" and "blur" events without keyboard', () => {
227227
const innerTarget = innerRef.current;
228-
dispatchPointerPressDown(innerTarget);
229-
dispatchPointerPressRelease(innerTarget);
228+
dispatchPointerDown(innerTarget);
229+
dispatchPointerUp(innerTarget);
230230
innerTarget.dispatchEvent(blur({relatedTarget: container}));
231231
expect(onFocusWithinVisibleChange).toHaveBeenCalledTimes(0);
232232
});

‎packages/react-events/src/dom/__tests__/Hover-test.internal.js‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -213,7 +213,8 @@ describe.each(table)('Hover responder', hasPointerEvents => {
213213

214214
const target = ref.current;
215215
dispatchPointerHoverEnter(target);
216-
dispatchPointerHoverMove(target, {from: {x: 0, y: 0}, to: {x: 1, y: 1}});
216+
dispatchPointerHoverMove(target, {x: 0, y: 0});
217+
dispatchPointerHoverMove(target, {x: 1, y: 1});
217218
expect(onHoverMove).toHaveBeenCalledTimes(2);
218219
expect(onHoverMove).toHaveBeenCalledWith(
219220
expect.objectContaining({type: 'hovermove'}),
@@ -317,10 +318,8 @@ describe.each(table)('Hover responder', hasPointerEvents => {
317318
const target = ref.current;
318319

319320
dispatchPointerHoverEnter(target, {x: 10, y: 10});
320-
dispatchPointerHoverMove(target, {
321-
from: {x: 10, y: 10},
322-
to: {x: 20, y: 20},
323-
});
321+
dispatchPointerHoverMove(target, {x: 10, y: 10});
322+
dispatchPointerHoverMove(target, {x: 20, y: 20});
324323
dispatchPointerHoverExit(target, {x: 20, y: 20});
325324

326325
expect(eventLog).toEqual([

0 commit comments

Comments
 (0)