From 50c68a28bf877ec24bfa5c18bdb63b30477c407e Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Fri, 20 Apr 2018 15:41:42 -0400 Subject: Single Item Test --- frontend/README.md | 2 - frontend/__tests__/EditUser.test.js | 7 +-- frontend/__tests__/SingleItem.test.js | 54 ++++++++++++++++++++-- .../__snapshots__/SingleItem.test.js.snap | 44 +++++++++++------- frontend/__tests__/mockMang.js | 13 +++++- frontend/components/ErrorMessage.js | 4 +- frontend/components/SingleItem.js | 10 ++-- frontend/queries/queries.js | 8 +++- 8 files changed, 107 insertions(+), 35 deletions(-) diff --git a/frontend/README.md b/frontend/README.md index 0791dfe..6c2bd84 100644 --- a/frontend/README.md +++ b/frontend/README.md @@ -32,8 +32,6 @@ Yeti Keep your brie and bevies chilly. Heavy-duty insulation ensures cold temperatures persist. A self-stopping hinge and Yeti-tough details are durable. Non-slip rubber feet keep your drinks and snacks orderly through whitewater or rough approaches to the picnic site. - - Test Order: FormatMoney diff --git a/frontend/__tests__/EditUser.test.js b/frontend/__tests__/EditUser.test.js index f4aabfc..c68267f 100644 --- a/frontend/__tests__/EditUser.test.js +++ b/frontend/__tests__/EditUser.test.js @@ -9,7 +9,7 @@ const currentUser = { me: { name: 'Wes Bos', }, - refetch() { }, + refetch() {}, }; describe('', () => { @@ -43,17 +43,18 @@ describe('', () => { 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() { } }); + wrapper.find('form').simulate('submit', { preventDefault() {} }); expect(mutation.client.mutate).toHaveBeenCalledWithVariables({ name: 'Scott' }); }); - it.only('refetches the current user after an update', async () => { + it('refetches the current user after an update', async () => { const { wrapper } = mountWithApollo(); await wait(); 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(); }); diff --git a/frontend/__tests__/SingleItem.test.js b/frontend/__tests__/SingleItem.test.js index ade9727..8625e80 100644 --- a/frontend/__tests__/SingleItem.test.js +++ b/frontend/__tests__/SingleItem.test.js @@ -3,19 +3,63 @@ import { mount } from 'enzyme'; import wait from 'waait'; import toJSON from 'enzyme-to-json'; import SingleItem from '../components/SingleItem'; -import mountOptions from './mockMang'; +import { MockedProvider } from 'react-apollo/test-utils'; +import { SINGLE_ITEM_QUERY } from '../queries/queries'; +import { fakeItem } from './mockMang'; + +const data = { + items: [fakeItem()], +}; describe('', () => { it('Renders with Proper Data', async () => { - const wrapper = mount(, mountOptions); - await wait(); - wrapper.update(); + const mocks = [ + { + request: { query: SINGLE_ITEM_QUERY, variables: { id: '123' } }, + delay: 50, + result: { data }, + }, + ]; + const wrapper = mount( + + + + ); + // Check for loading state + expect(wrapper.text()).toContain('Loading...'); + // wait for response and refresh + await wait(55); + wrapper.update(); + // Grab the peice we wnat const Item = wrapper.find('[data-test="SingleItem"]'); + // snapshot it! expect(toJSON(Item)).toMatchSnapshot(); }); it('Errors with a not found Item', async () => { - expect('wes').toBe('able to replicate an error'); + const mocks = [ + { + request: { query: SINGLE_ITEM_QUERY, variables: { id: '123' } }, + delay: 50, + // we can return data and an error + result: { data, errors: [{ message: 'Item not found!' }] }, + // or just an error! + // error: new Error('offline!'), + }, + ]; + const wrapper = mount( + + + + ); + + // wait for response + await wait(55); + wrapper.update(); + + const Item = wrapper.find('[data-test="graphql-error"]'); + console.log(Item.debug()); + expect(toJSON(Item)).toMatchSnapshot(); }); }); diff --git a/frontend/__tests__/__snapshots__/SingleItem.test.js.snap b/frontend/__tests__/__snapshots__/SingleItem.test.js.snap index 09eb52b..4d75565 100644 --- a/frontend/__tests__/__snapshots__/SingleItem.test.js.snap +++ b/frontend/__tests__/__snapshots__/SingleItem.test.js.snap @@ -1,5 +1,19 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP +exports[` Errors with a not found Item 1`] = ` +

+ + Shoot! + + Item not found! + +

+`; + exports[` Renders with Proper Data 1`] = ` Array [ - Facilis corporis

Viewing - Facilis corporis + dogs are best

- Quidem praesentium magnam. Error molestiae laborum est possimus assumenda aut enim iure. Ut explicabo iure vitae occaecati officia iure nisi. + dogs

Edit ✏️ @@ -48,33 +61,32 @@ Array [ className="sc-bwzfXH dFvSZo" data-test="SingleItem" > - Facilis corporis

Viewing - Facilis corporis + dogs are best

- Quidem praesentium magnam. Error molestiae laborum est possimus assumenda aut enim iure. Ut explicabo iure vitae occaecati officia iure nisi. + dogs

Edit ✏️ diff --git a/frontend/__tests__/mockMang.js b/frontend/__tests__/mockMang.js index 15fc42c..375973c 100644 --- a/frontend/__tests__/mockMang.js +++ b/frontend/__tests__/mockMang.js @@ -37,6 +37,17 @@ const mocks = { }), }; +const fakeItem = () => ({ + __typename: 'Item', + id: '123', + price: 5000, + user: null, + image: 'dog-small.jpg', + title: 'dogs are best', + description: 'dogs', + largeImage: 'dog.jpg', +}); + const resolvers = { // Query: { // cartOpen: () => true, @@ -70,4 +81,4 @@ const mountWithApollo = Component => { export default mountOptions; -export { mocked, mountWithApollo }; +export { mocked, mountWithApollo, fakeItem }; diff --git a/frontend/components/ErrorMessage.js b/frontend/components/ErrorMessage.js index c73a2b7..5da8d2a 100644 --- a/frontend/components/ErrorMessage.js +++ b/frontend/components/ErrorMessage.js @@ -23,7 +23,7 @@ const DisplayError = ({ error, refetch }) => { if (error.networkError && error.networkError.result && error.networkError.result.errors.length) { return error.networkError.result.errors.map((error, i) => ( -

+

Shoot! {error.message.replace('GraphQL error: ', '')}

@@ -32,7 +32,7 @@ const DisplayError = ({ error, refetch }) => { } return ( -

+

Shoot! {error.message.replace('GraphQL error: ', '')} diff --git a/frontend/components/SingleItem.js b/frontend/components/SingleItem.js index a7f9d27..4550b84 100644 --- a/frontend/components/SingleItem.js +++ b/frontend/components/SingleItem.js @@ -1,9 +1,9 @@ import { Query } from 'react-apollo'; import PropTypes from 'prop-types'; import { SINGLE_ITEM_QUERY } from '../queries/queries'; -import Dump from './Dump'; import styled from 'styled-components'; import Link from 'next/link'; +import Dump from './Dump'; import Error from './ErrorMessage'; const SingleItemStyles = styled.div` @@ -22,19 +22,19 @@ const SingleItemStyles = styled.div` const SingleItem = props => ( - {({ data: { items }, loading, error }) => { + {({ data, loading, error }) => { if (loading) return

Loading...

; - const [item] = items; + if (error) return ; + const [item] = data.items; return ( - {item.title}

Viewing {item.title}

{item.description}

diff --git a/frontend/queries/queries.js b/frontend/queries/queries.js index 22f77fb..b6d8207 100644 --- a/frontend/queries/queries.js +++ b/frontend/queries/queries.js @@ -106,7 +106,13 @@ export const SINGLE_ITEM_QUERY = gql` email name } - ...itemDetails + # TODO Swap with fragment once apollo is fixed + id + title + price + description + image + largeImage } } `; -- cgit v1.3