From 50c68a28bf877ec24bfa5c18bdb63b30477c407e Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Fri, 20 Apr 2018 15:41:42 -0400
Subject: Single Item Test

---
 frontend/__tests__/EditUser.test.js                |  7 +--
 frontend/__tests__/SingleItem.test.js              | 54 ++++++++++++++++++++--
 .../__snapshots__/SingleItem.test.js.snap          | 44 +++++++++++-------
 frontend/__tests__/mockMang.js                     | 13 +++++-
 4 files changed, 93 insertions(+), 25 deletions(-)

(limited to 'frontend/__tests__')

diff --git a/frontend/__tests__/EditUser.test.js b/frontend/__tests__/EditUser.test.js
index f4aabfc..c68267f 100644
--- a/frontend/__tests__/EditUser.test.js
+++ b/frontend/__tests__/EditUser.test.js
@@ -9,7 +9,7 @@ const currentUser = {
   me: {
     name: 'Wes Bos',
   },
-  refetch() { },
+  refetch() {},
 };
 
 describe('<EditUser/>', () => {
@@ -43,17 +43,18 @@ describe('<EditUser/>', () => {
     mutation.client.mutate = jest.fn();
     const nameInput = wrapper.find('[name="name"]');
     nameInput.simulate('change', { target: { name: 'name', value: 'Scott' } });
-    wrapper.find('form').simulate('submit', { preventDefault() { } });
+    wrapper.find('form').simulate('submit', { preventDefault() {} });
     expect(mutation.client.mutate).toHaveBeenCalledWithVariables({ name: 'Scott' });
   });
 
-  it.only('refetches the current user after an update', async () => {
+  it('refetches the current user after an update', async () => {
     const { wrapper } = mountWithApollo(<EditUser />);
     await wait();
     wrapper.update();
     const query = wrapper.find('Query').instance();
     const mutation = wrapper.find('Mutation').instance();
     console.log(mutation.props.mutation);
+    expect('wes').toBe('finished with this one');
     // wrapper.find('form').simulate('submit', { preventDefault() {} });
     // expect(query.client.reFetchObservableQueries).toHaveBeenCalled();
   });
diff --git a/frontend/__tests__/SingleItem.test.js b/frontend/__tests__/SingleItem.test.js
index ade9727..8625e80 100644
--- a/frontend/__tests__/SingleItem.test.js
+++ b/frontend/__tests__/SingleItem.test.js
@@ -3,19 +3,63 @@ import { mount } from 'enzyme';
 import wait from 'waait';
 import toJSON from 'enzyme-to-json';
 import SingleItem from '../components/SingleItem';
-import mountOptions from './mockMang';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { SINGLE_ITEM_QUERY } from '../queries/queries';
+import { fakeItem } from './mockMang';
+
+const data = {
+  items: [fakeItem()],
+};
 
 describe('<SingleItem/>', () => {
   it('Renders with Proper Data', async () => {
-    const wrapper = mount(<SingleItem id="123" />, mountOptions);
-    await wait();
-    wrapper.update();
+    const mocks = [
+      {
+        request: { query: SINGLE_ITEM_QUERY, variables: { id: '123' } },
+        delay: 50,
+        result: { data },
+      },
+    ];
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <SingleItem id="123" />
+      </MockedProvider>
+    );
+    // Check for loading state
+    expect(wrapper.text()).toContain('Loading...');
 
+    // wait for response and refresh
+    await wait(55);
+    wrapper.update();
+    // Grab the peice we wnat
     const Item = wrapper.find('[data-test="SingleItem"]');
+    // snapshot it!
     expect(toJSON(Item)).toMatchSnapshot();
   });
 
   it('Errors with a not found Item', async () => {
-    expect('wes').toBe('able to replicate an error');
+    const mocks = [
+      {
+        request: { query: SINGLE_ITEM_QUERY, variables: { id: '123' } },
+        delay: 50,
+        // we can return data and an error
+        result: { data, errors: [{ message: 'Item not found!' }] },
+        // or just an error!
+        // error: new Error('offline!'),
+      },
+    ];
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <SingleItem id="123" />
+      </MockedProvider>
+    );
+
+    // wait for response
+    await wait(55);
+    wrapper.update();
+
+    const Item = wrapper.find('[data-test="graphql-error"]');
+    console.log(Item.debug());
+    expect(toJSON(Item)).toMatchSnapshot();
   });
 });
diff --git a/frontend/__tests__/__snapshots__/SingleItem.test.js.snap b/frontend/__tests__/__snapshots__/SingleItem.test.js.snap
index 09eb52b..4d75565 100644
--- a/frontend/__tests__/__snapshots__/SingleItem.test.js.snap
+++ b/frontend/__tests__/__snapshots__/SingleItem.test.js.snap
@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`<SingleItem/> Errors with a not found Item 1`] = `
+<p
+  data-test="graphql-error"
+>
+  <strong>
+    Shoot!
+  </strong>
+  Item not found!
+  <button>
+    Try Again
+  </button>
+</p>
+`;
+
 exports[`<SingleItem/> Renders with Proper Data 1`] = `
 Array [
   <styled.div
@@ -9,33 +23,32 @@ Array [
       className="sc-bwzfXH dFvSZo"
       data-test="SingleItem"
     >
-      <DisplayError />
       <img
-        alt="Facilis corporis"
-        src="large-dog.jpg"
+        alt="dogs are best"
+        src="dog.jpg"
       />
       <div
         className="details"
       >
         <h2>
           Viewing 
-          Facilis corporis
+          dogs are best
         </h2>
         <p>
-          Quidem praesentium magnam. Error molestiae laborum est possimus assumenda aut enim iure. Ut explicabo iure vitae occaecati officia iure nisi.
+          dogs
         </p>
         <Link
           href={
             Object {
-              "pathname": "/admin/update",
+              "pathname": "/update",
               "query": Object {
-                "id": "5505a740-e67e-4e17-958f-46760116bcd2",
+                "id": "123",
               },
             }
           }
         >
           <a
-            href="/admin/update?id=5505a740-e67e-4e17-958f-46760116bcd2"
+            href="/update?id=123"
             onClick={[Function]}
           >
             Edit ✏️
@@ -48,33 +61,32 @@ Array [
     className="sc-bwzfXH dFvSZo"
     data-test="SingleItem"
   >
-    <DisplayError />
     <img
-      alt="Facilis corporis"
-      src="large-dog.jpg"
+      alt="dogs are best"
+      src="dog.jpg"
     />
     <div
       className="details"
     >
       <h2>
         Viewing 
-        Facilis corporis
+        dogs are best
       </h2>
       <p>
-        Quidem praesentium magnam. Error molestiae laborum est possimus assumenda aut enim iure. Ut explicabo iure vitae occaecati officia iure nisi.
+        dogs
       </p>
       <Link
         href={
           Object {
-            "pathname": "/admin/update",
+            "pathname": "/update",
             "query": Object {
-              "id": "5505a740-e67e-4e17-958f-46760116bcd2",
+              "id": "123",
             },
           }
         }
       >
         <a
-          href="/admin/update?id=5505a740-e67e-4e17-958f-46760116bcd2"
+          href="/update?id=123"
           onClick={[Function]}
         >
           Edit ✏️
diff --git a/frontend/__tests__/mockMang.js b/frontend/__tests__/mockMang.js
index 15fc42c..375973c 100644
--- a/frontend/__tests__/mockMang.js
+++ b/frontend/__tests__/mockMang.js
@@ -37,6 +37,17 @@ const mocks = {
   }),
 };
 
+const fakeItem = () => ({
+  __typename: 'Item',
+  id: '123',
+  price: 5000,
+  user: null,
+  image: 'dog-small.jpg',
+  title: 'dogs are best',
+  description: 'dogs',
+  largeImage: 'dog.jpg',
+});
+
 const resolvers = {
   // Query: {
   //   cartOpen: () => true,
@@ -70,4 +81,4 @@ const mountWithApollo = Component => {
 
 export default mountOptions;
 
-export { mocked, mountWithApollo };
+export { mocked, mountWithApollo, fakeItem };
-- 
cgit v1.3