these tests are on fireee but the bad kind

12 files changed, 547 insertions, 99 deletions

diff --git a/backend/package-lock.json b/backend/package-lock.json
index 6269d81..beb8e11 100644
--- a/backend/package-lock.json
+++ b/backend/package-lock.json
@@ -5213,6 +5213,17 @@
             "js-yaml": "3.11.0",
             "lodash": "4.17.5",
             "minimatch": "3.0.4"
+          },
+          "dependencies": {
+            "graphql-import": {
+              "version": "0.4.5",
+              "resolved": "https://registry.npmjs.org/graphql-import/-/graphql-import-0.4.5.tgz",
+              "integrity": "sha512-G/+I08Qp6/QGTb9qapknCm3yPHV0ZL7wbaalWFpxsfR8ZhZoTBe//LsbsCKlbALQpcMegchpJhpTSKiJjhaVqQ==",
+              "dev": true,
+              "requires": {
+                "lodash": "4.17.5"
+              }
+            }
           }
         },
         "inquirer": {
@@ -5348,6 +5359,16 @@
         "js-yaml": "3.11.0",
         "lodash": "4.17.5",
         "minimatch": "3.0.4"
+      },
+      "dependencies": {
+        "graphql-import": {
+          "version": "0.4.5",
+          "resolved": "https://registry.npmjs.org/graphql-import/-/graphql-import-0.4.5.tgz",
+          "integrity": "sha512-G/+I08Qp6/QGTb9qapknCm3yPHV0ZL7wbaalWFpxsfR8ZhZoTBe//LsbsCKlbALQpcMegchpJhpTSKiJjhaVqQ==",
+          "requires": {
+            "lodash": "4.17.5"
+          }
+        }
       }
     },
     "graphql-config-extension-graphcool": {
@@ -5371,6 +5392,17 @@
             "js-yaml": "3.11.0",
             "lodash": "4.17.5",
             "minimatch": "3.0.4"
+          },
+          "dependencies": {
+            "graphql-import": {
+              "version": "0.4.5",
+              "resolved": "https://registry.npmjs.org/graphql-import/-/graphql-import-0.4.5.tgz",
+              "integrity": "sha512-G/+I08Qp6/QGTb9qapknCm3yPHV0ZL7wbaalWFpxsfR8ZhZoTBe//LsbsCKlbALQpcMegchpJhpTSKiJjhaVqQ==",
+              "dev": true,
+              "requires": {
+                "lodash": "4.17.5"
+              }
+            }
           }
         }
       }
@@ -5396,6 +5428,17 @@
             "js-yaml": "3.11.0",
             "lodash": "4.17.5",
             "minimatch": "3.0.4"
+          },
+          "dependencies": {
+            "graphql-import": {
+              "version": "0.4.5",
+              "resolved": "https://registry.npmjs.org/graphql-import/-/graphql-import-0.4.5.tgz",
+              "integrity": "sha512-G/+I08Qp6/QGTb9qapknCm3yPHV0ZL7wbaalWFpxsfR8ZhZoTBe//LsbsCKlbALQpcMegchpJhpTSKiJjhaVqQ==",
+              "dev": true,
+              "requires": {
+                "lodash": "4.17.5"
+              }
+            }
           }
         }
       }
@@ -5456,6 +5499,17 @@
             "js-yaml": "3.11.0",
             "lodash": "4.17.5",
             "minimatch": "3.0.4"
