Create Item mutation testing

3 files changed, 113 insertions, 55 deletions

diff --git a/frontend/__tests__/CreateItem.test.js b/frontend/__tests__/CreateItem.test.js
index 0994d9c..035f172 100644
--- a/frontend/__tests__/CreateItem.test.js
+++ b/frontend/__tests__/CreateItem.test.js
@@ -1,10 +1,12 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { mount } from 'enzyme';
 import toJSON from 'enzyme-to-json';
-import { CreateItem } from '../components/CreateItem';
-
-// Wait func
-const wait = amount => new Promise(resolve => setTimeout(resolve, amount));
+import Router from 'next/router';
+import { MockedProvider } from 'react-apollo/test-utils';
+import CreateItem from '../components/CreateItem';
+import wait from 'waait';
+import { fakeItem } from '../lib/testUtils';
+import { CREATE_ITEM_MUTATION } from '../queries/queries';
 
 const dogImage = 'https://dog.com/dog.jpg';
 
@@ -16,36 +18,39 @@ global.fetch = jest.fn().mockResolvedValue({
   }),
 });
 
-const fakeItem = {
-  title: 'Testing',
-  description: 'This is a really nice item',
-  image: dogImage,
-  largeImage: dogImage,
-  price: 50000,
-};
-
 describe('<Createitem/>', () => {
-  it('renders the form out', () => {
-    const createItemMutation = jest.fn();
-    const wrapper = shallow(<CreateItem createItemMutation={createItemMutation} />);
-    expect(toJSON(wrapper)).toMatchSnapshot();
+  it('renders and matches snapshot', () => {
+    const wrapper = mount(
+      <MockedProvider>
+        <CreateItem />
+      </MockedProvider>
+    );
+    const form = wrapper.find('form[data-test]');
+    expect(toJSON(form)).toMatchSnapshot();
   });
 
   it('uploads a file when changed', async () => {
-    const createItemMutation = jest.fn();
-    const wrapper = shallow(<CreateItem createItemMutation={createItemMutation} />);
+    const wrapper = mount(
+      <MockedProvider>
+        <CreateItem />
+      </MockedProvider>
+    );
+    const component = wrapper.find('CreateItem').instance();
 
     const input = wrapper.find('input[type="file"]');
     // internally this does some setState() calls
     input.simulate('change', { currentTarget: { files: ['fakedog.jpg'] } });
     await wait(0);
-    expect(wrapper.state('image')).toEqual(dogImage);
-    expect(wrapper.state('largeImage')).toEqual(dogImage);
+    expect(component.state.image).toEqual(dogImage);
+    expect(component.state.largeImage).toEqual(dogImage);
   });
 
   it('handles state updating', async () => {
-    const createItemMutation = jest.fn();
-    const wrapper = shallow(<CreateItem createItemMutation={createItemMutation} />);
+    const wrapper = mount(
+      <MockedProvider>
+        <CreateItem />
+      </MockedProvider>
+    );
 
     wrapper.find('#title').simulate('change', { target: { value: 'Testing', name: 'title' } });
     wrapper.find('#price').simulate('change', {
@@ -61,7 +66,8 @@ describe('<Createitem/>', () => {
         name: 'description',
       },
     });
-    expect(wrapper.state().item).toMatchObject({
+    const component = wrapper.find('CreateItem').instance();
+    expect(component.state).toMatchObject({
       title: 'Testing',
       description: 'This is a really nice item',
       image: '',
@@ -70,16 +76,58 @@ describe('<Createitem/>', () => {
     });
   });
 
-  it('creates an item with all the inputs', () => {
-    const createItemMutation = jest.fn(() => Promise.resolve({}));
-    const wrapper = shallow(<CreateItem createItemMutation={createItemMutation} />);
-    wrapper.setState({ item: fakeItem });
-    const form = wrapper.find('Form');
-    // console.log(form.debug());
-    form.simulate('submit', {
-      preventDefault() {},
+  it('creates an item when form is submitted', async () => {
+    const item = fakeItem();
+    const mocks = [
+      {
+        request: {
+          query: CREATE_ITEM_MUTATION,
+          variables: {
+            title: item.title,
+            description: item.description,
+            image: '',
+            largeImage: '',
+            price: item.price,
+          },
+        },
+        result: {
+          data: {
+            createItem: {
+              ...fakeItem(),
+              __typeName: 'Item',
+            },
+          },
+        },
+      },
+    ];
+
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <CreateItem />
+      </MockedProvider>
+    );
+
+    wrapper.find('#title').simulate('change', { target: { value: item.title, name: 'title' } });
+    wrapper.find('#price').simulate('change', {
+      target: {
+        value: item.price,
+        name: 'price',
+        type: 'number',
+      },
+    });
+    wrapper.find('#description').simulate('change', {
+      target: {
+        value: item.description,
+        name: 'description',
+      },
     });
-    expect(createItemMutation).toHaveBeenCalled();
-    expect(createItemMutation).toHaveBeenCalledWith({ variables: fakeItem });
+
+    Router.router = { push: jest.fn() };
+    // it submits and matches the mocks
+    wrapper.find('form').simulate('submit');
+    // it routes to the item page
+    await wait();
+    expect(Router.router.push).toHaveBeenCalled();
+    expect(Router.router.push).toHaveBeenCalledWith({ pathname: '/item', query: { id: '123' } });
   });
 });
diff --git a/frontend/__tests__/__snapshots__/CreateItem.test.js.snap b/frontend/__tests__/__snapshots__/CreateItem.test.js.snap
index 66b7965..5c51c2d 100644
--- a/frontend/__tests__/__snapshots__/CreateItem.test.js.snap
+++ b/frontend/__tests__/__snapshots__/CreateItem.test.js.snap
@@ -1,44 +1,51 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Createitem/> renders the form out 1`] = `
-<div>
-  <Form
-    onSubmit={[Function]}
+exports[`<Createitem/> renders and matches snapshot 1`] = `
+<form
+  className="sc-bwzfXH ikCwBB"
+  data-test={true}
+  onSubmit={[Function]}
+>
+  <h2>
+    Sell an Item.
+  </h2>
+  <DisplayError />
+  <fieldset
+    aria-busy={false}
+    disabled={false}
   >
-    <DisplayError
-      error={
-        Object {
-          "message": null,
-        }
-      }
-      onButtonClick={[Function]}
-    />
-    <p>
+    <label>
       Image
       <input
         accept=".png, .jpg, .jpeg"
         onChange={[Function]}
+        required={true}
         type="file"
       />
-    </p>
-    <p>
+    </label>
+    <label>
       Title
       <input
         id="title"
         name="title"
         onChange={[Function]}
         placeholder="Title"
+        required={true}
         type="text"
+        value=""
       />
-    </p>
+    </label>
     <label>
-      Price
+      Price 
+      0
       <input
         id="price"
         min="0"
         name="price"
         onChange={[Function]}
+        required={true}
         type="number"
+        value={0}
       />
     </label>
     <textarea
@@ -46,13 +53,14 @@ exports[`<Createitem/> renders the form out 1`] = `
       name="description"
       onChange={[Function]}
       placeholder="The desc for this item"
+      required={true}
+      value=""
     />
     <button
-      disabled={false}
       type="submit"
     >
       Submit
     </button>
-  </Form>
-</div>
+  </fieldset>
+</form>
 `;
diff --git a/frontend/components/CreateItem.js b/frontend/components/CreateItem.js
index b812db2..2aabb5b 100644
--- a/frontend/components/CreateItem.js
+++ b/frontend/components/CreateItem.js
@@ -48,10 +48,12 @@ class CreateItem extends Component {
       <Mutation
         mutation={CREATE_ITEM_MUTATION}
         variables={this.state}
-        refetchQueries={[{ query: ALL_ITEMS_QUERY }]}
+        // TODO - update all items
+        // refetchQueries={[{ query: ALL_ITEMS_QUERY }]}
       >
         {(createItem, { loading, error }) => (
           <Form
+            data-test
             onSubmit={async e => {
               e.preventDefault();
               const { data: { createItem: item } } = await createItem();