diff options
| -rw-r--r-- | frontend/__tests__/CreateItem.test.js | 116 | ||||
| -rw-r--r-- | frontend/__tests__/__snapshots__/CreateItem.test.js.snap | 48 | ||||
| -rw-r--r-- | frontend/components/CreateItem.js | 4 |
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(); |