From 54dd0e29830f04c9055863fb0449ee4fc2ab0689 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Tue, 17 Apr 2018 16:51:09 -0400
Subject: these tests are on fireee but the bad kind

---
 frontend/__tests__/PleaseSignIn.test.js            |  10 +
 frontend/__tests__/ResetRequest.test.js            |  46 +++--
 frontend/__tests__/SingleItem.test.js              |  40 ++--
 .../__snapshots__/ResetRequest.test.js.snap        | 230 +++++++++++++++++----
 .../__snapshots__/SingleItem.test.js.snap          |  97 +++++++--
 frontend/__tests__/mockMang.js                     |  39 ++++
 6 files changed, 370 insertions(+), 92 deletions(-)
 create mode 100644 frontend/__tests__/PleaseSignIn.test.js
 create mode 100644 frontend/__tests__/mockMang.js

(limited to 'frontend/__tests__')

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;
-- 
cgit v1.3