From ad3671675719eb11a81245bffbe0fb18880b479b Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Tue, 8 May 2018 13:00:51 -0400 Subject: omg --- frontend/__tests__/Cart.test.js | 25 +++-- frontend/__tests__/CreateItem.test.js | 2 +- frontend/__tests__/Nav.test.js | 14 +-- frontend/__tests__/Order.test.js | 2 +- frontend/__tests__/Pagination.test.js | 114 +++++++++++++-------- frontend/__tests__/ResetRequest.test.js | 1 + frontend/__tests__/Signup.test.js | 2 +- frontend/__tests__/SingleItem.test.js | 1 - frontend/__tests__/__snapshots__/Cart.test.js.snap | 9 +- .../__snapshots__/Pagination.test.js.snap | 21 ++-- .../__snapshots__/ResetRequest.test.js.snap | 26 ----- frontend/components/Cart.js | 7 +- frontend/components/CreateItem.js | 4 +- frontend/components/Pagination.js | 8 +- frontend/components/ResetRequest.js | 2 - frontend/queries/queries.js | 4 +- 16 files changed, 127 insertions(+), 115 deletions(-) diff --git a/frontend/__tests__/Cart.test.js b/frontend/__tests__/Cart.test.js index a215869..f782708 100644 --- a/frontend/__tests__/Cart.test.js +++ b/frontend/__tests__/Cart.test.js @@ -5,8 +5,8 @@ import mountOptions from '../lib/testUtils'; import wait from 'waait'; import Cart from '../components/Cart'; import { MockedProvider } from 'react-apollo/test-utils'; -import { fakeCart, fakeUser } from '../lib/testUtils'; -import { CURRENT_USER_QUERY } from '../queries/queries'; +import { fakeCartItem, fakeUser } from '../lib/testUtils'; +import { CURRENT_USER_QUERY, LOCAL_STATE_QUERY } from '../queries/queries'; const mocks = [ { @@ -15,26 +15,31 @@ const mocks = [ data: { me: { ...fakeUser(), - cart: fakeCart(), + cart: [fakeCartItem()], }, }, }, }, + { + request: { query: LOCAL_STATE_QUERY }, + result: { + data: { + cartOpen: true, + }, + }, + }, ]; describe('', () => { - // TODO fix this one - expect('wes').toBe('fixed'); it('renders', async () => { const wrapper = mount( ); - console.log(wrapper.debug()); - // await wait(); - // wrapper.update(); - // expect(toJSON(wrapper.find('header'))).toMatchSnapshot(); - // expect(wrapper.find('CartItem')).toHaveLength(2); + await wait(); + wrapper.update(); + expect(toJSON(wrapper.find('header'))).toMatchSnapshot(); + expect(wrapper.find('CartItem')).toHaveLength(1); }); }); diff --git a/frontend/__tests__/CreateItem.test.js b/frontend/__tests__/CreateItem.test.js index 035f172..37e5121 100644 --- a/frontend/__tests__/CreateItem.test.js +++ b/frontend/__tests__/CreateItem.test.js @@ -126,7 +126,7 @@ describe('', () => { // it submits and matches the mocks wrapper.find('form').simulate('submit'); // it routes to the item page - await wait(); + await wait(50); expect(Router.router.push).toHaveBeenCalled(); expect(Router.router.push).toHaveBeenCalledWith({ pathname: '/item', query: { id: '123' } }); }); diff --git a/frontend/__tests__/Nav.test.js b/frontend/__tests__/Nav.test.js index 65f5eac..ab8a139 100644 --- a/frontend/__tests__/Nav.test.js +++ b/frontend/__tests__/Nav.test.js @@ -1,20 +1,16 @@ import React from 'react'; -import { shallow, mount } from 'enzyme'; +import { mount } from 'enzyme'; import toJSON from 'enzyme-to-json'; +import wait from 'waait'; +import Router from 'next/router'; import Nav from '../components/Nav'; import { MockedProvider } from 'react-apollo/test-utils'; -import { fakeUser, fakeOrder } from './testUtils'; +import { fakeUser } from '../lib/testUtils'; import { CURRENT_USER_QUERY } from '../queries/queries'; -import wait from 'waait'; -// Mock the router -import Router from 'next/router'; +// Mock the router Router.router = { push() {} }; -const currentUserLoggedOut = { - refetch() {}, -}; - const loggedOutMocks = [ { request: { query: CURRENT_USER_QUERY }, diff --git a/frontend/__tests__/Order.test.js b/frontend/__tests__/Order.test.js index 14522f4..c74e384 100644 --- a/frontend/__tests__/Order.test.js +++ b/frontend/__tests__/Order.test.js @@ -34,7 +34,7 @@ describe('', () => { ); - await wait(10); + await wait(50); wrapper.update(); const order = wrapper.find('div[data-test="order"]'); expect(toJSON(order)).toMatchSnapshot(); diff --git a/frontend/__tests__/Pagination.test.js b/frontend/__tests__/Pagination.test.js index 4aa590e..6be60c1 100644 --- a/frontend/__tests__/Pagination.test.js +++ b/frontend/__tests__/Pagination.test.js @@ -3,61 +3,95 @@ import { shallow, mount } from 'enzyme'; import toJSON from 'enzyme-to-json'; import Pagination 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'; -const data = { - itemsConnection: { aggregate: { count: 18 } }, - items: [fakeItem()], -}; +import Router from 'next/router'; -describe('', () => { - fit('displays loading message', () => { - const mocks = [ - { - request: { query: ALL_ITEMS_QUERY, variables: { skip: 0 } }, - delay: 50, - result: { data }, +Router.router = { push() {} }; + +function makeMocksFor(length) { + return [ + { + request: { query: ALL_ITEMS_QUERY, variables: { skip: 0, first: 4 } }, + result: { + data: { + itemsConnection: { + // TODO what are these typenames ???? + __typename: 'aggregate', + aggregate: { + count: length, + __typename: 'count', + }, + }, + // items: [fakeItem()], + items: Array.from({ length }, (_, i) => fakeItem({ id: `item${i}` })), + }, }, - ]; + }, + ]; +} +describe('', () => { + it('displays loading message', async () => { const wrapper = mount( - + ); - console.log(wrapper.debug()); - // expect(toJSON(wrapper)).toMatchSnapshot(); + await wait(); + wrapper.update(); + expect(toJSON(wrapper.find('div[data-test="pagination"]'))).toMatchSnapshot(); }); - it('renders pagination for 18 items', () => { - const wrapper = shallow(); - expect(toJSON(wrapper)).toMatchSnapshot(); - expect(wrapper.find('.totalPages').text()).toEqual('2'); + it('renders pagination for 18 items', async () => { + const wrapper = mount( + + + + ); + await wait(); + wrapper.update(); + expect(wrapper.find('.totalPages').text()).toEqual('5'); }); - it('renders pagination for 28 items', () => { - const fakeQuery2 = { - itemsConnection: { aggregate: { count: 28 } }, - }; - const wrapper = shallow(); - expect(wrapper.find('.totalPages').text()).toEqual('4'); + it('disables prev button on first page', async () => { + const wrapper = mount( + + + + ); + await wait(); + wrapper.update(); + // first page + expect(wrapper.find('a.prev').prop('aria-disabled')).toEqual(true); + expect(wrapper.find('a.next').prop('aria-disabled')).toEqual(false); }); - it('disables and enables next/prev buttons', () => { - const fakeQuery3 = { - itemsConnection: { aggregate: { count: 100 } }, - }; - const wrapper = shallow(); - - expect(wrapper.find('a.prev').props()['aria-disabled']).toEqual(true); - expect(wrapper.find('a.next').props()['aria-disabled']).toEqual(false); - wrapper.setProps({ page: 2 }); - expect(wrapper.find('a.prev').props()['aria-disabled']).toEqual(false); - expect(wrapper.find('a.next').props()['aria-disabled']).toEqual(true); - // when in the middle, both should work - wrapper.setProps({ itemsQuery: fakeQuery3, page: 3 }); - expect(wrapper.find('a.prev').props()['aria-disabled']).toEqual(false); - expect(wrapper.find('a.next').props()['aria-disabled']).toEqual(false); + it('disables next button on last page', async () => { + const wrapper = mount( + + + + ); + await wait(); + wrapper.update(); + // first page + expect(wrapper.find('a.prev').prop('aria-disabled')).toEqual(false); + expect(wrapper.find('a.next').prop('aria-disabled')).toEqual(true); + }); + + it('enables all buttons on a middle page', async () => { + const wrapper = mount( + + + + ); + await wait(); + wrapper.update(); + // first page + expect(wrapper.find('a.prev').prop('aria-disabled')).toEqual(false); + expect(wrapper.find('a.next').prop('aria-disabled')).toEqual(false); }); }); diff --git a/frontend/__tests__/ResetRequest.test.js b/frontend/__tests__/ResetRequest.test.js index c7d8012..4f21911 100644 --- a/frontend/__tests__/ResetRequest.test.js +++ b/frontend/__tests__/ResetRequest.test.js @@ -81,6 +81,7 @@ describe('', () => { wrapper.find('form').simulate('submit'); await wait(); } catch (e) { + console.log('CAUGHT'); console.log(e); } // expect(async () => { diff --git a/frontend/__tests__/Signup.test.js b/frontend/__tests__/Signup.test.js index b6994a6..8f475f7 100644 --- a/frontend/__tests__/Signup.test.js +++ b/frontend/__tests__/Signup.test.js @@ -87,7 +87,7 @@ describe('', () => { wrapper.update(); wrapper.find('form').simulate('submit'); - await wait(); + await wait(5); expect(localStorage.getItem('token')).toBe('tok123'); }); }); diff --git a/frontend/__tests__/SingleItem.test.js b/frontend/__tests__/SingleItem.test.js index 3494f44..f362e58 100644 --- a/frontend/__tests__/SingleItem.test.js +++ b/frontend/__tests__/SingleItem.test.js @@ -59,7 +59,6 @@ describe('', () => { wrapper.update(); const Item = wrapper.find('[data-test="graphql-error"]'); - console.log(Item.debug()); expect(toJSON(Item)).toMatchSnapshot(); }); }); diff --git a/frontend/__tests__/__snapshots__/Cart.test.js.snap b/frontend/__tests__/__snapshots__/Cart.test.js.snap index 426bef2..28011dc 100644 --- a/frontend/__tests__/__snapshots__/Cart.test.js.snap +++ b/frontend/__tests__/__snapshots__/Cart.test.js.snap @@ -7,7 +7,7 @@ exports[` renders 1`] = ` title="close" > -

- - - -`; diff --git a/frontend/components/Cart.js b/frontend/components/Cart.js index 26f1015..8d57c33 100644 --- a/frontend/components/Cart.js +++ b/frontend/components/Cart.js @@ -6,6 +6,7 @@ import formatMoney from '../lib/formatMoney'; import CartItem from './CartItem'; import { CURRENT_USER_QUERY, LOCAL_STATE_QUERY, TOGGLE_CART_MUTATION } from '../queries/queries'; import calcTotalPrice from '../lib/calcTotalPrice'; +import Error from './ErrorMessage'; const CartStyles = styled.div` padding: 20px; @@ -78,9 +79,11 @@ const Cart = props => ( {toggle => ( {({ data }) => ( - + {({ data: { me }, error, loading }) => { - if (loading || error || !me) return null; + if (loading) return

Loading...

; + if (error) return ; + if (!me) return

Please Sign In!

; return (
diff --git a/frontend/components/CreateItem.js b/frontend/components/CreateItem.js index 3dd929f..2aabb5b 100644 --- a/frontend/components/CreateItem.js +++ b/frontend/components/CreateItem.js @@ -48,8 +48,8 @@ class CreateItem extends Component { {(createItem, { loading, error }) => (
( {({ data, loading, error }) => { - console.log(error); - if (loading) return null; + if (loading || error) return null; const { aggregate } = data.itemsConnection; const { page } = props; const pages = Math.ceil(aggregate.count / perPage); + // TODO prefetch this return ( - + ( {aggregate.count} Items Total

{ e.preventDefault(); const res = await resetMutation(); - console.log('HEYY'); - console.log(res); }} data-test="ResetRequest" > diff --git a/frontend/queries/queries.js b/frontend/queries/queries.js index cbfa065..4fff3ae 100644 --- a/frontend/queries/queries.js +++ b/frontend/queries/queries.js @@ -87,12 +87,12 @@ export const ALL_ITEMS_QUERY = gql` # Import the Fragment ${itemDetails} query AllItemsQuery($skip: Int = 0, $first: Int = ${perPage}) { - itemsConnection(orderBy: createdAt_DESC, first: $first, skip: $skip) @connection(key: "itemsConnection") { + itemsConnection(orderBy: createdAt_DESC, first: $first, skip: $skip) { aggregate { count } } - items(orderBy: createdAt_DESC, first: $first, skip: $skip) @connection(key: "items") { + items(orderBy: createdAt_DESC, first: $first, skip: $skip) { ...itemDetails } } -- cgit v1.3