diff options
| author | Wes Bos <wesbos@gmail.com> | 2018-05-07 16:54:27 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2018-05-07 16:54:27 -0400 |
| commit | c9a2b488c83dcaae0a00d2177d3bfe1f185c28bf (patch) | |
| tree | ee3b0ad93874e434a212b43194286f366f13fbe1 | |
| parent | dbd39fcc3861facecdd4413c90ae85cebd5db67f (diff) | |
TEST ESTSE TS ETSETST
| -rw-r--r-- | frontend/__tests__/EditUser.test.js | 78 | ||||
| -rw-r--r-- | frontend/__tests__/Order.test.js | 2 | ||||
| -rw-r--r-- | frontend/__tests__/ResetRequest.test.js | 98 | ||||
| -rw-r--r-- | frontend/__tests__/Signup.test.js | 83 | ||||
| -rw-r--r-- | frontend/__tests__/TakeMyMoney.test.js | 81 | ||||
| -rw-r--r-- | frontend/__tests__/__snapshots__/EditUser.test.js.snap | 84 | ||||
| -rw-r--r-- | frontend/__tests__/__snapshots__/ResetRequest.test.js.snap | 189 | ||||
| -rw-r--r-- | frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap | 8 | ||||
| -rw-r--r-- | frontend/components/CreateItem.js | 4 | ||||
| -rw-r--r-- | frontend/components/EditUser.js | 2 | ||||
| -rw-r--r-- | frontend/components/ResetRequest.js | 2 | ||||
| -rw-r--r-- | frontend/components/TakeMyMoney.js | 4 | ||||
| -rw-r--r-- | frontend/lib/testUtils.js | 26 |
13 files changed, 341 insertions, 320 deletions
diff --git a/frontend/__tests__/EditUser.test.js b/frontend/__tests__/EditUser.test.js index 2ec0bee..68ff971 100644 --- a/frontend/__tests__/EditUser.test.js +++ b/frontend/__tests__/EditUser.test.js @@ -1,32 +1,55 @@ import React from 'react'; -import { shallow } from 'enzyme'; +import { mount } from 'enzyme'; import toJSON from 'enzyme-to-json'; import EditUser from '../components/EditUser'; -import { mountWithApollo } from '../lib/testUtils'; import wait from 'waait'; +import { MockedProvider } from 'react-apollo/test-utils'; +import { fakeUser } from '../lib/testUtils'; +import { CURRENT_USER_QUERY, UPDATE_USER_MUTATION } from '../queries/queries'; -const currentUser = { - me: { - name: 'Wes Bos', +const mocks = [ + { + request: { query: CURRENT_USER_QUERY }, + result: { + data: { + me: fakeUser(), + }, + }, }, - refetch() { }, -}; + { + request: { + query: UPDATE_USER_MUTATION, + variables: { + name: 'Westopher', + }, + }, + result: { + updateUser: { + name: 'Westopher', + __typename: 'User', + }, + }, + }, +]; describe('<EditUser/>', () => { it('renders', async () => { - const { wrapper, component } = mountWithApollo(<EditUser />); + const wrapper = mount( + <MockedProvider mocks={mocks}> + <EditUser /> + </MockedProvider> + ); await wait(); wrapper.update(); - expect(toJSON(wrapper.find('Form'))).toMatchSnapshot(); - }); - - it('asks you to log in when you arent logged in', () => { - const wrapper = shallow(<EditUser />); - expect(toJSON(wrapper)).toMatchSnapshot(); + expect(toJSON(wrapper.find('form'))).toMatchSnapshot(); }); it('displays changes', async () => { - const { wrapper } = mountWithApollo(<EditUser />); + const wrapper = mount( + <MockedProvider mocks={mocks}> + <EditUser /> + </MockedProvider> + ); await wait(); wrapper.update(); const nameInput = wrapper.find('[name="name"]'); @@ -36,26 +59,17 @@ describe('<EditUser/>', () => { }); it('calls update user when form is submitted', async () => { - const { wrapper } = mountWithApollo(<EditUser />); + const wrapper = mount( + <MockedProvider mocks={mocks}> + <EditUser /> + </MockedProvider> + ); await wait(); wrapper.update(); - const mutation = wrapper.find('Mutation').instance(); - mutation.client.mutate = jest.fn(); const nameInput = wrapper.find('[name="name"]'); - nameInput.simulate('change', { target: { name: 'name', value: 'Scott' } }); - wrapper.find('form').simulate('submit', { preventDefault() { } }); - expect(mutation.client.mutate).toHaveBeenCalledWithVariables({ name: 'Scott' }); - }); - - it('refetches the current user after an update', async () => { - const { wrapper } = mountWithApollo(<EditUser />); - await wait(); + nameInput.simulate('change', { target: { name: 'name', value: 'Westopher' } }); + wrapper.find('form').simulate('submit'); wrapper.update(); - const query = wrapper.find('Query').instance(); - const mutation = wrapper.find('Mutation').instance(); - console.log(mutation.props.mutation); - expect('wes').toBe('finished with this one'); - // wrapper.find('form').simulate('submit', { preventDefault() {} }); - // expect(query.client.reFetchObservableQueries).toHaveBeenCalled(); + expect(wrapper.find('[data-test="updated"]').text()).toBe('Updated!'); }); }); diff --git a/frontend/__tests__/Order.test.js b/frontend/__tests__/Order.test.js index b9948cf..14522f4 100644 --- a/frontend/__tests__/Order.test.js +++ b/frontend/__tests__/Order.test.js @@ -34,7 +34,7 @@ describe('<Order/>', () => { <Order id="123" /> </MockedProvider> ); - await wait(15); + await wait(10); wrapper.update(); const order = wrapper.find('div[data-test="order"]'); expect(toJSON(order)).toMatchSnapshot(); diff --git a/frontend/__tests__/ResetRequest.test.js b/frontend/__tests__/ResetRequest.test.js index a08f3bc..c7d8012 100644 --- a/frontend/__tests__/ResetRequest.test.js +++ b/frontend/__tests__/ResetRequest.test.js @@ -2,37 +2,93 @@ import React from 'react'; import { mount } from 'enzyme'; import toJSON from 'enzyme-to-json'; import ResetRequest from '../components/ResetRequest'; -import mountOptions from '../lib/testUtils'; +import { MockedProvider } from 'react-apollo/test-utils'; +import wait from 'waait'; +import { fakeItem } from '../lib/testUtils'; +import { REQUEST_RESET_MUTATION, RESET_MUTATION } from '../queries/queries'; + +const mocks = [ + { + request: { + query: REQUEST_RESET_MUTATION, + variables: { + email: 'wesbos@gmail.com', + }, + }, + result: { + data: { + requestReset: { id: 'abc123', __typename: 'User' }, + }, + }, + }, +]; describe('<ResetRequest/>', () => { it('renders and matches snapshot', async () => { - const wrapper = mount(<ResetRequest />, mountOptions); - const Form = wrapper.find("Form[data-test='ResetRequest']"); - expect(toJSON(Form)).toMatchSnapshot(); + const wrapper = mount( + <MockedProvider> + <ResetRequest /> + </MockedProvider> + ); + const form = wrapper.find("form[data-test='ResetRequest']"); + expect(toJSON(form)).toMatchSnapshot(); }); it('calls the mutation', async () => { - const wrapper = mount(<ResetRequest />, mountOptions); - const mutation = wrapper.find('Mutation').instance(); - const input = wrapper.find('input[name="email"]'); - input.simulate('change', { target: { name: 'email', value: 'wesbos@gmail.com' } }); - // Create a spy function on mutate - mutation.client.mutate = jest.fn(); - // mutation.forceUpdate(); - wrapper.find('Form').simulate('submit'); + const wrapper = mount( + <MockedProvider mocks={mocks}> + <ResetRequest /> + </MockedProvider> + ); + + wrapper.find('input').simulate('change', { + target: { value: 'wesbos@gmail.com' }, + }); - expect(mutation.client.mutate).toBeCalledWithVariables({ email: 'wesbos@gmail.comx' }); + // submit the form + wrapper.find('form').simulate('submit'); - expect(toJSON(wrapper)).toMatchSnapshot(); + await wait(); + wrapper.update(); + expect(wrapper.find('p').text()).toContain('Success! Check Your Email!'); }); - it('renders errors', () => { - const wrapper = mount(<ResetRequest />, mountOptions); - const mutation = wrapper.find('Mutation').instance(); - mutation.setState({ error: { message: 'Shit!' } }); + xit('displays an error', async () => { + const errorMocks = [ + { + request: { + query: REQUEST_RESET_MUTATION, + variables: { + email: 'wesbos@gmail.com', + }, + }, + error: { + message: 'Shit', + }, + }, + ]; + const wrapper = mount( + <MockedProvider mocks={errorMocks}> + <ResetRequest /> + </MockedProvider> + ); + + wrapper.find('input').simulate('change', { + target: { value: 'wesbos@gmail.com' }, + }); + + try { + wrapper.find('form').simulate('submit'); + await wait(); + } catch (e) { + console.log(e); + } + // expect(async () => { + // }).toThrow(); + + // wrapper.find('form').simulate('submit'); wrapper.update(); - const error = wrapper.find('DisplayError'); - expect(error).toHaveLength(1); - expect(toJSON(error)).toMatchSnapshot(); + console.log(wrapper.debug()); + // expect(wrapper.find('p').text()).toContain('Success! Check Your Email!'); }); }); diff --git a/frontend/__tests__/Signup.test.js b/frontend/__tests__/Signup.test.js index fbeb513..b6994a6 100644 --- a/frontend/__tests__/Signup.test.js +++ b/frontend/__tests__/Signup.test.js @@ -3,7 +3,9 @@ import { mount } from 'enzyme'; import toJSON from 'enzyme-to-json'; import wait from 'waait'; import Signup from '../components/Signup'; -import mountOptions from '../lib/testUtils'; +import { MockedProvider } from 'react-apollo/test-utils'; +import { LocalStorageMock, fakeItem, fakeUser, fakeCartItem } from '../lib/testUtils'; +import { SIGNUP_MUTATION, CURRENT_USER_QUERY } from '../queries/queries'; function type(wrapper, name, value) { wrapper.find(`input[name="${name}"]`).simulate('change', { @@ -13,42 +15,79 @@ function type(wrapper, name, value) { }, }); } +const me = fakeUser(); +const mocks = [ + { + request: { + query: SIGNUP_MUTATION, + variables: { + email: me.email, + name: me.name, + password: 'wes', + }, + }, + result: { + data: { + signup: { + __typename: 'AuthPayload', + token: 'tok123', + user: { + __typename: 'User', + id: 'abc123', + email: me.email, + name: me.name, + }, + }, + }, + }, + }, + { + request: { query: CURRENT_USER_QUERY }, + result: { + data: { + me: { + __typename: 'User', + ...me, + cart: [], + }, + }, + }, + }, +]; describe('<Signup/>', () => { beforeAll(() => { // mock localStorage - global.localStorage = { - setItem: jest.fn(), - }; + global.localStorage = new LocalStorageMock(); }); it('renders and matches snapshot', () => { - const wrapper = mount(<Signup />, mountOptions); + const wrapper = mount( + <MockedProvider> + <Signup /> + </MockedProvider> + ); expect(toJSON(wrapper.find('form'))).toMatchSnapshot(); }); it('calls mutation with correct data', async () => { - const wrapper = mount(<Signup />, mountOptions); - const mutation = wrapper.find('Mutation').instance(); - mutation.client.mutate = jest.fn().mockResolvedValue({ - data: { signup: { token: 'omg123' } }, - }); + const wrapper = mount( + <MockedProvider mocks={mocks}> + <Signup /> + </MockedProvider> + ); - const expected = { - name: 'Randy', - email: 'Randy@randymail.net', - password: 'pupsrock', - }; + await wait(); + wrapper.update(); - type(wrapper, 'name', expected.name); - type(wrapper, 'email', expected.email); - type(wrapper, 'password', expected.password); + type(wrapper, 'name', me.name); + type(wrapper, 'email', me.email); + type(wrapper, 'password', 'wes'); - wrapper.simulate('submit'); + wrapper.update(); + wrapper.find('form').simulate('submit'); - expect(mutation.client.mutate).toHaveBeenCalled(); - expect(mutation.client.mutate).toHaveBeenCalledWithVariables(expected); await wait(); - expect(localStorage.setItem).toHaveBeenCalledWith('token', 'omg123'); + expect(localStorage.getItem('token')).toBe('tok123'); }); }); diff --git a/frontend/__tests__/TakeMyMoney.test.js b/frontend/__tests__/TakeMyMoney.test.js index a7d2c98..1b131a5 100644 --- a/frontend/__tests__/TakeMyMoney.test.js +++ b/frontend/__tests__/TakeMyMoney.test.js @@ -5,13 +5,32 @@ import NProgress from 'nprogress'; import TakeMyMoney from '../components/TakeMyMoney'; import Router from 'next/router'; import wait from 'waait'; -import mountOptions from '../lib/testUtils'; +import { MockedProvider } from 'react-apollo/test-utils'; +import { fakeItem, fakeUser, fakeCartItem } from '../lib/testUtils'; +import { CREATE_ITEM_MUTATION, CURRENT_USER_QUERY } from '../queries/queries'; -Router.router = { push() { } }; +Router.router = { push() {} }; +const mocks = [ + { + request: { query: CURRENT_USER_QUERY }, + result: { + data: { + me: { + ...fakeUser(), + cart: [fakeCartItem()], + }, + }, + }, + }, +]; describe('<TakeMyMoney />', () => { it('renders', async () => { - const wrapper = mount(<TakeMyMoney />, mountOptions); + const wrapper = mount( + <MockedProvider mocks={mocks}> + <TakeMyMoney /> + </MockedProvider> + ); // wait for it to load await wait(); wrapper.update(); @@ -21,38 +40,56 @@ describe('<TakeMyMoney />', () => { }); it('creates an order onToken', async () => { - // TODO can this be done with a resolve jest fn? - const createOrderSpy = jest.fn(() => - Promise.resolve({ data: { createOrder: { id: 'xyz789' } } }) + const createOrderSpy = jest.fn().mockResolvedValue({ data: { createOrder: { id: 'xyz789' } } }); + + const wrapper = mount( + <MockedProvider mocks={mocks}> + <TakeMyMoney /> + </MockedProvider> ); - const wrapper = mount(<TakeMyMoney />, mountOptions); - // manually run onToken - wrapper.instance().onToken({ id: 'abc123' }, createOrderSpy); + const component = wrapper.find('TakeMyMoney'); + component.instance().onToken({ id: 'abc123' }, createOrderSpy); // check it expect(createOrderSpy).toBeCalled(); expect(createOrderSpy).toBeCalledWith({ variables: { token: 'abc123' } }); }); - it('turns the progress bar on', () => { - const createOrderSpy = jest.fn().mockResolvedValue({ - data: { createOrder: { id: 'xyz789' } }, - }); - - // spy on .start() + it('turns the progress bar on', async () => { + const wrapper = mount( + <MockedProvider mocks={mocks}> + <TakeMyMoney /> + </MockedProvider> + ); + await wait(); + wrapper.update(); NProgress.start = jest.fn(); - const wrapper = mount(<TakeMyMoney />, mountOptions); - wrapper.instance().onToken({ id: 'abc123' }, createOrderSpy); + + const createOrderSpy = jest.fn().mockResolvedValue({ data: { createOrder: { id: 'xyz789' } } }); + const component = wrapper.find('TakeMyMoney'); + component.instance().onToken({ id: 'abc123' }, createOrderSpy); + wrapper.find('button').simulate('click'); expect(NProgress.start).toHaveBeenCalled(); }); it('routes to the order page when completed', async () => { - const createOrderSpy = jest.fn().mockResolvedValue({ - data: { createOrder: { id: 'xyz789' } }, - }); + // Mount the wrapper + const wrapper = mount( + <MockedProvider mocks={mocks}> + <TakeMyMoney /> + </MockedProvider> + ); + await wait(); + wrapper.update(); + // Spy on Router Push Router.router.push = jest.fn(); - const wrapper = mount(<TakeMyMoney />, mountOptions); - wrapper.instance().onToken({ id: 'abc123' }, createOrderSpy); + const createOrderSpy = jest.fn().mockResolvedValue({ data: { createOrder: { id: 'xyz789' } } }); + + const component = wrapper.find('TakeMyMoney'); + component.instance().onToken({ id: 'abc123' }, createOrderSpy); + + // submit the form + wrapper.find('button').simulate('click'); await wait(); expect(Router.router.push).toHaveBeenCalledWith({ pathname: '/order', diff --git a/frontend/__tests__/__snapshots__/EditUser.test.js.snap b/frontend/__tests__/__snapshots__/EditUser.test.js.snap index 1de9aef..8a39758 100644 --- a/frontend/__tests__/__snapshots__/EditUser.test.js.snap +++ b/frontend/__tests__/__snapshots__/EditUser.test.js.snap @@ -1,55 +1,45 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`<EditUser/> asks you to log in when you arent logged in 1`] = ` -<p> - You must be logged in -</p> -`; - exports[`<EditUser/> renders 1`] = ` -<Form +<form + className="sc-bdVaJa LHejR" onSubmit={[Function]} > - <form - className="sc-bdVaJa LHejR" - onSubmit={[Function]} + <DisplayError /> + <fieldset + aria-busy={false} + disabled={false} > - <DisplayError /> - <fieldset - aria-busy={false} - disabled={false} + <label + htmlFor="name" + > + Name: + <input + defaultValue="Miss Coleman Berge" + name="name" + onChange={[Function]} + type="text" + /> + </label> + <button + type="submit" + > + Update + </button> + <strong> + me: + </strong> + <pre> + "Miss Coleman Berge" + </pre> + <strong> + Change: + </strong> + <pre + data-test="change" > - <label - htmlFor="name" - > - Name: - <input - defaultValue="Miss Tillman Mitchell" - name="name" - onChange={[Function]} - type="text" - /> - </label> - <button - type="submit" - > - Update - </button> - <strong> - me: - </strong> - <pre> - "Miss Tillman Mitchell" - </pre> - <strong> - Change: - </strong> - <pre - data-test="change" - > - {} - </pre> - </fieldset> - </form> -</Form> + {} + </pre> + </fieldset> +</form> `; diff --git a/frontend/__tests__/__snapshots__/ResetRequest.test.js.snap b/frontend/__tests__/__snapshots__/ResetRequest.test.js.snap index 66c4ff1..6afa68c 100644 --- a/frontend/__tests__/__snapshots__/ResetRequest.test.js.snap +++ b/frontend/__tests__/__snapshots__/ResetRequest.test.js.snap @@ -1,176 +1,35 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`<ResetRequest/> calls the mutation 1`] = ` -<ResetRequest> - <Mutation - mutation={ - Object { - "definitions": Array [ - Object { - "directives": Array [], - "kind": "OperationDefinition", - "name": Object { - "kind": "Name", - "value": "requestReset", - }, - "operation": "mutation", - "selectionSet": Object { - "kind": "SelectionSet", - "selections": Array [ - Object { - "alias": undefined, - "arguments": Array [ - Object { - "kind": "Argument", - "name": Object { - "kind": "Name", - "value": "email", - }, - "value": Object { - "kind": "Variable", - "name": Object { - "kind": "Name", - "value": "email", - }, - }, - }, - ], - "directives": Array [], - "kind": "Field", - "name": Object { - "kind": "Name", - "value": "requestReset", - }, - "selectionSet": Object { - "kind": "SelectionSet", - "selections": Array [ - Object { - "alias": undefined, - "arguments": Array [], - "directives": Array [], - "kind": "Field", - "name": Object { - "kind": "Name", - "value": "id", - }, - "selectionSet": undefined, - }, - ], - }, - }, - ], - }, - "variableDefinitions": Array [ - Object { - "defaultValue": undefined, - "kind": "VariableDefinition", - "type": Object { - "kind": "NonNullType", - "type": Object { - "kind": "NamedType", - "name": Object { - "kind": "Name", - "value": "String", - }, - }, - }, - "variable": Object { - "kind": "Variable", - "name": Object { - "kind": "Name", - "value": "email", - }, - }, - }, - ], - }, - ], - "kind": "Document", - "loc": Object { - "end": 97, - "start": 0, - }, - } - } - variables={ - Object { - "email": "wesbos@gmail.com", - } - } - > - <Form - data-test="ResetRequest" - onSubmit={[Function]} - > - <form - className="sc-bdVaJa LHejR" - data-test="ResetRequest" - onSubmit={[Function]} - > - <DisplayError /> - <fieldset - aria-busy={true} - disabled={true} - > - <label - htmlFor="email" - > - Email - <input - name="email" - onChange={[Function]} - placeholder="email" - type="text" - value="wesbos@gmail.com" - /> - </label> - <button - type="submit" - > - Request Reset! - </button> - </fieldset> - </form> - </Form> - </Mutation> -</ResetRequest> -`; - exports[`<ResetRequest/> renders and matches snapshot 1`] = ` -<Form +<form + className="sc-bdVaJa LHejR" data-test="ResetRequest" onSubmit={[Function]} > - <form - className="sc-bdVaJa LHejR" - data-test="ResetRequest" - onSubmit={[Function]} + <DisplayError /> + <fieldset + aria-busy={false} + disabled={false} > - <DisplayError /> - <fieldset - aria-busy={false} - disabled={false} + <label + htmlFor="email" + > + Email + <input + name="email" + onChange={[Function]} + placeholder="email" + type="text" + value="" + /> + </label> + <button + type="submit" > - <label - htmlFor="email" - > - Email - <input - name="email" - onChange={[Function]} - placeholder="email" - type="text" - value="" - /> - </label> - <button - type="submit" - > - Request Reset! - </button> - </fieldset> - </form> -</Form> + Request Reset! + </button> + </fieldset> +</form> `; exports[`<ResetRequest/> renders errors 1`] = ` diff --git a/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap b/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap index cc83945..00863d3 100644 --- a/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap +++ b/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap @@ -3,12 +3,12 @@ exports[`<TakeMyMoney /> renders 1`] = ` <ReactStripeCheckout ComponentClass="span" - amount={281050000} + amount={15000} className="StripeCheckout" currency="USD" - description="Order of 5621 Items From Sick Fits" - email="Ella_Douglas@Lou.info" - image="dog.jpg" + description="Order of 3 Items From Sick Fits" + email="Delmer.Smith@yahoo.com" + image="dog-small.jpg" label="Pay With Card" locale="auto" name="Sick Fits Haul" diff --git a/frontend/components/CreateItem.js b/frontend/components/CreateItem.js index 2aabb5b..3dd929f 100644 --- a/frontend/components/CreateItem.js +++ b/frontend/components/CreateItem.js @@ -48,8 +48,8 @@ class CreateItem extends Component { <Mutation mutation={CREATE_ITEM_MUTATION} variables={this.state} - // TODO - update all items - // refetchQueries={[{ query: ALL_ITEMS_QUERY }]} + // TODO - update all items + // refetchQueries={[{ query: ALL_ITEMS_QUERY }]} > {(createItem, { loading, error }) => ( <Form diff --git a/frontend/components/EditUser.js b/frontend/components/EditUser.js index eeba72e..506966b 100644 --- a/frontend/components/EditUser.js +++ b/frontend/components/EditUser.js @@ -31,7 +31,6 @@ class EditUser extends React.Component { <Query query={CURRENT_USER_QUERY}> {({ data: { me }, loading }) => { if (loading) return <p>Loading...</p>; - if (!me) return <p>You must be logged in</p>; return ( <Mutation mutation={UPDATE_USER_MUTATION} @@ -42,6 +41,7 @@ class EditUser extends React.Component { <Form onSubmit={e => this.handleSubmit(e, updateUser)}> <Error error={error} /> <fieldset disabled={loading} aria-busy={loading}> + {called && !error && <p data-test="updated">Updated!</p>} <label htmlFor="name"> Name: <input diff --git a/frontend/components/ResetRequest.js b/frontend/components/ResetRequest.js index 2302173..67ab787 100644 --- a/frontend/components/ResetRequest.js +++ b/frontend/components/ResetRequest.js @@ -16,8 +16,8 @@ class ResetRequest extends React.Component { <Form onSubmit={async e => { e.preventDefault(); - // I wanna spy on this const res = await resetMutation(); + console.log('HEYY'); console.log(res); }} data-test="ResetRequest" diff --git a/frontend/components/TakeMyMoney.js b/frontend/components/TakeMyMoney.js index e8b11f2..fb5f727 100644 --- a/frontend/components/TakeMyMoney.js +++ b/frontend/components/TakeMyMoney.js @@ -5,6 +5,7 @@ import Router from 'next/router'; import NProgress from 'nprogress'; import { CREATE_ORDER_MUTATION, CURRENT_USER_QUERY } from '../queries/queries'; import calcTotalPrice from '../lib/calcTotalPrice'; +import Error from './ErrorMessage'; function totalItems(cart) { return cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0); @@ -29,8 +30,9 @@ class TakeMyMoney extends Component { render() { return ( <Query query={CURRENT_USER_QUERY}> - {({ data: { me } }) => { + {({ data: { me }, error }) => { if (!me || !me.cart.length) return null; + if (error) return <Error error={error} />; return ( <Mutation mutation={CREATE_ORDER_MUTATION} diff --git a/frontend/lib/testUtils.js b/frontend/lib/testUtils.js index 6b7132a..42739e9 100644 --- a/frontend/lib/testUtils.js +++ b/frontend/lib/testUtils.js @@ -25,6 +25,7 @@ const fakeUser = () => ({ }); const fakeOrderItem = () => ({ + __typename: 'OrderItem', id: casual.uuid, image: `${casual.word}.jpg`, title: casual.words(), @@ -52,4 +53,27 @@ const fakeCartItem = overrides => ({ ...overrides, }); -export { fakeItem, fakeUser, fakeCartItem, fakeOrder, fakeOrderItem }; +// Fake LocalStorage +class LocalStorageMock { + constructor() { + this.store = {}; + } + + clear() { + this.store = {}; + } + + getItem(key) { + return this.store[key] || null; + } + + setItem(key, value) { + this.store[key] = value.toString(); + } + + removeItem(key) { + delete this.store[key]; + } +} + +export { LocalStorageMock, fakeItem, fakeUser, fakeCartItem, fakeOrder, fakeOrderItem }; |
