[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.

Author: necolas

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

@@ -7,13 +7,23 @@
  * @flow
  */
 
-import {createEventTarget} from 'react-interactions/events/src/dom/testing-library';
+import {createEventTarget} from 'react-interactions/events/src/dom/event-testing-library';
 
 let React;
 let ReactFeatureFlags;
 let FocusContain;
 let tabbableScopeQuery;
 
+function tabNext(target) {
+  target.keydown({key: 'Tab'});
+  target.keyup({key: 'Tab'});
+}
+
+function tabPrevious(target) {
+  target.keydown({key: 'Tab', shiftKey: true});
+  target.keyup({key: 'Tab', shiftKey: true});
+}
+
 describe('FocusContain', () => {
   beforeEach(() => {
     jest.resetModules();
@@ -59,13 +69,13 @@ describe('FocusContain', () => {
 
       ReactDOM.render(<Test />, container);
       expect(document.activeElement).toBe(inputRef.current);
-      createEventTarget(document.activeElement).tabNext();
+      tabNext(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(buttonRef.current);
-      createEventTarget(document.activeElement).tabNext();
+      tabNext(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(divRef.current);
-      createEventTarget(document.activeElement).tabNext();
+      tabNext(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(button2Ref.current);
-      createEventTarget(document.activeElement).tabPrevious();
+      tabPrevious(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(divRef.current);
     });
 
@@ -90,15 +100,15 @@ describe('FocusContain', () => {
 
       ReactDOM.render(<Test />, container);
       buttonRef.current.focus();
-      createEventTarget(document.activeElement).tabNext();
+      tabNext(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(button2Ref.current);
-      createEventTarget(document.activeElement).tabNext();
+      tabNext(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(buttonRef.current);
-      createEventTarget(document.activeElement).tabNext();
+      tabNext(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(button2Ref.current);
-      createEventTarget(document.activeElement).tabPrevious();
+      tabPrevious(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(buttonRef.current);
-      createEventTarget(document.activeElement).tabPrevious();
+      tabPrevious(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(button2Ref.current);
       // Focus should be restored to the contained area
       const rAF = window.requestAnimationFrame;
@@ -132,15 +142,15 @@ describe('FocusContain', () => {
 
       ReactDOM.render(<Test />, container);
       expect(document.activeElement).toBe(buttonRef.current);
-      createEventTarget(document.activeElement).tabNext();
+      tabNext(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(button2Ref.current);
-      createEventTarget(document.activeElement).tabNext();
+      tabNext(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(button3Ref.current);
-      createEventTarget(document.activeElement).tabNext();
+      tabNext(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(button4Ref.current);
-      createEventTarget(document.activeElement).tabPrevious();
+      tabPrevious(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(button3Ref.current);
-      createEventTarget(document.activeElement).tabPrevious();
+      tabPrevious(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(button2Ref.current);
     });
 
@@ -167,13 +177,13 @@ describe('FocusContain', () => {
 
       ReactDOM.render(<Test />, container);
       expect(document.activeElement).toBe(button2Ref.current);
-      createEventTarget(document.activeElement).tabNext();
+      tabNext(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(button3Ref.current);
-      createEventTarget(document.activeElement).tabNext();
+      tabNext(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(button2Ref.current);
-      createEventTarget(document.activeElement).tabPrevious();
+      tabPrevious(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(button3Ref.current);
-      createEventTarget(document.activeElement).tabPrevious();
+      tabPrevious(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(button2Ref.current);
     });
 
@@ -213,15 +223,15 @@ describe('FocusContain', () => {
       ReactDOM.render(<Test />, container);
       buttonRef.current.focus();
       expect(document.activeElement).toBe(buttonRef.current);
-      createEventTarget(document.activeElement).tabNext();
+      tabNext(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(button2Ref.current);
-      createEventTarget(document.activeElement).tabNext();
+      tabNext(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(button3Ref.current);
-      createEventTarget(document.activeElement).tabNext();
+      tabNext(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(button4Ref.current);
-      createEventTarget(document.activeElement).tabPrevious();
+      tabPrevious(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(button3Ref.current);
-      createEventTarget(document.activeElement).tabPrevious();
+      tabPrevious(createEventTarget(document.activeElement));
       expect(document.activeElement).toBe(button2Ref.current);
     });
   });

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

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import {createEventTarget} from 'react-interactions/events/src/dom/testing-library';
+import {createEventTarget} from 'react-interactions/events/src/dom/event-testing-library';
 import {emulateBrowserTab} from '../shared/emulateBrowserTab';
 
 let React;

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

@@ -7,7 +7,7 @@
  * @flow
  */
 
-import {createEventTarget} from 'react-interactions/events/src/dom/testing-library';
+import {createEventTarget} from 'react-interactions/events/src/dom/event-testing-library';
 import {emulateBrowserTab} from '../shared/emulateBrowserTab';
 
 let React;

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

@@ -9,7 +9,7 @@
 
 'use strict';
 
-import {createEventTarget} from 'react-interactions/events/src/dom/testing-library';
+import {createEventTarget} from 'react-interactions/events/src/dom/event-testing-library';
 
 // This function is used by the a11y modules for testing
 export function emulateBrowserTab(backwards: boolean): void {

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

@@ -14,7 +14,7 @@ import {
   createEventTarget,
   platform,
   setPointerEvent,
-} from '../testing-library';
+} from '../event-testing-library';
 
 let React;
 let ReactFeatureFlags;

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

@@ -9,7 +9,11 @@
 
 'use strict';
 
-import {createEventTarget, setPointerEvent, platform} from '../testing-library';
+import {
+  createEventTarget,
+  setPointerEvent,
+  platform,
+} from '../event-testing-library';
 
 let React;
 let ReactFeatureFlags;

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

@@ -9,7 +9,7 @@
 
 'use strict';
 
-import {createEventTarget, setPointerEvent} from '../testing-library';
+import {createEventTarget, setPointerEvent} from '../event-testing-library';
 
 let React;
 let ReactFeatureFlags;

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

@@ -9,7 +9,7 @@
 
 'use strict';
 
-import {createEventTarget, setPointerEvent} from '../testing-library';
+import {createEventTarget, setPointerEvent} from '../event-testing-library';
 
 let React;
 let ReactFeatureFlags;

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

@@ -14,7 +14,7 @@ let ReactFeatureFlags;
 let ReactDOM;
 let useKeyboard;
 
-import {createEventTarget} from '../testing-library';
+import {createEventTarget} from '../event-testing-library';
 
 function initializeModules(hasPointerEvents) {
   jest.resetModules();

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

@@ -9,7 +9,7 @@
 
 'use strict';
 
-import {createEventTarget} from '../testing-library';
+import {createEventTarget} from '../event-testing-library';
 
 let React;
 let ReactFeatureFlags;