,
text: string,
diff --git a/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js b/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js
index 3a2d854d332..977d2dbf154 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFizzSuspenseList-test.js
@@ -27,9 +27,10 @@ let writable;
let container;
let buffer = '';
let hasErrored = false;
+let hasCompleted = false;
let fatalError = undefined;
-describe('ReactDOMFizSuspenseList', () => {
+describe('ReactDOMFizzSuspenseList', () => {
beforeEach(() => {
jest.resetModules();
JSDOM = require('jsdom').JSDOM;
@@ -59,6 +60,7 @@ describe('ReactDOMFizSuspenseList', () => {
buffer = '';
hasErrored = false;
+ hasCompleted = false;
writable = new Stream.PassThrough();
writable.setEncoding('utf8');
@@ -69,6 +71,9 @@ describe('ReactDOMFizSuspenseList', () => {
hasErrored = true;
fatalError = error;
});
+ writable.on('finish', () => {
+ hasCompleted = true;
+ });
});
afterEach(() => {
@@ -103,7 +108,12 @@ describe('ReactDOMFizSuspenseList', () => {
function createAsyncText(text) {
let resolved = false;
+ let error = undefined;
const Component = function () {
+ if (error !== undefined) {
+ Scheduler.log('Error! [' + error.message + ']');
+ throw error;
+ }
if (!resolved) {
Scheduler.log('Suspend! [' + text + ']');
throw promise;
@@ -115,6 +125,10 @@ describe('ReactDOMFizSuspenseList', () => {
resolved = true;
return resolve();
};
+ Component.reject = function (e) {
+ error = e;
+ return resolve();
+ };
});
return Component;
}
@@ -183,6 +197,323 @@ describe('ReactDOMFizSuspenseList', () => {
);
});
+ // @gate enableSuspenseList
+ it('displays all "together"', async () => {
+ const A = createAsyncText('A');
+ const B = createAsyncText('B');
+ const C = createAsyncText('C');
+
+ function Foo() {
+ return (
+
+
+ }>
+
+
+ }>
+
+
+ }>
+
+
+
+
+ Loading A
+ Loading B
+ Loading C
+
,
+ );
+
+ await serverAct(() => B.resolve());
+ assertLog(['B']);
+
+ expect(getVisibleChildren(container)).toEqual(
+
+ Loading A
+ Loading B
+ Loading C
+
,
+ );
+
+ await serverAct(() => C.resolve());
+ assertLog(['C']);
+
+ expect(getVisibleChildren(container)).toEqual(
+
+ A
+ B
+ C
+
,
+ );
+ });
+
+ // @gate enableSuspenseList
+ it('displays all "together" in a single pass', async () => {
+ function Foo() {
+ return (
+
+
+ }>
+
+
+ }>
+
+
+ }>
+
+
+
+
+ );
+ }
+
+ const {pipe} = ReactDOMFizzServer.renderToPipeableStream();
+ pipe(writable);
+ await 0;
+ const bufferedContent = buffer;
+ buffer = '';
+
+ assertLog(['A', 'B', 'C', 'Loading A', 'Loading B', 'Loading C']);
+
+ expect(bufferedContent).toMatchInlineSnapshot(
+ `"ABC
"`,
+ );
+ });
+
+ // @gate enableSuspenseList
+ it('displays all "together" even when nested as siblings', async () => {
+ const A = createAsyncText('A');
+ const B = createAsyncText('B');
+ const C = createAsyncText('C');
+
+ function Foo() {
+ return (
+
+ );
+ }
+
+ await A.resolve();
+
+ await serverAct(async () => {
+ const {pipe} = ReactDOMFizzServer.renderToPipeableStream();
+ pipe(writable);
+ });
+
+ assertLog([
+ 'A',
+ 'Suspend! [B]',
+ 'Suspend! [C]',
+ 'Loading A',
+ 'Loading B',
+ 'Loading C',
+ ]);
+
+ expect(getVisibleChildren(container)).toEqual(
+
+
+ Loading A
+ Loading B
+
+
+ Loading C
+
+
+
+ Loading A
+ Loading B
+
+
+ Loading C
+
+
+
+ }>
+
+
+
+ }>
+
+
+ }>
+
+
+
+
+
+ Loading A
+ Loading B
+ Loading C
+
,
+ );
+
+ await serverAct(() => C.resolve());
+ assertLog(['C']);
+
+ expect(getVisibleChildren(container)).toEqual(
+
+ A
+ B
+ C
+
,
+ );
+ });
+
+ // @gate enableSuspenseList
+ it('displays all "together" in nested SuspenseLists where the inner is default', async () => {
+ const A = createAsyncText('A');
+ const B = createAsyncText('B');
+ const C = createAsyncText('C');
+
+ function Foo() {
+ return (
+
+
+ }>
+
+
+
+ }>
+
+
+ }>
+
+
+
+
+
+ Loading A
+ Loading B
+ Loading C
+
,
+ );
+
+ await serverAct(() => C.resolve());
+ assertLog(['C']);
+
+ expect(getVisibleChildren(container)).toEqual(
+
+ A
+ B
+ C
+
,
+ );
+ });
+
// @gate enableSuspenseList
it('displays each items in "forwards" order', async () => {
const A = createAsyncText('A');
@@ -397,4 +728,120 @@ describe('ReactDOMFizSuspenseList', () => {
,
);
});
+
+ // @gate enableSuspenseList
+ it('can abort a pending SuspenseList', async () => {
+ const A = createAsyncText('A');
+
+ function Foo() {
+ return (
+
+ );
+ }
+
+ const errors = [];
+ let abortStream;
+ await serverAct(async () => {
+ const {pipe, abort} = ReactDOMFizzServer.renderToPipeableStream(, {
+ onError(error) {
+ errors.push(error.message);
+ },
+ });
+ pipe(writable);
+ abortStream = abort;
+ });
+
+ assertLog([
+ 'Suspend! [A]',
+ 'B', // TODO: Defer rendering the content after fallback if previous suspended,
+ 'Loading A',
+ 'Loading B',
+ ]);
+
+ expect(getVisibleChildren(container)).toEqual(
+
+ Loading A
+ Loading B
+
,
+ );
+
+ await serverAct(() => {
+ abortStream();
+ });
+
+ expect(hasCompleted).toBe(true);
+ expect(errors).toEqual([
+ 'The render was aborted by the server without a reason.',
+ ]);
+ });
+
+ // @gate enableSuspenseList
+ it('can error a pending SuspenseList', async () => {
+ const A = createAsyncText('A');
+
+ function Foo() {
+ return (
+
+ );
+ }
+
+ const errors = [];
+ await serverAct(async () => {
+ const {pipe} = ReactDOMFizzServer.renderToPipeableStream(, {
+ onError(error) {
+ errors.push(error.message);
+ },
+ });
+ pipe(writable);
+ });
+
+ assertLog([
+ 'Suspend! [A]',
+ 'B', // TODO: Defer rendering the content after fallback if previous suspended,
+ 'Loading A',
+ 'Loading B',
+ ]);
+
+ expect(getVisibleChildren(container)).toEqual(
+
+ Loading A
+ Loading B
+
,
+ );
+
+ await serverAct(async () => {
+ A.reject(new Error('hi'));
+ });
+
+ assertLog(['Error! [hi]']);
+
+ expect(getVisibleChildren(container)).toEqual(
+
+ Loading A
+ B
+
,
+ );
+
+ expect(errors).toEqual(['hi']);
+ expect(hasErrored).toBe(false);
+ expect(hasCompleted).toBe(true);
+ });
});
diff --git a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
index 2d3f1f0b8b6..c2126b12f72 100644
--- a/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
+++ b/packages/react-dom/src/__tests__/ReactDOMFloat-test.js
@@ -21,6 +21,7 @@ let ReactDOM;
let ReactDOMClient;
let ReactDOMFizzServer;
let Suspense;
+let SuspenseList;
let textCache;
let loadCache;
let writable;
@@ -74,6 +75,7 @@ describe('ReactDOMFloat', () => {
ReactDOMFizzServer = require('react-dom/server');
Stream = require('stream');
Suspense = React.Suspense;
+ SuspenseList = React.unstable_SuspenseList;
Scheduler = require('scheduler/unstable_mock');
const InternalTestUtils = require('internal-test-utils');
@@ -5746,6 +5748,181 @@ body {
);
});
+ // @gate enableSuspenseList
+ it('delays "forwards" SuspenseList rows until the css of previous rows have completed', async () => {
+ await act(() => {
+ renderToPipeableStream(
+
+
+
+
+
+
+
+ foo
+
+
+ bar
+
+
+ baz
+
+
+
+
+
+ ,
+ ).pipe(writable);
+ });
+
+ expect(getMeaningfulChildren(document)).toEqual(
+
+
+ loading...
+ ,
+ );
+
+ // unblock css loading
+ await act(() => {
+ resolveText('foo');
+ });
+
+ // bar is still blocking the whole list
+ expect(getMeaningfulChildren(document)).toEqual(
+
+
+