+          },
+          "dependencies": {
+            "graphql-import": {
+              "version": "0.4.5",
+              "resolved": "https://registry.npmjs.org/graphql-import/-/graphql-import-0.4.5.tgz",
+              "integrity": "sha512-G/+I08Qp6/QGTb9qapknCm3yPHV0ZL7wbaalWFpxsfR8ZhZoTBe//LsbsCKlbALQpcMegchpJhpTSKiJjhaVqQ==",
+              "dev": true,
+              "requires": {
+                "lodash": "4.17.5"
+              }
+            }
           }
         },
         "prisma-yml": {
@@ -5503,9 +5557,9 @@
       }
     },
     "graphql-import": {
-      "version": "0.4.5",
-      "resolved": "https://registry.npmjs.org/graphql-import/-/graphql-import-0.4.5.tgz",
-      "integrity": "sha512-G/+I08Qp6/QGTb9qapknCm3yPHV0ZL7wbaalWFpxsfR8ZhZoTBe//LsbsCKlbALQpcMegchpJhpTSKiJjhaVqQ==",
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/graphql-import/-/graphql-import-0.5.0.tgz",
+      "integrity": "sha512-Sv9OjGh2Cj52By83e/0ky6LlRc9UW0aCu+VFHJcxwoGaSToTVoDU0Iacsyp7NwhXdwcuRp2VIj21tiJe00c07Q==",
       "requires": {
         "lodash": "4.17.5"
       }
@@ -5641,6 +5695,16 @@
         "graphql-subscriptions": "0.5.8",
         "graphql-tools": "2.24.0",
         "subscriptions-transport-ws": "0.9.7"
+      },
+      "dependencies": {
+        "graphql-import": {
+          "version": "0.4.5",
+          "resolved": "https://registry.npmjs.org/graphql-import/-/graphql-import-0.4.5.tgz",
+          "integrity": "sha512-G/+I08Qp6/QGTb9qapknCm3yPHV0ZL7wbaalWFpxsfR8ZhZoTBe//LsbsCKlbALQpcMegchpJhpTSKiJjhaVqQ==",
+          "requires": {
+            "lodash": "4.17.5"
+          }
+        }
       }
     },
     "growly": {
@@ -8990,6 +9054,14 @@
             "zen-observable-ts": "0.8.9"
           }
         },
