Rewrite SelectEventPlugin-test to test behavior using Public API (#11299)

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

@@ -11,81 +11,81 @@
 
 var React;
 var ReactDOM;
-var ReactDOMComponentTree;
-var ReactTestUtils;
-var SelectEventPlugin;
 
 describe('SelectEventPlugin', () => {
-  function extract(node, topLevelEvent) {
-    return SelectEventPlugin.extractEvents(
-      topLevelEvent,
-      ReactDOMComponentTree.getInstanceFromNode(node),
-      {target: node},
-      node,
-    );
-  }
+  var container;
 
   beforeEach(() => {
     React = require('react');
     ReactDOM = require('react-dom');
-    ReactTestUtils = require('react-dom/test-utils');
-    // TODO: can we express this test with only public API?
-    ReactDOMComponentTree = require('../../client/ReactDOMComponentTree');
-    SelectEventPlugin = require('../SelectEventPlugin').default;
-  });
-
-  it('should skip extraction if no listeners are present', () => {
-    class WithoutSelect extends React.Component {
-      render() {
-        return <input type="text" />;
-      }
-    }
-
-    var rendered = ReactTestUtils.renderIntoDocument(<WithoutSelect />);
-    var node = ReactDOM.findDOMNode(rendered);
-    node.focus();
-
-    // It seems that .focus() isn't triggering this event in our test
-    // environment so we need to ensure it gets set for this test to be valid.
-    var fakeNativeEvent = function() {};
-    fakeNativeEvent.target = node;
-    ReactTestUtils.simulateNativeEventOnNode('topFocus', node, fakeNativeEvent);
 
-    var mousedown = extract(node, 'topMouseDown');
-    expect(mousedown).toBe(null);
-
-    var mouseup = extract(node, 'topMouseUp');
-    expect(mouseup).toBe(null);
+    container = document.createElement('div');
+    document.body.appendChild(container);
   });
 
-  it('should extract if an `onSelect` listener is present', () => {
-    class WithSelect extends React.Component {
-      render() {
-        return <input type="text" onSelect={this.props.onSelect} />;
-      }
-    }
+  afterEach(() => {
+    document.body.removeChild(container);
+    container = null;
+  });
 
-    var cb = jest.fn();
+  it('should verify that `onSelect` fails to fire when no `topMouseUp` has yet occurred to unset the flag', () => {
+    var select = jest.fn();
+    var onSelect = event => select(event.currentTarget);
 
-    var rendered = ReactTestUtils.renderIntoDocument(
-      <WithSelect onSelect={cb} />,
+    var node = ReactDOM.render(
+      <input type="text" onSelect={onSelect} />,
+      container,
     );
-    var node = ReactDOM.findDOMNode(rendered);
-
-    node.selectionStart = 0;
-    node.selectionEnd = 0;
     node.focus();
 
-    var focus = extract(node, 'topFocus');
-    expect(focus).toBe(null);
+    var nativeEvent = new MouseEvent('focus', {
+      bubbles: true,
+      cancelable: true,
+    });
+    node.dispatchEvent(nativeEvent);
+
+    nativeEvent = new MouseEvent('mousedown', {
+      bubbles: true,
+      cancelable: true,
+    });
+    node.dispatchEvent(nativeEvent);
+
+    nativeEvent = new MouseEvent('keyup', {bubbles: true, cancelable: true});
+    node.dispatchEvent(nativeEvent);
+    expect(select.mock.calls.length).toBe(0);
+  });
 
-    var mousedown = extract(node, 'topMouseDown');
-    expect(mousedown).toBe(null);
+  it('should verify that `onSelect` fires when the listener is present', () => {
+    var select = jest.fn();
+    var onSelect = event => {
+      expect(typeof event).toBe('object');
+      expect(event.type).toBe('select');
+      expect(event.target).toBe(node);
+      select(event.currentTarget);
+    };
+
+    var node = ReactDOM.render(
+      <input type="text" onSelect={onSelect} />,
+      container,
+    );
+    node.focus();
 
-    var mouseup = extract(node, 'topMouseUp');
-    expect(mouseup).not.toBe(null);
-    expect(typeof mouseup).toBe('object');
-    expect(mouseup.type).toBe('select');
-    expect(mouseup.target).toBe(node);
+    var nativeEvent = new MouseEvent('focus', {
+      bubbles: true,
+      cancelable: true,
+    });
+    node.dispatchEvent(nativeEvent);
+    expect(select.mock.calls.length).toBe(0);
+
+    nativeEvent = new MouseEvent('mousedown', {
+      bubbles: true,
+      cancelable: true,
+    });
+    node.dispatchEvent(nativeEvent);
+    expect(select.mock.calls.length).toBe(0);
+
+    nativeEvent = new MouseEvent('mouseup', {bubbles: true, cancelable: true});
+    node.dispatchEvent(nativeEvent);
+    expect(select.mock.calls.length).toBe(1);
   });
 });