Skip to content

Commit

Permalink
(Temporarily) revert unmounting error boundaries changes (#20147)
Browse files Browse the repository at this point in the history 
This reverts commits bcca5a6 and ffb749c, although neither revert cleanly since methods have been moved between the work-loop and commit-work files. This commit is a mostly manual effort of undoing the changes.
  • Loading branch information
Brian Vaughn authored Nov 9, 2020
1 parent fc06cf8 commit 7a73d6a
Show file tree
Hide file tree
Showing 17 changed files with 100 additions and 931 deletions.
171 changes: 0 additions & 171 deletions packages/react-dom/src/__tests__/ReactErrorBoundaries-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2473,175 +2473,4 @@ describe('ReactErrorBoundaries', () => {
'Caught an error: gotta catch em all.',
);
});

// @gate skipUnmountedBoundaries
it('catches errors thrown in componentWillUnmount', () => {
class LocalErrorBoundary extends React.Component {
state = {error: null};
static getDerivedStateFromError(error) {
Scheduler.unstable_yieldValue(
`ErrorBoundary static getDerivedStateFromError`,
);
return {error};
}
render() {
const {children, id, fallbackID} = this.props;
const {error} = this.state;
if (error) {
Scheduler.unstable_yieldValue(`${id} render error`);
return <Component id={fallbackID} />;
}
Scheduler.unstable_yieldValue(`${id} render success`);
return children || null;
}
}

class Component extends React.Component {
render() {
const {id} = this.props;
Scheduler.unstable_yieldValue('Component render ' + id);
return id;
}
}

class LocalBrokenComponentWillUnmount extends React.Component {
componentWillUnmount() {
Scheduler.unstable_yieldValue(
'BrokenComponentWillUnmount componentWillUnmount',
);
throw Error('Expected');
}

render() {
Scheduler.unstable_yieldValue('BrokenComponentWillUnmount render');
return 'broken';
}
}

const container = document.createElement('div');

ReactDOM.render(
<LocalErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
<Component id="sibling" />
<LocalErrorBoundary id="InnerBoundary" fallbackID="InnerFallback">
<LocalBrokenComponentWillUnmount />
</LocalErrorBoundary>
</LocalErrorBoundary>,
container,
);

expect(container.firstChild.textContent).toBe('sibling');
expect(container.lastChild.textContent).toBe('broken');
expect(Scheduler).toHaveYielded([
'OuterBoundary render success',
'Component render sibling',
'InnerBoundary render success',
'BrokenComponentWillUnmount render',
]);

ReactDOM.render(
<LocalErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
<Component id="sibling" />
</LocalErrorBoundary>,
container,
);

// React should skip over the unmounting boundary and find the nearest still-mounted boundary.
expect(container.firstChild.textContent).toBe('OuterFallback');
expect(container.lastChild.textContent).toBe('OuterFallback');
expect(Scheduler).toHaveYielded([
'OuterBoundary render success',
'Component render sibling',
'BrokenComponentWillUnmount componentWillUnmount',
'ErrorBoundary static getDerivedStateFromError',
'OuterBoundary render error',
'Component render OuterFallback',
]);
});

// @gate skipUnmountedBoundaries
it('catches errors thrown while detaching refs', () => {
class LocalErrorBoundary extends React.Component {
state = {error: null};
static getDerivedStateFromError(error) {
Scheduler.unstable_yieldValue(
`ErrorBoundary static getDerivedStateFromError`,
);
return {error};
}
render() {
const {children, id, fallbackID} = this.props;
const {error} = this.state;
if (error) {
Scheduler.unstable_yieldValue(`${id} render error`);
return <Component id={fallbackID} />;
}
Scheduler.unstable_yieldValue(`${id} render success`);
return children || null;
}
}

class Component extends React.Component {
render() {
const {id} = this.props;
Scheduler.unstable_yieldValue('Component render ' + id);
return id;
}
}

class LocalBrokenCallbackRef extends React.Component {
_ref = ref => {
Scheduler.unstable_yieldValue('LocalBrokenCallbackRef ref ' + !!ref);
if (ref === null) {
throw Error('Expected');
}
};

render() {
Scheduler.unstable_yieldValue('LocalBrokenCallbackRef render');
return <div ref={this._ref}>ref</div>;
}
}

const container = document.createElement('div');

ReactDOM.render(
<LocalErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
<Component id="sibling" />
<LocalErrorBoundary id="InnerBoundary" fallbackID="InnerFallback">
<LocalBrokenCallbackRef />
</LocalErrorBoundary>
</LocalErrorBoundary>,
container,
);

expect(container.firstChild.textContent).toBe('sibling');
expect(container.lastChild.textContent).toBe('ref');
expect(Scheduler).toHaveYielded([
'OuterBoundary render success',
'Component render sibling',
'InnerBoundary render success',
'LocalBrokenCallbackRef render',
'LocalBrokenCallbackRef ref true',
]);

ReactDOM.render(
<LocalErrorBoundary id="OuterBoundary" fallbackID="OuterFallback">
<Component id="sibling" />
</LocalErrorBoundary>,
container,
);

// React should skip over the unmounting boundary and find the nearest still-mounted boundary.
expect(container.firstChild.textContent).toBe('OuterFallback');
expect(container.lastChild.textContent).toBe('OuterFallback');
expect(Scheduler).toHaveYielded([
'OuterBoundary render success',
'Component render sibling',
'LocalBrokenCallbackRef ref false',
'ErrorBoundary static getDerivedStateFromError',
'OuterBoundary render error',
'Component render OuterFallback',
]);
});
});
56 changes: 16 additions & 40 deletions packages/react-dom/src/events/__tests__/DOMPluginEventSystem-test.internal.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1669,28 +1669,16 @@ describe('DOMPluginEventSystem', () => {

function Test() {
React.useEffect(() => {
const clearClick1 = setClick1(
buttonRef.current,
targetListener1,
);
const clearClick2 = setClick2(
buttonRef.current,
targetListener2,
);
const clearClick3 = setClick3(
buttonRef.current,
targetListener3,
);
const clearClick4 = setClick4(
buttonRef.current,
targetListener4,
);
setClick1(buttonRef.current, targetListener1);
setClick2(buttonRef.current, targetListener2);
setClick3(buttonRef.current, targetListener3);
setClick4(buttonRef.current, targetListener4);

return () => {
clearClick1();
clearClick2();
clearClick3();
clearClick4();
setClick1();
setClick2();
setClick3();
setClick4();
};
});

Expand All @@ -1715,28 +1703,16 @@ describe('DOMPluginEventSystem', () => {

function Test2() {
React.useEffect(() => {
const clearClick1 = setClick1(
buttonRef.current,
targetListener1,
);
const clearClick2 = setClick2(
buttonRef.current,
targetListener2,
);
const clearClick3 = setClick3(
buttonRef.current,
targetListener3,
);
const clearClick4 = setClick4(
buttonRef.current,
targetListener4,
);
setClick1(buttonRef.current, targetListener1);
setClick2(buttonRef.current, targetListener2);
setClick3(buttonRef.current, targetListener3);
setClick4(buttonRef.current, targetListener4);

return () => {
clearClick1();
clearClick2();
clearClick3();
clearClick4();
setClick1();
setClick2();
setClick3();
setClick4();
};
});

Expand Down
Loading

0 comments on commit 7a73d6a

Please sign in to comment.