Float tests

Author: mofeiZ

packages/react-dom/src/__tests__/ReactDOMFizzServer-test.js

@@ -8,7 +8,12 @@
  */
 
 'use strict';
-import {replaceScriptsAndMove, mergeOptions} from '../test-utils/FizzTestUtils';
+import {
+  replaceScriptsAndMove,
+  mergeOptions,
+  stripExternalRuntimeInString,
+  stripExternalRuntimeInNodes,
+} from '../test-utils/FizzTestUtils';
 
 let JSDOM;
 let Stream;
@@ -577,7 +582,12 @@ describe('ReactDOMFizzServer', () => {
     // Because there is no content inside the Suspense boundary that could've
     // been written, we expect to not see any additional partial data flushed
     // yet.
-    expect(container.childNodes.length).toBe(1);
+    expect(
+      stripExternalRuntimeInNodes(
+        container.childNodes,
+        renderOptions.unstable_externalRuntimeSrc,
+      ).length,
+    ).toBe(1);
     await act(async () => {
       resolveElement({default: <Text text="Hello" />});
     });
@@ -3471,21 +3481,19 @@ describe('ReactDOMFizzServer', () => {
         </body>
       </html>,
     );
-    const expectedScripts = [
+    expect(
+      stripExternalRuntimeInNodes(
+        document.getElementsByTagName('script'),
+        renderOptions.unstable_externalRuntimeSrc,
+      ).map(n => n.outerHTML),
+    ).toEqual([
       '<script src="foo" async=""></script>',
       '<script src="bar" async=""></script>',
       '<script src="baz" integrity="qux" async=""></script>',
       '<script type="module" src="quux" async=""></script>',
       '<script type="module" src="corge" async=""></script>',
       '<script type="module" src="grault" integrity="garply" async=""></script>',
-    ];
-    let actualScripts = Array.from(document.getElementsByTagName('script')).map(
-      n => n.outerHTML,
-    );
-    if (gate(flags => flags.enableFizzExternalRuntime)) {
-      actualScripts = actualScripts.slice(1);
-    }
-    expect(actualScripts).toEqual(expectedScripts);
+    ]);
   });
 
   describe('bootstrapScriptContent escaping', () => {
@@ -4494,10 +4502,12 @@ describe('ReactDOMFizzServer', () => {
         const {pipe} = renderToPipeableStream(<App name="Foo" />);
         pipe(writable);
       });
-
-      expect(container.innerHTML).toEqual(
-        '<div>hello<b>world, <!-- -->Foo</b>!</div>',
-      );
+      expect(
+        stripExternalRuntimeInString(
+          container.innerHTML,
+          renderOptions.unstable_externalRuntimeSrc,
+        ),
+      ).toEqual('<div>hello<b>world, <!-- -->Foo</b>!</div>');
       const errors = [];
       ReactDOMClient.hydrateRoot(container, <App name="Foo" />, {
         onRecoverableError(error) {
@@ -4542,13 +4552,14 @@ describe('ReactDOMFizzServer', () => {
       expect(container.firstElementChild.outerHTML).toEqual(
         '<div id="app-div">hello<b>world, Foo</b>!</div>',
       );
-      // there are extra script / data nodes at the end of container
-      if (gate(flags => flags.enableFizzExternalRuntime)) {
-        // extra script node inserted for the external runtime
-        expect(container.childNodes.length).toBe(6);
-      } else {
-        expect(container.childNodes.length).toBe(5);
-      }
+      // there are extra script nodes at the end of container
+      expect(
+        stripExternalRuntimeInNodes(
+          container.childNodes,
+          renderOptions.unstable_externalRuntimeSrc,
+        ).length,
+      ).toBe(5);
+
       const div = container.childNodes[1];
       expect(div.childNodes.length).toBe(3);
       const b = div.childNodes[1];
@@ -4851,8 +4862,12 @@ describe('ReactDOMFizzServer', () => {
         pipe(writable);
       });
 
-      // strip inserted external runtime
-      expect(container.innerHTML).toEqual(
+      expect(
+        stripExternalRuntimeInString(
+          container.innerHTML,
+          renderOptions.unstable_externalRuntimeSrc,
+        ),
+      ).toEqual(
         '<div><!--$-->hello<!-- -->world<!-- --><!--/$--><!--$-->world<!-- --><!--/$--><!--$-->hello<!-- -->world<!-- --><br><!--/$--><!--$-->world<!-- --><br><!--/$--></div>',
       );
 

packages/react-dom/src/__tests__/ReactDOMFloat-test.js

@@ -8,7 +8,11 @@
  */
 
 'use strict';
-import {replaceScriptsAndMove, mergeOptions} from '../test-utils/FizzTestUtils';
+import {
+  replaceScriptsAndMove,
+  mergeOptions,
+  stripExternalRuntimeInString,
+} from '../test-utils/FizzTestUtils';
 
 let JSDOM;
 let Stream;
@@ -26,7 +30,7 @@ let container;
 let buffer = '';
 let hasErrored = false;
 let fatalError = undefined;
-const renderOptions = {};
+let renderOptions;
 const rollupCache: Map<string, string | null> = new Map();
 
 describe('ReactDOMFloat', () => {
@@ -65,6 +69,12 @@ describe('ReactDOMFloat', () => {
       hasErrored = true;
       fatalError = error;
     });
+
+    renderOptions = {};
+    if (gate(flags => flags.enableFizzExternalRuntime)) {
+      renderOptions.unstable_externalRuntimeSrc =
+        '../server/ReactDOMServerExternalRuntime.js';
+    }
   });
 
   function normalizeCodeLocInfo(str) {
@@ -529,6 +539,12 @@ describe('ReactDOMFloat', () => {
       );
       pipe(writable);
     });
+    if (gate(flags => flags.enableFizzExternalRuntime)) {
+      chunks[0] = stripExternalRuntimeInString(
+        chunks[0],
+        renderOptions.unstable_externalRuntimeSrc,
+      );
+    }
     expect(chunks).toEqual([
       '<!DOCTYPE html><html><script async="" src="foo"></script><title>foo</title><body>bar',
       '</body></html>',

packages/react-dom/src/test-utils/FizzTestUtils.js

@@ -122,4 +122,40 @@ function mergeOptions(options: Object, defaultOptions: Object): Object {
   };
 }
 
-export {replaceScriptsAndMove, mergeOptions};
+function stripExternalRuntimeInString(
+  source: string,
+  externalRuntimeSrc: string | null,
+): string {
+  if (externalRuntimeSrc == null) {
+    return source;
+  }
+  const matchExternalRuntimeTag = new RegExp(
+    '<script src="' + externalRuntimeSrc + '"[\\s\\S]*/script>',
+    'm',
+  );
+  return source.replace(matchExternalRuntimeTag, '');
+}
+
+function stripExternalRuntimeInNodes(
+  nodes: HTMLElement[] | HTMLCollection<HTMLElement>,
+  externalRuntimeSrc: string | null,
+): HTMLElement[] {
+  if (!Array.isArray(nodes)) {
+    nodes = Array.from(nodes);
+  }
+  if (externalRuntimeSrc == null) {
+    return nodes;
+  }
+  return nodes.filter(
+    n =>
+      (n.tagName !== 'SCRIPT' && n.tagName !== 'script') ||
+      n.getAttribute('src') !== externalRuntimeSrc,
+  );
+}
+
+export {
+  replaceScriptsAndMove,
+  mergeOptions,
+  stripExternalRuntimeInString,
+  stripExternalRuntimeInNodes,
+};