Skip to content

Commit

Permalink
Add gates to tests affected by new semantics
Browse files Browse the repository at this point in the history
  • Loading branch information
Brian Vaughn committed Mar 31, 2021
1 parent cb341f3 commit 7e40b76
Show file tree
Hide file tree
Showing 3 changed files with 95 additions and 30 deletions.
32 changes: 26 additions & 6 deletions packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
Original file line number Diff line number Diff line change
Expand Up @@ -1271,6 +1271,9 @@ describe('ReactLazy', () => {
// @gate enableLazyElements
it('mount and reorder lazy types', async () => {
class Child extends React.Component {
componentWillUnmount() {
Scheduler.unstable_yieldValue('Did unmount: ' + this.props.label);
}
componentDidMount() {
Scheduler.unstable_yieldValue('Did mount: ' + this.props.label);
}
Expand Down Expand Up @@ -1348,6 +1351,12 @@ describe('ReactLazy', () => {
expect(Scheduler).toFlushAndYield(['Init B2', 'Loading...']);
jest.runAllTimers();

gate(flags => {
if (flags.enableSuspenseLayoutEffectSemantics) {
expect(Scheduler).toHaveYielded(['Did unmount: A', 'Did unmount: B']);
}
});

// The suspense boundary should've triggered now.
expect(root).toMatchRenderedOutput('Loading...');
await resolveB2({default: ChildB});
Expand All @@ -1356,12 +1365,23 @@ describe('ReactLazy', () => {
expect(Scheduler).toFlushAndYield(['Init A2']);
await LazyChildA2;

expect(Scheduler).toFlushAndYield([
'b',
'a',
'Did update: b',
'Did update: a',
]);
gate(flags => {
if (flags.enableSuspenseLayoutEffectSemantics) {
expect(Scheduler).toFlushAndYield([
'b',
'a',
'Did mount: b',
'Did mount: a',
]);
} else {
expect(Scheduler).toFlushAndYield([
'b',
'a',
'Did update: b',
'Did update: a',
]);
}
});
expect(root).toMatchRenderedOutput('ba');
});

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -100,7 +100,7 @@ describe('ReactSuspenseFuzz', () => {
}
}, [updates]);

const fullText = `${text}:${step}`;
const fullText = `[${text}:${step}]`;

const shouldSuspend = useContext(ShouldSuspendContext);

Expand Down Expand Up @@ -163,19 +163,26 @@ describe('ReactSuspenseFuzz', () => {
resolveAllTasks();
const expectedOutput = expectedRoot.getChildrenAsJSX();

resetCache();
ReactNoop.renderLegacySyncRoot(children);
resolveAllTasks();
const legacyOutput = ReactNoop.getChildrenAsJSX();
expect(legacyOutput).toEqual(expectedOutput);
ReactNoop.renderLegacySyncRoot(null);

resetCache();
const concurrentRoot = ReactNoop.createRoot();
concurrentRoot.render(children);
resolveAllTasks();
const concurrentOutput = concurrentRoot.getChildrenAsJSX();
expect(concurrentOutput).toEqual(expectedOutput);
gate(flags => {
resetCache();
ReactNoop.renderLegacySyncRoot(children);
resolveAllTasks();
const legacyOutput = ReactNoop.getChildrenAsJSX();
expect(legacyOutput).toEqual(expectedOutput);
ReactNoop.renderLegacySyncRoot(null);

// Observable behavior differs here in a way that's expected:
// If enableSuspenseLayoutEffectSemantics is enabled, layout effects are destroyed on re-suspend
// before larger 'beginAfter' timers have a chance to fire.
if (!flags.enableSuspenseLayoutEffectSemantics) {
resetCache();
const concurrentRoot = ReactNoop.createRoot();
concurrentRoot.render(children);
resolveAllTasks();
const concurrentOutput = concurrentRoot.getChildrenAsJSX();
expect(concurrentOutput).toEqual(expectedOutput);
}
});
}

function pickRandomWeighted(rand, options) {
Expand Down Expand Up @@ -410,5 +417,32 @@ Random seed is ${SEED}
</>,
);
});

it('4', () => {
const {Text, testResolvedOutput} = createFuzzer();
testResolvedOutput(
<React.Suspense fallback="Loading...">
<React.Suspense>
<React.Suspense>
<Text initialDelay={9683} text="E" updates={[]} />
</React.Suspense>
<Text
initialDelay={4053}
text="C"
updates={[
{
beginAfter: 1566,
suspendFor: 4142,
},
{
beginAfter: 9572,
suspendFor: 4832,
},
]}
/>
</React.Suspense>
</React.Suspense>,
);
});
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -468,19 +468,30 @@ describe('ReactSuspenseWithNoopRenderer', () => {

await rejectText('Result', new Error('Failed to load: Result'));

expect(Scheduler).toFlushAndYield([
'Error! [Result]',
gate(flags => {
if (flags.enableSuspenseLayoutEffectSemantics) {
expect(Scheduler).toFlushAndYield([
'Error! [Result]',

// React retries one more time
'Error! [Result]',
// React retries one more time
'Error! [Result]',
]);
expect(ReactNoop.getChildren()).toEqual([]);
} else {
expect(Scheduler).toFlushAndYield([
'Error! [Result]',

// Errored again on retry. Now handle it.
// React retries one more time
'Error! [Result]',

'Caught error: Failed to load: Result',
]);
expect(ReactNoop.getChildren()).toEqual([
span('Caught error: Failed to load: Result'),
]);
// Errored again on retry. Now handle it.
'Caught error: Failed to load: Result',
]);
expect(ReactNoop.getChildren()).toEqual([
span('Caught error: Failed to load: Result'),
]);
}
});
});

// @gate enableCache
Expand Down

0 comments on commit 7e40b76

Please sign in to comment.