use public api for SyntheticEvent-test

Author: dleitee

packages/react-dom/src/client/event/__tests__/SyntheticEvent-test.js

@@ -14,114 +14,125 @@ var ReactDOM;
 var ReactTestUtils;
 
 describe('SyntheticEvent', () => {
+  var createEvent;
 
   beforeEach(() => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactTestUtils = require('react-dom/test-utils');
+    createEvent = (eventType, nativeEvent) => {
+      const defaultNativeEvent = {
+        bubbles: true,
+        cancelable: true,
+        ...nativeEvent,
+      };
+      var event = new Event([eventType, defaultNativeEvent]);
+      event.initEvent(
+        eventType,
+        defaultNativeEvent.bubbles,
+        defaultNativeEvent.cancelabl,
+      );
+      return event;
+    };
   });
 
   it('should normalize `target` from the nativeEvent', () => {
+    var click = jest.fn();
     var container = document.createElement('div');
-    var syntheticEventTarget = null;
-    var onClick = function (e) {
-      syntheticEventTarget = e.target
-    }
 
-    class Component extends React.Component {
-      div = null;
-      render() {
-        return (
-          <div ref={element => (this.div = element)} onClick={onClick}>
-          </div>
-        );
-      }
-    }
+    var onClick = e => click(e.target);
+
+    var instance = ReactDOM.render(<div onClick={onClick} />, container);
 
-    var instance = ReactDOM.render(<Component />, container);
-    var nativeEvent = document.createEvent('Event');
-    nativeEvent.initEvent('click', true, true);
     document.body.appendChild(container);
-    instance.div.dispatchEvent(nativeEvent);
-    expect(nativeEvent.target).toBe(syntheticEventTarget)
+
+    var event = createEvent('click', {srcElement: instance});
+    var elem = ReactDOM.findDOMNode(instance);
+    elem.dispatchEvent(event);
+    expect(click).toBeCalledWith(elem);
     document.body.removeChild(container);
   });
 
   it('should be able to `preventDefault`', () => {
+    var click = jest.fn();
     var container = document.createElement('div');
-    var syntheticEvent = null;
-    var onClick = function (e) {
-      e.persist()
-      syntheticEvent = e
-    }
 
-    class Component extends React.Component {
-      div = null;
-      render() {
-        return (
-          <div ref={element => (this.div = element)} onClick={onClick}>
-          </div>
-        );
-      }
-    }
-    var instance = ReactDOM.render(<Component />, container);
-    var nativeEvent = document.createEvent('Event');
-    nativeEvent.initEvent('click', true, true);
+    var onClick = e => {
+      click(e.isDefaultPrevented());
+      e.preventDefault();
+      click(e.isDefaultPrevented());
+    };
+
+    var instance = ReactDOM.render(<div onClick={onClick} />, container);
+
     document.body.appendChild(container);
-    instance.div.dispatchEvent(nativeEvent);
-    expect(syntheticEvent.isDefaultPrevented()).toBe(false);
-    syntheticEvent.preventDefault()
-    expect(syntheticEvent.isDefaultPrevented()).toBe(true);
+
+    var event = createEvent('click', {srcElement: instance});
+    var elem = ReactDOM.findDOMNode(instance);
+    elem.dispatchEvent(event);
+    expect(click.mock.calls[0][0]).toBe(false);
+    expect(click.mock.calls[1][0]).toBe(true);
     document.body.removeChild(container);
   });
 
   it('should be prevented if nativeEvent is prevented', () => {
+    var click = jest.fn();
     var container = document.createElement('div');
 
-    var isClickPrevented = false
-    var onClick = function (e) {
-      isClickPrevented = e.isDefaultPrevented()
-    }
+    var onClick = e => click(e.isDefaultPrevented());
 
-    var isBlurPrevented = false
-    var onBlur = function (e) {
-      isBlurPrevented = e.isDefaultPrevented()
-    }
+    var instance = ReactDOM.render(<div onClick={onClick} />, container);
 
-    class Component extends React.Component {
-      div = null;
-      render() {
-        return (
-          <div ref={element => (this.div = element)} onClick={onClick} onBlur={onBlur}>
-          </div>
-        );
-      }
-    }
+    var elem = ReactDOM.findDOMNode(instance);
+    ReactTestUtils.SimulateNative.click(elem, {defaultPrevented: true});
+    ReactTestUtils.SimulateNative.click(elem, {returnValue: false});
 
-    var instance = ReactDOM.render(<Component />, container);
-    ReactTestUtils.SimulateNative.click(instance.div, {defaultPrevented: true})
-    expect(isClickPrevented).toBe(true);
-    ReactTestUtils.SimulateNative.blur(instance.div, {returnValue: false})
-    expect(isBlurPrevented).toBe(true);
+    expect(click.mock.calls[0][0]).toBe(true);
+    expect(click.mock.calls[1][0]).toBe(true);
   });
 
   it('should be able to `stopPropagation`', () => {
-    var nativeEvent = {};
-    var syntheticEvent = createEvent(nativeEvent);
+    var click = jest.fn();
+    var container = document.createElement('div');
 
-    expect(syntheticEvent.isPropagationStopped()).toBe(false);
-    syntheticEvent.stopPropagation();
-    expect(syntheticEvent.isPropagationStopped()).toBe(true);
+    var onClick = e => {
+      click(e.isPropagationStopped());
+      e.stopPropagation();
+      click(e.isPropagationStopped());
+    };
+
+    var instance = ReactDOM.render(<div onClick={onClick} />, container);
 
-    expect(nativeEvent.cancelBubble).toBe(true);
+    document.body.appendChild(container);
+
+    var event = createEvent('click', {srcElement: instance});
+    var elem = ReactDOM.findDOMNode(instance);
+    elem.dispatchEvent(event);
+    expect(click.mock.calls[0][0]).toBe(false);
+    expect(click.mock.calls[1][0]).toBe(true);
+    document.body.removeChild(container);
   });
 
   it('should be able to `persist`', () => {
-    var syntheticEvent = createEvent({});
+    var click = jest.fn();
+    var container = document.createElement('div');
+
+    var onClick = e => {
+      click(e.isPersistent());
+      e.persist();
+      click(e.isPersistent());
+    };
+
+    var instance = ReactDOM.render(<div onClick={onClick} />, container);
 
-    expect(syntheticEvent.isPersistent()).toBe(false);
-    syntheticEvent.persist();
-    expect(syntheticEvent.isPersistent()).toBe(true);
+    document.body.appendChild(container);
+
+    var event = createEvent('click', {srcElement: instance});
+    var elem = ReactDOM.findDOMNode(instance);
+    elem.dispatchEvent(event);
+    expect(click.mock.calls[0][0]).toBe(false);
+    expect(click.mock.calls[1][0]).toBe(true);
+    document.body.removeChild(container);
   });
 
   it('should be nullified if the synthetic event has called destructor and log warnings', () => {
@@ -190,9 +201,9 @@ describe('SyntheticEvent', () => {
     );
   });
 
-  // TODO: reenable this test. We are currently silencing these warnings when
-  // using TestUtils.Simulate to avoid spurious warnings that result from the
-  // way we simulate events.
+  /* TODO: reenable this test. We are currently silencing these warnings when
+   using TestUtils.Simulate to avoid spurious warnings that result from the
+   way we simulate events. */
   xit(
     'should properly log warnings when events simulated with rendered components',
     () => {