Event API: add more warnings for responder based events (#15597)

Author: trueadm

packages/react-dom/src/events/DOMEventResponderSystem.js

@@ -109,20 +109,37 @@ const eventResponderContext: ReactResponderContext = {
       );
     }
     if (__DEV__) {
-      possibleEventObject.preventDefault = () => {
-        // Update this warning when we have a story around dealing with preventDefault
+      const showWarning = name => {
         warning(
           false,
-          'preventDefault() is no longer available on event objects created from event responder modules.',
+          '%s is not available on event objects created from event responder modules (React Flare).',
+          name,
         );
       };
+      possibleEventObject.preventDefault = () => {
+        showWarning('preventDefault()');
+      };
       possibleEventObject.stopPropagation = () => {
-        // Update this warning when we have a story around dealing with stopPropgation
-        warning(
-          false,
-          'stopPropagation() is no longer available on event objects created from event responder modules.',
-        );
+        showWarning('stopPropagation()');
+      };
+      possibleEventObject.isDefaultPrevented = () => {
+        showWarning('isDefaultPrevented()');
+      };
+      possibleEventObject.isPropagationStopped = () => {
+        showWarning('isPropagationStopped()');
       };
+      // $FlowFixMe: we don't need value, Flow thinks we do
+      Object.defineProperty(possibleEventObject, 'nativeEvent', {
+        get() {
+          showWarning('nativeEvent');
+        },
+      });
+      // $FlowFixMe: we don't need value, Flow thinks we do
+      Object.defineProperty(possibleEventObject, 'defaultPrevented', {
+        get() {
+          showWarning('defaultPrevented');
+        },
+      });
     }
     const eventObject = ((possibleEventObject: any): $Shape<
       PartialEventObject,

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

@@ -889,4 +889,98 @@ describe('DOMEventResponderSystem', () => {
 
     ReactDOM.render(<Test />, container);
   });
+
+  it('the event responder system should warn on accessing invalid properties', () => {
+    const ClickEventComponent = createReactEventComponent(
+      undefined,
+      ['click'],
+      undefined,
+      undefined,
+      undefined,
+      (event, context, props) => {
+        const syntheticEvent = {
+          target: event.target,
+          type: 'click',
+        };
+        context.dispatchEvent(syntheticEvent, props.onClick, {
+          discrete: true,
+        });
+      },
+    );
+
+    let handler;
+    const Test = () => (
+      <ClickEventComponent onClick={handler}>
+        <button>Click me!</button>
+      </ClickEventComponent>
+    );
+    expect(() => {
+      handler = event => {
+        event.preventDefault();
+      };
+      ReactDOM.render(<Test />, container);
+      dispatchClickEvent(document.body);
+    }).toWarnDev(
+      'Warning: preventDefault() is not available on event objects created ' +
+        'from event responder modules (React Flare).',
+      {withoutStack: true},
+    );
+    expect(() => {
+      handler = event => {
+        event.stopPropagation();
+      };
+      ReactDOM.render(<Test />, container);
+      dispatchClickEvent(document.body);
+    }).toWarnDev(
+      'Warning: stopPropagation() is not available on event objects created ' +
+        'from event responder modules (React Flare).',
+      {withoutStack: true},
+    );
+    expect(() => {
+      handler = event => {
+        event.isDefaultPrevented();
+      };
+      ReactDOM.render(<Test />, container);
+      dispatchClickEvent(document.body);
+    }).toWarnDev(
+      'Warning: isDefaultPrevented() is not available on event objects created ' +
+        'from event responder modules (React Flare).',
+      {withoutStack: true},
+    );
+    expect(() => {
+      handler = event => {
+        event.isPropagationStopped();
+      };
+      ReactDOM.render(<Test />, container);
+      dispatchClickEvent(document.body);
+    }).toWarnDev(
+      'Warning: isPropagationStopped() is not available on event objects created ' +
+        'from event responder modules (React Flare).',
+      {withoutStack: true},
+    );
+    expect(() => {
+      handler = event => {
+        return event.nativeEvent;
+      };
+      ReactDOM.render(<Test />, container);
+      dispatchClickEvent(document.body);
+    }).toWarnDev(
+      'Warning: nativeEvent is not available on event objects created ' +
+        'from event responder modules (React Flare).',
+      {withoutStack: true},
+    );
+    expect(() => {
+      handler = event => {
+        return event.defaultPrevented;
+      };
+      ReactDOM.render(<Test />, container);
+      dispatchClickEvent(document.body);
+    }).toWarnDev(
+      'Warning: defaultPrevented is not available on event objects created ' +
+        'from event responder modules (React Flare).',
+      {withoutStack: true},
+    );
+
+    expect(container.innerHTML).toBe('<button>Click me!</button>');
+  });
 });