First commit

Author: Mathieuu

package-lock.json

@@ -3,7 +3,23 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@testing-library/react": "^9.1.0",
+    "apollo-cache-inmemory": "^1.6.3",
+    "apollo-client": "^2.6.4",
+    "apollo-link": "^1.2.12",
+    "apollo-link-context": "^1.0.18",
+    "apollo-link-error": "^1.1.11",
+    "apollo-link-http": "^1.5.15",
+    "apollo-link-schema": "^1.2.3",
+    "deepmerge": "^4.0.0",
+    "faker": "^4.1.0",
+    "graphql": "^14.4.2",
+    "graphql-anywhere": "^4.2.4",
+    "graphql-tag": "^2.10.1",
+    "graphql-tools": "^4.0.5",
+    "graphql.macro": "^1.4.2",
     "react": "^16.9.0",
+    "react-apollo": "^3.0.0",
     "react-dom": "^16.9.0",
     "react-scripts": "3.1.0"
   },

package.json

@@ -1,33 +1,46 @@
-.App {
-  text-align: center;
+body {
+  background-color: #f5f5f5;
 }
 
-.App-logo {
-  animation: App-logo-spin infinite 20s linear;
-  height: 40vmin;
-  pointer-events: none;
+.c-repository {
+  margin: 15px;
+  padding: 10px;
+  background-color: white;
+  border: 1px #e5e5e5;
+  border-style: solid;
+  max-width: 800px;
 }
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.c-repository__row {
+  padding: 5px;
+  border: #bbbbbb 1px solid;
+}
+
+.c-repository__row + .c-repository__row {
+  border-top: none;
+}
+
+.c-issue {
   display: flex;
-  flex-direction: column;
   align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
 }
 
-.App-link {
-  color: #61dafb;
+.c-issue div + div {
+  margin-left: 5px;
+}
+
+.c-issue-icon {
+  min-width: 5px;
+  height: 15px;
+  width: 15px;
+  background-color: #bbb;
+  border-radius: 50%;
+}
+
+.c-issue-icon--open {
+  background-color: green;
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
+.c-issue-icon--closed {
+  background-color: red;
 }

src/App.css

@@ -1,24 +1,14 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import React from "react";
+import "./App.css";
+import Repository from "./Repository";
+import ApolloMockingProvider from "./mocking/ApolloMockingProvider";
 
 function App() {
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      <ApolloMockingProvider customResolvers={{}}>
+        <Repository ghId={111} />
+      </ApolloMockingProvider>
     </div>
   );
 }

src/App.js

@@ -0,0 +1,84 @@
+import React from "react";
+import gql from "graphql-tag";
+import { Query } from "react-apollo";
+
+const gqlQuery = ghId => {
+  return gql`
+    {
+      repositoryByGhId(ghId: ${ghId}) {
+        ghId
+        name
+        description
+        isPrivate
+        updatedAt
+        issues {
+          number
+          title
+          state
+        }
+      }
+    }
+  `;
+};
+
+function Issue({ title, number, state }) {
+  return (
+    <div className="c-issue">
+      <div className={`c-issue-icon c-issue-icon--${state}`} />
+      <div>#{number}</div>
+      <div>{title}</div>
+    </div>
+  );
+}
+
+function Repository({ ghId }) {
+  return (
+    <Query query={gqlQuery(ghId)}>
+      {({ data, error, loading }) => {
+        if (error) {
+          console.error("There is an gql error ", error);
+        }
+
+        if (loading) {
+          return <div>Loading...</div>;
+        }
+
+        const { name, description, isPrivate, updatedAt, issues } = data.repositoryByGhId;
+
+        return (
+          <div className="c-repository">
+            <h1>Repository {ghId}</h1>
+            <div className="c-repository__row">
+              <strong>Name: </strong>
+              {name}
+            </div>
+            <div className="c-repository__row">
+              <strong>Description: </strong>
+              {description}
+            </div>
+            <div className="c-repository__row">
+              <strong>Visibility: </strong>
+              {isPrivate ? "Private" : "Public"}
+            </div>
+            <div className="c-repository__row">
+              <strong>Last modified: </strong>
+              {updatedAt.toLocaleDateString()}{" "}
+            </div>
+            <div className="c-repository__row">
+              <strong>Issues: </strong>
+              <ul>
+                {issues.map(issue => (
+                  <li key={issue.number}>
+                    <Issue {...issue} />
+                  </li>
+                ))}
+              </ul>
+            </div>
+          </div>
+        );
+      }}
+    </Query>
+  );
+}
+
+export default Repository;

src/App.test.js

@@ -0,0 +1,31 @@
+import React from "react";
+import Repository from "./Repository";
+import { render } from "./mocking/ApolloMockingProvider";
+
+const zenhubRepo = {
+  Repository: () => ({
+    name: 'ZenHubHQ'
+  })
+};
+
+const threeIssues = {
+  Repository: () => ({
+    issues: [{ number: 1, title: "Issue 1" }, { number:2, title: "Issue 2" }, { number:3, title: "Issue 3" }]
+  }),
+};
+
+describe("<Repository />", () => {
+  test("renders repository name", async () => {
+    const { findByText } = render(<Repository ghId={1} />, zenhubRepo);
+
+    await findByText("ZenHubHQ");
+  });
+
+  test("renders a list of issues", async () => {
+    const { findByText } = render(<Repository ghId={1} />, threeIssues);
+
+    await findByText("Issue 1");
+    await findByText("Issue 2");
+    await findByText("Issue 3");
+  });
+});

src/Repository.js

@@ -0,0 +1,53 @@
+import React from "react";
+import PropTypes from "prop-types";
+import * as ReactTestingLibrary from "@testing-library/react";
+
+import { loader } from "graphql.macro";
+import { makeExecutableSchema, addMockFunctionsToSchema } from "graphql-tools";
+
+import { ApolloClient } from "apollo-client";
+import { InMemoryCache } from "apollo-cache-inmemory";
+import { ApolloProvider } from "react-apollo";
+import { SchemaLink } from "apollo-link-schema";
+
+import generalMocks from "./generalMocks";
+import mergeResolvers from "./mergeResolvers";
+
+const ApplicationSchema = loader("./schema.graphql");
+
+// For queries with no variables
+const schema = makeExecutableSchema({ typeDefs: ApplicationSchema });
+
+const ApolloMockingProvider = ({ children, customResolvers }) => {
+  const mocks = mergeResolvers([generalMocks, customResolvers]);
+
+  addMockFunctionsToSchema({ schema, mocks });
+
+  const client = new ApolloClient({
+    link: new SchemaLink({ schema }),
+    cache: new InMemoryCache()
+  });
+
+  return <ApolloProvider client={client}>{children}</ApolloProvider>;
+};
+
+ApolloMockingProvider.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired,
+  customResolvers: PropTypes.shape({})
+};
+
+ApolloMockingProvider.defaultProps = {
+  customResolvers: null
+};
+
+const render = (comp, customResolvers, options) => {
+  return ReactTestingLibrary.render(
+    <ApolloMockingProvider customResolvers={customResolvers || {}}>
+      {comp}
+    </ApolloMockingProvider>,
+    options
+  );
+};
+
+export default ApolloMockingProvider;
+export { render };

src/Repository.test.jsx

@@ -0,0 +1,39 @@
+import faker from "faker";
+
+// Random data are bad to debug flaky tests
+faker.seed(12345);
+
+let idIncrement = 0;
+
+function getNextId() {
+  idIncrement += 1;
+  return idIncrement;
+}
+
+const formatRepoName = str => {
+  return (
+    str
+      // Replace all weird chars by -
+      .replace(/-|,|_|\s/g, "-")
+      // Replace a serie of - by a single one
+      .replace(/--+/g, "-")
+  );
+};
+
+const jan2019 = new Date(1546510000000);
+
+const resolvers = {
+  ISO8601DateTime: () => jan2019,
+  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")
+  })
+};
+
+export default resolvers;