diff options
Diffstat (limited to 'frontend/__tests__')
| -rw-r--r-- | frontend/__tests__/AddToCart.test.js | 17 | ||||
| -rw-r--r-- | frontend/__tests__/Cart.test.js | 3 | ||||
| -rw-r--r-- | frontend/__tests__/CreateItem.test.js | 3 | ||||
| -rw-r--r-- | frontend/__tests__/EditUser.test.js | 6 | ||||
| -rw-r--r-- | frontend/__tests__/Nav.test.js | 2 | ||||
| -rw-r--r-- | frontend/__tests__/Order.test.js | 3 | ||||
| -rw-r--r-- | frontend/__tests__/Pagination.test.js | 6 | ||||
| -rw-r--r-- | frontend/__tests__/PleaseSignIn.test.js | 2 | ||||
| -rw-r--r-- | frontend/__tests__/RemoveFromCart.test.js | 4 | ||||
| -rw-r--r-- | frontend/__tests__/ResetRequest.test.js | 49 | ||||
| -rw-r--r-- | frontend/__tests__/Signup.test.js | 36 | ||||
| -rw-r--r-- | frontend/__tests__/SingleItem.test.js | 17 | ||||
| -rw-r--r-- | frontend/__tests__/TakeMyMoney.test.js | 21 | ||||
| -rw-r--r-- | frontend/__tests__/__snapshots__/Signup.test.js.snap | 7 | ||||
| -rw-r--r-- | frontend/__tests__/__snapshots__/SingleItem.test.js.snap | 97 |
15 files changed, 84 insertions, 189 deletions
diff --git a/frontend/__tests__/AddToCart.test.js b/frontend/__tests__/AddToCart.test.js index 888ad68..fe15f3f 100644 --- a/frontend/__tests__/AddToCart.test.js +++ b/frontend/__tests__/AddToCart.test.js @@ -1,12 +1,12 @@ import React from 'react'; import { mount } from 'enzyme'; import toJSON from 'enzyme-to-json'; -import AddToCart from '../components/AddToCart'; import { ApolloConsumer } from 'react-apollo'; import { MockedProvider } from 'react-apollo/test-utils'; import wait from 'waait'; +import AddToCart, { ADD_TO_CART_MUTATION } from '../components/AddToCart'; import { fakeCartItem, fakeUser } from '../lib/testUtils'; -import { ADD_TO_CART_MUTATION, CURRENT_USER_QUERY } from '../queries/queries.graphql'; +import { CURRENT_USER_QUERY } from '../components/User'; const mocks = [ { @@ -34,12 +34,15 @@ const mocks = [ ]; describe('<AddtoCart/>', () => { - it('renders and matches snapshot', () => { + it('renders and matches snapshot', async () => { const wrapper = mount( - <MockedProvider> + <MockedProvider mocks={mocks}> <AddToCart id="abc123" /> </MockedProvider> ); + await wait(); + wrapper.update(); + expect(toJSON(wrapper.find('button'))).toMatchSnapshot(); }); @@ -58,6 +61,8 @@ describe('<AddtoCart/>', () => { </MockedProvider> ); await wait(); + wrapper.update(); + const { me } = apolloClient.readQuery({ query: CURRENT_USER_QUERY }); expect(me.cart).toHaveLength(0); @@ -72,12 +77,14 @@ describe('<AddtoCart/>', () => { expect(me2.cart[0].quantity).toBe(1); }); - it('changes to adding when clicked', () => { + it('changes to adding when clicked', async () => { const wrapper = mount( <MockedProvider mocks={mocks}> <AddToCart id="abc123" /> </MockedProvider> ); + await wait(); + wrapper.update(); expect(wrapper.text()).toContain('🛒 Add To Cart'); wrapper.find('button').simulate('click'); expect(wrapper.text()).toContain('🛒 Adding To Cart'); diff --git a/frontend/__tests__/Cart.test.js b/frontend/__tests__/Cart.test.js index f32c7f9..255183e 100644 --- a/frontend/__tests__/Cart.test.js +++ b/frontend/__tests__/Cart.test.js @@ -6,7 +6,8 @@ import wait from 'waait'; import Cart from '../components/Cart'; import { MockedProvider } from 'react-apollo/test-utils'; import { fakeCartItem, fakeUser } from '../lib/testUtils'; -import { CURRENT_USER_QUERY, LOCAL_STATE_QUERY } from '../queries/queries.graphql'; +import { CURRENT_USER_QUERY } from '../components/User'; +import { LOCAL_STATE_QUERY } from '../components/Cart'; const mocks = [ { diff --git a/frontend/__tests__/CreateItem.test.js b/frontend/__tests__/CreateItem.test.js index a2fcb90..56c3f10 100644 --- a/frontend/__tests__/CreateItem.test.js +++ b/frontend/__tests__/CreateItem.test.js @@ -3,10 +3,9 @@ import { mount } from 'enzyme'; import toJSON from 'enzyme-to-json'; import Router from 'next/router'; import { MockedProvider } from 'react-apollo/test-utils'; -import CreateItem from '../components/CreateItem'; +import CreateItem, { CREATE_ITEM_MUTATION } from '../components/CreateItem'; import wait from 'waait'; import { fakeItem } from '../lib/testUtils'; -import { CREATE_ITEM_MUTATION } from '../queries/queries.graphql'; const dogImage = 'https://dog.com/dog.jpg'; diff --git a/frontend/__tests__/EditUser.test.js b/frontend/__tests__/EditUser.test.js index c1aea1c..a98cbb5 100644 --- a/frontend/__tests__/EditUser.test.js +++ b/frontend/__tests__/EditUser.test.js @@ -1,11 +1,11 @@ import React from 'react'; import { mount } from 'enzyme'; import toJSON from 'enzyme-to-json'; -import EditUser from '../components/EditUser'; -import wait from 'waait'; import { MockedProvider } from 'react-apollo/test-utils'; +import wait from 'waait'; +import EditUser, { UPDATE_USER_MUTATION } from '../components/EditUser'; import { fakeUser } from '../lib/testUtils'; -import { CURRENT_USER_QUERY, UPDATE_USER_MUTATION } from '../queries/queries.graphql'; +import { CURRENT_USER_QUERY } from '../components/User'; const mocks = [ { diff --git a/frontend/__tests__/Nav.test.js b/frontend/__tests__/Nav.test.js index 16f20e3..5c61c56 100644 --- a/frontend/__tests__/Nav.test.js +++ b/frontend/__tests__/Nav.test.js @@ -6,7 +6,7 @@ import Router from 'next/router'; import Nav from '../components/Nav'; import { MockedProvider } from 'react-apollo/test-utils'; import { fakeUser } from '../lib/testUtils'; -import { CURRENT_USER_QUERY } from '../queries/queries.graphql'; +import { CURRENT_USER_QUERY } from '../components/User'; // Mock the router Router.router = { push() {} }; diff --git a/frontend/__tests__/Order.test.js b/frontend/__tests__/Order.test.js index 5cb21c8..f3a4f06 100644 --- a/frontend/__tests__/Order.test.js +++ b/frontend/__tests__/Order.test.js @@ -2,10 +2,9 @@ import React from 'react'; import { mount } from 'enzyme'; import toJSON from 'enzyme-to-json'; import wait from 'waait'; -import Order from '../components/Order'; import { MockedProvider } from 'react-apollo/test-utils'; +import Order, { SINGLE_ORDER_QUERY } from '../components/Order'; import { fakeOrder } from '../lib/testUtils'; -import { SINGLE_ORDER_QUERY } from '../queries/queries.graphql'; const mocks = [ { diff --git a/frontend/__tests__/Pagination.test.js b/frontend/__tests__/Pagination.test.js index 1202d9a..29a57f9 100644 --- a/frontend/__tests__/Pagination.test.js +++ b/frontend/__tests__/Pagination.test.js @@ -1,11 +1,10 @@ import React from 'react'; import { shallow, mount } from 'enzyme'; import toJSON from 'enzyme-to-json'; -import Pagination from '../components/Pagination'; +import Pagination, { PAGINATION_QUERY } from '../components/Pagination'; import { MockedProvider } from 'react-apollo/test-utils'; import wait from 'waait'; import { fakeItem } from '../lib/testUtils'; -import { ALL_ITEMS_QUERY } from '../queries/queries.graphql'; import Router from 'next/router'; @@ -15,7 +14,7 @@ Router.router = { push() {}, prefetch() {} }; function makeMocksFor(length) { return [ { - request: { query: ALL_ITEMS_QUERY, variables: { skip: 0, first: 4 } }, + request: { query: PAGINATION_QUERY, variables: { skip: 0, first: 4 } }, result: { data: { itemsConnection: { @@ -25,7 +24,6 @@ function makeMocksFor(length) { __typename: 'count', }, }, - items: Array.from({ length }, (_, i) => fakeItem({ id: `item${i}` })), }, }, }, diff --git a/frontend/__tests__/PleaseSignIn.test.js b/frontend/__tests__/PleaseSignIn.test.js index 68581b7..f516ea3 100644 --- a/frontend/__tests__/PleaseSignIn.test.js +++ b/frontend/__tests__/PleaseSignIn.test.js @@ -4,7 +4,7 @@ import wait from 'waait'; import PleaseSignIn from '../components/PleaseSignIn'; import { MockedProvider } from 'react-apollo/test-utils'; import { fakeUser } from '../lib/testUtils'; -import { CURRENT_USER_QUERY } from '../queries/queries.graphql'; +import { CURRENT_USER_QUERY } from '../components/User'; const notSignedInMocks = [ { diff --git a/frontend/__tests__/RemoveFromCart.test.js b/frontend/__tests__/RemoveFromCart.test.js index 581e815..34229a5 100644 --- a/frontend/__tests__/RemoveFromCart.test.js +++ b/frontend/__tests__/RemoveFromCart.test.js @@ -4,9 +4,9 @@ import toJSON from 'enzyme-to-json'; import { ApolloConsumer } from 'react-apollo'; import { MockedProvider } from 'react-apollo/test-utils'; import wait from 'waait'; -import RemoveFromCart from '../components/RemoveFromCart'; +import RemoveFromCart, { REMOVE_FROM_CART_MUTATION } from '../components/RemoveFromCart'; import { fakeCartItem, fakeUser } from '../lib/testUtils'; -import { CURRENT_USER_QUERY, REMOVE_FROM_CART_MUTATION } from '../queries/queries.graphql'; +import { CURRENT_USER_QUERY } from '../components/User'; const mocks = [ { diff --git a/frontend/__tests__/ResetRequest.test.js b/frontend/__tests__/ResetRequest.test.js index 7e9a7c2..22a9508 100644 --- a/frontend/__tests__/ResetRequest.test.js +++ b/frontend/__tests__/ResetRequest.test.js @@ -1,11 +1,8 @@ -import React from 'react'; import { mount } from 'enzyme'; import toJSON from 'enzyme-to-json'; -import ResetRequest from '../components/ResetRequest'; 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.graphql'; +import ResetRequest, { REQUEST_RESET_MUTATION } from '../components/ResetRequest'; const mocks = [ { @@ -46,50 +43,12 @@ describe('<ResetRequest/>', () => { }); // submit the form - wrapper.find('form').simulate('submit'); + const form = wrapper.find('form'); + console.log(form); + form.simulate('submit'); await wait(); wrapper.update(); expect(wrapper.find('p').text()).toContain('Success! Check Your Email!'); }); - - 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('CAUGHT'); - console.log(e); - } - // expect(async () => { - // }).toThrow(); - - // wrapper.find('form').simulate('submit'); - wrapper.update(); - 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 018f9b9..2a668a6 100644 --- a/frontend/__tests__/Signup.test.js +++ b/frontend/__tests__/Signup.test.js @@ -2,10 +2,11 @@ import React from 'react'; import { mount } from 'enzyme'; import toJSON from 'enzyme-to-json'; import wait from 'waait'; -import Signup from '../components/Signup'; +import { ApolloConsumer } from 'react-apollo'; import { MockedProvider } from 'react-apollo/test-utils'; -import { LocalStorageMock, fakeItem, fakeUser, fakeCartItem } from '../lib/testUtils'; -import { SIGNUP_MUTATION, CURRENT_USER_QUERY } from '../queries/queries.graphql'; +import Signup, { SIGNUP_MUTATION } from '../components/Signup'; +import { fakeUser } from '../lib/testUtils'; +import { CURRENT_USER_QUERY } from '../components/User'; function type(wrapper, name, value) { wrapper.find(`input[name="${name}"]`).simulate('change', { @@ -29,14 +30,10 @@ const mocks = [ result: { data: { signup: { - __typename: 'AuthPayload', - token: 'tok123', - user: { - __typename: 'User', - id: 'abc123', - email: me.email, - name: me.name, - }, + __typename: 'User', + id: 'abc123', + email: me.email, + name: me.name, }, }, }, @@ -56,11 +53,6 @@ const mocks = [ ]; describe('<Signup/>', () => { - beforeAll(() => { - // mock localStorage - global.localStorage = new LocalStorageMock(); - }); - it('renders and matches snapshot', () => { const wrapper = mount( <MockedProvider> @@ -71,9 +63,15 @@ describe('<Signup/>', () => { }); it('calls mutation with correct data', async () => { + let apolloClient; const wrapper = mount( <MockedProvider mocks={mocks}> - <Signup /> + <ApolloConsumer> + {client => { + apolloClient = client; + return <Signup />; + }} + </ApolloConsumer> </MockedProvider> ); @@ -87,7 +85,7 @@ describe('<Signup/>', () => { wrapper.update(); wrapper.find('form').simulate('submit'); - await wait(5); - expect(localStorage.getItem('token')).toBe('tok123'); + const user = await apolloClient.query({ query: CURRENT_USER_QUERY }); + expect(user.data.me).toMatchObject(me); }); }); diff --git a/frontend/__tests__/SingleItem.test.js b/frontend/__tests__/SingleItem.test.js index e99facf..aeb8554 100644 --- a/frontend/__tests__/SingleItem.test.js +++ b/frontend/__tests__/SingleItem.test.js @@ -2,10 +2,10 @@ import React from 'react'; import { mount } from 'enzyme'; import wait from 'waait'; import toJSON from 'enzyme-to-json'; -import SingleItem from '../components/SingleItem'; -import { SINGLE_ITEM_QUERY } from '../queries/queries.graphql'; +import SingleItem, { SINGLE_ITEM_QUERY } from '../components/SingleItem'; import { MockedProvider } from 'react-apollo/test-utils'; -import { fakeItem } from '../lib/testUtils'; +import { fakeItem, fakeUser } from '../lib/testUtils'; +import { CURRENT_USER_QUERY } from '../components/User'; const data = { items: [fakeItem()], @@ -16,9 +16,12 @@ describe('<SingleItem/>', () => { const mocks = [ { request: { query: SINGLE_ITEM_QUERY, variables: { id: '123' } }, - delay: 50, result: { data }, }, + { + request: { query: CURRENT_USER_QUERY }, + result: { data: { me: fakeUser() } }, + }, ]; const wrapper = mount( <MockedProvider mocks={mocks}> @@ -32,9 +35,9 @@ describe('<SingleItem/>', () => { await wait(55); wrapper.update(); // Grab the piece we want - const Item = wrapper.find('[data-test="SingleItem"]'); - // snapshot it! - expect(toJSON(Item)).toMatchSnapshot(); + expect(toJSON(wrapper.find('h2'))).toMatchSnapshot(); + expect(toJSON(wrapper.find('img'))).toMatchSnapshot(); + expect(toJSON(wrapper.find('p'))).toMatchSnapshot(); }); it('Errors with a not found Item', async () => { diff --git a/frontend/__tests__/TakeMyMoney.test.js b/frontend/__tests__/TakeMyMoney.test.js index f2d0ca7..1c41410 100644 --- a/frontend/__tests__/TakeMyMoney.test.js +++ b/frontend/__tests__/TakeMyMoney.test.js @@ -1,13 +1,12 @@ -import React from 'react'; -import { shallow, mount } from 'enzyme'; +import { mount } from 'enzyme'; import toJSON from 'enzyme-to-json'; import NProgress from 'nprogress'; -import TakeMyMoney from '../components/TakeMyMoney'; import Router from 'next/router'; import wait from 'waait'; import { MockedProvider } from 'react-apollo/test-utils'; -import { fakeItem, fakeUser, fakeCartItem } from '../lib/testUtils'; -import { CREATE_ITEM_MUTATION, CURRENT_USER_QUERY } from '../queries/queries.graphql'; +import TakeMyMoney from '../components/TakeMyMoney'; +import { fakeUser, fakeCartItem } from '../lib/testUtils'; +import { CURRENT_USER_QUERY } from '../components/User'; Router.router = { push() {} }; @@ -40,9 +39,7 @@ describe('<TakeMyMoney />', () => { }); it('creates an order onToken', async () => { - const createOrderSpy = jest - .fn() - .mockResolvedValue({ data: { CREATE_ORDER_MUTATION: { id: 'xyz789' } } }); + const createOrderSpy = jest.fn().mockResolvedValue({ data: { createOrder: { id: 'xyz789' } } }); const wrapper = mount( <MockedProvider mocks={mocks}> @@ -66,9 +63,7 @@ describe('<TakeMyMoney />', () => { wrapper.update(); NProgress.start = jest.fn(); - const createOrderSpy = jest - .fn() - .mockResolvedValue({ data: { CREATE_ORDER_MUTATION: { id: 'xyz789' } } }); + 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'); @@ -87,9 +82,7 @@ describe('<TakeMyMoney />', () => { // Spy on Router Push Router.router.push = jest.fn(); - const createOrderSpy = jest - .fn() - .mockResolvedValue({ data: { CREATE_ORDER_MUTATION: { id: 'xyz789' } } }); + const createOrderSpy = jest.fn().mockResolvedValue({ data: { createOrder: { id: 'xyz789' } } }); const component = wrapper.find('TakeMyMoney'); component.instance().onToken({ id: 'abc123' }, createOrderSpy); diff --git a/frontend/__tests__/__snapshots__/Signup.test.js.snap b/frontend/__tests__/__snapshots__/Signup.test.js.snap index 536c1d8..b3c057e 100644 --- a/frontend/__tests__/__snapshots__/Signup.test.js.snap +++ b/frontend/__tests__/__snapshots__/Signup.test.js.snap @@ -3,6 +3,7 @@ exports[`<Signup/> renders and matches snapshot 1`] = ` <form className="sc-bdVaJa LHejR" + method="post" onSubmit={[Function]} > <fieldset @@ -24,7 +25,7 @@ exports[`<Signup/> renders and matches snapshot 1`] = ` onChange={[Function]} placeholder="email" type="text" - value="wesbos@gmail.com" + value="" /> </label> <label @@ -36,7 +37,7 @@ exports[`<Signup/> renders and matches snapshot 1`] = ` onChange={[Function]} placeholder="name" type="text" - value="Wes Bos" + value="" /> </label> <label @@ -50,7 +51,7 @@ exports[`<Signup/> renders and matches snapshot 1`] = ` onChange={[Function]} placeholder="password" type="password" - value="wes" + value="" /> </label> <button diff --git a/frontend/__tests__/__snapshots__/SingleItem.test.js.snap b/frontend/__tests__/__snapshots__/SingleItem.test.js.snap index 0969d73..28e9174 100644 --- a/frontend/__tests__/__snapshots__/SingleItem.test.js.snap +++ b/frontend/__tests__/__snapshots__/SingleItem.test.js.snap @@ -12,84 +12,21 @@ exports[`<SingleItem/> Errors with a not found Item 1`] = ` `; exports[`<SingleItem/> Renders with Proper Data 1`] = ` -Array [ - <styled.div - data-test="SingleItem" - > - <div - className="sc-bwzfXH dFvSZo" - data-test="SingleItem" - > - <img - alt="dogs are best" - src="dog.jpg" - /> - <div - className="details" - > - <h2> - Viewing - dogs are best - </h2> - <p> - dogs - </p> - <Link - href={ - Object { - "pathname": "/update", - "query": Object { - "id": "123", - }, - } - } - > - <a - href="/update?id=123" - onClick={[Function]} - > - Edit ✏️ - </a> - </Link> - </div> - </div> - </styled.div>, - <div - className="sc-bwzfXH dFvSZo" - data-test="SingleItem" - > - <img - alt="dogs are best" - src="dog.jpg" - /> - <div - className="details" - > - <h2> - Viewing - dogs are best - </h2> - <p> - dogs - </p> - <Link - href={ - Object { - "pathname": "/update", - "query": Object { - "id": "123", - }, - } - } - > - <a - href="/update?id=123" - onClick={[Function]} - > - Edit ✏️ - </a> - </Link> - </div> - </div>, -] +<h2> + Viewing + dogs are best +</h2> +`; + +exports[`<SingleItem/> Renders with Proper Data 2`] = ` +<img + alt="dogs are best" + src="dog.jpg" +/> +`; + +exports[`<SingleItem/> Renders with Proper Data 3`] = ` +<p> + dogs +</p> `; |
