Add test case to cover proper capture/bubble order

facebook · Jun 6, 2018 · fec5dd3 · fec5dd3
1 parent 3b74469
commit fec5dd3
Showing 1 changed file with 70 additions and 27 deletions.
diff --git a/packages/react-dom/src/__tests__/ReactDOMComponent-test.js b/packages/react-dom/src/__tests__/ReactDOMComponent-test.js
@@ -965,33 +965,6 @@ describe('ReactDOMComponent', () => {
       };
     });
 
-    it('should work error event on <source> element', () => {
-      const onError = jest.fn();
-      const container = document.createElement('div');
-      ReactDOM.render(
-        <video>
-          <source
-            src="http://example.org/video"
-            type="video/mp4"
-            onError={onError}
-          />
-        </video>,
-        container,
-      );
-
-      try {
-        document.body.appendChild(container);
-
-        const errorEvent = document.createEvent('Event');
-        errorEvent.initEvent('error', false, false);
-        container.getElementsByTagName('source')[0].dispatchEvent(errorEvent);
-
-        expect(onError).toHaveBeenCalledTimes(1);
-      } finally {
-        container.remove();
-      }
-    });
-
     it('should not duplicate uppercased selfclosing tags', () => {
       class Container extends React.Component {
         render() {
@@ -2443,4 +2416,74 @@ describe('ReactDOMComponent', () => {
       expect(node.getAttribute('onx')).toBe('bar');
     });
   });
+
+  describe('when dispatching events', () => {
+    it('should receive error events on <source> elements', () => {
+      const onError = jest.fn();
+      const container = document.createElement('div');
+
+      ReactDOM.render(
+        <video>
+          <source
+            src="http://example.org/video"
+            type="video/mp4"
+            onError={onError}
+          />
+        </video>,
+        container,
+      );
+
+      try {
+        document.body.appendChild(container);
+
+        const errorEvent = document.createEvent('Event');
+        errorEvent.initEvent('error', false, false);
+        container.getElementsByTagName('source')[0].dispatchEvent(errorEvent);
+
+        expect(onError).toHaveBeenCalledTimes(1);
+      } finally {
+        container.remove();
+      }
+    });
+
+    it('receives events in the correct order', () => {
+      let eventOrder = [];
+      let track = tag => () => eventOrder.push(tag);
+
+      class TestCase extends React.Component {
+        componentDidMount() {
+          document.addEventListener('click', track('document bubble'));
+          document.addEventListener('click', track('document capture'), true);
+        }
+        render() {
+          return (
+            <div
+              onClick={track('element bubble')}
+              onClickCapture={track('element capture')}
+            />
+          );
+        }
+      }
+
+      const container = document.createElement('div');
+      ReactDOM.render(<TestCase />, container);
+
+      try {
+        document.body.appendChild(container);
+
+        const errorEvent = document.createEvent('Event');
+        errorEvent.initEvent('click', true, true);
+        container.querySelector('div').dispatchEvent(errorEvent);
+
+        expect(eventOrder).toEqual([
+          'document capture',
+          'element capture',
+          'element bubble',
+          'document bubble',
+        ]);
+      } finally {
+        container.remove();
+      }
+    });
+  });
 });