Tests

facebook · Mar 23, 2020 · c7b09c8 · c7b09c8
1 parent 24afc93
commit c7b09c8
Show file tree

Hide file tree

Showing 8 changed files with 230 additions and 53 deletions.
diff --git a/packages/react-client/src/__tests__/ReactFlight-test.js b/packages/react-client/src/__tests__/ReactFlight-test.js
@@ -10,7 +10,9 @@
 
 'use strict';
 
+let act;
 let React;
+let ReactNoop;
 let ReactNoopFlightServer;
 let ReactNoopFlightClient;
 
@@ -19,24 +21,76 @@ describe('ReactFlight', () => {
     jest.resetModules();
 
     React = require('react');
+    ReactNoop = require('react-noop-renderer');
     ReactNoopFlightServer = require('react-noop-renderer/flight-server');
     ReactNoopFlightClient = require('react-noop-renderer/flight-client');
+    act = ReactNoop.act;
   });
 
-  it('can resolve a model', () => {
+  function block(query, render) {
+    return function(...args) {
+      let curriedQuery = () => {
+        return query(...args);
+      };
+      return [Symbol.for('react.server.block'), render, curriedQuery];
+    };
+  }
+
+  it('can render a server component', () => {
     function Bar({text}) {
       return text.toUpperCase();
     }
     function Foo() {
       return {
-        bar: [<Bar text="a" />, <Bar text="b" />],
+        bar: (
+          <div>
+            <Bar text="a" />, <Bar text="b" />
+          </div>
+        ),
       };
     }
     let transport = ReactNoopFlightServer.render({
       foo: <Foo />,
     });
     let root = ReactNoopFlightClient.read(transport);
     let model = root.model;
-    expect(model).toEqual({foo: {bar: ['A', 'B']}});
+    expect(model).toEqual({
+      foo: {
+        bar: (
+          <div>
+            {'A'}
+            {', '}
+            {'B'}
+          </div>
+        ),
+      },
+    });
+  });
+
+  it.experimental('can transfer a Block to the client and render there', () => {
+    function Query(firstName, lastName) {
+      return {name: firstName + ' ' + lastName};
+    }
+    function User(props, data) {
+      return (
+        <span>
+          {props.greeting}, {data.name}
+        </span>
+      );
+    }
+    let loadUser = block(Query, User);
+    let model = {
+      User: loadUser('Seb', 'Smith'),
+    };
+
+    let transport = ReactNoopFlightServer.render(model);
+    let root = ReactNoopFlightClient.read(transport);
+
+    act(() => {
+      let UserClient = root.model.User;
+      ReactNoop.render(<UserClient greeting="Hello" />);
+    });
+
+    expect(ReactNoop).toMatchRenderedOutput(<span>Hello, Seb Smith</span>);
   });
 });
diff --git a/packages/react-flight-dom-relay/src/__mocks__/ReactFlightDOMRelayClientIntegration.js b/packages/react-flight-dom-relay/src/__mocks__/ReactFlightDOMRelayClientIntegration.js
@@ -7,19 +7,13 @@
 
 'use strict';
 
-function getFakeModule() {
-  return function FakeModule(props, data) {
-    return data;
-  };
-}
-
 const ReactFlightDOMRelayClientIntegration = {
   resolveModuleReference(moduleData) {
     return moduleData;
   },
   preloadModule(moduleReference) {},
   requireModule(moduleReference) {
-    return getFakeModule();
+    return moduleReference;
   },
 };
 

diff --git a/packages/react-flight-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js b/packages/react-flight-dom-relay/src/__mocks__/ReactFlightDOMRelayServerIntegration.js
@@ -23,7 +23,7 @@ const ReactFlightDOMRelayServerIntegration = {
     });
   },
   close(destination) {},
-  resolveModuleMetaDataImpl(resource) {
+  resolveModuleMetaData(resource) {
     return resource;
   },
 };

diff --git a/packages/react-flight-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js b/packages/react-flight-dom-relay/src/__tests__/ReactFlightDOMRelay-test.internal.js
@@ -7,36 +7,24 @@
 
 'use strict';
 
+let act;
 let React;
+let ReactDOM;
 let ReactDOMFlightRelayServer;
 let ReactDOMFlightRelayClient;
 
 describe('ReactFlightDOMRelay', () => {
   beforeEach(() => {
     jest.resetModules();
 
+    act = require('react-dom/test-utils').act;
     React = require('react');
+    ReactDOM = require('react-dom');
     ReactDOMFlightRelayServer = require('react-flight-dom-relay/server');
     ReactDOMFlightRelayClient = require('react-flight-dom-relay');
   });
 
-  it('can resolve a model', () => {
-    function Bar({text}) {
-      return text.toUpperCase();
-    }
-    function Foo() {
-      return {
-        bar: [<Bar text="a" />, <Bar text="b" />],
-      };
-    }
-    let data = [];
-    ReactDOMFlightRelayServer.render(
-      {
-        foo: <Foo />,
-      },
-      data,
-    );
-
+  function readThrough(data) {
     let response = ReactDOMFlightRelayClient.createResponse();
     for (let i = 0; i < data.length; i++) {
       let chunk = data[i];
@@ -53,6 +41,81 @@ describe('ReactFlightDOMRelay', () => {
     }
     let model = ReactDOMFlightRelayClient.getModelRoot(response).model;
     ReactDOMFlightRelayClient.close(response);
-    expect(model).toEqual({foo: {bar: ['A', 'B']}});
+    return model;
+  }
+
+  function block(query, render) {
+    return function(...args) {
+      let curriedQuery = () => {
+        return query(...args);
+      };
+      return [Symbol.for('react.server.block'), render, curriedQuery];
+    };
+  }
+
+  it('can render a server component', () => {
+    function Bar({text}) {
+      return text.toUpperCase();
+    }
+    function Foo() {
+      return {
+        bar: (
+          <div>
+            <Bar text="a" />, <Bar text="b" />
+          </div>
+        ),
+      };
+    }
+    let transport = [];
+    ReactDOMFlightRelayServer.render(
+      {
+        foo: <Foo />,
+      },
+      transport,
+    );
+
+    let model = readThrough(transport);
+    expect(model).toEqual({
+      foo: {
+        bar: (
+          <div>
+            {'A'}
+            {', '}
+            {'B'}
+          </div>
+        ),
+      },
+    });
+  });
+
+  it.experimental('can transfer a Block to the client and render there', () => {
+    function Query(firstName, lastName) {
+      return {name: firstName + ' ' + lastName};
+    }
+    function User(props, data) {
+      return (
+        <span>
+          {props.greeting}, {data.name}
+        </span>
+      );
+    }
+    let loadUser = block(Query, User);
+    let model = {
+      User: loadUser('Seb', 'Smith'),
+    };
+
+    let transport = [];
+    ReactDOMFlightRelayServer.render(model, transport);
+
+    let modelClient = readThrough(transport);
+
+    let container = document.createElement('div');
+    let root = ReactDOM.createRoot(container);
+    act(() => {
+      let UserClient = modelClient.User;
+      root.render(<UserClient greeting="Hello" />);
+    });
+
+    expect(container.innerHTML).toEqual('<span>Hello, Seb Smith</span>');
   });
 });