1 files changed, 132 insertions, 0 deletions
diff --git a/finished-application/frontend/__tests__/CreateItem.test.js b/finished-application/frontend/__tests__/CreateItem.test.js
new file mode 100644
index 0000000..56c3f10
--- /dev/null
+++ b/finished-application/frontend/__tests__/CreateItem.test.js
@@ -0,0 +1,132 @@
+import React from 'react';
+import { mount } from 'enzyme';
+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
+global.fetch = jest.fn().mockResolvedValue({
+  json: () => ({
+    secure_url: dogImage,
+    eager: [{ secure_url: dogImage }],
+  }),
+});
+
+describe('<Createitem/>', () => {
+  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 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(component.state.image).toEqual(dogImage);
+    expect(component.state.largeImage).toEqual(dogImage);
+  });
+
+  it('handles state updating', async () => {
+    const wrapper = mount(
+      <MockedProvider>
+        <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({
+      title: 'Testing',
+      description: 'This is a really nice item',
+      image: '',
+      largeImage: '',
+      price: 50000,
+    });
+  });
+
+  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',
+      },
+    });
+
+    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' } });
+  });
+});