Skip to content

Commit a5e951d

Browse files
necolasnecolas
authored
[react-interactions] Event testing library improvements (#17614)
Introduces a state machine around pointer events to produce more accurate mock touch events. This allows multi-touch unit tests to be written entirely in terms of mock pointer interactions, while producing the expected 'changedTouches', 'targetTouches', and 'touches' fields for mock touch events.
1 parent 95056b6 commit a5e951d

23 files changed

+631
-456
lines changed

‎packages/react-interactions/accessibility/src/__tests__/FocusContain-test.internal.js

Lines changed: 34 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -7,13 +7,23 @@
77
* @flow
88
*/
99

10-
import {createEventTarget} from 'react-interactions/events/src/dom/testing-library';
10+
import {createEventTarget} from 'react-interactions/events/src/dom/event-testing-library';
1111

1212
let React;
1313
let ReactFeatureFlags;
1414
let FocusContain;
1515
let tabbableScopeQuery;
1616

17+
function tabNext(target) {
18+
target.keydown({key: 'Tab'});
19+
target.keyup({key: 'Tab'});
20+
}
21+
22+
function tabPrevious(target) {
23+
target.keydown({key: 'Tab', shiftKey: true});
24+
target.keyup({key: 'Tab', shiftKey: true});
25+
}
26+
1727
describe('FocusContain', () => {
1828
beforeEach(() => {
1929
jest.resetModules();
@@ -59,13 +69,13 @@ describe('FocusContain', () => {
5969

6070
ReactDOM.render(<Test />, container);
6171
expect(document.activeElement).toBe(inputRef.current);
62-
createEventTarget(document.activeElement).tabNext();
72+
tabNext(createEventTarget(document.activeElement));
6373
expect(document.activeElement).toBe(buttonRef.current);
64-
createEventTarget(document.activeElement).tabNext();
74+
tabNext(createEventTarget(document.activeElement));
6575
expect(document.activeElement).toBe(divRef.current);
66-
createEventTarget(document.activeElement).tabNext();
76+
tabNext(createEventTarget(document.activeElement));
6777
expect(document.activeElement).toBe(button2Ref.current);
68-
createEventTarget(document.activeElement).tabPrevious();
78+
tabPrevious(createEventTarget(document.activeElement));
6979
expect(document.activeElement).toBe(divRef.current);
7080
});
7181

@@ -90,15 +100,15 @@ describe('FocusContain', () => {
90100

91101
ReactDOM.render(<Test />, container);
92102
buttonRef.current.focus();
93-
createEventTarget(document.activeElement).tabNext();
103+
tabNext(createEventTarget(document.activeElement));
94104
expect(document.activeElement).toBe(button2Ref.current);
95-
createEventTarget(document.activeElement).tabNext();
105+
tabNext(createEventTarget(document.activeElement));
96106
expect(document.activeElement).toBe(buttonRef.current);
97-
createEventTarget(document.activeElement).tabNext();
107+
tabNext(createEventTarget(document.activeElement));
98108
expect(document.activeElement).toBe(button2Ref.current);
99-
createEventTarget(document.activeElement).tabPrevious();
109+
tabPrevious(createEventTarget(document.activeElement));
100110
expect(document.activeElement).toBe(buttonRef.current);
101-
createEventTarget(document.activeElement).tabPrevious();
111+
tabPrevious(createEventTarget(document.activeElement));
102112
expect(document.activeElement).toBe(button2Ref.current);
103113
// Focus should be restored to the contained area
104114
const rAF = window.requestAnimationFrame;
@@ -132,15 +142,15 @@ describe('FocusContain', () => {
132142

133143
ReactDOM.render(<Test />, container);
134144
expect(document.activeElement).toBe(buttonRef.current);
135-
createEventTarget(document.activeElement).tabNext();
145+
tabNext(createEventTarget(document.activeElement));
136146
expect(document.activeElement).toBe(button2Ref.current);
137-
createEventTarget(document.activeElement).tabNext();
147+
tabNext(createEventTarget(document.activeElement));
138148
expect(document.activeElement).toBe(button3Ref.current);
139-
createEventTarget(document.activeElement).tabNext();
149+
tabNext(createEventTarget(document.activeElement));
140150
expect(document.activeElement).toBe(button4Ref.current);
141-
createEventTarget(document.activeElement).tabPrevious();
151+
tabPrevious(createEventTarget(document.activeElement));
142152
expect(document.activeElement).toBe(button3Ref.current);
143-
createEventTarget(document.activeElement).tabPrevious();
153+
tabPrevious(createEventTarget(document.activeElement));
144154
expect(document.activeElement).toBe(button2Ref.current);
145155
});
146156

@@ -167,13 +177,13 @@ describe('FocusContain', () => {
167177

168178
ReactDOM.render(<Test />, container);
169179
expect(document.activeElement).toBe(button2Ref.current);
170-
createEventTarget(document.activeElement).tabNext();
180+
tabNext(createEventTarget(document.activeElement));
171181
expect(document.activeElement).toBe(button3Ref.current);
172-
createEventTarget(document.activeElement).tabNext();
182+
tabNext(createEventTarget(document.activeElement));
173183
expect(document.activeElement).toBe(button2Ref.current);
174-
createEventTarget(document.activeElement).tabPrevious();
184+
tabPrevious(createEventTarget(document.activeElement));
175185
expect(document.activeElement).toBe(button3Ref.current);
176-
createEventTarget(document.activeElement).tabPrevious();
186+
tabPrevious(createEventTarget(document.activeElement));
177187
expect(document.activeElement).toBe(button2Ref.current);
178188
});
179189

@@ -213,15 +223,15 @@ describe('FocusContain', () => {
213223
ReactDOM.render(<Test />, container);
214224
buttonRef.current.focus();
215225
expect(document.activeElement).toBe(buttonRef.current);
216-
createEventTarget(document.activeElement).tabNext();
226+
tabNext(createEventTarget(document.activeElement));
217227
expect(document.activeElement).toBe(button2Ref.current);
218-
createEventTarget(document.activeElement).tabNext();
228+
tabNext(createEventTarget(document.activeElement));
219229
expect(document.activeElement).toBe(button3Ref.current);
220-
createEventTarget(document.activeElement).tabNext();
230+
tabNext(createEventTarget(document.activeElement));
221231
expect(document.activeElement).toBe(button4Ref.current);
222-
createEventTarget(document.activeElement).tabPrevious();
232+
tabPrevious(createEventTarget(document.activeElement));
223233
expect(document.activeElement).toBe(button3Ref.current);
224-
createEventTarget(document.activeElement).tabPrevious();
234+
tabPrevious(createEventTarget(document.activeElement));
225235
expect(document.activeElement).toBe(button2Ref.current);
226236
});
227237
});

‎packages/react-interactions/accessibility/src/__tests__/FocusGroup-test.internal.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @flow
88
*/
99

10-
import {createEventTarget} from 'react-interactions/events/src/dom/testing-library';
10+
import {createEventTarget} from 'react-interactions/events/src/dom/event-testing-library';
1111
import {emulateBrowserTab} from '../shared/emulateBrowserTab';
1212

1313
let React;

‎packages/react-interactions/accessibility/src/__tests__/FocusTable-test.internal.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @flow
88
*/
99

10-
import {createEventTarget} from 'react-interactions/events/src/dom/testing-library';
10+
import {createEventTarget} from 'react-interactions/events/src/dom/event-testing-library';
1111
import {emulateBrowserTab} from '../shared/emulateBrowserTab';
1212

1313
let React;

‎packages/react-interactions/accessibility/src/shared/emulateBrowserTab.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
'use strict';
1111

12-
import {createEventTarget} from 'react-interactions/events/src/dom/testing-library';
12+
import {createEventTarget} from 'react-interactions/events/src/dom/event-testing-library';
1313

1414
// This function is used by the a11y modules for testing
1515
export function emulateBrowserTab(backwards: boolean): void {

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ import {
1414
createEventTarget,
1515
platform,
1616
setPointerEvent,
17-
} from '../testing-library';
17+
} from '../event-testing-library';
1818

1919
let React;
2020
let ReactFeatureFlags;

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

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,11 @@
99

1010
'use strict';
1111

12-
import {createEventTarget, setPointerEvent, platform} from '../testing-library';
12+
import {
13+
createEventTarget,
14+
setPointerEvent,
15+
platform,
16+
} from '../event-testing-library';
1317

1418
let React;
1519
let ReactFeatureFlags;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
'use strict';
1111

12-
import {createEventTarget, setPointerEvent} from '../testing-library';
12+
import {createEventTarget, setPointerEvent} from '../event-testing-library';
1313

1414
let React;
1515
let ReactFeatureFlags;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
'use strict';
1111

12-
import {createEventTarget, setPointerEvent} from '../testing-library';
12+
import {createEventTarget, setPointerEvent} from '../event-testing-library';
1313

1414
let React;
1515
let ReactFeatureFlags;

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ let ReactFeatureFlags;
1414
let ReactDOM;
1515
let useKeyboard;
1616

17-
import {createEventTarget} from '../testing-library';
17+
import {createEventTarget} from '../event-testing-library';
1818

1919
function initializeModules(hasPointerEvents) {
2020
jest.resetModules();

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99

1010
'use strict';
1111

12-
import {createEventTarget} from '../testing-library';
12+
import {createEventTarget} from '../event-testing-library';
1313

1414
let React;
1515
let ReactFeatureFlags;

0 commit comments

Comments
 (0)