+        "graphql-import": {
+          "version": "0.4.5",
+          "resolved": "https://registry.npmjs.org/graphql-import/-/graphql-import-0.4.5.tgz",
+          "integrity": "sha512-G/+I08Qp6/QGTb9qapknCm3yPHV0ZL7wbaalWFpxsfR8ZhZoTBe//LsbsCKlbALQpcMegchpJhpTSKiJjhaVqQ==",
+          "requires": {
+            "lodash": "4.17.5"
+          }
+        },
         "graphql-tools": {
           "version": "2.21.0",
           "resolved": "https://registry.npmjs.org/graphql-tools/-/graphql-tools-2.21.0.tgz",
@@ -9122,6 +9194,17 @@
             "js-yaml": "3.11.0",
             "lodash": "4.17.5",
             "minimatch": "3.0.4"
+          },
+          "dependencies": {
+            "graphql-import": {
+              "version": "0.4.5",
+              "resolved": "https://registry.npmjs.org/graphql-import/-/graphql-import-0.4.5.tgz",
+              "integrity": "sha512-G/+I08Qp6/QGTb9qapknCm3yPHV0ZL7wbaalWFpxsfR8ZhZoTBe//LsbsCKlbALQpcMegchpJhpTSKiJjhaVqQ==",
+              "dev": true,
+              "requires": {
+                "lodash": "4.17.5"
+              }
+            }
           }
         },
         "source-map": {
diff --git a/backend/package.json b/backend/package.json
index bc7e982..1cf7707 100644
--- a/backend/package.json
+++ b/backend/package.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "bcryptjs": "2.4.3",
     "graphql": "^0.13.2",
+    "graphql-import": "^0.5.0",
     "graphql-yoga": "1.7.1",
     "jsonwebtoken": "8.2.1",
     "nodemailer": "^4.6.4",
diff --git a/frontend/__tests__/PleaseSignIn.test.js b/frontend/__tests__/PleaseSignIn.test.js
new file mode 100644
index 0000000..8dc6124
--- /dev/null
+++ b/frontend/__tests__/PleaseSignIn.test.js
@@ -0,0 +1,10 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import toJSON from 'enzyme-to-json';
+import PleaseSignIn from '../components/PleaseSignIn';
+
+describe('<PleaseSignIn />', () => {
+  it('works', () => {
+    console.log('heyy');
+  });
+});
diff --git a/frontend/__tests__/ResetRequest.test.js b/frontend/__tests__/ResetRequest.test.js
index bd8a934..6d8d99f 100644
--- a/frontend/__tests__/ResetRequest.test.js
+++ b/frontend/__tests__/ResetRequest.test.js
@@ -1,33 +1,39 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { mount } from 'enzyme';
 import toJSON from 'enzyme-to-json';
-import { ResetRequest } from '../components/ResetRequest';
-
-const wait = amount => new Promise(resolve => setTimeout(resolve, amount));
+import { ApolloProvider } from 'react-apollo';
+import ResetRequest from '../components/ResetRequest';
+import mountOptions from './mockMang';
 
 describe('<ResetRequest/>', () => {
-  it('renders and matches snapshot', () => {
-    const wrapper = shallow(<ResetRequest requestReset={() => {}} />);
-    expect(toJSON(wrapper)).toMatchSnapshot();
+  it('renders and matches snapshot', async () => {
+    const wrapper = mount(<ResetRequest />, mountOptions);
+    const Form = wrapper.find("Form[data-test='ResetRequest']");
+    expect(toJSON(Form)).toMatchSnapshot();
   });
 
-  it('handles the reset request', async () => {
-    const resetSpy = jest.fn(() => Promise.resolve({}));
-    const wrapper = shallow(<ResetRequest requestReset={resetSpy} />);
+  it('calls the mutation', async () => {
+    const wrapper = mount(<ResetRequest />, mountOptions);
+    const mutation = wrapper.find('Mutation').instance();
     const input = wrapper.find('input[name="email"]');
     input.simulate('change', { target: { name: 'email', value: 'wesbos@gmail.com' } });
-    wrapper.simulate('submit', { preventDefault() {} });
-    expect(resetSpy).toHaveBeenCalledWith({ variables: { email: 'wesbos@gmail.com' } });
+    // Create a spy function on mutate
+    mutation.client.mutate = jest.fn();
+    mutation.forceUpdate();
+    wrapper.find('Form').simulate('submit');
+    expect(mutation.client.mutate.mock.calls[0][0].variables).toEqual({
+      email: 'wesbos@gmail.com',
+    });
+    expect(toJSON(wrapper)).toMatchSnapshot();
   });
 
-  it('displays errors', async () => {
-    const resetSpy = jest.fn(() => Promise.resolve({ errors: [{ message: 'Error!!!' }] }));
-    const wrapper = shallow(<ResetRequest requestReset={resetSpy} />);
-    const input = wrapper.find('input[name="email"]');
-    input.simulate('change', { target: { name: 'email', value: 'wesbos@gmail.com' } });
-    wrapper.simulate('submit', { preventDefault() {} });
-    await wait(0);
+  it('renders errors', () => {
+    const wrapper = mount(<ResetRequest />, mountOptions);
+    const mutation = wrapper.find('Mutation').instance();
+    mutation.setState({ error: { message: 'Shit!' } });
     wrapper.update();
-    expect(toJSON(wrapper)).toMatchSnapshot();
+    const error = wrapper.find('DisplayError');
+    expect(error).toHaveLength(1);
+    expect(toJSON(error)).toMatchSnapshot();
   });
 });
diff --git a/frontend/__tests__/SingleItem.test.js b/frontend/__tests__/SingleItem.test.js
index e39431d..313784e 100644
--- a/frontend/__tests__/SingleItem.test.js
+++ b/frontend/__tests__/SingleItem.test.js
@@ -1,23 +1,31 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
+import wait from 'waait';
 import toJSON from 'enzyme-to-json';
-import { SingleItem } from '../components/SingleItem';
+import SingleItem from '../components/SingleItem';
+import { ApolloProvider } from 'react-apollo';
+import mockClient from './mockMang';
+import { SINGLE_ITEM_QUERY } from '../queries/queries';
 
-const wait = amount => new Promise(resolve => setTimeout(resolve, amount));
+describe('<SingleItem/>', () => {
+  it('Renders with Proper Data', async () => {
+    const wrapper = mount(
+      <ApolloProvider client={mockClient.client}>
+        <SingleItem id="123" />
+      </ApolloProvider>
+    );
+    await wait();
+    wrapper.update();
 
-const findItem = {
-  items: [
-    {
-      largeImage: 'dog.jpg',
-      title: 'Sneakers',
-      description: 'A cool set of shoes',
-    },
-  ],
-};
+    const Item = wrapper.find('[data-test="SingleItem"]');
+    expect(toJSON(Item)).toMatchSnapshot();
+  });
 
-describe('<SingleItem/>', () => {
-  it('renders', () => {
-    const wrapper = shallow(<SingleItem findItem={findItem} />);
-    expect(toJSON(wrapper)).toMatchSnapshot();
+  it('Errors with a not found Item', async () => {
+    const wrapper = mount(
+      <ApolloProvider client={mockClient.client}>
+        <SingleItem id="123" />
+      </ApolloProvider>
+    );
   });
 });
diff --git a/frontend/__tests__/__snapshots__/ResetRequest.test.js.snap b/frontend/__tests__/__snapshots__/ResetRequest.test.js.snap
index ef7e9f9..66c4ff1 100644
--- a/frontend/__tests__/__snapshots__/ResetRequest.test.js.snap
+++ b/frontend/__tests__/__snapshots__/ResetRequest.test.js.snap
@@ -1,54 +1,200 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<ResetRequest/> displays errors 1`] = `
-<Form
-  onSubmit={[Function]}
->
-  <p
-    key="0"
-  >
-    Error!!!
-  </p>
-  <label
-    htmlFor="email"
-  >
-    Email
-    <input
-      name="email"
-      onChange={[Function]}
-      placeholder="email"
-      type="text"
-      value="wesbos@gmail.com"
-    />
-  </label>
-  <button
-    type="submit"
+exports[`<ResetRequest/> calls the mutation 1`] = `
+<ResetRequest>
+  <Mutation
+    mutation={
+      Object {
+        "definitions": Array [
+          Object {
+            "directives": Array [],
+            "kind": "OperationDefinition",
+            "name": Object {
+              "kind": "Name",
+              "value": "requestReset",
+            },
+            "operation": "mutation",
+            "selectionSet": Object {
+              "kind": "SelectionSet",
+              "selections": Array [
+                Object {
+                  "alias": undefined,
+                  "arguments": Array [
+                    Object {
+                      "kind": "Argument",
+                      "name": Object {
+                        "kind": "Name",
+                        "value": "email",
+                      },
+                      "value": Object {
+                        "kind": "Variable",
+                        "name": Object {
+                          "kind": "Name",
+                          "value": "email",
+                        },
+                      },
+                    },
+                  ],
+                  "directives": Array [],
+                  "kind": "Field",
+                  "name": Object {
+                    "kind": "Name",
+                    "value": "requestReset",
+                  },
+                  "selectionSet": Object {
+                    "kind": "SelectionSet",
+                    "selections": Array [
+                      Object {
+                        "alias": undefined,
+                        "arguments": Array [],
+                        "directives": Array [],
+                        "kind": "Field",
+                        "name": Object {
+                          "kind": "Name",
+                          "value": "id",
+                        },
+                        "selectionSet": undefined,
+                      },
+                    ],
+                  },
+                },
+              ],
+            },
+            "variableDefinitions": Array [
+              Object {
+                "defaultValue": undefined,
+                "kind": "VariableDefinition",
+                "type": Object {
+                  "kind": "NonNullType",
+                  "type": Object {
+                    "kind": "NamedType",
+                    "name": Object {
+                      "kind": "Name",
+                      "value": "String",
+                    },
+                  },
+                },
+                "variable": Object {
+                  "kind": "Variable",
+                  "name": Object {
+                    "kind": "Name",
+                    "value": "email",
+                  },
+                },
+              },
+            ],
+          },
+        ],
+        "kind": "Document",
+        "loc": Object {
+          "end": 97,
+          "start": 0,
+        },
+      }
+    }
+    variables={
+      Object {
+        "email": "wesbos@gmail.com",
+      }
+    }
   >
-    Request Reset!
-  </button>
-</Form>
+    <Form
+      data-test="ResetRequest"
+      onSubmit={[Function]}
+    >
+      <form
+        className="sc-bdVaJa LHejR"
+        data-test="ResetRequest"
+        onSubmit={[Function]}
+      >
+        <DisplayError />
+        <fieldset
+          aria-busy={true}
+          disabled={true}
+        >
+          <label
+            htmlFor="email"
+          >
+            Email
+            <input
+              name="email"
+              onChange={[Function]}
+              placeholder="email"
+              type="text"
+              value="wesbos@gmail.com"
+            />
+          </label>
+          <button
+            type="submit"
+          >
+            Request Reset!
+          </button>
+        </fieldset>
+      </form>
+    </Form>
+  </Mutation>
+</ResetRequest>
 `;
 
 exports[`<ResetRequest/> renders and matches snapshot 1`] = `
 <Form
+  data-test="ResetRequest"
   onSubmit={[Function]}
 >
-  <label
-    htmlFor="email"
-  >
-    Email
-    <input
-      name="email"
-      onChange={[Function]}
-      placeholder="email"
-      type="text"
-      value=""
-    />
-  </label>
-  <button
-    type="submit"
+  <form
+    className="sc-bdVaJa LHejR"
+    data-test="ResetRequest"
+    onSubmit={[Function]}
   >
-    Request Reset!
-  </button>
+    <DisplayError />
+    <fieldset
+      aria-busy={false}
+      disabled={false}
+    >
+      <label
+        htmlFor="email"
+      >
+        Email
+        <input
+          name="email"
+          onChange={[Function]}
+          placeholder="email"
+          type="text"
+          value=""
+        />
+      </label>
+      <button
+        type="submit"
+      >
+        Request Reset!
+      </button>
+    </fieldset>
+  </form>
 </Form>
 `;
+
+exports[`<ResetRequest/> renders errors 1`] = `
+<DisplayError
+  error={
+    Object {
+      "message": "Shit!",
+    }
+  }
+>
+  <styled.div>
+    <div
+      className="sc-bwzfXH flKeYn"
+    >
+      <p>
+        <strong>
+          Shoot!
+        </strong>
+        Shit!
+        <button>
+          Try Again
+        </button>
+      </p>
+    </div>
+  </styled.div>
+</DisplayError>
+`;
diff --git a/frontend/__tests__/__snapshots__/SingleItem.test.js.snap b/frontend/__tests__/__snapshots__/SingleItem.test.js.snap
index 173fb95..fd7e481 100644
--- a/frontend/__tests__/__snapshots__/SingleItem.test.js.snap
+++ b/frontend/__tests__/__snapshots__/SingleItem.test.js.snap
@@ -1,17 +1,86 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<SingleItem/> renders 1`] = `
-<div>
-  <img
-    alt="Sneakers"
-    src="dog.jpg"
-  />
-  <h2>
-    Viewing 
-    Sneakers
-  </h2>
-  <p>
-    A cool set of shoes
-  </p>
-</div>
+exports[`<SingleItem/> Renders with Proper Data 1`] = `
+Array [
+  <styled.div
+    data-test="SingleItem"
+  >
+    <div
+      className="sc-bwzfXH dFvSZo"
+      data-test="SingleItem"
+    >
+      <DisplayError />
+      <img
+        alt="Quo quis molestiae"
+        src="Hello World"
+      />
+      <div
+        className="details"
+      >
+        <h2>
+          Viewing 
+          Quo quis molestiae
+        </h2>
+        <p>
+          Omnis porro porro quos nihil omnis reiciendis velit. Culpa deleniti qui reprehenderit in nisi et qui. Odio dolore veritatis eligendi in.
+        </p>
+        <Link
+          href={
+            Object {
+              "pathname": "/admin/update",
+              "query": Object {
+                "id": "79c17dc9-5865-4045-9bad-f487a49d94a8",
+              },
+            }
+          }
+        >
+          <a
+            href="/admin/update?id=79c17dc9-5865-4045-9bad-f487a49d94a8"
+            onClick={[Function]}
+          >
+            Edit ✏️
+          </a>
+        </Link>
+      </div>
+    </div>
+  </styled.div>,
+  <div
+    className="sc-bwzfXH dFvSZo"
+    data-test="SingleItem"
+  >
+    <DisplayError />
+    <img
+      alt="Quo quis molestiae"
+      src="Hello World"
+    />
+    <div
+      className="details"
+    >
+      <h2>
+        Viewing 
+        Quo quis molestiae
+      </h2>
+      <p>
+        Omnis porro porro quos nihil omnis reiciendis velit. Culpa deleniti qui reprehenderit in nisi et qui. Odio dolore veritatis eligendi in.
+      </p>
+      <Link
+        href={
+          Object {
+            "pathname": "/admin/update",
+            "query": Object {
+              "id": "79c17dc9-5865-4045-9bad-f487a49d94a8",
+            },
+          }
+        }
+      >
+        <a
+          href="/admin/update?id=79c17dc9-5865-4045-9bad-f487a49d94a8"
+          onClick={[Function]}
+        >
+          Edit ✏️
+        </a>
+      </Link>
+    </div>
+  </div>,
+]
 `;
diff --git a/frontend/__tests__/mockMang.js b/frontend/__tests__/mockMang.js
new file mode 100644
index 0000000..5a98c6a
--- /dev/null
+++ b/frontend/__tests__/mockMang.js
@@ -0,0 +1,39 @@
+import { importSchema } from 'graphql-import';
+import GraphQLMock from 'graphql-mock';
+import casual from 'casual';
+import PropTypes from 'prop-types';
+
+// seed it so we get consistent results
+casual.seed(123);
+
+const typeDefs = importSchema('../backend/src/schema.graphql');
+
+// By default graphql-mock will generate random numbers, IDs, and Strings of "Hello World"
+// We can overwrite any of those if we need to
+
+const mocks = {
+  ID: () => casual.uuid,
+  Item: () => ({
+    title: casual.title,
+    description: casual.description,
+    price: () => 50000,
+  }),
+  User: () => ({
+    email: casual.email,
+    name: casual.name,
+  }),
+};
+
+// Creates a mocked client
+const mocked = new GraphQLMock(typeDefs, mocks);
+
+const mountOptions = {
+  context: {
+    client: mocked.client,
+  },
+  childContextTypes: {
+    client: PropTypes.object,
+  },
+};
+
+export default mountOptions;
diff --git a/frontend/components/ResetRequest.js b/frontend/components/ResetRequest.js
index 4ed902e..2302173 100644
--- a/frontend/components/ResetRequest.js
+++ b/frontend/components/ResetRequest.js
@@ -1,9 +1,8 @@
 import React from 'react';
 import { Mutation } from 'react-apollo';
-import { REQUEST_RESET_MUTATION } from '../queries';
+import { REQUEST_RESET_MUTATION } from '../queries/queries';
 import Form from './styles/Form';
 import Error from './ErrorMessage';
-import Dump from './Dump';
 
 class ResetRequest extends React.Component {
   state = {
@@ -17,9 +16,11 @@ class ResetRequest extends React.Component {
           <Form
             onSubmit={async e => {
               e.preventDefault();
+              // I wanna spy on this
               const res = await resetMutation();
               console.log(res);
             }}
+            data-test="ResetRequest"
           >
             <Error error={error} />
             {!error && called && !loading && <p>Success! Check Your Email!</p>}
diff --git a/frontend/components/SingleItem.js b/frontend/components/SingleItem.js
index 1c0cfce..a7f9d27 100644
--- a/frontend/components/SingleItem.js
+++ b/frontend/components/SingleItem.js
@@ -26,7 +26,7 @@ const SingleItem = props => (
       if (loading) return <p>Loading...</p>;
       const [item] = items;
       return (
-        <SingleItemStyles>
+        <SingleItemStyles data-test="SingleItem">
           <Error error={error} />
           <img src={item.largeImage || item.image} alt={item.title} />
           <div className="details">
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4e2a09b..a165491 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -394,6 +394,14 @@
         "apollo-link": "1.2.2"
       }
     },
+    "apollo-link-schema": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/apollo-link-schema/-/apollo-link-schema-1.1.0.tgz",
+      "integrity": "sha512-sqWjse5RfrMAhrXecv0WdSLLdF1R5lI4YpbfkioIeJAkB7VB2o+mgA/+onATYKp214MSjloCDWzkvnVpRPFoBw==",
+      "requires": {
+        "apollo-link": "1.2.2"
+      }
+    },
     "apollo-link-state": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/apollo-link-state/-/apollo-link-state-0.4.1.tgz",
@@ -1820,6 +1828,16 @@
       "resolved": "https://registry.npmjs.org/caseless/-/caseless-0.11.0.tgz",
       "integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c="
     },
+    "casual": {
+      "version": "1.5.19",
+      "resolved": "https://registry.npmjs.org/casual/-/casual-1.5.19.tgz",
+      "integrity": "sha512-zMWzIs7y4grU0mkb6ZAWyHVJFHRZ2V/zi9GTrVv9v9PcS4Ur3AHaKocl4DLjhLR0J5LnMhMsMiAjGooqYo2t1Q==",
+      "dev": true,
+      "requires": {
+        "mersenne-twister": "1.1.0",
+        "moment": "2.22.0"
+      }
+    },
     "center-align": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
@@ -2931,6 +2949,11 @@
       "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.1.tgz",
       "integrity": "sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k="
     },
+    "deprecated-decorator": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/deprecated-decorator/-/deprecated-decorator-0.1.6.tgz",
+      "integrity": "sha1-AJZjF7ehL+kvPMgx91g68ym4bDc="
+    },
     "des.js": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/des.js/-/des.js-1.0.0.tgz",
@@ -5204,11 +5227,56 @@
         "apollo-utilities": "1.0.11"
       }
     },
+    "graphql-import": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/graphql-import/-/graphql-import-0.5.0.tgz",
+      "integrity": "sha512-Sv9OjGh2Cj52By83e/0ky6LlRc9UW0aCu+VFHJcxwoGaSToTVoDU0Iacsyp7NwhXdwcuRp2VIj21tiJe00c07Q==",
+      "requires": {
+        "lodash": "4.17.5"
+      }
+    },
+    "graphql-mock": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/graphql-mock/-/graphql-mock-0.0.3.tgz",
+      "integrity": "sha512-iqLXs9a33gPIZzYD5nflEbq/qAHPhU2VO+Zvhihtw0NG5sJHmVUke99TViU2uxcDXFEr2U8wNVYwuRY/uoA36w==",
+      "requires": {
+        "apollo-link-schema": "1.1.0",
+        "graphql": "0.12.3",
+        "graphql-tools": "2.24.0"
+      },
+      "dependencies": {
+        "graphql": {
+          "version": "0.12.3",
+          "resolved": "https://registry.npmjs.org/graphql/-/graphql-0.12.3.tgz",
+          "integrity": "sha512-Hn9rdu4zacplKXNrLCvR8YFiTGnbM4Zw/UH8FDmzBDsH7ou40lSNH4tIlsxcYnz2TGNVJCpu1WxCM23yd6kzhA==",
+          "requires": {
+            "iterall": "1.1.3"
+          }
+        },
+        "iterall": {
+          "version": "1.1.3",
+          "resolved": "https://registry.npmjs.org/iterall/-/iterall-1.1.3.tgz",
+          "integrity": "sha512-Cu/kb+4HiNSejAPhSaN1VukdNTTi/r4/e+yykqjlG/IW+1gZH5b4+Bq3whDX4tvbYugta3r8KTMUiqT3fIGxuQ=="
+        }
+      }
+    },
     "graphql-tag": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/graphql-tag/-/graphql-tag-2.8.0.tgz",
       "integrity": "sha1-Us3qB6hCFU7BGi6EDBG5d/m4Nc4="
     },
+    "graphql-tools": {
+      "version": "2.24.0",
+      "resolved": "https://registry.npmjs.org/graphql-tools/-/graphql-tools-2.24.0.tgz",
+      "integrity": "sha512-Mz9I7jyizrd+RafC/5EogJKTVzBbIddDCrW0sP5QLmsVVM3ujfhqVYu2lEXOaJW8Sy18f3ZICHirmKcn6oMAcA==",
+      "requires": {
+        "apollo-link": "1.2.2",
+        "apollo-utilities": "1.0.11",
+        "deprecated-decorator": "0.1.6",
+        "iterall": "1.2.2",
+        "uuid": "3.1.0"
+      }
+    },
     "growly": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/growly/-/growly-1.3.0.tgz",
@@ -7723,6 +7791,12 @@
         "readable-stream": "2.3.6"
       }
     },
+    "mersenne-twister": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/mersenne-twister/-/mersenne-twister-1.1.0.tgz",
+      "integrity": "sha1-+RZhjuQ9cXnvz2Qb7EUx65Zwl4o=",
+      "dev": true
+    },
     "micromatch": {
       "version": "3.1.10",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz",
@@ -11356,6 +11430,12 @@
         "browser-process-hrtime": "0.1.2"
       }
     },
+    "waait": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/waait/-/waait-1.0.1.tgz",
+      "integrity": "sha512-kh6eK0xpZPA269kyG+ogV3u/AQXjYqQivPuI/D4D3XZ8Yf4nUHWVr0XLnJo9a0bQ9OY807a6Wmiv+80ors2TBA==",
+      "dev": true
+    },
     "walk": {
       "version": "2.3.9",
       "resolved": "https://registry.npmjs.org/walk/-/walk-2.3.9.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index e6d4eab..977c015 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -18,6 +18,8 @@
     "date-fns": "^2.0.0-alpha.7",
     "downshift": "^1.31.3",
     "graphql": "^0.13.2",
+    "graphql-import": "^0.5.0",
+    "graphql-mock": "0.0.3",
     "graphql-tag": "^2.8.0",
     "lodash.debounce": "^4.0.8",
     "next": "^5.1.0",
@@ -33,10 +35,13 @@
   },
   "devDependencies": {
     "babel-plugin-module-resolver": "^3.1.1",
+    "casual": "^1.5.19",
     "enzyme": "^3.3.0",
     "enzyme-adapter-react-16": "^1.1.1",
     "enzyme-to-json": "^3.3.3",
-    "jest": "^22.4.3"
+    "graphql-tools": "^2.24.0",
+    "jest": "^22.4.3",
+    "waait": "^1.0.1"
   },
   "//": "This is out babel config, I prefer this over a .babelrc file",
   "jest": {