@samitouri / QOS-React / commits / 4c75881ee3

Remove maxDuration from tests (#15272)

We instead assume a 150ms duration.

Sebastian Markbåge committed Apr 2, 2019 at 14:27 UTC 4c75881ee38ba2596c5c603d268f0dff178b8581
12 files changed +141 -188
packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js
+2 -4
@@ -720,16 +720,14 @@ describe('ReactDOMFiberAsync', () => {
720
721 let root = ReactDOM.unstable_createRoot(container);
722 root.render(
723 - <React.Suspense maxDuration={1000} fallback={'Loading'}>
724 - Initial
725 - </React.Suspense>,
723 + <React.Suspense fallback={'Loading'}>Initial</React.Suspense>,
724 );
725
726 Scheduler.flushAll();
727 expect(container.textContent).toBe('Initial');
728
729 root.render(
732 - <React.Suspense maxDuration={1000} fallback={'Loading'}>
730 + <React.Suspense fallback={'Loading'}>
731 <Suspend />
732 </React.Suspense>,
733 );
packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
+7 -7
@@ -363,7 +363,7 @@ describe('ReactDOMServerPartialHydration', () => {
363 <div>
364 <Suspense fallback="Loading...">
365 <span ref={ref} className={className}>
366 - <Suspense maxDuration={200}>
366 + <Suspense>
367 <Child text={text} />
368 </Suspense>
369 </span>
@@ -703,7 +703,7 @@ describe('ReactDOMServerPartialHydration', () => {
703 expect(ref.current).toBe(span);
704 });
705
706 - it('replaces the fallback within the maxDuration if there is a nested suspense', async () => {
706 + it('replaces the fallback within the suspended time if there is a nested suspense', async () => {
707 let suspend = false;
708 let promise = new Promise(resolvePromise => {});
709 let ref = React.createRef();
@@ -724,7 +724,7 @@ describe('ReactDOMServerPartialHydration', () => {
724 function App() {
725 return (
726 <div>
727 - <Suspense fallback="Loading..." maxDuration={100}>
727 + <Suspense fallback="Loading...">
728 <span ref={ref}>
729 <Child />
730 </span>
@@ -751,7 +751,7 @@ describe('ReactDOMServerPartialHydration', () => {
751 let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
752 root.render(<App />);
753 Scheduler.flushAll();
754 - // This will have exceeded the maxDuration so we should timeout.
754 + // This will have exceeded the suspended time so we should timeout.
755 jest.advanceTimersByTime(500);
756 // The boundary should longer be suspended for the middle content
757 // even though the inner boundary is still suspended.
@@ -762,7 +762,7 @@ describe('ReactDOMServerPartialHydration', () => {
762 expect(ref.current).toBe(span);
763 });
764
765 - it('replaces the fallback within the maxDuration if there is a nested suspense in a nested suspense', async () => {
765 + it('replaces the fallback within the suspended time if there is a nested suspense in a nested suspense', async () => {
766 let suspend = false;
767 let promise = new Promise(resolvePromise => {});
768 let ref = React.createRef();
@@ -784,7 +784,7 @@ describe('ReactDOMServerPartialHydration', () => {
784 return (
785 <div>
786 <Suspense fallback="Another layer">
787 - <Suspense fallback="Loading..." maxDuration={100}>
787 + <Suspense fallback="Loading...">
788 <span ref={ref}>
789 <Child />
790 </span>
@@ -812,7 +812,7 @@ describe('ReactDOMServerPartialHydration', () => {
812 let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
813 root.render(<App />);
814 Scheduler.flushAll();
815 - // This will have exceeded the maxDuration so we should timeout.
815 + // This will have exceeded the suspended time so we should timeout.
816 jest.advanceTimersByTime(500);
817 // The boundary should longer be suspended for the middle content
818 // even though the inner boundary is still suspended.
packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js
+9 -9
@@ -74,12 +74,12 @@ describe('ReactDOMSuspensePlaceholder', () => {
74 ];
75 function App() {
76 return (
77 - <Suspense maxDuration={500} fallback={<Text text="Loading..." />}>
77 + <Suspense fallback={<Text text="Loading..." />}>
78 <div ref={divs[0]}>
79 <Text text="A" />
80 </div>
81 <div ref={divs[1]}>
82 - <AsyncText ms={1000} text="B" />
82 + <AsyncText ms={500} text="B" />
83 </div>
84 <div style={{display: 'block'}} ref={divs[2]}>
85 <Text text="C" />
@@ -92,7 +92,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
92 expect(divs[1].current.style.display).toEqual('none');
93 expect(divs[2].current.style.display).toEqual('none');
94
95 - await advanceTimers(1000);
95 + await advanceTimers(500);
96
97 expect(divs[0].current.style.display).toEqual('');
98 expect(divs[1].current.style.display).toEqual('');
@@ -103,9 +103,9 @@ describe('ReactDOMSuspensePlaceholder', () => {
103 it('hides and unhides timed out text nodes', async () => {
104 function App() {
105 return (
106 - <Suspense maxDuration={500} fallback={<Text text="Loading..." />}>
106 + <Suspense fallback={<Text text="Loading..." />}>
107 <Text text="A" />
108 - <AsyncText ms={1000} text="B" />
108 + <AsyncText ms={500} text="B" />
109 <Text text="C" />
110 </Suspense>
111 );
@@ -113,7 +113,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
113 ReactDOM.render(<App />, container);
114 expect(container.textContent).toEqual('Loading...');
115
116 - await advanceTimers(1000);
116 + await advanceTimers(500);
117
118 expect(container.textContent).toEqual('ABC');
119 });
@@ -137,10 +137,10 @@ describe('ReactDOMSuspensePlaceholder', () => {
137
138 function App() {
139 return (
140 - <Suspense maxDuration={500} fallback={<Text text="Loading..." />}>
140 + <Suspense fallback={<Text text="Loading..." />}>
141 <Sibling>Sibling</Sibling>
142 <span>
143 - <AsyncText ms={1000} text="Async" />
143 + <AsyncText ms={500} text="Async" />
144 </span>
145 </Suspense>
146 );
@@ -158,7 +158,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
158 '<span style="display: none;">Sibling</span><span style="display: none;"></span>Loading...',
159 );
160
161 - await advanceTimers(1000);
161 + await advanceTimers(500);
162
163 expect(container.innerHTML).toEqual(
164 '<span style="display: inline;">Sibling</span><span style="">Async</span>',
packages/react-reconciler/src/ReactFiberBeginWork.js
+15
@@ -157,6 +157,7 @@ let didWarnAboutContextTypeOnFunctionComponent;
157 let didWarnAboutGetDerivedStateOnFunctionComponent;
158 let didWarnAboutFunctionRefs;
159 export let didWarnAboutReassigningProps;
160 +let didWarnAboutMaxDuration;
161
162 if (__DEV__) {
163 didWarnAboutBadClass = {};
@@ -165,6 +166,7 @@ if (__DEV__) {
166 didWarnAboutGetDerivedStateOnFunctionComponent = {};
167 didWarnAboutFunctionRefs = {};
168 didWarnAboutReassigningProps = false;
169 + didWarnAboutMaxDuration = false;
170 }
171
172 export function reconcileChildren(
@@ -1409,6 +1411,19 @@ function updateSuspenseComponent(
1411 workInProgress.effectTag &= ~DidCapture;
1412 }
1413
1414 + if (__DEV__) {
1415 + if ('maxDuration' in nextProps) {
1416 + if (!didWarnAboutMaxDuration) {
1417 + didWarnAboutMaxDuration = true;
1418 + warning(
1419 + false,
1420 + 'maxDuration has been removed from React. ' +
1421 + 'Remove the maxDuration prop.',
1422 + );
1423 + }
1424 + }
1425 + }
1426 +
1427 // This next part is a bit confusing. If the children timeout, we switch to
1428 // showing the fallback children in place of the "primary" children.
1429 // However, we don't want to delete the primary children because then their
packages/react-reconciler/src/ReactFiberUnwindWork.js
+6 -10
@@ -232,16 +232,12 @@ function throwException(
232 break;
233 }
234 }
235 - let timeoutPropMs = workInProgress.pendingProps.maxDuration;
236 - if (typeof timeoutPropMs === 'number') {
237 - if (timeoutPropMs <= 0) {
238 - earliestTimeoutMs = 0;
239 - } else if (
240 - earliestTimeoutMs === -1 ||
241 - timeoutPropMs < earliestTimeoutMs
242 - ) {
243 - earliestTimeoutMs = timeoutPropMs;
244 - }
235 + const defaultSuspenseTimeout = 150;
236 + if (
237 + earliestTimeoutMs === -1 ||
238 + defaultSuspenseTimeout < earliestTimeoutMs
239 + ) {
240 + earliestTimeoutMs = defaultSuspenseTimeout;
241 }
242 }
243 // If there is a DehydratedSuspenseComponent we don't have to do anything because
packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
+4 -4
@@ -119,8 +119,8 @@ describe('ReactLazy', () => {
119 return <Text text="Bar" />;
120 }
121
122 - const promiseForFoo = delay(1000).then(() => fakeImport(Foo));
123 - const promiseForBar = delay(2000).then(() => fakeImport(Bar));
122 + const promiseForFoo = delay(100).then(() => fakeImport(Foo));
123 + const promiseForBar = delay(500).then(() => fakeImport(Bar));
124
125 const LazyFoo = lazy(() => promiseForFoo);
126 const LazyBar = lazy(() => promiseForBar);
@@ -138,13 +138,13 @@ describe('ReactLazy', () => {
138 expect(Scheduler).toFlushAndYield(['Loading...']);
139 expect(root).toMatchRenderedOutput(null);
140
141 - jest.advanceTimersByTime(1000);
141 + jest.advanceTimersByTime(100);
142 await promiseForFoo;
143
144 expect(Scheduler).toFlushAndYield(['Foo', 'Loading...']);
145 expect(root).toMatchRenderedOutput(null);
146
147 - jest.advanceTimersByTime(1000);
147 + jest.advanceTimersByTime(500);
148 await promiseForBar;
149
150 expect(Scheduler).toFlushAndYield(['Foo', 'Bar']);
packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+8 -10
@@ -140,10 +140,10 @@ describe('ReactSuspense', () => {
140 // Render two sibling Suspense components
141 const root = ReactTestRenderer.create(
142 <React.Fragment>
143 - <Suspense maxDuration={1000} fallback={<Text text="Loading A..." />}>
143 + <Suspense fallback={<Text text="Loading A..." />}>
144 <AsyncText text="A" ms={5000} />
145 </Suspense>
146 - <Suspense maxDuration={3000} fallback={<Text text="Loading B..." />}>
146 + <Suspense fallback={<Text text="Loading B..." />}>
147 <AsyncText text="B" ms={6000} />
148 </Suspense>
149 </React.Fragment>,
@@ -211,7 +211,7 @@ describe('ReactSuspense', () => {
211 }
212
213 const root = ReactTestRenderer.create(
214 - <Suspense maxDuration={1000} fallback={<Text text="Loading..." />}>
214 + <Suspense fallback={<Text text="Loading..." />}>
215 <Async />
216 <Text text="Sibling" />
217 </Suspense>,
@@ -272,7 +272,7 @@ describe('ReactSuspense', () => {
272 it('only captures if `fallback` is defined', () => {
273 const root = ReactTestRenderer.create(
274 <Suspense fallback={<Text text="Loading..." />}>
275 - <Suspense maxDuration={100}>
275 + <Suspense>
276 <AsyncText text="Hi" ms={5000} />
277 </Suspense>
278 </Suspense>,
@@ -368,9 +368,7 @@ describe('ReactSuspense', () => {
368
369 function App() {
370 return (
371 - <Suspense
372 - maxDuration={1000}
373 - fallback={<TextWithLifecycle text="Loading..." />}>
371 + <Suspense fallback={<TextWithLifecycle text="Loading..." />}>
372 <TextWithLifecycle text="A" />
373 <AsyncTextWithLifecycle ms={100} text="B" ref={instance} />
374 <TextWithLifecycle text="C" />
@@ -631,7 +629,7 @@ describe('ReactSuspense', () => {
629
630 function App(props) {
631 return (
634 - <Suspense maxDuration={10} fallback={<Text text="Loading..." />}>
632 + <Suspense fallback={<Text text="Loading..." />}>
633 <Stateful />
634 </Suspense>
635 );
@@ -681,7 +679,7 @@ describe('ReactSuspense', () => {
679
680 function App(props) {
681 return (
684 - <Suspense maxDuration={10} fallback={<ShouldMountOnce />}>
682 + <Suspense fallback={<ShouldMountOnce />}>
683 <AsyncText ms={1000} text="Child 1" />
684 <AsyncText ms={2000} text="Child 2" />
685 <AsyncText ms={3000} text="Child 3" />
@@ -726,7 +724,7 @@ describe('ReactSuspense', () => {
724 it('does not get stuck with fallback in concurrent mode for a large delay', () => {
725 function App(props) {
726 return (
729 - <Suspense maxDuration={10} fallback={<Text text="Loading..." />}>
727 + <Suspense fallback={<Text text="Loading..." />}>
728 <AsyncText ms={1000} text="Child 1" />
729 <AsyncText ms={7000} text="Child 2" />
730 </Suspense>
packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
+1 -10
@@ -268,11 +268,6 @@ describe('ReactSuspenseFuzz', () => {
268 remainingElements--;
269 const children = createRandomChildren(3);
270
271 - const maxDuration = pickRandomWeighted(rand, [
272 - {value: undefined, weight: 1},
273 - {value: rand.intBetween(0, 5000), weight: 1},
274 - ]);
275 -
271 const fallbackType = pickRandomWeighted(rand, [
272 {value: 'none', weight: 1},
273 {value: 'normal', weight: 1},
@@ -290,11 +285,7 @@ describe('ReactSuspenseFuzz', () => {
285 );
286 }
287
293 - return React.createElement(
294 - Suspense,
295 - {maxDuration, fallback},
296 - ...children,
297 - );
288 + return React.createElement(Suspense, {fallback}, ...children);
289 }
290 case 'return':
291 default:
packages/react-reconciler/src/__tests__/ReactSuspensePlaceholder-test.internal.js
+4 -4
@@ -110,7 +110,7 @@ describe('ReactSuspensePlaceholder', () => {
110
111 function App(props) {
112 return (
113 - <Suspense maxDuration={500} fallback={<Text text="Loading..." />}>
113 + <Suspense fallback={<Text text="Loading..." />}>
114 <HiddenText text="A" />
115 <span>
116 <AsyncText ms={1000} text={props.middleText} />
@@ -176,7 +176,7 @@ describe('ReactSuspensePlaceholder', () => {
176 it('times out text nodes', async () => {
177 function App(props) {
178 return (
179 - <Suspense maxDuration={500} fallback={<Text text="Loading..." />}>
179 + <Suspense fallback={<Text text="Loading..." />}>
180 <Text text="A" />
181 <AsyncText ms={1000} text={props.middleText} />
182 <Text text="C" />
@@ -225,7 +225,7 @@ describe('ReactSuspensePlaceholder', () => {
225 // uppercase is a special type that causes React Noop to render child
226 // text nodes as uppercase.
227 <uppercase>
228 - <Suspense maxDuration={500} fallback={<Text text="Loading..." />}>
228 + <Suspense fallback={<Text text="Loading..." />}>
229 <Text text="a" />
230 <AsyncText ms={1000} text={props.middleText} />
231 <Text text="c" />
@@ -293,7 +293,7 @@ describe('ReactSuspensePlaceholder', () => {
293 Scheduler.yieldValue('App');
294 return (
295 <Profiler id="root" onRender={onRender}>
296 - <Suspense maxDuration={500} fallback={<Fallback />}>
296 + <Suspense fallback={<Fallback />}>
297 {shouldSuspend && <Suspending />}
298 <Text fakeRenderDuration={textRenderDuration} text={text} />
299 </Suspense>
packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js
+57 -86
@@ -89,6 +89,25 @@ describe('ReactSuspenseWithNoopRenderer', () => {
89 }
90 }
91
92 + it('warns if the deprecated maxDuration option is used', () => {
93 + function Foo() {
94 + return (
95 + <Suspense maxDuration={100} fallback="Loading...">
96 + <div />;
97 + </Suspense>
98 + );
99 + }
100 +
101 + ReactNoop.render(<Foo />);
102 +
103 + expect(() => Scheduler.flushAll()).toWarnDev([
104 + 'Warning: maxDuration has been removed from React. ' +
105 + 'Remove the maxDuration prop.' +
106 + '\n in Suspense (at **)' +
107 + '\n in Foo (at **)',
108 + ]);
109 + });
110 +
111 it('suspends rendering and continues later', async () => {
112 function Bar(props) {
113 Scheduler.yieldValue('Bar');
@@ -137,10 +156,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
156 // Render two sibling Suspense components
157 ReactNoop.render(
158 <Fragment>
140 - <Suspense maxDuration={1000} fallback={<Text text="Loading A..." />}>
159 + <Suspense fallback={<Text text="Loading A..." />}>
160 <AsyncText text="A" ms={5000} />
161 </Suspense>
143 - <Suspense maxDuration={3000} fallback={<Text text="Loading B..." />}>
162 + <Suspense fallback={<Text text="Loading B..." />}>
163 <AsyncText text="B" ms={6000} />
164 </Suspense>
165 </Fragment>,
@@ -289,7 +308,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
308 const errorBoundary = React.createRef();
309 function App() {
310 return (
292 - <Suspense maxDuration={1000} fallback={<Text text="Loading..." />}>
311 + <Suspense fallback={<Text text="Loading..." />}>
312 <ErrorBoundary ref={errorBoundary}>
313 <AsyncText text="Result" ms={3000} />
314 </ErrorBoundary>
@@ -369,6 +388,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
388 });
389
390 it('keeps working on lower priority work after being pinged', async () => {
391 + // Advance the virtual time so that we're close to the edge of a bucket.
392 + ReactNoop.expire(149);
393 +
394 function App(props) {
395 return (
396 <Suspense fallback={<Text text="Loading..." />}>
@@ -382,8 +404,9 @@ describe('ReactSuspenseWithNoopRenderer', () => {
404 expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
405 expect(ReactNoop.getChildren()).toEqual([]);
406
385 - // Advance React's virtual time by enough to fall into a new async bucket.
386 - ReactNoop.expire(1200);
407 + // Advance React's virtual time by enough to fall into a new async bucket,
408 + // but not enough to expire the suspense timeout.
409 + ReactNoop.expire(120);
410 ReactNoop.render(<App showB={true} />);
411 expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'B', 'Loading...']);
412 expect(ReactNoop.getChildren()).toEqual([]);
@@ -463,17 +486,16 @@ describe('ReactSuspenseWithNoopRenderer', () => {
486 });
487
488 it('switches to an inner fallback even if it expires later', async () => {
489 + // Advance the virtual time so that we're closer to the edge of a bucket.
490 + ReactNoop.expire(200);
491 +
492 ReactNoop.render(
493 <Fragment>
494 <Text text="Sync" />
469 - <Suspense
470 - maxDuration={1000}
471 - fallback={<Text text="Loading outer..." />}>
472 - <AsyncText text="Outer content" ms={2000} />
473 - <Suspense
474 - maxDuration={2500}
475 - fallback={<Text text="Loading inner..." />}>
476 - <AsyncText text="Inner content" ms={5000} />
495 + <Suspense fallback={<Text text="Loading outer..." />}>
496 + <AsyncText text="Outer content" ms={300} />
497 + <Suspense fallback={<Text text="Loading inner..." />}>
498 + <AsyncText text="Inner content" ms={1000} />
499 </Suspense>
500 </Suspense>
501 </Fragment>,
@@ -492,8 +514,8 @@ describe('ReactSuspenseWithNoopRenderer', () => {
514
515 // Expire the outer timeout, but don't expire the inner one.
516 // We should see the outer loading placeholder.
495 - ReactNoop.expire(1500);
496 - await advanceTimers(1500);
517 + ReactNoop.expire(250);
518 + await advanceTimers(250);
519 expect(Scheduler).toFlushWithoutYielding();
520 expect(ReactNoop.getChildren()).toEqual([
521 span('Sync'),
@@ -501,11 +523,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
523 ]);
524
525 // Resolve the outer promise.
504 - ReactNoop.expire(2000);
505 - await advanceTimers(2000);
506 - // At this point, 3.5 seconds have elapsed total. The outer placeholder
507 - // timed out at 1.5 seconds. So, 2 seconds have elapsed since the
508 - // placeholder timed out. That means we still haven't reached the 2.5 second
526 + ReactNoop.expire(50);
527 + await advanceTimers(50);
528 + // At this point, 250ms have elapsed total. The outer placeholder
529 + // timed out at around 150-200ms. So, 50-100ms have elapsed since the
530 + // placeholder timed out. That means we still haven't reached the 150ms
531 // threshold of the inner placeholder.
532 expect(Scheduler).toHaveYielded(['Promise resolved [Outer content]']);
533 expect(Scheduler).toFlushAndYield([
@@ -522,7 +544,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
544 // Expire the inner timeout.
545 ReactNoop.expire(500);
546 await advanceTimers(500);
525 - // Now that 2.5 seconds have elapsed since the outer placeholder timed out,
547 + // Now that 750ms have elapsed since the outer placeholder timed out,
548 // we can timeout the inner placeholder.
549 expect(ReactNoop.getChildren()).toEqual([
550 span('Sync'),
@@ -595,10 +617,10 @@ describe('ReactSuspenseWithNoopRenderer', () => {
617 expect(ReactNoop.getChildren()).toEqual([span('Loading (outer)...')]);
618 });
619
598 - it('expires early with a `maxDuration` option', async () => {
620 + it('expires early by default', async () => {
621 ReactNoop.render(
622 <Fragment>
601 - <Suspense maxDuration={1000} fallback={<Text text="Loading..." />}>
623 + <Suspense fallback={<Text text="Loading..." />}>
624 <AsyncText text="Async" ms={3000} />
625 </Suspense>
626 <Text text="Sync" />
@@ -632,7 +654,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
654
655 it('resolves successfully even if fallback render is pending', async () => {
656 ReactNoop.render(
635 - <Suspense maxDuration={1000} fallback={<Text text="Loading..." />}>
657 + <Suspense fallback={<Text text="Loading..." />}>
658 <AsyncText text="Async" ms={3000} />
659 </Suspense>,
660 );
@@ -656,7 +678,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
678
679 it('a Suspense component correctly handles more than one suspended child', async () => {
680 ReactNoop.render(
659 - <Suspense maxDuration={0} fallback={<Text text="Loading..." />}>
681 + <Suspense fallback={<Text text="Loading..." />}>
682 <AsyncText text="A" ms={100} />
683 <AsyncText text="B" ms={100} />
684 </Suspense>,
@@ -681,7 +703,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
703
704 it('can resume rendering earlier than a timeout', async () => {
705 ReactNoop.render(
684 - <Suspense maxDuration={1000} fallback={<Text text="Loading..." />}>
706 + <Suspense fallback={<Text text="Loading..." />}>
707 <AsyncText text="Async" ms={100} />
708 </Suspense>,
709 );
@@ -704,10 +726,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
726 expect(ReactNoop.getChildren()).toEqual([span('Async')]);
727 });
728
707 - it('starts working on an update even if its priority falls between two suspended levels', async () => {
729 + // TODO: This cannot be tested until we have a way to long-suspend navigations.
730 + it.skip('starts working on an update even if its priority falls between two suspended levels', async () => {
731 function App(props) {
732 return (
710 - <Suspense fallback={<Text text="Loading..." />} maxDuration={10000}>
733 + <Suspense fallback={<Text text="Loading..." />}>
734 {props.text === 'C' ? (
735 <Text text="C" />
736 ) : (
@@ -802,55 +825,11 @@ describe('ReactSuspenseWithNoopRenderer', () => {
825 expect(ReactNoop.getChildren()).toEqual([span('goodbye')]);
826 });
827
805 - describe('a Delay component', () => {
806 - function Never() {
807 - // Throws a promise that resolves after some arbitrarily large
808 - // number of seconds. The idea is that this component will never
809 - // resolve. It's always wrapped by a Suspense.
810 - throw new Promise(resolve => setTimeout(() => resolve(), 10000));
811 - }
812 -
813 - function Delay({ms}) {
814 - // Once ms has elapsed, render null. This allows the rest of the
815 - // tree to resume rendering.
816 - return (
817 - <Suspense fallback={null} maxDuration={ms}>
818 - <Never />
819 - </Suspense>
820 - );
821 - }
822 -
823 - function DebouncedText({text, ms}) {
824 - return (
825 - <Fragment>
826 - <Delay ms={ms} />
827 - <Text text={text} />
828 - </Fragment>
829 - );
830 - }
831 -
832 - it('works', async () => {
833 - ReactNoop.render(<DebouncedText text="A" ms={1000} />);
834 - expect(Scheduler).toFlushAndYield(['A']);
835 - expect(ReactNoop.getChildren()).toEqual([]);
836 -
837 - await advanceTimers(800);
838 - ReactNoop.expire(800);
839 - expect(Scheduler).toFlushWithoutYielding();
840 - expect(ReactNoop.getChildren()).toEqual([]);
841 -
842 - await advanceTimers(1000);
843 - ReactNoop.expire(1000);
844 - expect(Scheduler).toFlushWithoutYielding();
845 - expect(ReactNoop.getChildren()).toEqual([span('A')]);
846 - });
847 - });
848 -
828 describe('sync mode', () => {
829 it('times out immediately', async () => {
830 function App() {
831 return (
853 - <Suspense maxDuration={1000} fallback={<Text text="Loading..." />}>
832 + <Suspense fallback={<Text text="Loading..." />}>
833 <AsyncText ms={100} text="Result" />
834 </Suspense>
835 );
@@ -889,7 +868,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
868 const text = React.createRef(null);
869 function App() {
870 return (
892 - <Suspense maxDuration={1000} fallback={<Spinner />}>
871 + <Suspense fallback={<Spinner />}>
872 <ConcurrentMode>
873 <UpdatingText ref={text} />
874 <Text text="Sibling" />
@@ -969,9 +948,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
948 function App() {
949 return (
950 <Fragment>
972 - <Suspense
973 - maxDuration={1000}
974 - fallback={<Text text="Loading..." />}>
951 + <Suspense fallback={<Text text="Loading..." />}>
952 <ConcurrentMode>
953 <UpdatingText ref={text1} initialText="Async: 1">
954 {text => (
@@ -1104,9 +1081,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1081 function App() {
1082 return (
1083 <StrictMode>
1107 - <Suspense
1108 - maxDuration={1000}
1109 - fallback={<Text text="Loading..." />}>
1084 + <Suspense fallback={<Text text="Loading..." />}>
1085 <ConcurrentMode>
1086 <UpdatingText ref={text1} initialText="Async: 1">
1087 {text => (
@@ -1250,9 +1225,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1225
1226 function App() {
1227 return (
1253 - <Suspense
1254 - maxDuration={1000}
1255 - fallback={<TextWithLifecycle text="Loading..." />}>
1228 + <Suspense fallback={<TextWithLifecycle text="Loading..." />}>
1229 <TextWithLifecycle text="A" />
1230 <AsyncTextWithLifecycle ms={100} text="B" />
1231 <TextWithLifecycle text="C" />
@@ -1517,9 +1490,7 @@ describe('ReactSuspenseWithNoopRenderer', () => {
1490
1491 function App() {
1492 return (
1520 - <Suspense
1521 - maxDuration={1000}
1522 - fallback={<TextWithLifecycle text="Loading..." />}>
1493 + <Suspense fallback={<TextWithLifecycle text="Loading..." />}>
1494 <TextWithLifecycle text="A" />
1495 <AsyncTextWithLifecycle ms={100} text="B" />
1496 <TextWithLifecycle text="C" />
packages/react/src/__tests__/ReactProfiler-test.internal.js
+27 -43
@@ -2362,10 +2362,8 @@ describe('Profiler', () => {
2362 () => {
2363 ReactTestRenderer.create(
2364 <React.Profiler id="app" onRender={onRender}>
2365 - <React.Suspense
2366 - maxDuration={1000}
2367 - fallback={<Text text="loading" />}>
2368 - <AsyncText text="loaded" ms={2000} />
2365 + <React.Suspense fallback={<Text text="loading" />}>
2366 + <AsyncText text="loaded" ms={500} />
2367 </React.Suspense>
2368 </React.Profiler>,
2369 );
@@ -2416,10 +2414,8 @@ describe('Profiler', () => {
2414 () => {
2415 ReactTestRenderer.create(
2416 <React.Profiler id="app" onRender={onRender}>
2419 - <React.Suspense
2420 - maxDuration={1000}
2421 - fallback={<Text text="loading" />}>
2422 - <AsyncComponentWithCascadingWork text="loaded" ms={2000} />
2417 + <React.Suspense fallback={<Text text="loading" />}>
2418 + <AsyncComponentWithCascadingWork text="loaded" ms={500} />
2419 </React.Suspense>
2420 </React.Profiler>,
2421 );
@@ -2455,10 +2451,8 @@ describe('Profiler', () => {
2451 () => {
2452 ReactTestRenderer.create(
2453 <React.Profiler id="app" onRender={onRender}>
2458 - <React.Suspense
2459 - maxDuration={1000}
2460 - fallback={<Text text="loading" />}>
2461 - <AsyncText text="loaded" ms={2000} />
2454 + <React.Suspense fallback={<Text text="loading" />}>
2455 + <AsyncText text="loaded" ms={500} />
2456 </React.Suspense>
2457 </React.Profiler>,
2458 {
@@ -2468,8 +2462,8 @@ describe('Profiler', () => {
2462 },
2463 );
2464
2471 - Scheduler.advanceTime(1500);
2472 - await awaitableAdvanceTimers(1500);
2465 + Scheduler.advanceTime(400);
2466 + await awaitableAdvanceTimers(400);
2467
2468 expect(Scheduler).toFlushAndYield([
2469 'Suspend [loaded]',
@@ -2477,8 +2471,8 @@ describe('Profiler', () => {
2471 ]);
2472 expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
2473
2480 - Scheduler.advanceTime(2500);
2481 - await awaitableAdvanceTimers(2500);
2474 + Scheduler.advanceTime(500);
2475 + await awaitableAdvanceTimers(500);
2476
2477 expect(Scheduler).toHaveYielded(['Promise resolved [loaded]']);
2478 expect(Scheduler).toFlushAndYield(['AsyncText [loaded]']);
@@ -2502,10 +2496,8 @@ describe('Profiler', () => {
2496 () => {
2497 ReactTestRenderer.create(
2498 <React.Profiler id="app" onRender={onRender}>
2505 - <React.Suspense
2506 - maxDuration={2000}
2507 - fallback={<Text text="loading" />}>
2508 - <AsyncText text="loaded" ms={1000} />
2499 + <React.Suspense fallback={<Text text="loading" />}>
2500 + <AsyncText text="loaded" ms={100} />
2501 </React.Suspense>
2502 </React.Profiler>,
2503 {unstable_isConcurrent: true},
@@ -2519,7 +2511,7 @@ describe('Profiler', () => {
2511
2512 expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
2513
2522 - jest.advanceTimersByTime(1000);
2514 + jest.advanceTimersByTime(100);
2515 await resourcePromise;
2516 expect(Scheduler).toHaveYielded(['Promise resolved [loaded]']);
2517 expect(Scheduler).toFlushAndYield(['AsyncText [loaded]']);
@@ -2545,10 +2537,8 @@ describe('Profiler', () => {
2537 () => {
2538 renderer = ReactTestRenderer.create(
2539 <React.Profiler id="app" onRender={onRender}>
2548 - <React.Suspense
2549 - maxDuration={2000}
2550 - fallback={<Text text="loading" />}>
2551 - <AsyncText text="loaded" ms={1000} />
2540 + <React.Suspense fallback={<Text text="loading" />}>
2541 + <AsyncText text="loaded" ms={100} />
2542 </React.Suspense>
2543 <Text text="initial" />
2544 </React.Profiler>,
@@ -2579,10 +2569,8 @@ describe('Profiler', () => {
2569 () => {
2570 renderer.update(
2571 <React.Profiler id="app" onRender={onRender}>
2582 - <React.Suspense
2583 - maxDuration={2000}
2584 - fallback={<Text text="loading" />}>
2585 - <AsyncText text="loaded" ms={1000} />
2572 + <React.Suspense fallback={<Text text="loading" />}>
2573 + <AsyncText text="loaded" ms={100} />
2574 </React.Suspense>
2575 <Text text="updated" />
2576 </React.Profiler>,
@@ -2600,8 +2588,8 @@ describe('Profiler', () => {
2588
2589 expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
2590
2603 - Scheduler.advanceTime(1000);
2604 - jest.advanceTimersByTime(1000);
2591 + Scheduler.advanceTime(100);
2592 + jest.advanceTimersByTime(100);
2593 await originalPromise;
2594 expect(renderer.toJSON()).toEqual(['loaded', 'updated']);
2595
@@ -2631,10 +2619,8 @@ describe('Profiler', () => {
2619 () => {
2620 renderer = ReactTestRenderer.create(
2621 <React.Profiler id="app" onRender={onRender}>
2634 - <React.Suspense
2635 - maxDuration={2000}
2636 - fallback={<Text text="loading" />}>
2637 - <AsyncText text="loaded" ms={1000} />
2622 + <React.Suspense fallback={<Text text="loading" />}>
2623 + <AsyncText text="loaded" ms={100} />
2624 </React.Suspense>
2625 <Text text="initial" />
2626 </React.Profiler>,
@@ -2651,8 +2637,8 @@ describe('Profiler', () => {
2637 expect(onInteractionScheduledWorkCompleted).not.toHaveBeenCalled();
2638 expect(onRender).not.toHaveBeenCalled();
2639
2654 - Scheduler.advanceTime(500);
2655 - jest.advanceTimersByTime(500);
2640 + Scheduler.advanceTime(50);
2641 + jest.advanceTimersByTime(50);
2642
2643 const highPriUpdateInteraction = {
2644 id: 1,
@@ -2669,10 +2655,8 @@ describe('Profiler', () => {
2655 () => {
2656 renderer.update(
2657 <React.Profiler id="app" onRender={onRender}>
2672 - <React.Suspense
2673 - maxDuration={2000}
2674 - fallback={<Text text="loading" />}>
2675 - <AsyncText text="loaded" ms={1000} />
2658 + <React.Suspense fallback={<Text text="loading" />}>
2659 + <AsyncText text="loaded" ms={100} />
2660 </React.Suspense>
2661 <Text text="updated" />
2662 </React.Profiler>,
@@ -2695,8 +2679,8 @@ describe('Profiler', () => {
2679
2680 expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(0);
2681
2698 - Scheduler.advanceTime(500);
2699 - jest.advanceTimersByTime(500);
2682 + Scheduler.advanceTime(50);
2683 + jest.advanceTimersByTime(50);
2684 await originalPromise;
2685 expect(Scheduler).toHaveYielded(['Promise resolved [loaded]']);
2686 expect(Scheduler).toFlushAndYield(['AsyncText [loaded]']);
packages/react/src/__tests__/ReactProfilerDOM-test.internal.js
+1 -1
@@ -88,7 +88,7 @@ describe('ProfilerDOM', () => {
88 const root = ReactDOM.unstable_createRoot(element);
89 batch = root.createBatch();
90 batch.render(
91 - <React.Suspense maxDuration={100} fallback={<Text text="Loading..." />}>
91 + <React.Suspense fallback={<Text text="Loading..." />}>
92 <AsyncText text="Text" ms={2000} />
93 </React.Suspense>,
94 );