[react-events] Split out mixed event responder tests (#16608)

Author: trueadm

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

@@ -994,4 +994,68 @@ describe('DOMEventResponderSystem', () => {
     dispatchClickEvent(ref.current);
     expect(log).toEqual([{counter: 1}]);
   });
+
+  it('should correctly pass through event properties', () => {
+    const timeStamps = [];
+    const ref = React.createRef();
+    const eventLog = [];
+    const logEvent = event => {
+      const propertiesWeCareAbout = {
+        counter: event.counter,
+        target: event.target,
+        timeStamp: event.timeStamp,
+        type: event.type,
+      };
+      timeStamps.push(event.timeStamp);
+      eventLog.push(propertiesWeCareAbout);
+    };
+    let counter = 0;
+
+    const TestResponder = createEventResponder({
+      targetEventTypes: ['click'],
+      onEvent(event, context, props) {
+        const obj = {
+          counter,
+          timeStamp: context.getTimeStamp(),
+          target: event.responderTarget,
+          type: 'click-test',
+        };
+        context.dispatchEvent(obj, props.onClick, DiscreteEvent);
+      },
+    });
+
+    const Component = () => {
+      const listener = React.unstable_useResponder(TestResponder, {
+        onClick: logEvent,
+      });
+      return <button ref={ref} listeners={listener} />;
+    };
+    ReactDOM.render(<Component />, container);
+    dispatchClickEvent(ref.current);
+    counter++;
+    dispatchClickEvent(ref.current);
+    counter++;
+    dispatchClickEvent(ref.current);
+    expect(typeof timeStamps[0] === 'number').toBe(true);
+    expect(eventLog).toEqual([
+      {
+        counter: 0,
+        target: ref.current,
+        timeStamp: timeStamps[0],
+        type: 'click-test',
+      },
+      {
+        counter: 1,
+        target: ref.current,
+        timeStamp: timeStamps[1],
+        type: 'click-test',
+      },
+      {
+        counter: 2,
+        target: ref.current,
+        timeStamp: timeStamps[2],
+        type: 'click-test',
+      },
+    ]);
+  });
 });

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

@@ -14,7 +14,6 @@ let ReactFeatureFlags;
 let ReactDOM;
 let InputResponder;
 let useInput;
-let usePress;
 let Scheduler;
 
 const setUntrackedChecked = Object.getOwnPropertyDescriptor(
@@ -42,7 +41,6 @@ const modulesInit = () => {
   Scheduler = require('scheduler');
   InputResponder = require('react-events/input').InputResponder;
   useInput = require('react-events/input').useInput;
-  usePress = require('react-events/press').usePress;
 };
 
 describe('Input event responder', () => {
@@ -948,96 +946,6 @@ describe('Input event responder', () => {
         // Value should be the controlled value, not the original one
         expect(textarea.value).toBe('changed [!]');
       });
-
-      it('is async for non-input events', () => {
-        const root = ReactDOM.unstable_createRoot(container);
-        let input;
-
-        let ops = [];
-
-        function Component({
-          innerRef,
-          onChange,
-          controlledValue,
-          pressListener,
-        }) {
-          const inputListener = useInput({
-            onChange,
-          });
-          return (
-            <input
-              type="text"
-              ref={innerRef}
-              value={controlledValue}
-              listeners={[inputListener, pressListener]}
-            />
-          );
-        }
-
-        function PressWrapper({innerRef, onPress, onChange, controlledValue}) {
-          const pressListener = usePress({
-            onPress,
-          });
-          return (
-            <Component
-              onChange={onChange}
-              innerRef={el => (input = el)}
-              controlledValue={controlledValue}
-              pressListener={pressListener}
-            />
-          );
-        }
-
-        class ControlledInput extends React.Component {
-          state = {value: 'initial'};
-          onChange = event => this.setState({value: event.target.value});
-          reset = () => {
-            this.setState({value: ''});
-          };
-          render() {
-            ops.push(`render: ${this.state.value}`);
-            const controlledValue =
-              this.state.value === 'changed' ? 'changed [!]' : this.state.value;
-            return (
-              <PressWrapper
-                onPress={this.reset}
-                onChange={this.onChange}
-                innerRef={el => (input = el)}
-                controlledValue={controlledValue}
-              />
-            );
-          }
-        }
-
-        // Initial mount. Test that this is async.
-        root.render(<ControlledInput />);
-        // Should not have flushed yet.
-        expect(ops).toEqual([]);
-        expect(input).toBe(undefined);
-        // Flush callbacks.
-        Scheduler.unstable_flushAll();
-        expect(ops).toEqual(['render: initial']);
-        expect(input.value).toBe('initial');
-
-        ops = [];
-
-        // Trigger a click event
-        input.dispatchEvent(
-          new MouseEvent('mousedown', {bubbles: true, cancelable: true}),
-        );
-        input.dispatchEvent(
-          new MouseEvent('mouseup', {bubbles: true, cancelable: true}),
-        );
-        // Nothing should have changed
-        expect(ops).toEqual([]);
-        expect(input.value).toBe('initial');
-
-        // Flush callbacks.
-        Scheduler.unstable_flushAll();
-        // Now the click update has flushed.
-        expect(ops).toEqual(['render: ']);
-        expect(input.value).toBe('');
-      });
     });
   });