Merge branch 'master' into randyridge/our

1 files changed, 32 insertions, 52 deletions

diff --git a/finished-application/frontend/__tests__/CreateItem.test.js b/finished-application/frontend/__tests__/CreateItem.test.js
index 56c3f10..6e88d94 100644
--- a/finished-application/frontend/__tests__/CreateItem.test.js
+++ b/finished-application/frontend/__tests__/CreateItem.test.js
@@ -1,15 +1,14 @@
-import React from 'react';
 import { mount } from 'enzyme';
+import wait from 'waait';
 import toJSON from 'enzyme-to-json';
 import Router from 'next/router';
 import { MockedProvider } from 'react-apollo/test-utils';
 import CreateItem, { CREATE_ITEM_MUTATION } from '../components/CreateItem';
-import wait from 'waait';
 import { fakeItem } from '../lib/testUtils';
 
 const dogImage = 'https://dog.com/dog.jpg';
 
-// Mock fetch to resolve data
+// mock the global fetch API
 global.fetch = jest.fn().mockResolvedValue({
   json: () => ({
     secure_url: dogImage,
@@ -17,14 +16,14 @@ global.fetch = jest.fn().mockResolvedValue({
   }),
 });
 
-describe('<Createitem/>', () => {
-  it('renders and matches snapshot', () => {
+describe('<CreateItem/>', () => {
+  it('renders and matches snapshot', async () => {
     const wrapper = mount(
       <MockedProvider>
         <CreateItem />
       </MockedProvider>
     );
-    const form = wrapper.find('form[data-test]');
+    const form = wrapper.find('form[data-test="form"]');
     expect(toJSON(form)).toMatchSnapshot();
   });
 
@@ -34,14 +33,14 @@ describe('<Createitem/>', () => {
         <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);
+    input.simulate('change', { target: { files: ['fakedog.jpg'] } });
+    await wait();
+    const component = wrapper.find('CreateItem').instance();
     expect(component.state.image).toEqual(dogImage);
     expect(component.state.largeImage).toEqual(dogImage);
+    expect(global.fetch).toHaveBeenCalled();
+    global.fetch.mockReset();
   });
 
   it('handles state updating', async () => {
@@ -50,32 +49,21 @@ describe('<Createitem/>', () => {
         <CreateItem />
       </MockedProvider>
     );
-
     wrapper.find('#title').simulate('change', { target: { value: 'Testing', name: 'title' } });
-    wrapper.find('#price').simulate('change', {
-      target: {
-        value: 50000,
-        name: 'price',
-        type: 'number',
-      },
-    });
-    wrapper.find('#description').simulate('change', {
-      target: {
-        value: 'This is a really nice item',
-        name: 'description',
-      },
-    });
-    const component = wrapper.find('CreateItem').instance();
-    expect(component.state).toMatchObject({
+    wrapper
+      .find('#price')
+      .simulate('change', { target: { value: 50000, name: 'price', type: 'number' } });
+    wrapper
+      .find('#description')
+      .simulate('change', { target: { value: 'This is a really nice item', name: 'description' } });
+
+    expect(wrapper.find('CreateItem').instance().state).toMatchObject({
       title: 'Testing',
-      description: 'This is a really nice item',
-      image: '',
-      largeImage: '',
       price: 50000,
+      description: 'This is a really nice item',
     });
   });
-
-  it('creates an item when form is submitted', async () => {
+  it('creates an item when the form is submitted', async () => {
     const item = fakeItem();
     const mocks = [
       {
@@ -92,8 +80,9 @@ describe('<Createitem/>', () => {
         result: {
           data: {
             createItem: {
-              ...fakeItem(),
-              __typeName: 'Item',
+              ...fakeItem,
+              id: 'abc123',
+              __typename: 'Item',
             },
           },
         },
@@ -105,28 +94,19 @@ describe('<Createitem/>', () => {
         <CreateItem />
       </MockedProvider>
     );
-
+    // simulate someone filling out the form
     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',
-      },
-    });
-
+    wrapper
+      .find('#price')
+      .simulate('change', { target: { value: item.price, name: 'price', type: 'number' } });
+    wrapper
+      .find('#description')
+      .simulate('change', { target: { value: item.description, name: 'description' } });
+    // mock the router
     Router.router = { push: jest.fn() };
-    // it submits and matches the mocks
     wrapper.find('form').simulate('submit');
-    // it routes to the item page
     await wait(50);
     expect(Router.router.push).toHaveBeenCalled();
-    expect(Router.router.push).toHaveBeenCalledWith({ pathname: '/item', query: { id: '123' } });
+    expect(Router.router.push).toHaveBeenCalledWith({ pathname: '/item', query: { id: 'abc123' } });
   });
 });