Add apollo react testing example

Author: Mathieuu

package-lock.json

@@ -18,6 +18,7 @@
     "graphql-tag": "^2.10.1",
     "graphql-tools": "^4.0.5",
     "graphql.macro": "^1.4.2",
+    "ramda": "^0.26.1",
     "react": "^16.9.0",
     "react-apollo": "^3.0.0",
     "react-dom": "^16.9.0",
@@ -43,5 +44,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@apollo/react-testing": "^3.0.0"
   }
 }

package.json

@@ -1,9 +1,14 @@
 import React from "react";
 import "./App.css";
-import Repository from "./Repository";
-import ApolloMockingProvider from "./mocking/ApolloMockingProvider";
+import Repository, { gqlQuery } from "./Repository";
+import ApolloMockingProvider, { getClient } from "./mocking/ApolloMockingProvider";
 
 function App() {
+  // Demo random data generation (maybe disable defaultMocks?)
+  // getClient({})
+  //   .query({ query: gqlQuery(1) })
+  //   .then(res => console.log("Random data", res.data));
+
   return (
     <div className="App">
       <ApolloMockingProvider customResolvers={{}}>

src/App.js

@@ -2,7 +2,7 @@ import React from "react";
 import gql from "graphql-tag";
 import { Query } from "react-apollo";
 
-const gqlQuery = ghId => {
+export const gqlQuery = ghId => {
   return gql`
     {
       repositoryByGhId(ghId: ${ghId}) {

src/Repository.js

@@ -1,21 +1,21 @@
 import React from "react";
-import Repository from "./Repository";
-import { render } from "./mocking/ApolloMockingProvider";
+import Repository, { gqlQuery } from "./Repository";
+import { getClient, render } from "./mocking/ApolloMockingProvider";
 
 const zenhubRepo = {
-  Repository: () => ({
+  Repository: {
     name: "ZenHubHQ"
-  })
+  }
 };
 
 const threeIssues = {
-  Repository: () => ({
+  Repository: {
     issues: [
       { number: 1, title: "Issue 1" },
       { number: 2, title: "Issue 2" },
       { number: 3, title: "Issue 3" }
     ]
-  })
+  }
 };
 
 describe("<Repository />", () => {

src/Repository.test.jsx

@@ -0,0 +1,62 @@
+import React from "react";
+import * as R from "ramda";
+import Repository, { gqlQuery } from "./Repository";
+import { MockedProvider } from "@apollo/react-testing";
+import { render } from "@testing-library/react";
+import { getClient } from "./mocking/ApolloMockingProvider";
+
+describe("<Repository alternative mocking/>", () => {
+  test("renders repository with official apollo mocked provider", async () => {
+    const mocks = [
+      {
+        request: {
+          query: gqlQuery(1)
+        },
+        result: {
+          data: {
+            repositoryByGhId: {
+              ghId: 1,
+              name: "ZenHubHQ",
+              description: "hello world",
+              isPrivate: true,
+              updatedAt: new Date(),
+
+              issues: []
+            }
+          }
+        }
+      }
+    ];
+
+    const { findByText } = render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <Repository ghId={1} />
+      </MockedProvider>
+    );
+
+    await findByText("ZenHubHQ");
+  });
+
+  test("renders repository with official apollo mocked provider but automatically generated data", async () => {
+    const preRes = await getClient().query({ query: gqlQuery(1) });
+
+    const result = R.assocPath(["data", "repositoryByGhId", "name"], "ZenHubHQ", preRes);
+
+    const mocks = [
+      {
+        request: {
+          query: gqlQuery(1)
+        },
+        result
+      }
+    ];
+
+    const { findByText } = render(
+      <MockedProvider mocks={mocks} addTypename={false}>
+        <Repository ghId={1} />
+      </MockedProvider>
+    );
+
+    await findByText("ZenHubHQ");
+  });
+});

src/Repository_alternative.test.jsx

@@ -15,10 +15,9 @@ import mergeResolvers from "./mergeResolvers";
 
 const ApplicationSchema = loader("./schema.graphql");
 
-// For queries with no variables
 const schema = makeExecutableSchema({ typeDefs: ApplicationSchema });
 
-export const getClient = customResolvers => {
+export const getClient = (customResolvers = {}) => {
   const mocks = mergeResolvers([defaultMocks, customResolvers]);
 
   addMockFunctionsToSchema({ schema, mocks });

src/mocking/ApolloMockingProvider.jsx

@@ -24,16 +24,16 @@ const jan2019 = new Date(1546510000000);
 
 const resolvers = {
   ISO8601DateTime: () => jan2019,
-  Repository: () => ({
-    ghId: getNextId,
-    name: formatRepoName(faker.commerce.productName()),
-    description: faker.company.catchPhrase()
-  }),
-  Issue: () => ({
+  Repository: {
+    ghId: () => getNextId(),
+    name: () => formatRepoName(faker.commerce.productName()),
+    description: () => faker.company.catchPhrase()
+  },
+  Issue: {
     number: getNextId,
     title: () => faker.hacker.phrase(),
-    state: () => (Math.random() > 0.5 ? "open" : "closed")
-  })
+    state: () => "open"
+  }
 };
 
 export default resolvers;

src/mocking/defaultMocks.js

@@ -1,4 +1,4 @@
-/* Copy pasted (without typescript) from https://raw.githubusercontent.com/ardatan/graphql-toolkit/master/src/epoxy/resolvers-mergers/merge-resolvers.ts, the package doesn't work with webpack (missing fs) */
+/* Simplified version of https://raw.githubusercontent.com/ardatan/graphql-toolkit/master/src/epoxy/resolvers-mergers/merge-resolvers.ts, the package doesn't work with webpack (missing fs) */
 
 import * as deepMerge from "deepmerge";
 import { GraphQLScalarType } from "graphql";
@@ -23,42 +23,35 @@ const isMergeableObject = target => {
   return true;
 };
 
-function mergeResolvers(resolversDefinitions, options) {
+// IMPORTANT: When converting object to function, always return a copy of the resolver instead of the resolver:
+// mergeObjects mutates the resolver which would result in strange behaviours
+
+// (addMockFunctionsToSchema -> mergeMocks -> mergeObjects)
+function convertObjectTypesToFunctions(resolvers) {
+  return Object.keys(resolvers).reduce((acc, key) => {
+    if (typeof resolvers[key] === "function") {
+      acc[key] = resolvers[key];
+      return acc;
+    } else if (typeof resolvers[key] === "object") {
+      acc[key] = () => ({ ...resolvers[key] }); // See top function comment
+      return acc;
+    } else {
+      throw new Error("Mock entry must be object or function");
+    }
+  }, {});
+}
+
+// TODO PR Explain the magic
+function mergeResolvers(resolversDefinitions) {
   if (!resolversDefinitions || resolversDefinitions.length === 0) {
     return {};
   }
   if (resolversDefinitions.length === 1) {
     return resolversDefinitions[0];
   }
-  const resolversFactories = [];
-  const resolvers = [];
-  for (const resolversDefinition of resolversDefinitions) {
-    if (typeof resolversDefinition === "function") {
-      resolversFactories.push(resolversDefinition);
-    } else if (typeof resolversDefinition === "object") {
-      resolvers.push(resolversDefinition);
-    }
-  }
-  let result = {};
-  if (resolversFactories.length) {
-    result = (...args) => {
-      const resultsOfFactories = resolversFactories.map(factory => factory(...args));
-      return deepMerge.all([...resolvers, ...resultsOfFactories], { isMergeableObject });
-    };
-  } else {
-    result = deepMerge.all(resolvers, { isMergeableObject });
-  }
-  if (options && options.exclusions) {
-    for (const exclusion of options.exclusions) {
-      const [typeName, fieldName] = exclusion.split(".");
-      if (!fieldName || fieldName === "*") {
-        delete result[typeName];
-      } else if (result[typeName]) {
-        delete result[typeName][fieldName];
-      }
-    }
-  }
-  return result;
+  const resolvers = deepMerge.all(resolversDefinitions, { isMergeableObject });
+
+  return convertObjectTypesToFunctions(resolvers);
 }
 
 export default mergeResolvers;