4 files changed, 184 insertions, 54 deletions
diff --git a/frontend/__tests__/Signup.test.js b/frontend/__tests__/Signup.test.js
new file mode 100644
index 0000000..f73c01c
--- /dev/null
+++ b/frontend/__tests__/Signup.test.js
@@ -0,0 +1,54 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import toJSON from 'enzyme-to-json';
+import wait from 'waait';
+import Signup from '../components/Signup';
+import mountOptions from './mockMang';
+
+function type(wrapper, name, value) {
+  wrapper.find(`input[name="${name}"]`).simulate('change', {
+    target: {
+      name,
+      value,
+    },
+  });
+}
+
+describe('<Signup/>', () => {
+  beforeAll(() => {
+    // mock localStorage
+    global.localStorage = {
+      setItem: jest.fn(),
+    };
+  });
+
+  it('renders and matches snapshot', () => {
+    const wrapper = mount(<Signup />, mountOptions);
+    expect(toJSON(wrapper.find('form'))).toMatchSnapshot();
+  });
+
+  it('calls mutation with correct data', async () => {
+    const wrapper = mount(<Signup />, mountOptions);
+    const mutation = wrapper.find('Mutation').instance();
+    mutation.client.mutate = jest.fn().mockResolvedValue({
+      data: { signup: { token: 'omg123' } },
+    });
+
+    const expected = {
+      name: 'Randy',
+      email: 'Randy@randymail.net',
+      password: 'pupsrock',
+    };
+
+    type(wrapper, 'name', expected.name);
+    type(wrapper, 'email', expected.email);
+    type(wrapper, 'password', expected.password);
+
+    wrapper.simulate('submit');
+
+    expect(mutation.client.mutate).toHaveBeenCalled();
+    expect(mutation.client.mutate).toHaveBeenCalledWithVariables(expected);
+    await wait();
+    expect(localStorage.setItem).toHaveBeenCalledWith('token', 'omg123');
+  });
+});
diff --git a/frontend/__tests__/__snapshots__/Signup.test.js.snap b/frontend/__tests__/__snapshots__/Signup.test.js.snap
new file mode 100644
index 0000000..d4d88a1
--- /dev/null
+++ b/frontend/__tests__/__snapshots__/Signup.test.js.snap
@@ -0,0 +1,61 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Signup/> renders and matches snapshot 1`] = `
+<form
+  className="sc-bdVaJa LHejR"
+  onSubmit={[Function]}
+>
+  <fieldset
+    aria-busy={false}
+    disabled={false}
+  >
+    <DisplayError />
+    <h2>
+      Sign Up for an Account
+    </h2>
+    <label
+      htmlFor="email"
+    >
+      Email
+      <input
+        name="email"
+        onChange={[Function]}
+        placeholder="email"
+        type="text"
+        value="wesbos@gmail.com"
+      />
+    </label>
+    <label
+      htmlFor="name"
+    >
+      Name
+      <input
+        name="name"
+        onChange={[Function]}
+        placeholder="name"
+        type="text"
+        value="Wes Bos"
+      />
+    </label>
+    <label
+      htmlFor="signupPassword"
+    >
+      Password
+      <input
+        className="password"
+        id="signupPassword"
+        name="password"
+        onChange={[Function]}
+        placeholder="password"
+        type="password"
+        value="wes"
+      />
+    </label>
+    <button
+      type="submit"
+    >
+      Submit
+    </button>
+  </fieldset>
+</form>
+`;
diff --git a/frontend/__tests__/mockMang.js b/frontend/__tests__/mockMang.js
index 7f5403b..3dba703 100644
--- a/frontend/__tests__/mockMang.js
+++ b/frontend/__tests__/mockMang.js
@@ -7,8 +7,6 @@ import PropTypes from 'prop-types';
 // seed it so we get consistent results
 casual.seed(777);
 
-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
 
@@ -37,8 +35,22 @@ const mocks = {
   }),
 };
 
+const resolvers = {
+  // Query: {
+  //   cartOpen: () => true,
+  // },
+};
+
+const typeDefs = importSchema('../backend/src/schema.graphql');
+
+const schema = makeExecutableSchema({
+  typeDefs,
+  resolvers,
+  resolverValidationOptions: { requireResolversForResolveType: false },
+});
+
 // Creates a mocked client
-const mocked = new MockClient(typeDefs, mocks);
+const mocked = new MockClient(schema, mocks);
 
 const mountOptions = {
   context: {
diff --git a/frontend/components/Signup.js b/frontend/components/Signup.js
index d7c7062..a4bc13c 100644
--- a/frontend/components/Signup.js
+++ b/frontend/components/Signup.js
@@ -1,9 +1,8 @@
 import React, { Component } from 'react';
-import { Mutation } from 'react-apollo';
+import { Mutation, ApolloConsumer } from 'react-apollo';
 import { SIGNUP_MUTATION, CURRENT_USER_QUERY } from '../queries/queries';
 import Form from './styles/Form';
 import Error from './ErrorMessage';
-import { client } from '../lib/withData';
 
 class Signup extends Component {
   state = {
@@ -19,59 +18,63 @@ class Signup extends Component {
 
   render() {
     return (
-      <Mutation mutation={SIGNUP_MUTATION} variables={this.state}>
-        {(signup, { loading, error }) => (
-          <Form
-            onSubmit={async e => {
-              e.preventDefault();
-              const res = await signup();
-              localStorage.setItem('token', res.data.signup.token);
-              client.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' });
-            }}
-          >
-            <fieldset disabled={loading} aria-busy={loading}>
-              <Error error={error} />
-              <h2>Sign Up for an Account</h2>
-              <label htmlFor="email">
-                Email
-                <input
-                  value={this.state.email}
-                  onChange={this.saveToState}
-                  name="email"
-                  type="text"
-                  placeholder="email"
-                />
-              </label>
+      <ApolloConsumer>
+        {client => (
+          <Mutation mutation={SIGNUP_MUTATION} variables={this.state}>
+            {(signup, { loading, error }) => (
+              <Form
+                onSubmit={async e => {
+                  e.preventDefault();
+                  const res = await signup();
+                  localStorage.setItem('token', res.data.signup.token);
+                  client.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'network-only' });
+                }}
+              >
+                <fieldset disabled={loading} aria-busy={loading}>
+                  <Error error={error} />
+                  <h2>Sign Up for an Account</h2>
+                  <label htmlFor="email">
+                    Email
+                    <input
+                      value={this.state.email}
+                      onChange={this.saveToState}
+                      name="email"
+                      type="text"
+                      placeholder="email"
+                    />
+                  </label>
 
-              <label htmlFor="name">
-                Name
-                <input
-                  type="text"
-                  name="name"
-                  placeholder="name"
-                  value={this.state.name}
-                  onChange={this.saveToState}
-                />
-              </label>
+                  <label htmlFor="name">
+                    Name
+                    <input
+                      type="text"
+                      name="name"
+                      placeholder="name"
+                      value={this.state.name}
+                      onChange={this.saveToState}
+                    />
+                  </label>
 
-              <label htmlFor="signupPassword">
-                Password
-                <input
-                  type="password"
-                  name="password"
-                  id="signupPassword"
-                  className="password"
-                  placeholder="password"
-                  value={this.state.password}
-                  onChange={this.saveToState}
-                />
-              </label>
+                  <label htmlFor="signupPassword">
+                    Password
+                    <input
+                      type="password"
+                      name="password"
+                      id="signupPassword"
+                      className="password"
+                      placeholder="password"
+                      value={this.state.password}
+                      onChange={this.saveToState}
+                    />
+                  </label>
 
-              <button type="submit">Submit</button>
-            </fieldset>
-          </Form>
+                  <button type="submit">Submit</button>
+                </fieldset>
+              </Form>
+            )}
+          </Mutation>
         )}
-      </Mutation>
+      </ApolloConsumer>
     );
   }
 }