add more tests for react query to increase test coverage (#1800)

electrode-io · Jan 28, 2021 · 81aa193 · 81aa193
1 parent 04bd73c
commit 81aa193
Show file tree

Hide file tree

Showing 4 changed files with 170 additions and 16 deletions.
diff --git a/packages/xarc-react-query/src/browser/index.tsx b/packages/xarc-react-query/src/browser/index.tsx
@@ -46,6 +46,7 @@ export function reactQueryFeature(options: ReactQueryFeatureOptions): SubAppFeat
 
     reactQuery.execute = async function ({ input, csrData }) {
       const dehydratedState = csrData.getInitialState();
+
       const WrapComp = this.wrap({
         Component:
           input.Component || envHooks.getContainer().get(subAppName)._getExport()?.Component,

diff --git a/packages/xarc-react-query/test/prefetch-empty-res.ts b/packages/xarc-react-query/test/prefetch-empty-res.ts
@@ -0,0 +1,3 @@
+export const prefetchQuery = async ({ queryClient }) => {
+  return {};
+};
diff --git a/packages/xarc-react-query/test/spec/browser-index.spec.tsx b/packages/xarc-react-query/test/spec/browser-index.spec.tsx
@@ -37,7 +37,7 @@ describe("reactQueryFeature browser", function () {
     expect(def._features.reactQuery).to.be.an("object");
   });
 
-  it("should render subapp with react-query", async () => {
+  it("should render subapp with react-query when component exists on input", async () => {
     const container = new SubAppContainer({});
     envHooks.getContainer = () => container;
 
@@ -77,11 +77,54 @@ describe("reactQueryFeature browser", function () {
       }
     });
 
-    expect(res).to.be.an("object");
     render(<res.Component />);
 
     const element = await waitFor(() => screen.getByText("test"), { timeout: 500 });
 
     expect(element.innerHTML).contains(`<p>{"msg":"foo","queryKey":["test"]}</p>`);
   });
+
+  it("should render subapp with react-query when input component does not exist", async () => {
+    const container = new SubAppContainer({});
+    envHooks.getContainer = () => container;
+
+    const factory = reactQueryFeature({ React });
+
+    const def = {
+      name: "test",
+      getModule() {
+        return Promise.resolve({});
+      },
+      _features: {},
+      _getExport: () => {
+        return {
+          Component: () => (
+            <div>
+              test <p>text</p>
+            </div>
+          )
+        };
+      }
+    } as SubAppDef;
+
+    container.declare("test", def);
+
+    factory.add(def);
+
+    const res = await def._features.reactQuery.execute({
+      input: {
+        Component: undefined
+      },
+      csrData: {
+        name: "test",
+        getInitialState: () => "test"
+      }
+    });
+
+    render(<res.Component />);
+
+    const element = await waitFor(() => screen.getByText("test"), { timeout: 500 });
+
+    expect(element.innerHTML).equal(`test <p>text</p>`);
+  });
 });
diff --git a/packages/xarc-react-query/test/spec/node-index.spec.tsx b/packages/xarc-react-query/test/spec/node-index.spec.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable prefer-arrow-callback */
+import "jsdom-global/register";
 import React from "react"; // eslint-disable-line
 import { describe, it } from "mocha";
 import { expect } from "chai";
@@ -7,6 +8,7 @@ import { SubAppDef, SubAppContainer, envHooks } from "@xarc/subapp";
 import { useQuery } from "react-query";
 import { reactQueryFeature } from "../../src/node/index";
 import { testFetch } from "../prefetch";
+import { render, waitFor, screen } from "@testing-library/react";
 
 const { createElement } = React; // eslint-disable-line
 
@@ -59,19 +61,74 @@ describe("reactQueryFeature node.js", function () {
     const result = await def._features.reactQuery.execute({
       input: {
         Component: () => {
-          const { data } = useQuery("test", testFetch);
-          return <div>test {JSON.stringify(data)}</div>;
+          const { data } = useQuery(
+            "test",
+            testFetch,
+            // ensure react-query doesn't keep node.js running with its timers
+            { cacheTime: 200 }
+          );
+          return (
+            <div>
+              test <p>{JSON.stringify(data)}</p>
+            </div>
+          );
         }
       }
     });
 
     const str = renderToString(<result.Component />);
 
     expect(str).equals(
-      `<div>test <!-- -->{&quot;msg&quot;:&quot;foo&quot;,&quot;queryKey&quot;:[&quot;test&quot;]}</div>`
+      `<div>test <p>{&quot;msg&quot;:&quot;foo&quot;,&quot;queryKey&quot;:[&quot;test&quot;]}</p></div>`
     );
   });
 
+  it("should render subapp with react-query if nothing gets prefetched", async () => {
+    const container = new SubAppContainer({});
+
+    envHooks.getContainer = () => container;
+
+    const factory = reactQueryFeature({
+      React,
+      serverModule: require.resolve("../prefetch-empty-res")
+    });
+
+    const def = {
+      name: "test",
+      getModule() {
+        return Promise.resolve({});
+      },
+      _features: {}
+    } as SubAppDef;
+
+    container.declare("test", def);
+
+    factory.add(def);
+    const res = await def._features.reactQuery.execute({
+      input: {
+        Component: () => {
+          const { data } = useQuery(
+            "test",
+            testFetch,
+            // ensure react-query doesn't keep node.js running with its timers
+            { cacheTime: 200 }
+          );
+          return (
+            <div>
+              test <p>{JSON.stringify(data)}</p>
+            </div>
+          );
+        }
+      }
+    });
+
+    render(<res.Component />);
+
+    const element = await waitFor(() => screen.getByText("test"), { timeout: 500 });
+
+    expect(element.innerHTML).equal(`test <p>{"msg":"foo","queryKey":["test"]}</p>`);
+  });
+
   it("should render subapp with react-query if it fails on fetching data when doing SSR", async () => {
     const container = new SubAppContainer({});
 
@@ -94,22 +151,72 @@ describe("reactQueryFeature node.js", function () {
 
     factory.add(def);
 
-    (def._features.reactQuery as any).wrap = props => {
-      return JSON.stringify(props);
-    };
-
-    const result = await def._features.reactQuery.execute({
+    const res = await def._features.reactQuery.execute({
       input: {
         Component: () => {
-          const { data } = useQuery("test", testFetch);
-          return <div>test {JSON.stringify(data)}</div>;
+          const { data } = useQuery(
+            "test",
+            testFetch,
+            // ensure react-query doesn't keep node.js running with its timers
+            { cacheTime: 200 }
+          );
+          return (
+            <div>
+              test <p>{JSON.stringify(data)}</p>
+            </div>
+          );
         }
       }
     });
 
-    const mockComponentFunc = result.Component;
-    expect(mockComponentFunc()).equals(
-      `{"queryClient":{"queryCache":{"listeners":[],"config":{},"queries":[],"queriesMap":{}},"mutationCache":{"listeners":[],"config":{},"mutations":[],"mutationId":0},"defaultOptions":{},"queryDefaults":[],"mutationDefaults":[]},"dehydratedState":{"mutations":[],"queries":[]}}`
-    );
+    render(<res.Component />);
+
+    const element = await waitFor(() => screen.getByText("test"), { timeout: 500 });
+
+    expect(element.innerHTML).contains(`<p>{"msg":"foo","queryKey":["test"]}</p>`);
+  });
+
+  it("should render subapp with react-query when input component does not exist", async () => {
+    const container = new SubAppContainer({});
+
+    envHooks.getContainer = () => container;
+
+    const factory = reactQueryFeature({
+      React,
+      serverModule: undefined
+    });
+
+    const def = {
+      name: "test",
+      getModule() {
+        return Promise.resolve({});
+      },
+      _features: {},
+      _getExport: () => {
+        return {
+          Component: () => (
+            <div>
+              test <p>text</p>
+            </div>
+          )
+        };
+      }
+    } as SubAppDef;
+
+    container.declare("test", def);
+
+    factory.add(def);
+
+    const res = await def._features.reactQuery.execute({
+      input: {
+        Component: undefined
+      }
+    });
+
+    render(<res.Component />);
+
+    const element = await waitFor(() => screen.getByText("test"), { timeout: 500 });
+
+    expect(element.innerHTML).contains(`test <p>text</p>`);
   });
 });