Add failing event handler test

When we perform an update to the event handler we properly update the
immediate Fiber pointer of a child to be the current. However, when we
bubble events we use the return pointer which is not guaranteed to point
to the current Fiber even if we start from the current.

This manifests itself when we bailout in a parent. So I made the tests
use a PureComponent to illustrate this scenario. There is already a failing
case but I'm adding another one too.
This commit is contained in:
Sebastian Markbage
2016-12-02 19:33:24 -08:00
parent 7169c515aa
commit 910044a41d
3 changed files with 55 additions and 2 deletions
+4
View File
@@ -27,6 +27,10 @@ src/renderers/art/__tests__/ReactART-test.js
src/renderers/dom/__tests__/ReactDOMProduction-test.js
* should throw with an error code in production
src/renderers/dom/shared/__tests__/ReactBrowserEventEmitter-test.js
* should bubble to the right handler after an update
* should invoke handlers that were removed while bubbling
src/renderers/dom/shared/__tests__/ReactDOM-test.js
* throws in render() if the mount callback is not a function
* throws in render() if the update callback is not a function
-1
View File
@@ -561,7 +561,6 @@ src/renderers/dom/shared/__tests__/ReactBrowserEventEmitter-test.js
* should support stopPropagation()
* should stop after first dispatch if stopPropagation
* should not stopPropagation if false is returned
* should invoke handlers that were removed while bubbling
* should not invoke newly inserted handlers while bubbling
* should have mouse enter simulated by test utils
* should infer onTouchTap from a touchStart/End
@@ -75,11 +75,21 @@ describe('ReactBrowserEventEmitter', () => {
var PARENT_PROPS = {};
var CHILD_PROPS = {};
function Child(props) {
return <div ref={(c) => CHILD = c} {...props} />;
}
class ChildWrapper extends React.PureComponent {
render() {
return <Child {...this.props} />;
}
}
function renderTree() {
ReactDOM.render(
<div ref={(c) => GRANDPARENT = c} {...GRANDPARENT_PROPS}>
<div ref={(c) => PARENT = c} {...PARENT_PROPS}>
<div ref={(c) => CHILD = c} {...CHILD_PROPS} />
<ChildWrapper {...CHILD_PROPS} />
</div>
</div>,
container
@@ -193,6 +203,46 @@ describe('ReactBrowserEventEmitter', () => {
expect(idCallOrder[2]).toBe(GRANDPARENT);
});
it('should bubble to the right handler after an update', () => {
putListener(
GRANDPARENT,
ON_CLICK_KEY,
recordID.bind(null, 'GRANDPARENT')
);
putListener(
PARENT,
ON_CLICK_KEY,
recordID.bind(null, 'PARENT')
);
putListener(
CHILD,
ON_CLICK_KEY,
recordID.bind(null, 'CHILD')
);
ReactTestUtils.Simulate.click(CHILD);
expect(idCallOrder).toEqual([
'CHILD',
'PARENT',
'GRANDPARENT',
]);
idCallOrder = [];
// Update just the grand parent without updating the child.
putListener(
GRANDPARENT,
ON_CLICK_KEY,
recordID.bind(null, 'UPDATED_GRANDPARENT')
);
ReactTestUtils.Simulate.click(CHILD);
expect(idCallOrder).toEqual([
'CHILD',
'PARENT',
'UPDATED_GRANDPARENT',
]);
});
it('should continue bubbling if an error is thrown', () => {
putListener(
CHILD,