Remove maxDuration from tests

We instead assume a 150ms duration.
facebook · Mar 30, 2019 · 5a3cc07 · 5a3cc07
1 parent 2e02469
commit 5a3cc07
Show file tree

Hide file tree

Showing 14 changed files with 145 additions and 192 deletions.
diff --git a/fixtures/unstable-async/suspense/src/components/App.js b/fixtures/unstable-async/suspense/src/components/App.js
@@ -69,7 +69,7 @@ export default class App extends PureComponent {
           }}>
           Return to list
         </button>
-        <Suspense maxDuration={2000} fallback={<Spinner size="large" />}>
+        <Suspense fallback={<Spinner size="large" />}>
           <UserPage id={id} />
         </Suspense>
       </div>
@@ -78,7 +78,7 @@ export default class App extends PureComponent {
 
   renderList(loadingId) {
     return (
-      <Suspense maxDuration={1500} fallback={<Spinner size="large" />}>
+      <Suspense fallback={<Spinner size="large" />}>
         <ContributorListPage
           loadingId={loadingId}
           onUserClick={this.handleUserClick}

diff --git a/fixtures/unstable-async/suspense/src/components/UserPage.js b/fixtures/unstable-async/suspense/src/components/UserPage.js
@@ -13,7 +13,7 @@ export default function UserPage({id}) {
         alignItems: 'start',
       }}>
       <UserDetails id={id} />
-      <Suspense maxDuration={1000} fallback={<Spinner size="medium" />}>
+      <Suspense fallback={<Spinner size="medium" />}>
         <Repositories id={id} />
       </Suspense>
     </div>
@@ -117,7 +117,7 @@ function Img({src, alt, ...rest}) {
 
 function UserPicture({source}) {
   return (
-    <Suspense maxDuration={1500} fallback={<img src={source} alt="poster" />}>
+    <Suspense fallback={<img src={source} alt="poster" />}>
       <Img
         src={source}
         alt="profile picture"

diff --git a/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMFiberAsync-test.internal.js
@@ -720,16 +720,14 @@ describe('ReactDOMFiberAsync', () => {
 
       let root = ReactDOM.unstable_createRoot(container);
       root.render(
-        <React.Suspense maxDuration={1000} fallback={'Loading'}>
-          Initial
-        </React.Suspense>,
+        <React.Suspense fallback={'Loading'}>Initial</React.Suspense>,
       );
 
       Scheduler.flushAll();
       expect(container.textContent).toBe('Initial');
 
       root.render(
-        <React.Suspense maxDuration={1000} fallback={'Loading'}>
+        <React.Suspense fallback={'Loading'}>
           <Suspend />
         </React.Suspense>,
       );

diff --git a/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js b/packages/react-dom/src/__tests__/ReactDOMServerPartialHydration-test.internal.js
@@ -363,7 +363,7 @@ describe('ReactDOMServerPartialHydration', () => {
         <div>
           <Suspense fallback="Loading...">
             <span ref={ref} className={className}>
-              <Suspense maxDuration={200}>
+              <Suspense>
                 <Child text={text} />
               </Suspense>
             </span>
@@ -703,7 +703,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(span);
   });
 
-  it('replaces the fallback within the maxDuration if there is a nested suspense', async () => {
+  it('replaces the fallback within the suspended time if there is a nested suspense', async () => {
     let suspend = false;
     let promise = new Promise(resolvePromise => {});
     let ref = React.createRef();
@@ -724,7 +724,7 @@ describe('ReactDOMServerPartialHydration', () => {
     function App() {
       return (
         <div>
-          <Suspense fallback="Loading..." maxDuration={100}>
+          <Suspense fallback="Loading...">
             <span ref={ref}>
               <Child />
             </span>
@@ -751,7 +751,7 @@ describe('ReactDOMServerPartialHydration', () => {
     let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
     root.render(<App />);
     Scheduler.flushAll();
-    // This will have exceeded the maxDuration so we should timeout.
+    // This will have exceeded the suspended time so we should timeout.
     jest.advanceTimersByTime(500);
     // The boundary should longer be suspended for the middle content
     // even though the inner boundary is still suspended.
@@ -762,7 +762,7 @@ describe('ReactDOMServerPartialHydration', () => {
     expect(ref.current).toBe(span);
   });
 
-  it('replaces the fallback within the maxDuration if there is a nested suspense in a nested suspense', async () => {
+  it('replaces the fallback within the suspended time if there is a nested suspense in a nested suspense', async () => {
     let suspend = false;
     let promise = new Promise(resolvePromise => {});
     let ref = React.createRef();
@@ -784,7 +784,7 @@ describe('ReactDOMServerPartialHydration', () => {
       return (
         <div>
           <Suspense fallback="Another layer">
-            <Suspense fallback="Loading..." maxDuration={100}>
+            <Suspense fallback="Loading...">
               <span ref={ref}>
                 <Child />
               </span>
@@ -812,7 +812,7 @@ describe('ReactDOMServerPartialHydration', () => {
     let root = ReactDOM.unstable_createRoot(container, {hydrate: true});
     root.render(<App />);
     Scheduler.flushAll();
-    // This will have exceeded the maxDuration so we should timeout.
+    // This will have exceeded the suspended time so we should timeout.
     jest.advanceTimersByTime(500);
     // The boundary should longer be suspended for the middle content
     // even though the inner boundary is still suspended.

diff --git a/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js b/packages/react-dom/src/__tests__/ReactDOMSuspensePlaceholder-test.js
@@ -74,12 +74,12 @@ describe('ReactDOMSuspensePlaceholder', () => {
     ];
     function App() {
       return (
-        <Suspense maxDuration={500} fallback={<Text text="Loading..." />}>
+        <Suspense fallback={<Text text="Loading..." />}>
           <div ref={divs[0]}>
             <Text text="A" />
           </div>
           <div ref={divs[1]}>
-            <AsyncText ms={1000} text="B" />
+            <AsyncText ms={500} text="B" />
           </div>
           <div style={{display: 'block'}} ref={divs[2]}>
             <Text text="C" />
@@ -92,7 +92,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
     expect(divs[1].current.style.display).toEqual('none');
     expect(divs[2].current.style.display).toEqual('none');
 
-    await advanceTimers(1000);
+    await advanceTimers(500);
 
     expect(divs[0].current.style.display).toEqual('');
     expect(divs[1].current.style.display).toEqual('');
@@ -103,17 +103,17 @@ describe('ReactDOMSuspensePlaceholder', () => {
   it('hides and unhides timed out text nodes', async () => {
     function App() {
       return (
-        <Suspense maxDuration={500} fallback={<Text text="Loading..." />}>
+        <Suspense fallback={<Text text="Loading..." />}>
           <Text text="A" />
-          <AsyncText ms={1000} text="B" />
+          <AsyncText ms={500} text="B" />
           <Text text="C" />
         </Suspense>
       );
     }
     ReactDOM.render(<App />, container);
     expect(container.textContent).toEqual('Loading...');
 
-    await advanceTimers(1000);
+    await advanceTimers(500);
 
     expect(container.textContent).toEqual('ABC');
   });
@@ -137,10 +137,10 @@ describe('ReactDOMSuspensePlaceholder', () => {
 
       function App() {
         return (
-          <Suspense maxDuration={500} fallback={<Text text="Loading..." />}>
+          <Suspense fallback={<Text text="Loading..." />}>
             <Sibling>Sibling</Sibling>
             <span>
-              <AsyncText ms={1000} text="Async" />
+              <AsyncText ms={500} text="Async" />
             </span>
           </Suspense>
         );
@@ -158,7 +158,7 @@ describe('ReactDOMSuspensePlaceholder', () => {
         '<span style="display: none;">Sibling</span><span style="display: none;"></span>Loading...',
       );
 
-      await advanceTimers(1000);
+      await advanceTimers(500);
 
       expect(container.innerHTML).toEqual(
         '<span style="display: inline;">Sibling</span><span style="">Async</span>',

diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js
@@ -156,6 +156,7 @@ let didWarnAboutContextTypeOnFunctionComponent;
 let didWarnAboutGetDerivedStateOnFunctionComponent;
 let didWarnAboutFunctionRefs;
 export let didWarnAboutReassigningProps;
+let didWarnAboutMaxDuration;
 
 if (__DEV__) {
   didWarnAboutBadClass = {};
@@ -164,6 +165,7 @@ if (__DEV__) {
   didWarnAboutGetDerivedStateOnFunctionComponent = {};
   didWarnAboutFunctionRefs = {};
   didWarnAboutReassigningProps = false;
+  didWarnAboutMaxDuration = false;
 }
 
 export function reconcileChildren(
@@ -1408,6 +1410,19 @@ function updateSuspenseComponent(
     workInProgress.effectTag &= ~DidCapture;
   }
 
+  if (__DEV__) {
+    if ('maxDuration' in nextProps) {
+      if (!didWarnAboutMaxDuration) {
+        didWarnAboutMaxDuration = true;
+        warning(
+          false,
+          'maxDuration has been removed from React. ' +
+            'Remove the maxDuration prop.',
+        );
+      }
+    }
+  }
+
   // This next part is a bit confusing. If the children timeout, we switch to
   // showing the fallback children in place of the "primary" children.
   // However, we don't want to delete the primary children because then their

diff --git a/packages/react-reconciler/src/ReactFiberUnwindWork.js b/packages/react-reconciler/src/ReactFiberUnwindWork.js
@@ -229,16 +229,12 @@ function throwException(
             break;
           }
         }
-        let timeoutPropMs = workInProgress.pendingProps.maxDuration;
-        if (typeof timeoutPropMs === 'number') {
-          if (timeoutPropMs <= 0) {
-            earliestTimeoutMs = 0;
-          } else if (
-            earliestTimeoutMs === -1 ||
-            timeoutPropMs < earliestTimeoutMs
-          ) {
-            earliestTimeoutMs = timeoutPropMs;
-          }
+        const defaultSuspenseTimeout = 150;
+        if (
+          earliestTimeoutMs === -1 ||
+          defaultSuspenseTimeout < earliestTimeoutMs
+        ) {
+          earliestTimeoutMs = defaultSuspenseTimeout;
         }
       }
       // If there is a DehydratedSuspenseComponent we don't have to do anything because

diff --git a/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js b/packages/react-reconciler/src/__tests__/ReactLazy-test.internal.js
@@ -119,8 +119,8 @@ describe('ReactLazy', () => {
       return <Text text="Bar" />;
     }
 
-    const promiseForFoo = delay(1000).then(() => fakeImport(Foo));
-    const promiseForBar = delay(2000).then(() => fakeImport(Bar));
+    const promiseForFoo = delay(100).then(() => fakeImport(Foo));
+    const promiseForBar = delay(500).then(() => fakeImport(Bar));
 
     const LazyFoo = lazy(() => promiseForFoo);
     const LazyBar = lazy(() => promiseForBar);
@@ -138,13 +138,13 @@ describe('ReactLazy', () => {
     expect(Scheduler).toFlushAndYield(['Loading...']);
     expect(root).toMatchRenderedOutput(null);
 
-    jest.advanceTimersByTime(1000);
+    jest.advanceTimersByTime(100);
     await promiseForFoo;
 
     expect(Scheduler).toFlushAndYield(['Foo', 'Loading...']);
     expect(root).toMatchRenderedOutput(null);
 
-    jest.advanceTimersByTime(1000);
+    jest.advanceTimersByTime(500);
     await promiseForBar;
 
     expect(Scheduler).toFlushAndYield(['Foo', 'Bar']);

diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -140,10 +140,10 @@ describe('ReactSuspense', () => {
     // Render two sibling Suspense components
     const root = ReactTestRenderer.create(
       <React.Fragment>
-        <Suspense maxDuration={1000} fallback={<Text text="Loading A..." />}>
+        <Suspense fallback={<Text text="Loading A..." />}>
           <AsyncText text="A" ms={5000} />
         </Suspense>
-        <Suspense maxDuration={3000} fallback={<Text text="Loading B..." />}>
+        <Suspense fallback={<Text text="Loading B..." />}>
           <AsyncText text="B" ms={6000} />
         </Suspense>
       </React.Fragment>,
@@ -211,7 +211,7 @@ describe('ReactSuspense', () => {
     }
 
     const root = ReactTestRenderer.create(
-      <Suspense maxDuration={1000} fallback={<Text text="Loading..." />}>
+      <Suspense fallback={<Text text="Loading..." />}>
         <Async />
         <Text text="Sibling" />
       </Suspense>,
@@ -272,7 +272,7 @@ describe('ReactSuspense', () => {
   it('only captures if `fallback` is defined', () => {
     const root = ReactTestRenderer.create(
       <Suspense fallback={<Text text="Loading..." />}>
-        <Suspense maxDuration={100}>
+        <Suspense>
           <AsyncText text="Hi" ms={5000} />
         </Suspense>
       </Suspense>,
@@ -368,9 +368,7 @@ describe('ReactSuspense', () => {
 
       function App() {
         return (
-          <Suspense
-            maxDuration={1000}
-            fallback={<TextWithLifecycle text="Loading..." />}>
+          <Suspense fallback={<TextWithLifecycle text="Loading..." />}>
             <TextWithLifecycle text="A" />
             <AsyncTextWithLifecycle ms={100} text="B" ref={instance} />
             <TextWithLifecycle text="C" />
@@ -631,7 +629,7 @@ describe('ReactSuspense', () => {
 
       function App(props) {
         return (
-          <Suspense maxDuration={10} fallback={<Text text="Loading..." />}>
+          <Suspense fallback={<Text text="Loading..." />}>
             <Stateful />
           </Suspense>
         );
@@ -681,7 +679,7 @@ describe('ReactSuspense', () => {
 
       function App(props) {
         return (
-          <Suspense maxDuration={10} fallback={<ShouldMountOnce />}>
+          <Suspense fallback={<ShouldMountOnce />}>
             <AsyncText ms={1000} text="Child 1" />
             <AsyncText ms={2000} text="Child 2" />
             <AsyncText ms={3000} text="Child 3" />
@@ -726,7 +724,7 @@ describe('ReactSuspense', () => {
     it('does not get stuck with fallback in concurrent mode for a large delay', () => {
       function App(props) {
         return (
-          <Suspense maxDuration={10} fallback={<Text text="Loading..." />}>
+          <Suspense fallback={<Text text="Loading..." />}>
             <AsyncText ms={1000} text="Child 1" />
             <AsyncText ms={7000} text="Child 2" />
           </Suspense>

diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspenseFuzz-test.internal.js
@@ -268,11 +268,6 @@ describe('ReactSuspenseFuzz', () => {
             remainingElements--;
             const children = createRandomChildren(3);
 
-            const maxDuration = pickRandomWeighted(rand, [
-              {value: undefined, weight: 1},
-              {value: rand.intBetween(0, 5000), weight: 1},
-            ]);
-
             const fallbackType = pickRandomWeighted(rand, [
               {value: 'none', weight: 1},
               {value: 'normal', weight: 1},
@@ -290,11 +285,7 @@ describe('ReactSuspenseFuzz', () => {
               );
             }
 
-            return React.createElement(
-              Suspense,
-              {maxDuration, fallback},
-              ...children,
-            );
+            return React.createElement(Suspense, {fallback}, ...children);
           }
           case 'return':
           default: