{"body":"","commit":{"shortRevision":"0eea16601c","authorEmail":"dan.abramov@gmail.com","revision":"0eea16601cab75dbb698d67220bce5674a13e38a","authorName":"Dan Abramov","authoredAt":"2020-07-29T15:34:57+01:00","subject":"Event propagation test suite (#19483)"},"patch":"diff --git a\/packages\/react-dom\/src\/__tests__\/ReactDOMEventPropagation-test.js b\/packages\/react-dom\/src\/__tests__\/ReactDOMEventPropagation-test.js\nnew file mode 100644\nindex 0000000000..ed524154d6\n--- \/dev\/null\n+++ b\/packages\/react-dom\/src\/__tests__\/ReactDOMEventPropagation-test.js\n@@ -0,0 +1,1327 @@\n+\/**\n+ * Copyright (c) Facebook, Inc. and its affiliates.\n+ *\n+ * This source code is licensed under the MIT license found in the\n+ * LICENSE file in the root directory of this source tree.\n+ *\/\n+\n+'use strict';\n+\n+describe('ReactDOMEventListener', () => {\n+ let React;\n+ let OuterReactDOM;\n+ let InnerReactDOM;\n+ let container;\n+\n+ beforeEach(() => {\n+ jest.resetModules();\n+ React = require('react');\n+ jest.isolateModules(() => {\n+ OuterReactDOM = require('react-dom');\n+ });\n+ jest.isolateModules(() => {\n+ InnerReactDOM = require('react-dom');\n+ });\n+ expect(OuterReactDOM).not.toBe(InnerReactDOM);\n+ });\n+\n+ afterEach(() => {\n+ cleanup();\n+ });\n+\n+ function cleanup() {\n+ if (container) {\n+ OuterReactDOM.unmountComponentAtNode(container);\n+ document.body.removeChild(container);\n+ container = null;\n+ }\n+ }\n+\n+ function render(tree) {\n+ cleanup();\n+ container = document.createElement('div');\n+ document.body.appendChild(container);\n+ OuterReactDOM.render(tree, container);\n+ }\n+\n+ describe('bubbling events', () => {\n+ \/\/ This test will fail in legacy mode (only used in WWW)\n+ \/\/ because we emulate the React 16 behavior where\n+ \/\/ the click handler is attached to the document.\n+ \/\/ @gate !enableLegacyFBSupport\n+ it('onClick', () => {\n+ testNativeBubblingEvent({\n+ type: 'div',\n+ reactEvent: 'onClick',\n+ nativeEvent: 'click',\n+ dispatch(node) {\n+ node.click();\n+ },\n+ });\n+ });\n+\n+ it('onKeyPress', () => {\n+ testNativeBubblingEvent({\n+ type: 'input',\n+ reactEvent: 'onKeyPress',\n+ nativeEvent: 'keypress',\n+ dispatch(node) {\n+ node.dispatchEvent(\n+ new KeyboardEvent('keypress', {\n+ keyCode: 13,\n+ bubbles: true,\n+ cancelable: true,\n+ }),\n+ );\n+ },\n+ });\n+ });\n+\n+ it('onMouseDown', () => {\n+ testNativeBubblingEvent({\n+ type: 'button',\n+ reactEvent: 'onMouseDown',\n+ nativeEvent: 'mousedown',\n+ dispatch(node) {\n+ node.dispatchEvent(\n+ new MouseEvent('mousedown', {\n+ bubbles: true,\n+ cancelable: true,\n+ }),\n+ );\n+ },\n+ });\n+ });\n+\n+ it('onTouchStart', () => {\n+ testNativeBubblingEvent({\n+ type: 'div',\n+ reactEvent: 'onTouchStart',\n+ nativeEvent: 'touchstart',\n+ dispatch(node) {\n+ node.dispatchEvent(\n+ new Event('touchstart', {\n+ bubbles: true,\n+ cancelable: true,\n+ }),\n+ );\n+ },\n+ });\n+ });\n+\n+ it('onWheel', () => {\n+ testNativeBubblingEvent({\n+ type: 'div',\n+ reactEvent: 'onWheel',\n+ nativeEvent: 'wheel',\n+ dispatch(node) {\n+ node.dispatchEvent(\n+ new Event('wheel', {\n+ bubbles: true,\n+ cancelable: true,\n+ }),\n+ );\n+ },\n+ });\n+ });\n+\n+ it('onSubmit', () => {\n+ testNativeBubblingEvent({\n+ type: 'form',\n+ reactEvent: 'onSubmit',\n+ nativeEvent: 'submit',\n+ dispatch(node) {\n+ const e = new Event('submit', {\n+ bubbles: true,\n+ cancelable: true,\n+ });\n+ node.dispatchEvent(e);\n+ },\n+ });\n+ });\n+\n+ it('onReset', () => {\n+ testNativeBubblingEvent({\n+ type: 'form',\n+ reactEvent: 'onReset',\n+ nativeEvent: 'reset',\n+ dispatch(node) {\n+ const e = new Event('reset', {\n+ bubbles: true,\n+ cancelable: true,\n+ });\n+ node.dispatchEvent(e);\n+ },\n+ });\n+ });\n+\n+ it('onFocus', () => {\n+ testNativeBubblingEvent({\n+ type: 'input',\n+ reactEvent: 'onFocus',\n+ nativeEvent: 'focusin',\n+ dispatch(node) {\n+ const e = new Event('focusin', {\n+ bubbles: true,\n+ cancelable: true,\n+ });\n+ node.dispatchEvent(e);\n+ },\n+ });\n+ });\n+\n+ it('onBlur', () => {\n+ testNativeBubblingEvent({\n+ type: 'input',\n+ reactEvent: 'onBlur',\n+ nativeEvent: 'focusout',\n+ dispatch(node) {\n+ const e = new Event('focusout', {\n+ bubbles: true,\n+ cancelable: true,\n+ });\n+ node.dispatchEvent(e);\n+ },\n+ });\n+ });\n+ });\n+\n+ describe('non-bubbling events that bubble in React', () => {\n+ it('onInvalid', () => {\n+ testEmulatedBubblingEvent({\n+ type: 'input',\n+ reactEvent: 'onInvalid',\n+ nativeEvent: 'invalid',\n+ dispatch(node) {\n+ const e = new Event('invalid', {\n+ bubbles: false,\n+ cancelable: true,\n+ });\n+ node.dispatchEvent(e);\n+ },\n+ });\n+ });\n+\n+ it('onLoad', () => {\n+ testEmulatedBubblingEvent({\n+ type: 'img',\n+ reactEvent: 'onLoad',\n+ nativeEvent: 'load',\n+ dispatch(node) {\n+ const e = new Event('load', {\n+ bubbles: false,\n+ cancelable: true,\n+ });\n+ node.dispatchEvent(e);\n+ },\n+ });\n+ });\n+\n+ it('onError', () => {\n+ testEmulatedBubblingEvent({\n+ type: 'img',\n+ reactEvent: 'onError',\n+ nativeEvent: 'error',\n+ dispatch(node) {\n+ const e = new Event('error', {\n+ bubbles: false,\n+ cancelable: true,\n+ });\n+ node.dispatchEvent(e);\n+ },\n+ });\n+ });\n+\n+ it('onClose', () => {\n+ testEmulatedBubblingEvent({\n+ type: 'dialog',\n+ reactEvent: 'onClose',\n+ nativeEvent: 'close',\n+ dispatch(node) {\n+ const e = new Event('close', {\n+ bubbles: false,\n+ cancelable: true,\n+ });\n+ node.dispatchEvent(e);\n+ },\n+ });\n+ });\n+\n+ it('onCancel', () => {\n+ testEmulatedBubblingEvent({\n+ type: 'dialog',\n+ reactEvent: 'onCancel',\n+ nativeEvent: 'cancel',\n+ dispatch(node) {\n+ const e = new Event('cancel', {\n+ bubbles: false,\n+ cancelable: true,\n+ });\n+ node.dispatchEvent(e);\n+ },\n+ });\n+ });\n+\n+ it('onPlay', () => {\n+ testEmulatedBubblingEvent({\n+ type: 'video',\n+ reactEvent: 'onPlay',\n+ nativeEvent: 'play',\n+ dispatch(node) {\n+ const e = new Event('play', {\n+ bubbles: false,\n+ cancelable: true,\n+ });\n+ node.dispatchEvent(e);\n+ },\n+ });\n+ });\n+ });\n+\n+ describe('non-bubbling events that do not bubble in React', () => {\n+ \/\/ This test will fail outside of the no-bubbling flag\n+ \/\/ because its bubbling emulation is currently broken.\n+ \/\/ In particular, if the target itself doesn't have\n+ \/\/ a handler, it will not emulate bubbling correctly.\n+ \/\/ Instead of fixing this, we'll just turn this flag on.\n+ \/\/ @gate disableOnScrollBubbling\n+ it('onScroll', () => {\n+ testNonBubblingEvent({\n+ type: 'div',\n+ reactEvent: 'onScroll',\n+ nativeEvent: 'scroll',\n+ dispatch(node) {\n+ const e = new Event('scroll', {\n+ bubbles: false,\n+ cancelable: true,\n+ });\n+ node.dispatchEvent(e);\n+ },\n+ });\n+ });\n+ });\n+\n+ \/\/ Events that bubble in React and in the browser.\n+ \/\/ React delegates them to the root.\n+ function testNativeBubblingEvent(config) {\n+ testNativeBubblingEventWithTargetListener(config);\n+ testNativeBubblingEventWithoutTargetListener(config);\n+ testReactStopPropagationInOuterCapturePhase(config);\n+ testReactStopPropagationInInnerCapturePhase(config);\n+ testReactStopPropagationInInnerBubblePhase(config);\n+ testReactStopPropagationInOuterBubblePhase(config);\n+ testNativeStopPropagationInOuterCapturePhase(config);\n+ testNativeStopPropagationInInnerCapturePhase(config);\n+ testNativeStopPropagationInInnerBubblePhase(config);\n+ testNativeStopPropagationInOuterBubblePhase(config);\n+ }\n+\n+ \/\/ Events that bubble in React but not in the browser.\n+ \/\/ React attaches them to the elements.\n+ function testEmulatedBubblingEvent(config) {\n+ testEmulatedBubblingEventWithTargetListener(config);\n+ testEmulatedBubblingEventWithoutTargetListener(config);\n+ testReactStopPropagationInOuterCapturePhase(config);\n+ testReactStopPropagationInInnerCapturePhase(config);\n+ testReactStopPropagationInInnerBubblePhase(config);\n+ testNativeStopPropagationInOuterCapturePhase(config);\n+ testNativeStopPropagationInInnerCapturePhase(config);\n+ testNativeStopPropagationInInnerEmulatedBubblePhase(config);\n+ }\n+\n+ \/\/ Events that don't bubble either in React or in the browser.\n+ function testNonBubblingEvent(config) {\n+ testNonBubblingEventWithTargetListener(config);\n+ testNonBubblingEventWithoutTargetListener(config);\n+ testReactStopPropagationInOuterCapturePhase(config);\n+ testReactStopPropagationInInnerCapturePhase(config);\n+ testReactStopPropagationInInnerBubblePhase(config);\n+ testNativeStopPropagationInOuterCapturePhase(config);\n+ testNativeStopPropagationInInnerCapturePhase(config);\n+ }\n+\n+ function testNativeBubblingEventWithTargetListener(eventConfig) {\n+ const log = [];\n+ const targetRef = React.createRef();\n+ render(\n+ {\n+ log.push('---- inner');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('---- inner capture');\n+ },\n+ }}\n+ parentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('--- inner parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('--- inner parent capture');\n+ },\n+ }}\n+ outerProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('-- outer');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('-- outer capture');\n+ },\n+ }}\n+ outerParentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('- outer parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('- outer parent capture');\n+ },\n+ }}\n+ \/>,\n+ );\n+ expect(log.length).toBe(0);\n+ eventConfig.dispatch(targetRef.current);\n+ \/\/ Should print all listeners.\n+ expect(log).toEqual(unindent`\n+ - outer parent capture\n+ -- outer capture\n+ --- inner parent capture\n+ ---- inner capture\n+ ---- inner\n+ --- inner parent\n+ -- outer\n+ - outer parent\n+ `);\n+ }\n+\n+ function testEmulatedBubblingEventWithTargetListener(eventConfig) {\n+ const log = [];\n+ const targetRef = React.createRef();\n+ render(\n+ {\n+ log.push('---- inner');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('---- inner capture');\n+ },\n+ }}\n+ parentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('--- inner parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('--- inner parent capture');\n+ },\n+ }}\n+ outerProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('-- outer');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('-- outer capture');\n+ },\n+ }}\n+ outerParentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('- outer parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('- outer parent capture');\n+ },\n+ }}\n+ \/>,\n+ );\n+ expect(log.length).toBe(0);\n+ eventConfig.dispatch(targetRef.current);\n+ \/\/ This event doesn't bubble natively, but React emulates it.\n+ \/\/ Since the element is created by the inner React, the bubbling\n+ \/\/ stops at the inner parent and never reaches the outer React.\n+ \/\/ In the future, we might consider not bubbling these events\n+ \/\/ at all, in in which case inner parent also wouldn't be logged.\n+ expect(log).toEqual(unindent`\n+ - outer parent capture\n+ -- outer capture\n+ --- inner parent capture\n+ ---- inner capture\n+ ---- inner\n+ --- inner parent\n+ `);\n+ }\n+\n+ function testNonBubblingEventWithTargetListener(eventConfig) {\n+ const log = [];\n+ const targetRef = React.createRef();\n+ render(\n+ {\n+ log.push('---- inner');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('---- inner capture');\n+ },\n+ }}\n+ parentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('--- inner parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('--- inner parent capture');\n+ },\n+ }}\n+ outerProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('-- outer');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('-- outer capture');\n+ },\n+ }}\n+ outerParentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('- outer parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('- outer parent capture');\n+ },\n+ }}\n+ \/>,\n+ );\n+ expect(log.length).toBe(0);\n+ eventConfig.dispatch(targetRef.current);\n+ \/\/ This event doesn't bubble natively, and React is\n+ \/\/ not emulating it either. So it only reaches the\n+ \/\/ target and stops there.\n+ expect(log).toEqual(unindent`\n+ - outer parent capture\n+ -- outer capture\n+ --- inner parent capture\n+ ---- inner capture\n+ ---- inner\n+ `);\n+ }\n+\n+ function testNativeBubblingEventWithoutTargetListener(eventConfig) {\n+ const log = [];\n+ const targetRef = React.createRef();\n+ render(\n+ {\n+ log.push('--- inner parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('--- inner parent capture');\n+ },\n+ }}\n+ outerProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('-- outer');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('-- outer capture');\n+ },\n+ }}\n+ outerParentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('- outer parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('- outer parent capture');\n+ },\n+ }}\n+ \/>,\n+ );\n+ expect(log.length).toBe(0);\n+ eventConfig.dispatch(targetRef.current);\n+ \/\/ Should print all listeners except the innermost one.\n+ expect(log).toEqual(unindent`\n+ - outer parent capture\n+ -- outer capture\n+ --- inner parent capture\n+ --- inner parent\n+ -- outer\n+ - outer parent\n+ `);\n+ }\n+\n+ function testEmulatedBubblingEventWithoutTargetListener(eventConfig) {\n+ const log = [];\n+ const targetRef = React.createRef();\n+ render(\n+ {\n+ log.push('--- inner parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('--- inner parent capture');\n+ },\n+ }}\n+ outerProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('-- outer');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('-- outer capture');\n+ },\n+ }}\n+ outerParentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('- outer parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('- outer parent capture');\n+ },\n+ }}\n+ \/>,\n+ );\n+ expect(log.length).toBe(0);\n+ eventConfig.dispatch(targetRef.current);\n+ \/\/ This event doesn't bubble natively, but React emulates it.\n+ \/\/ Since the element is created by the inner React, the bubbling\n+ \/\/ stops at the inner parent and never reaches the outer React.\n+ \/\/ In the future, we might consider not bubbling these events\n+ \/\/ at all, in in which case inner parent also wouldn't be logged.\n+ expect(log).toEqual(unindent`\n+ - outer parent capture\n+ -- outer capture\n+ --- inner parent capture\n+ --- inner parent\n+ `);\n+ }\n+\n+ function testNonBubblingEventWithoutTargetListener(eventConfig) {\n+ const log = [];\n+ const targetRef = React.createRef();\n+ render(\n+ {\n+ log.push('--- inner parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('--- inner parent capture');\n+ },\n+ }}\n+ outerProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('-- outer');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('-- outer capture');\n+ },\n+ }}\n+ outerParentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('- outer parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('- outer parent capture');\n+ },\n+ }}\n+ \/>,\n+ );\n+ expect(log.length).toBe(0);\n+ eventConfig.dispatch(targetRef.current);\n+ \/\/ This event doesn't bubble native, and React doesn't\n+ \/\/ emulate bubbling either. Since we don't have a target\n+ \/\/ listener, only capture phase listeners fire.\n+ expect(log).toEqual(unindent`\n+ - outer parent capture\n+ -- outer capture\n+ --- inner parent capture\n+ `);\n+ }\n+\n+ function testReactStopPropagationInOuterCapturePhase(eventConfig) {\n+ const log = [];\n+ const targetRef = React.createRef();\n+ render(\n+ {\n+ targetRef.current = node;\n+ if (node) {\n+ \/\/ No cleanup, assume we render once.\n+ node.addEventListener(eventConfig.nativeEvent, e => {\n+ \/\/ We *don't* expect this to appear in the log\n+ \/\/ at all because the event is stopped earlier.\n+ log.push('---- inner (native)');\n+ });\n+ }\n+ }}\n+ targetProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('---- inner');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('---- inner capture');\n+ },\n+ }}\n+ parentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('--- inner parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('--- inner parent capture');\n+ },\n+ }}\n+ outerProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('-- outer');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ e.stopPropagation(); \/\/ <---------\n+ log.push('-- outer capture');\n+ },\n+ }}\n+ outerParentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('- outer parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('- outer parent capture');\n+ },\n+ }}\n+ \/>,\n+ );\n+ expect(log.length).toBe(0);\n+ eventConfig.dispatch(targetRef.current);\n+ \/\/ Should stop at the outer capture.\n+ \/\/ We don't get to the inner root at all.\n+ expect(log).toEqual(unindent`\n+ - outer parent capture\n+ -- outer capture\n+ `);\n+ }\n+\n+ function testReactStopPropagationInInnerCapturePhase(eventConfig) {\n+ const log = [];\n+ const targetRef = React.createRef();\n+ render(\n+ {\n+ targetRef.current = node;\n+ if (node) {\n+ \/\/ No cleanup, assume we render once.\n+ node.addEventListener(eventConfig.nativeEvent, e => {\n+ \/\/ We *don't* expect this to appear in the log\n+ \/\/ at all because the event is stopped earlier.\n+ log.push('---- inner (native)');\n+ });\n+ }\n+ }}\n+ targetProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('---- inner');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('---- inner capture');\n+ },\n+ }}\n+ parentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('--- inner parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ e.stopPropagation(); \/\/ <---------\n+ log.push('--- inner parent capture');\n+ },\n+ }}\n+ outerProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('-- outer');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('-- outer capture');\n+ },\n+ }}\n+ outerParentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('- outer parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('- outer parent capture');\n+ },\n+ }}\n+ \/>,\n+ );\n+ expect(log.length).toBe(0);\n+ eventConfig.dispatch(targetRef.current);\n+ \/\/ We get to the inner root, but we don't\n+ \/\/ get to the target and we don't bubble.\n+ expect(log).toEqual(unindent`\n+ - outer parent capture\n+ -- outer capture\n+ --- inner parent capture\n+ `);\n+ }\n+\n+ function testReactStopPropagationInInnerBubblePhase(eventConfig) {\n+ const log = [];\n+ const targetRef = React.createRef();\n+ render(\n+ {\n+ e.stopPropagation(); \/\/ <---------\n+ log.push('---- inner');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('---- inner capture');\n+ },\n+ }}\n+ parentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('--- inner parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('--- inner parent capture');\n+ },\n+ }}\n+ outerRef={node => {\n+ if (node) {\n+ \/\/ No cleanup, assume we render once.\n+ node.addEventListener(eventConfig.nativeEvent, e => {\n+ \/\/ We *don't* expect this to appear in the log\n+ \/\/ at all because the event is stopped earlier.\n+ log.push('-- outer (native)');\n+ });\n+ }\n+ }}\n+ outerProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('-- outer');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('-- outer capture');\n+ },\n+ }}\n+ outerParentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('- outer parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('- outer parent capture');\n+ },\n+ }}\n+ \/>,\n+ );\n+ expect(log.length).toBe(0);\n+ eventConfig.dispatch(targetRef.current);\n+ \/\/ Should stop at the target and not go further.\n+ expect(log).toEqual(unindent`\n+ - outer parent capture\n+ -- outer capture\n+ --- inner parent capture\n+ ---- inner capture\n+ ---- inner\n+ `);\n+ }\n+\n+ function testReactStopPropagationInOuterBubblePhase(eventConfig) {\n+ const log = [];\n+ const targetRef = React.createRef();\n+ render(\n+ {\n+ log.push('---- inner');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('---- inner capture');\n+ },\n+ }}\n+ parentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('--- inner parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('--- inner parent capture');\n+ },\n+ }}\n+ outerProps={{\n+ [eventConfig.reactEvent]: e => {\n+ e.stopPropagation(); \/\/ <---------\n+ log.push('-- outer');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('-- outer capture');\n+ },\n+ }}\n+ outerParentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('- outer parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('- outer parent capture');\n+ },\n+ }}\n+ \/>,\n+ );\n+ expect(log.length).toBe(0);\n+ eventConfig.dispatch(targetRef.current);\n+ \/\/ Should not reach the parent outer bubble handler.\n+ expect(log).toEqual(unindent`\n+ - outer parent capture\n+ -- outer capture\n+ --- inner parent capture\n+ ---- inner capture\n+ ---- inner\n+ --- inner parent\n+ -- outer\n+ `);\n+ }\n+\n+ function testNativeStopPropagationInOuterCapturePhase(eventConfig) {\n+ const log = [];\n+ const targetRef = React.createRef();\n+ render(\n+ {\n+ log.push('---- inner');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('---- inner capture');\n+ },\n+ }}\n+ parentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('--- inner parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('--- inner parent capture');\n+ },\n+ }}\n+ outerProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('-- outer');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('-- outer capture');\n+ },\n+ }}\n+ outerParentRef={node => {\n+ if (node) {\n+ \/\/ No cleanup, assume we render once.\n+ node.addEventListener(\n+ eventConfig.nativeEvent,\n+ e => {\n+ log.push('- outer parent capture (native)');\n+ e.stopPropagation(); \/\/ <---------\n+ },\n+ {capture: true},\n+ );\n+ }\n+ }}\n+ outerParentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('- outer parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('- outer parent capture');\n+ },\n+ }}\n+ \/>,\n+ );\n+ expect(log.length).toBe(0);\n+ eventConfig.dispatch(targetRef.current);\n+ \/\/ The outer root has already received the event,\n+ \/\/ so the capture phrase runs for it. But the inner\n+ \/\/ root is prevented from receiving it by the native\n+ \/\/ handler in the outer native capture phase.\n+ expect(log).toEqual(unindent`\n+ - outer parent capture\n+ -- outer capture\n+ - outer parent capture (native)\n+ `);\n+ }\n+\n+ function testNativeStopPropagationInInnerCapturePhase(eventConfig) {\n+ const log = [];\n+ const targetRef = React.createRef();\n+ render(\n+ {\n+ log.push('---- inner');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('---- inner capture');\n+ },\n+ }}\n+ parentRef={node => {\n+ if (node) {\n+ \/\/ No cleanup, assume we render once.\n+ node.addEventListener(\n+ eventConfig.nativeEvent,\n+ e => {\n+ log.push('--- inner parent capture (native)');\n+ e.stopPropagation(); \/\/ <---------\n+ },\n+ {capture: true},\n+ );\n+ }\n+ }}\n+ parentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('--- inner parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('--- inner parent capture');\n+ },\n+ }}\n+ outerProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('-- outer');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('-- outer capture');\n+ },\n+ }}\n+ outerParentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('- outer parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('- outer parent capture');\n+ },\n+ }}\n+ \/>,\n+ );\n+ expect(log.length).toBe(0);\n+ eventConfig.dispatch(targetRef.current);\n+ \/\/ The inner root has already received the event, so\n+ \/\/ all React capture phase listeners should run.\n+ \/\/ But then the native handler stops propagation\n+ \/\/ so none of the bubbling React handlers would run.\n+ expect(log).toEqual(unindent`\n+ - outer parent capture\n+ -- outer capture\n+ --- inner parent capture\n+ ---- inner capture\n+ --- inner parent capture (native)\n+ `);\n+ }\n+\n+ function testNativeStopPropagationInInnerBubblePhase(eventConfig) {\n+ const log = [];\n+ const targetRef = React.createRef();\n+ render(\n+ {\n+ targetRef.current = node;\n+ if (node) {\n+ \/\/ No cleanup, assume we render once.\n+ node.addEventListener(eventConfig.nativeEvent, e => {\n+ log.push('---- inner (native)');\n+ e.stopPropagation(); \/\/ <---------\n+ });\n+ }\n+ }}\n+ targetProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('---- inner');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('---- inner capture');\n+ },\n+ }}\n+ parentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('--- inner parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('--- inner parent capture');\n+ },\n+ }}\n+ outerProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('-- outer');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('-- outer capture');\n+ },\n+ }}\n+ outerParentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('- outer parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('- outer parent capture');\n+ },\n+ }}\n+ \/>,\n+ );\n+ expect(log.length).toBe(0);\n+ eventConfig.dispatch(targetRef.current);\n+ \/\/ The capture phase is entirely unaffected.\n+ \/\/ Then, we get into the bubble phase.\n+ \/\/ We start with the native innermost handler.\n+ \/\/ It stops propagation, so nothing else happens.\n+ expect(log).toEqual(unindent`\n+ - outer parent capture\n+ -- outer capture\n+ --- inner parent capture\n+ ---- inner capture\n+ ---- inner (native)\n+ `);\n+ }\n+\n+ function testNativeStopPropagationInInnerEmulatedBubblePhase(eventConfig) {\n+ const log = [];\n+ const targetRef = React.createRef();\n+ render(\n+ {\n+ targetRef.current = node;\n+ if (node) {\n+ \/\/ No cleanup, assume we render once.\n+ node.addEventListener(eventConfig.nativeEvent, e => {\n+ log.push('---- inner (native)');\n+ e.stopPropagation(); \/\/ <---------\n+ });\n+ }\n+ }}\n+ targetProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('---- inner');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('---- inner capture');\n+ },\n+ }}\n+ parentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('--- inner parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('--- inner parent capture');\n+ },\n+ }}\n+ outerProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('-- outer');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('-- outer capture');\n+ },\n+ }}\n+ outerParentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('- outer parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('- outer parent capture');\n+ },\n+ }}\n+ \/>,\n+ );\n+ expect(log.length).toBe(0);\n+ eventConfig.dispatch(targetRef.current);\n+ \/\/ This event does not natively bubble, so React\n+ \/\/ attaches the listener directly to the element.\n+ \/\/ As a result, by the time our custom native listener\n+ \/\/ fires, it is too late to do anything -- the React\n+ \/\/ emulated bubbilng has already happened.\n+ expect(log).toEqual(unindent`\n+ - outer parent capture\n+ -- outer capture\n+ --- inner parent capture\n+ ---- inner capture\n+ ---- inner\n+ --- inner parent\n+ ---- inner (native)\n+ `);\n+ }\n+\n+ function testNativeStopPropagationInOuterBubblePhase(eventConfig) {\n+ const log = [];\n+ const targetRef = React.createRef();\n+ render(\n+ {\n+ log.push('---- inner');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('---- inner capture');\n+ },\n+ }}\n+ parentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('--- inner parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('--- inner parent capture');\n+ },\n+ }}\n+ outerRef={node => {\n+ if (node) {\n+ \/\/ No cleanup, assume we render once.\n+ node.addEventListener(eventConfig.nativeEvent, e => {\n+ log.push('-- outer (native)');\n+ e.stopPropagation(); \/\/ <---------\n+ });\n+ }\n+ }}\n+ outerProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('-- outer');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('-- outer capture');\n+ },\n+ }}\n+ outerParentProps={{\n+ [eventConfig.reactEvent]: e => {\n+ log.push('- outer parent');\n+ },\n+ [eventConfig.reactEvent + 'Capture']: e => {\n+ log.push('- outer parent capture');\n+ },\n+ }}\n+ \/>,\n+ );\n+ expect(log.length).toBe(0);\n+ eventConfig.dispatch(targetRef.current);\n+ \/\/ The event bubbles upwards through the inner tree.\n+ \/\/ Then it reaches the native handler which stops propagation.\n+ \/\/ As a result, it never reaches the outer React root,\n+ \/\/ and thus the outer React event handlers don't fire.\n+ expect(log).toEqual(unindent`\n+ - outer parent capture\n+ -- outer capture\n+ --- inner parent capture\n+ ---- inner capture\n+ ---- inner\n+ --- inner parent\n+ -- outer (native)\n+ `);\n+ }\n+\n+ function Fixture({\n+ type,\n+ targetRef,\n+ targetProps,\n+ parentRef,\n+ parentProps,\n+ outerRef,\n+ outerProps,\n+ outerParentRef,\n+ outerParentProps,\n+ }) {\n+ const inner = React.useMemo(\n+ () => (\n+ \n+ ),\n+ [type, targetRef, targetProps, parentProps],\n+ );\n+ return (\n+ \n+ {inner}<\/NestedReact>\n+ <\/Outer>\n+ );\n+ }\n+\n+ function NestedReact({children}) {\n+ const ref = React.useRef();\n+ React.useLayoutEffect(() => {\n+ const parent = ref.current;\n+ const innerContainer = document.createElement('div');\n+ parent.appendChild(innerContainer);\n+ InnerReactDOM.render(children, innerContainer);\n+ return () => {\n+ InnerReactDOM.unmountComponentAtNode(innerContainer);\n+ parent.removeChild(innerContainer);\n+ };\n+ }, [children, ref]);\n+ return

;\n+ }\n+\n+ function Inner({type, targetRef, targetProps, parentRef, parentProps}) {\n+ const T = type;\n+ return (\n+

\n+ \n+ <\/div>\n+ );\n+ }\n+\n+ function Outer({\n+ outerRef,\n+ outerProps,\n+ outerParentProps,\n+ outerParentRef,\n+ children,\n+ }) {\n+ return (\n+

\n+

\n+ {children}\n+ <\/div>\n+ <\/div>\n+ );\n+ }\n+\n+ function unindent(str) {\n+ return str[0]\n+ .split('\\n')\n+ .map(s => s.trim())\n+ .filter(s => s !== '');\n+ }\n+});\n","files":[{"path":"packages\/react-dom\/src\/__tests__\/ReactDOMEventPropagation-test.js","status":"A"}],"parents":["5227a37868c4bf3133ba5f2b3b39cac9175d7ea9"]}

dillon1000/react

Files changed