diff --git a/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js b/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js index 01507133963e3..93c081d8d48c6 100644 --- a/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js +++ b/packages/react-dom/src/__tests__/ReactDOMComponentTree-test.js @@ -12,13 +12,11 @@ describe('ReactDOMComponentTree', () => { let React; let ReactDOM; - let ReactDOMServer; let container; beforeEach(() => { React = require('react'); ReactDOM = require('react-dom'); - ReactDOMServer = require('react-dom/server'); container = document.createElement('div'); document.body.appendChild(container); }); @@ -28,39 +26,41 @@ describe('ReactDOMComponentTree', () => { container = null; }); - it('finds nodes for instances', () => { - // This is a little hard to test directly. But refs rely on it -- so we - // check that we can find a ref at arbitrary points in the tree, even if - // other nodes don't have a ref. + it('finds nodes for instances on events', () => { + const mouseOverID = 'mouseOverID'; + const clickID = 'clickID'; + let currentTargetID = null; + // the current target of an event is set to result of getNodeFromInstance + // when an event is dispatched so we can test behavior by invoking + // events on elements in the tree and confirming the expected node is + // set as the current target class Component extends React.Component { + handler = e => { + currentTargetID = e.currentTarget.id; + }; render() { - var toRef = this.props.toRef; return ( -
-

hello

-

- -

- goodbye. +
+
); } } - function renderAndGetRef(toRef) { - // We need to unmount any React components from previous assertions in - // this test - ReactDOM.unmountComponentAtNode(container); - const elt = ; - container.innerHTML = ReactDOMServer.renderToString(elt); - const inst = ReactDOM.hydrate(elt, container); - return inst.refs.target.nodeName; + function simulateMouseEvent(elem, type) { + const event = new MouseEvent(type, { + bubbles: true, + }); + elem.dispatchEvent(event); } - expect(renderAndGetRef('div')).toBe('DIV'); - expect(renderAndGetRef('h1')).toBe('H1'); - expect(renderAndGetRef('p')).toBe('P'); - expect(renderAndGetRef('input')).toBe('INPUT'); + const component = ; + ReactDOM.render(component, container); + expect(currentTargetID).toBe(null); + simulateMouseEvent(document.getElementById(mouseOverID), 'mouseover'); + expect(currentTargetID).toBe(mouseOverID); + simulateMouseEvent(document.getElementById(clickID), 'click'); + expect(currentTargetID).toBe(clickID); }); it('finds closest instance for node when an event happens', () => { @@ -98,6 +98,48 @@ describe('ReactDOMComponentTree', () => { expect(currentTargetID).toBe(closestInstanceID); }); + it('updates event handlers from fiber props', () => { + let action = ''; + let instance; + const handlerA = () => (action = 'A'); + const handlerB = () => (action = 'B'); + + function simulateMouseOver(target) { + const event = new MouseEvent('mouseover', { + bubbles: true, + }); + target.dispatchEvent(event); + } + + class HandlerFlipper extends React.Component { + state = {flip: false}; + flip() { + this.setState({flip: true}); + } + render() { + return ( +
+ ); + } + } + + ReactDOM.render( + (instance = n)} />, + container, + ); + const node = container.firstChild; + simulateMouseOver(node); + expect(action).toEqual('A'); + action = ''; + // Render with the other event handler. + instance.flip(); + simulateMouseOver(node); + expect(action).toEqual('B'); + }); + it('finds a controlled instance from node and gets its current fiber props', () => { const inputID = 'inputID'; const startValue = undefined;