Rewrite SyntheticWheelEvent-test depending on internal API (#11299)

packages/react-dom/src/events/__tests__/SyntheticWheelEvent-test.js

@@ -9,61 +9,106 @@
 
 'use strict';
 
-var SyntheticWheelEvent;
-
 describe('SyntheticWheelEvent', () => {
-  var createEvent;
+  var React;
+  var ReactDOM;
+  var createMouseEvent;
 
   beforeEach(() => {
-    // TODO: can we express this test with only public API?
-    SyntheticWheelEvent = require('../SyntheticWheelEvent').default;
-
-    createEvent = function(nativeEvent) {
-      var target = require('../getEventTarget').default(nativeEvent);
-      return SyntheticWheelEvent.getPooled({}, '', nativeEvent, target);
+    React = require('react');
+    ReactDOM = require('react-dom');
+    createMouseEvent = (type = '', options = {}) => {
+      const event = document.createEvent('MouseEvent');
+      event.initEvent(type, true, false);
+      return Object.assign(event, options);
     };
   });
 
   it('should normalize properties from the Event interface', () => {
-    var target = document.createElement('div');
-    var syntheticEvent = createEvent({srcElement: target});
+    const container = document.createElement('div');
+    const event = createMouseEvent('', {srcElement: container});
+    container.dispatchEvent(event);
 
-    expect(syntheticEvent.target).toBe(target);
-    expect(syntheticEvent.type).toBe(undefined);
+    expect(event.target).toBe(container);
+    expect(event.type).toBe('');
   });
 
   it('should normalize properties from the MouseEvent interface', () => {
-    expect(createEvent({which: 2, button: 1}).button).toBe(1);
+    const event = new MouseEvent('', {
+      bubbles: true,
+      cancelable: false,
+      which: 2,
+      button: 1,
+    });
+    expect(event.button).toBe(1);
   });
 
   it('should normalize properties from the WheelEvent interface', () => {
-    var standardEvent = createEvent({deltaX: 10, deltaY: -50});
-    expect(standardEvent.deltaX).toBe(10);
-    expect(standardEvent.deltaY).toBe(-50);
+    var events = [];
+    const container = document.createElement('div');
+    var onWheel = event => {
+      event.persist();
+      events.push(event);
+    };
+    const component = ReactDOM.render(<div onWheel={onWheel} />, container);
+    document.body.appendChild(container);
+
+    const node = ReactDOM.findDOMNode(component);
+
+    node.dispatchEvent(createMouseEvent('wheel', {deltaX: 10, deltaY: -50}));
+    expect(events[0].deltaX).toBe(10);
+    expect(events[0].deltaY).toBe(-50);
+
+    node.dispatchEvent(
+      createMouseEvent('wheel', {wheelDeltaX: -10, wheelDeltaY: 50}),
+    );
+    expect(events[1].deltaX).toBe(10);
+    expect(events[1].deltaY).toBe(-50);
 
-    var webkitEvent = createEvent({wheelDeltaX: -10, wheelDeltaY: 50});
-    expect(webkitEvent.deltaX).toBe(10);
-    expect(webkitEvent.deltaY).toBe(-50);
+    document.body.removeChild(container);
   });
 
   it('should be able to `preventDefault` and `stopPropagation`', () => {
-    var nativeEvent = {};
-    var syntheticEvent = createEvent(nativeEvent);
+    var events = [];
+    const container = document.createElement('div');
+    var onWheel = event => {
+      event.persist();
+      events.push(event);
+    };
+    const component = ReactDOM.render(<div onWheel={onWheel} />, container);
+    document.body.appendChild(container);
+
+    const node = ReactDOM.findDOMNode(component);
+
+    node.dispatchEvent(createMouseEvent('wheel'));
+    expect(events[0].isDefaultPrevented()).toBe(false);
+    events[0].preventDefault();
+    expect(events[0].isDefaultPrevented()).toBe(true);
 
-    expect(syntheticEvent.isDefaultPrevented()).toBe(false);
-    syntheticEvent.preventDefault();
-    expect(syntheticEvent.isDefaultPrevented()).toBe(true);
+    node.dispatchEvent(createMouseEvent('wheel'));
+    expect(events[1].isPropagationStopped()).toBe(false);
+    events[1].stopPropagation();
+    expect(events[1].isPropagationStopped()).toBe(true);
 
-    expect(syntheticEvent.isPropagationStopped()).toBe(false);
-    syntheticEvent.stopPropagation();
-    expect(syntheticEvent.isPropagationStopped()).toBe(true);
+    document.body.removeChild(container);
   });
 
   it('should be able to `persist`', () => {
-    var syntheticEvent = createEvent({});
+    var events = [];
+    const container = document.createElement('div');
+    var onWheel = event => {
+      events.push(event);
+    };
+    const component = ReactDOM.render(<div onWheel={onWheel} />, container);
+    document.body.appendChild(container);
+
+    const node = ReactDOM.findDOMNode(component);
+
+    node.dispatchEvent(createMouseEvent('wheel'));
+    expect(events[0].isPersistent()).toBe(false);
+    events[0].persist();
+    expect(events[0].isPersistent()).toBe(true);
 
-    expect(syntheticEvent.isPersistent()).toBe(false);
-    syntheticEvent.persist();
-    expect(syntheticEvent.isPersistent()).toBe(true);
+    document.body.removeChild(container);
   });
 });