1 files changed, 82 insertions, 34 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' } });
   });
 });