diff options
Diffstat (limited to 'finished-application/frontend/__tests__')
34 files changed, 470 insertions, 824 deletions
diff --git a/finished-application/frontend/__tests__/AddToCart.test.js b/finished-application/frontend/__tests__/AddToCart.test.js index fe15f3f..cfc2e3e 100644 --- a/finished-application/frontend/__tests__/AddToCart.test.js +++ b/finished-application/frontend/__tests__/AddToCart.test.js @@ -1,12 +1,11 @@ -import React from 'react'; import { mount } from 'enzyme'; +import wait from 'waait'; import toJSON from 'enzyme-to-json'; -import { ApolloConsumer } from 'react-apollo'; import { MockedProvider } from 'react-apollo/test-utils'; -import wait from 'waait'; +import { ApolloConsumer } from 'react-apollo'; import AddToCart, { ADD_TO_CART_MUTATION } from '../components/AddToCart'; -import { fakeCartItem, fakeUser } from '../lib/testUtils'; import { CURRENT_USER_QUERY } from '../components/User'; +import { fakeUser, fakeCartItem } from '../lib/testUtils'; const mocks = [ { @@ -21,6 +20,17 @@ const mocks = [ }, }, { + request: { query: CURRENT_USER_QUERY }, + result: { + data: { + me: { + ...fakeUser(), + cart: [fakeCartItem()], + }, + }, + }, + }, + { request: { query: ADD_TO_CART_MUTATION, variables: { id: 'abc123' } }, result: { data: { @@ -33,8 +43,8 @@ const mocks = [ }, ]; -describe('<AddtoCart/>', () => { - it('renders and matches snapshot', async () => { +describe('<AddToCart/>', () => { + it('renders and matches the snap shot', async () => { const wrapper = mount( <MockedProvider mocks={mocks}> <AddToCart id="abc123" /> @@ -42,14 +52,11 @@ describe('<AddtoCart/>', () => { ); await wait(); wrapper.update(); - expect(toJSON(wrapper.find('button'))).toMatchSnapshot(); }); - it('adds an item to the cart when clicked', async () => { - // 1. Grab a copy of the current client + it('adds an item to cart when clicked', async () => { let apolloClient; - // const wrapper = mountWithApollo(<RemoveFromCart id="abc123" />); const wrapper = mount( <MockedProvider mocks={mocks}> <ApolloConsumer> @@ -62,22 +69,20 @@ describe('<AddtoCart/>', () => { ); await wait(); wrapper.update(); - - const { me } = apolloClient.readQuery({ query: CURRENT_USER_QUERY }); + const { data: { me } } = await apolloClient.query({ query: CURRENT_USER_QUERY }); + // console.log(me); expect(me.cart).toHaveLength(0); - - // add to cart + // add an item to the cart wrapper.find('button').simulate('click'); await wait(); // check if the item is in the cart - const { me: me2 } = apolloClient.readQuery({ query: CURRENT_USER_QUERY }); - + const { data: { me: me2 } } = await apolloClient.query({ query: CURRENT_USER_QUERY }); expect(me2.cart).toHaveLength(1); expect(me2.cart[0].id).toBe('omg123'); - expect(me2.cart[0].quantity).toBe(1); + expect(me2.cart[0].quantity).toBe(3); }); - it('changes to adding when clicked', async () => { + it('changes from add to adding when clicked', async () => { const wrapper = mount( <MockedProvider mocks={mocks}> <AddToCart id="abc123" /> @@ -85,8 +90,8 @@ describe('<AddtoCart/>', () => { ); await wait(); wrapper.update(); - expect(wrapper.text()).toContain('π Add To Cart'); + expect(wrapper.text()).toContain('Add To Cart'); wrapper.find('button').simulate('click'); - expect(wrapper.text()).toContain('π Adding To Cart'); + expect(wrapper.text()).toContain('Adding To Cart'); }); }); diff --git a/finished-application/frontend/__tests__/Cart.test.js b/finished-application/frontend/__tests__/Cart.test.js index 255183e..b8afc88 100644 --- a/finished-application/frontend/__tests__/Cart.test.js +++ b/finished-application/frontend/__tests__/Cart.test.js @@ -1,13 +1,10 @@ -import React from 'react'; -import { shallow, mount } from 'enzyme'; -import toJSON from 'enzyme-to-json'; -import mountOptions from '../lib/testUtils'; +import { mount } from 'enzyme'; import wait from 'waait'; -import Cart from '../components/Cart'; +import toJSON from 'enzyme-to-json'; import { MockedProvider } from 'react-apollo/test-utils'; -import { fakeCartItem, fakeUser } from '../lib/testUtils'; +import Cart, { LOCAL_STATE_QUERY } from '../components/Cart'; import { CURRENT_USER_QUERY } from '../components/User'; -import { LOCAL_STATE_QUERY } from '../components/Cart'; +import { fakeUser, fakeCartItem } from '../lib/testUtils'; const mocks = [ { @@ -23,16 +20,12 @@ const mocks = [ }, { request: { query: LOCAL_STATE_QUERY }, - result: { - data: { - cartOpen: true, - }, - }, + result: { data: { cartOpen: true } }, }, ]; describe('<Cart/>', () => { - it('renders', async () => { + it('renders and matches snappy', async () => { const wrapper = mount( <MockedProvider mocks={mocks}> <Cart /> diff --git a/finished-application/frontend/__tests__/CartCount.test.js b/finished-application/frontend/__tests__/CartCount.test.js index dcb9ca8..8ace3da 100644 --- a/finished-application/frontend/__tests__/CartCount.test.js +++ b/finished-application/frontend/__tests__/CartCount.test.js @@ -1,19 +1,19 @@ -import React from 'react'; import { shallow, mount } from 'enzyme'; import toJSON from 'enzyme-to-json'; import CartCount from '../components/CartCount'; -describe('<CartCount></CartCount>', () => { - it('renders okay', () => { +describe('<CartCount/>', () => { + it('renders', () => { shallow(<CartCount count={10} />); }); - it('matches snapshot', () => { - const wrapper = shallow(<CartCount count={10} />); + it('matches the snapshot', () => { + const wrapper = shallow(<CartCount count={11} />); expect(toJSON(wrapper)).toMatchSnapshot(); }); + it('updates via props', () => { - const wrapper = mount(<CartCount count={50} />); + const wrapper = shallow(<CartCount count={50} />); expect(toJSON(wrapper)).toMatchSnapshot(); wrapper.setProps({ count: 10 }); expect(toJSON(wrapper)).toMatchSnapshot(); diff --git a/finished-application/frontend/__tests__/CartItem.test.js b/finished-application/frontend/__tests__/CartItem.test.js deleted file mode 100644 index 42dd39b..0000000 --- a/finished-application/frontend/__tests__/CartItem.test.js +++ /dev/null @@ -1,33 +0,0 @@ -import React from 'react'; -import { shallow, mount } from 'enzyme'; -import toJSON from 'enzyme-to-json'; -import CartItem from '../components/CartItem'; - -const cartItem = { - item: { - price: 5000, - image: 'dog.jpg', - title: 'Fake Item', - }, - id: 'abc123', - quantity: 20, -}; - -describe('<CartItem>', () => { - it('renders and matches snapshot', () => { - const wrapper = shallow(<CartItem cartItem={cartItem} />); - expect(toJSON(wrapper)).toMatchSnapshot(); - }); - - it('renders a single quantity', () => { - const wrapper = shallow(<CartItem cartItem={{ ...cartItem, quantity: 1 }} />); - const p = wrapper.find('p'); - expect(p.text()).toBe('$50 β 1 Γ $50 each'); - }); - - it('renders multiples', () => { - const wrapper = shallow(<CartItem cartItem={{ ...cartItem, quantity: 23423 }} />); - const p = wrapper.find('p'); - expect(p.text()).toBe('$1,171,150 β 23423 Γ $50 each'); - }); -}); diff --git a/finished-application/frontend/__tests__/CreateItem.test.js b/finished-application/frontend/__tests__/CreateItem.test.js index 56c3f10..6e88d94 100644 --- a/finished-application/frontend/__tests__/CreateItem.test.js +++ b/finished-application/frontend/__tests__/CreateItem.test.js @@ -1,15 +1,14 @@ -import React from 'react'; import { mount } from 'enzyme'; +import wait from 'waait'; import toJSON from 'enzyme-to-json'; import Router from 'next/router'; import { MockedProvider } from 'react-apollo/test-utils'; import CreateItem, { CREATE_ITEM_MUTATION } from '../components/CreateItem'; -import wait from 'waait'; import { fakeItem } from '../lib/testUtils'; const dogImage = 'https://dog.com/dog.jpg'; -// Mock fetch to resolve data +// mock the global fetch API global.fetch = jest.fn().mockResolvedValue({ json: () => ({ secure_url: dogImage, @@ -17,14 +16,14 @@ global.fetch = jest.fn().mockResolvedValue({ }), }); -describe('<Createitem/>', () => { - it('renders and matches snapshot', () => { +describe('<CreateItem/>', () => { + it('renders and matches snapshot', async () => { const wrapper = mount( <MockedProvider> <CreateItem /> </MockedProvider> ); - const form = wrapper.find('form[data-test]'); + const form = wrapper.find('form[data-test="form"]'); expect(toJSON(form)).toMatchSnapshot(); }); @@ -34,14 +33,14 @@ describe('<Createitem/>', () => { <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); + input.simulate('change', { target: { files: ['fakedog.jpg'] } }); + await wait(); + const component = wrapper.find('CreateItem').instance(); expect(component.state.image).toEqual(dogImage); expect(component.state.largeImage).toEqual(dogImage); + expect(global.fetch).toHaveBeenCalled(); + global.fetch.mockReset(); }); it('handles state updating', async () => { @@ -50,32 +49,21 @@ describe('<Createitem/>', () => { <CreateItem /> </MockedProvider> ); - wrapper.find('#title').simulate('change', { target: { value: 'Testing', name: 'title' } }); - wrapper.find('#price').simulate('change', { - target: { - value: 50000, - name: 'price', - type: 'number', - }, - }); - wrapper.find('#description').simulate('change', { - target: { - value: 'This is a really nice item', - name: 'description', - }, - }); - const component = wrapper.find('CreateItem').instance(); - expect(component.state).toMatchObject({ + wrapper + .find('#price') + .simulate('change', { target: { value: 50000, name: 'price', type: 'number' } }); + wrapper + .find('#description') + .simulate('change', { target: { value: 'This is a really nice item', name: 'description' } }); + + expect(wrapper.find('CreateItem').instance().state).toMatchObject({ title: 'Testing', - description: 'This is a really nice item', - image: '', - largeImage: '', price: 50000, + description: 'This is a really nice item', }); }); - - it('creates an item when form is submitted', async () => { + it('creates an item when the form is submitted', async () => { const item = fakeItem(); const mocks = [ { @@ -92,8 +80,9 @@ describe('<Createitem/>', () => { result: { data: { createItem: { - ...fakeItem(), - __typeName: 'Item', + ...fakeItem, + id: 'abc123', + __typename: 'Item', }, }, }, @@ -105,28 +94,19 @@ describe('<Createitem/>', () => { <CreateItem /> </MockedProvider> ); - + // simulate someone filling out the form 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', - }, - }); - + wrapper + .find('#price') + .simulate('change', { target: { value: item.price, name: 'price', type: 'number' } }); + wrapper + .find('#description') + .simulate('change', { target: { value: item.description, name: 'description' } }); + // mock the router Router.router = { push: jest.fn() }; - // it submits and matches the mocks wrapper.find('form').simulate('submit'); - // it routes to the item page await wait(50); expect(Router.router.push).toHaveBeenCalled(); - expect(Router.router.push).toHaveBeenCalledWith({ pathname: '/item', query: { id: '123' } }); + expect(Router.router.push).toHaveBeenCalledWith({ pathname: '/item', query: { id: 'abc123' } }); }); }); diff --git a/finished-application/frontend/__tests__/EditUser.test.js b/finished-application/frontend/__tests__/EditUser.test.js deleted file mode 100644 index a98cbb5..0000000 --- a/finished-application/frontend/__tests__/EditUser.test.js +++ /dev/null @@ -1,75 +0,0 @@ -import React from 'react'; -import { mount } from 'enzyme'; -import toJSON from 'enzyme-to-json'; -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 } from '../components/User'; - -const mocks = [ - { - request: { query: CURRENT_USER_QUERY }, - result: { - data: { - me: fakeUser(), - }, - }, - }, - { - request: { - query: UPDATE_USER_MUTATION, - variables: { - name: 'Westopher', - }, - }, - result: { - updateUser: { - name: 'Westopher', - __typename: 'User', - }, - }, - }, -]; - -describe('<EditUser/>', () => { - it('renders', async () => { - const wrapper = mount( - <MockedProvider mocks={mocks}> - <EditUser /> - </MockedProvider> - ); - await wait(); - wrapper.update(); - expect(toJSON(wrapper.find('form'))).toMatchSnapshot(); - }); - - it('displays changes', async () => { - const wrapper = mount( - <MockedProvider mocks={mocks}> - <EditUser /> - </MockedProvider> - ); - await wait(); - wrapper.update(); - const nameInput = wrapper.find('[name="name"]'); - nameInput.simulate('change', { target: { name: 'name', value: 'Scott' } }); - const diff = wrapper.find('pre[data-test="change"]'); - expect(diff.text()).toBe('{"name":"Scott"}'); - }); - - it('calls update user when form is submitted', async () => { - const wrapper = mount( - <MockedProvider mocks={mocks}> - <EditUser /> - </MockedProvider> - ); - await wait(); - wrapper.update(); - const nameInput = wrapper.find('[name="name"]'); - nameInput.simulate('change', { target: { name: 'name', value: 'Westopher' } }); - wrapper.find('form').simulate('submit'); - wrapper.update(); - expect(wrapper.find('[data-test="updated"]').text()).toBe('Updated!'); - }); -}); diff --git a/finished-application/frontend/__tests__/Item.test.js b/finished-application/frontend/__tests__/Item.test.js index 129efa9..692b913 100644 --- a/finished-application/frontend/__tests__/Item.test.js +++ b/finished-application/frontend/__tests__/Item.test.js @@ -1,22 +1,39 @@ -/* eslint-env jest */ - -import React from 'react'; -import Enzyme, { shallow, mount } from 'enzyme'; -import toJSON from 'enzyme-to-json'; import ItemComponent from '../components/Item'; +import { shallow, mount } from 'enzyme'; +import toJSON from 'enzyme-to-json'; const fakeItem = { id: 'ABC123', title: 'A Cool Item', - price: 5000, + price: 4000, description: 'This item is really cool!', image: 'dog.jpg', largeImage: 'largedog.jpg', }; describe('<Item/>', () => { - it('Renders and matches snapshot', () => { + it('renders and matches the snapshot', () => { const wrapper = shallow(<ItemComponent item={fakeItem} />); expect(toJSON(wrapper)).toMatchSnapshot(); }); + // it('renders the image properly', () => { + // const wrapper = shallow(<ItemComponent item={fakeItem} />); + // const img = wrapper.find('img'); + // expect(img.props().src).toBe(fakeItem.image); + // expect(img.props().alt).toBe(fakeItem.title); + // }); + // it('renders the pricetag and title', () => { + // const wrapper = shallow(<ItemComponent item={fakeItem} />); + // const PriceTag = wrapper.find('PriceTag'); + // expect(PriceTag.children().text()).toBe('$50'); + // expect(wrapper.find('Title a').text()).toBe(fakeItem.title); + // }); + // it('renders out the buttons properly', () => { + // const wrapper = shallow(<ItemComponent item={fakeItem} />); + // const buttonList = wrapper.find('.buttonList'); + // expect(buttonList.children()).toHaveLength(3); + // expect(buttonList.find('Link')).toHaveLength(1); + // expect(buttonList.find('AddToCart').exists()).toBe(true); + // expect(buttonList.find('DeleteItem').exists()).toBe(true); + // }); }); diff --git a/finished-application/frontend/__tests__/Nav.test.js b/finished-application/frontend/__tests__/Nav.test.js index 5c61c56..d30cb39 100644 --- a/finished-application/frontend/__tests__/Nav.test.js +++ b/finished-application/frontend/__tests__/Nav.test.js @@ -1,66 +1,76 @@ -import React from 'react'; import { mount } from 'enzyme'; -import toJSON from 'enzyme-to-json'; import wait from 'waait'; -import Router from 'next/router'; +import toJSON from 'enzyme-to-json'; import Nav from '../components/Nav'; -import { MockedProvider } from 'react-apollo/test-utils'; -import { fakeUser } from '../lib/testUtils'; import { CURRENT_USER_QUERY } from '../components/User'; +import { MockedProvider } from 'react-apollo/test-utils'; +import { fakeUser, fakeCartItem } from '../lib/testUtils'; -// Mock the router -Router.router = { push() {} }; +const notSignedInMocks = [ + { + request: { query: CURRENT_USER_QUERY }, + result: { data: { me: null } }, + }, +]; -const loggedOutMocks = [ +const signedInMocks = [ { request: { query: CURRENT_USER_QUERY }, - delay: 0, - result: { - data: { - me: null, - }, - }, + result: { data: { me: fakeUser() } }, }, ]; -const loggedInMocks = [ +const signedInMocksWithCartItems = [ { request: { query: CURRENT_USER_QUERY }, result: { data: { - what: 'yah', me: { ...fakeUser(), - orders: [], - cart: [], + cart: [fakeCartItem(), fakeCartItem(), fakeCartItem()], }, }, }, }, ]; -describe('<Nav></Nav>', () => { - it('Renders minimal nav when logged out', () => { +describe('<Nav/>', () => { + it('renders a minimal nav when signed out', async () => { const wrapper = mount( - <MockedProvider mocks={loggedOutMocks}> + <MockedProvider mocks={notSignedInMocks}> <Nav /> </MockedProvider> ); + await wait(); + wrapper.update(); + // console.log(wrapper.debug()); const nav = wrapper.find('ul[data-test="nav"]'); expect(toJSON(nav)).toMatchSnapshot(); }); - it('renders full nav when logged in', async () => { + it('renders full nav when signed in', async () => { const wrapper = mount( - <MockedProvider mocks={loggedInMocks}> + <MockedProvider mocks={signedInMocks}> <Nav /> </MockedProvider> ); await wait(); wrapper.update(); const nav = wrapper.find('ul[data-test="nav"]'); - // account link - const accountLink = wrapper.find('a[href="/me"]'); - expect(accountLink.length).toBe(1); + expect(nav.children().length).toBe(6); + expect(nav.text()).toContain('Sign Out'); + }); + + it('renders the amount of items in the cart', async () => { + const wrapper = mount( + <MockedProvider mocks={signedInMocksWithCartItems}> + <Nav /> + </MockedProvider> + ); + await wait(); + wrapper.update(); + const nav = wrapper.find('[data-test="nav"]'); + const count = nav.find('div.count'); + expect(toJSON(count)).toMatchSnapshot(); }); }); diff --git a/finished-application/frontend/__tests__/Order.test.js b/finished-application/frontend/__tests__/Order.test.js index f3a4f06..71accfa 100644 --- a/finished-application/frontend/__tests__/Order.test.js +++ b/finished-application/frontend/__tests__/Order.test.js @@ -1,4 +1,3 @@ -import React from 'react'; import { mount } from 'enzyme'; import toJSON from 'enzyme-to-json'; import wait from 'waait'; @@ -8,32 +7,19 @@ import { fakeOrder } from '../lib/testUtils'; const mocks = [ { - request: { query: SINGLE_ORDER_QUERY, variables: { id: '123' } }, - result: { - data: { - order: fakeOrder(), - }, - }, + request: { query: SINGLE_ORDER_QUERY, variables: { id: 'ord123' } }, + result: { data: { order: fakeOrder() } }, }, ]; describe('<Order/>', () => { - it('Renders loading state', async () => { + it('renders the order', async () => { const wrapper = mount( <MockedProvider mocks={mocks}> - <Order id="123" /> + <Order id="ord123" /> </MockedProvider> ); - expect(wrapper.text()).toContain('Loading...'); - }); - - it('Renders the order', async () => { - const wrapper = mount( - <MockedProvider mocks={mocks}> - <Order id="123" /> - </MockedProvider> - ); - await wait(50); + await wait(); wrapper.update(); const order = wrapper.find('div[data-test="order"]'); expect(toJSON(order)).toMatchSnapshot(); diff --git a/finished-application/frontend/__tests__/Pagination.test.js b/finished-application/frontend/__tests__/Pagination.test.js index 29a57f9..7117db8 100644 --- a/finished-application/frontend/__tests__/Pagination.test.js +++ b/finished-application/frontend/__tests__/Pagination.test.js @@ -1,20 +1,19 @@ -import React from 'react'; -import { shallow, mount } from 'enzyme'; +import { mount } from 'enzyme'; +import wait from 'waait'; import toJSON from 'enzyme-to-json'; +import Router from 'next/router'; import Pagination, { PAGINATION_QUERY } from '../components/Pagination'; import { MockedProvider } from 'react-apollo/test-utils'; -import wait from 'waait'; -import { fakeItem } from '../lib/testUtils'; - -import Router from 'next/router'; -// mock the router because there isn't really a router instance -Router.router = { push() {}, prefetch() {} }; +Router.router = { + push() {}, + prefetch() {}, +}; function makeMocksFor(length) { return [ { - request: { query: PAGINATION_QUERY, variables: { skip: 0, first: 4 } }, + request: { query: PAGINATION_QUERY }, result: { data: { itemsConnection: { @@ -31,15 +30,14 @@ function makeMocksFor(length) { } describe('<Pagination/>', () => { - it('displays loading message', async () => { + it('displays a loading message', () => { const wrapper = mount( <MockedProvider mocks={makeMocksFor(1)}> <Pagination page={1} /> </MockedProvider> ); - await wait(); - wrapper.update(); - expect(toJSON(wrapper.find('div[data-test="pagination"]'))).toMatchSnapshot(); + const pagination = wrapper.find('[data-test="pagination"]'); + expect(wrapper.text()).toContain('Loading...'); }); it('renders pagination for 18 items', async () => { @@ -51,6 +49,8 @@ describe('<Pagination/>', () => { await wait(); wrapper.update(); expect(wrapper.find('.totalPages').text()).toEqual('5'); + const pagination = wrapper.find('div[data-test="pagination"]'); + expect(toJSON(pagination)).toMatchSnapshot(); }); it('disables prev button on first page', async () => { @@ -61,11 +61,9 @@ describe('<Pagination/>', () => { ); 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 next button on last page', async () => { const wrapper = mount( <MockedProvider mocks={makeMocksFor(18)}> @@ -74,20 +72,17 @@ describe('<Pagination/>', () => { ); 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( <MockedProvider mocks={makeMocksFor(18)}> - <Pagination page={2} /> + <Pagination page={3} /> </MockedProvider> ); 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/finished-application/frontend/__tests__/PleaseSignIn.test.js b/finished-application/frontend/__tests__/PleaseSignIn.test.js index f516ea3..7d476b4 100644 --- a/finished-application/frontend/__tests__/PleaseSignIn.test.js +++ b/finished-application/frontend/__tests__/PleaseSignIn.test.js @@ -1,80 +1,51 @@ -import React from 'react'; import { mount } from 'enzyme'; import wait from 'waait'; import PleaseSignIn from '../components/PleaseSignIn'; +import { CURRENT_USER_QUERY } from '../components/User'; import { MockedProvider } from 'react-apollo/test-utils'; import { fakeUser } from '../lib/testUtils'; -import { CURRENT_USER_QUERY } from '../components/User'; const notSignedInMocks = [ { request: { query: CURRENT_USER_QUERY }, - result: { - data: { - me: null, - }, - }, + result: { data: { me: null } }, }, ]; const signedInMocks = [ { request: { query: CURRENT_USER_QUERY }, - result: { - data: { - me: { - ...fakeUser(), - permissions: ['VIEW_HEY'], - }, - }, - }, + result: { data: { me: fakeUser() } }, }, ]; -// some dummy child component -const Hey = () => <p>Hey!</p>; -describe('<PleaseSignIn />', () => { - it('renders sign in dialog to logged out users', async () => { +describe('<PleaseSignIn/>', () => { + it('renders the sign in dialog to logged out users', async () => { const wrapper = mount( <MockedProvider mocks={notSignedInMocks}> - <PleaseSignIn allowedPermissions={[]}> - <Hey /> - </PleaseSignIn> + <PleaseSignIn /> </MockedProvider> ); await wait(); wrapper.update(); - // find the error message - expect(wrapper.text()).toContain('Please sign in before continuing!'); - // show the sign in dialog - expect(wrapper.find('Signin').exists()).toBeTruthy(); + expect(wrapper.text()).toContain('Please Sign In before Continuing'); + const SignIn = wrapper.find('Signin'); + expect(SignIn.exists()).toBe(true); }); - it('renders child for correct permissions', async () => { - const wrapper = mount( - <MockedProvider mocks={signedInMocks}> - <PleaseSignIn allowedPermissions={['ADMIN', 'VIEW_HEY']}> - <Hey /> - </PleaseSignIn> - </MockedProvider> - ); - await wait(); - wrapper.update(); - expect(wrapper.find('Hey').exists()).toBeTruthy(); - }); - it("renders error when permissions aren't met", async () => { + it('renders the child component when the user is signed in', async () => { + const Hey = () => <p>Hey!</p>; const wrapper = mount( <MockedProvider mocks={signedInMocks}> - <PleaseSignIn allowedPermissions={['ADMIN']}> + <PleaseSignIn> <Hey /> </PleaseSignIn> </MockedProvider> ); + await wait(); wrapper.update(); - // should tell you you can't access it - expect(wrapper.text()).toContain('Insufficient Permissions'); - // it should not render the child component - expect(wrapper.find('Hey').exists()).toBeFalsy(); + // expect(wrapper.find('Hey').exists()).toBe(true); + expect(wrapper.contains(<Hey />)).toBe(true); }); }); diff --git a/finished-application/frontend/__tests__/RemoveFromCart.test.js b/finished-application/frontend/__tests__/RemoveFromCart.test.js index 34229a5..faacc91 100644 --- a/finished-application/frontend/__tests__/RemoveFromCart.test.js +++ b/finished-application/frontend/__tests__/RemoveFromCart.test.js @@ -1,12 +1,13 @@ -import React from 'react'; import { mount } from 'enzyme'; +import wait from 'waait'; import toJSON from 'enzyme-to-json'; -import { ApolloConsumer } from 'react-apollo'; import { MockedProvider } from 'react-apollo/test-utils'; -import wait from 'waait'; +import { ApolloConsumer } from 'react-apollo'; import RemoveFromCart, { REMOVE_FROM_CART_MUTATION } from '../components/RemoveFromCart'; -import { fakeCartItem, fakeUser } from '../lib/testUtils'; import { CURRENT_USER_QUERY } from '../components/User'; +import { fakeUser, fakeCartItem } from '../lib/testUtils'; + +global.alert = console.log; const mocks = [ { @@ -16,17 +17,12 @@ const mocks = [ me: { ...fakeUser(), cart: [fakeCartItem({ id: 'abc123' })], - orders: [], }, }, }, }, { - request: { - // This is the mutation - query: REMOVE_FROM_CART_MUTATION, - variables: { id: 'abc123' }, - }, + request: { query: REMOVE_FROM_CART_MUTATION, variables: { id: 'abc123' } }, result: { data: { removeFromCart: { @@ -39,19 +35,17 @@ const mocks = [ ]; describe('<RemoveFromCart/>', () => { - it('renders and matches snapshot', () => { + it('renders and matches snapshot', async () => { const wrapper = mount( - <MockedProvider mocks={mocks}> + <MockedProvider> <RemoveFromCart id="abc123" /> </MockedProvider> ); expect(toJSON(wrapper.find('button'))).toMatchSnapshot(); }); - it('removes an item from the cart', async () => { - // 1. Grab a copy of the current client + it('removes the item from cart', async () => { let apolloClient; - // const wrapper = mountWithApollo(<RemoveFromCart id="abc123" />); const wrapper = mount( <MockedProvider mocks={mocks}> <ApolloConsumer> @@ -62,17 +56,12 @@ describe('<RemoveFromCart/>', () => { </ApolloConsumer> </MockedProvider> ); - // Fire Off that first mock - await apolloClient.query({ query: CURRENT_USER_QUERY }); - // check if it worked - const { me } = apolloClient.readQuery({ query: CURRENT_USER_QUERY }); - expect(me.cart).toHaveLength(1); - expect(me.cart[0].item.price).toBe(5000); - - // simulate a click, which will fire REMOVE_FROM_CART mock + const res = await apolloClient.query({ query: CURRENT_USER_QUERY }); + expect(res.data.me.cart).toHaveLength(1); + expect(res.data.me.cart[0].item.price).toBe(5000); wrapper.find('button').simulate('click'); await wait(); - const { me: me2 } = apolloClient.readQuery({ query: CURRENT_USER_QUERY }); - expect(me2.cart).toHaveLength(0); + const res2 = await apolloClient.query({ query: CURRENT_USER_QUERY }); + expect(res2.data.me.cart).toHaveLength(0); }); }); diff --git a/finished-application/frontend/__tests__/ResetRequest.test.js b/finished-application/frontend/__tests__/RequestReset.test.js index 22a9508..345b365 100644 --- a/finished-application/frontend/__tests__/ResetRequest.test.js +++ b/finished-application/frontend/__tests__/RequestReset.test.js @@ -1,54 +1,46 @@ import { mount } from 'enzyme'; +import wait from 'waait'; import toJSON from 'enzyme-to-json'; import { MockedProvider } from 'react-apollo/test-utils'; -import wait from 'waait'; -import ResetRequest, { REQUEST_RESET_MUTATION } from '../components/ResetRequest'; +import RequestReset, { REQUEST_RESET_MUTATION } from '../components/RequestReset'; const mocks = [ { request: { query: REQUEST_RESET_MUTATION, - variables: { - email: 'wesbos@gmail.com', - }, + variables: { email: 'wesbos@gmail.com' }, }, result: { - data: { - requestReset: { id: 'abc123', __typename: 'User' }, - }, + data: { requestReset: { message: 'success', __typename: 'Message' } }, }, }, ]; -describe('<ResetRequest/>', () => { +describe('<RequestReset/>', () => { it('renders and matches snapshot', async () => { const wrapper = mount( <MockedProvider> - <ResetRequest /> + <RequestReset /> </MockedProvider> ); - const form = wrapper.find("form[data-test='ResetRequest']"); + const form = wrapper.find('form[data-test="form"]'); expect(toJSON(form)).toMatchSnapshot(); }); it('calls the mutation', async () => { const wrapper = mount( <MockedProvider mocks={mocks}> - <ResetRequest /> + <RequestReset /> </MockedProvider> ); - - wrapper.find('input').simulate('change', { - target: { value: 'wesbos@gmail.com' }, - }); - + // simulate typing an email + wrapper + .find('input') + .simulate('change', { target: { name: 'email', value: 'wesbos@gmail.com' } }); // submit the form - const form = wrapper.find('form'); - console.log(form); - form.simulate('submit'); - + wrapper.find('form').simulate('submit'); await wait(); wrapper.update(); - expect(wrapper.find('p').text()).toContain('Success! Check Your Email!'); + expect(wrapper.find('p').text()).toContain('Success! Check your email for a reset link!'); }); }); diff --git a/finished-application/frontend/__tests__/Signup.test.js b/finished-application/frontend/__tests__/Signup.test.js index 2a668a6..e18bdee 100644 --- a/finished-application/frontend/__tests__/Signup.test.js +++ b/finished-application/frontend/__tests__/Signup.test.js @@ -1,29 +1,27 @@ -import React from 'react'; import { mount } from 'enzyme'; -import toJSON from 'enzyme-to-json'; import wait from 'waait'; -import { ApolloConsumer } from 'react-apollo'; +import toJSON from 'enzyme-to-json'; import { MockedProvider } from 'react-apollo/test-utils'; +import { ApolloConsumer } from 'react-apollo'; import Signup, { SIGNUP_MUTATION } from '../components/Signup'; -import { fakeUser } from '../lib/testUtils'; import { CURRENT_USER_QUERY } from '../components/User'; +import { fakeUser } from '../lib/testUtils'; function type(wrapper, name, value) { wrapper.find(`input[name="${name}"]`).simulate('change', { - target: { - name, - value, - }, + target: { name, value }, }); } + const me = fakeUser(); const mocks = [ + // signup mock mutation { request: { query: SIGNUP_MUTATION, variables: { - email: me.email, name: me.name, + email: me.email, password: 'wes', }, }, @@ -38,22 +36,15 @@ const mocks = [ }, }, }, + // current user query mock { request: { query: CURRENT_USER_QUERY }, - result: { - data: { - me: { - __typename: 'User', - ...me, - cart: [], - }, - }, - }, + result: { data: { me } }, }, ]; describe('<Signup/>', () => { - it('renders and matches snapshot', () => { + it('renders and matches snapshot', async () => { const wrapper = mount( <MockedProvider> <Signup /> @@ -62,7 +53,7 @@ describe('<Signup/>', () => { expect(toJSON(wrapper.find('form'))).toMatchSnapshot(); }); - it('calls mutation with correct data', async () => { + it('calls the mutation properly', async () => { let apolloClient; const wrapper = mount( <MockedProvider mocks={mocks}> @@ -74,17 +65,15 @@ describe('<Signup/>', () => { </ApolloConsumer> </MockedProvider> ); - await wait(); wrapper.update(); - type(wrapper, 'name', me.name); type(wrapper, 'email', me.email); type(wrapper, 'password', 'wes'); - wrapper.update(); wrapper.find('form').simulate('submit'); - + await wait(); + // query the user out of the apollo client const user = await apolloClient.query({ query: CURRENT_USER_QUERY }); expect(user.data.me).toMatchObject(me); }); diff --git a/finished-application/frontend/__tests__/SingleItem.test.js b/finished-application/frontend/__tests__/SingleItem.test.js index aeb8554..2963bde 100644 --- a/finished-application/frontend/__tests__/SingleItem.test.js +++ b/finished-application/frontend/__tests__/SingleItem.test.js @@ -1,26 +1,22 @@ -import React from 'react'; import { mount } from 'enzyme'; -import wait from 'waait'; import toJSON from 'enzyme-to-json'; +import wait from 'waait'; import SingleItem, { SINGLE_ITEM_QUERY } from '../components/SingleItem'; import { MockedProvider } from 'react-apollo/test-utils'; -import { fakeItem, fakeUser } from '../lib/testUtils'; -import { CURRENT_USER_QUERY } from '../components/User'; - -const data = { - items: [fakeItem()], -}; +import { fakeItem } from '../lib/testUtils'; describe('<SingleItem/>', () => { - it('Renders with Proper Data', async () => { + it('renders with proper data', async () => { const mocks = [ { + // when someone makes a request with this query and variable combo request: { query: SINGLE_ITEM_QUERY, variables: { id: '123' } }, - result: { data }, - }, - { - request: { query: CURRENT_USER_QUERY }, - result: { data: { me: fakeUser() } }, + // return this fake data (mocked data) + result: { + data: { + item: fakeItem(), + }, + }, }, ]; const wrapper = mount( @@ -28,27 +24,22 @@ describe('<SingleItem/>', () => { <SingleItem id="123" /> </MockedProvider> ); - // Check for loading state expect(wrapper.text()).toContain('Loading...'); - - // wait for response and refresh - await wait(55); + await wait(); wrapper.update(); - // Grab the piece we want + // console.log(wrapper.debug()); 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 () => { + it('Errors with a not found item', async () => { 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!'), + result: { + errors: [{ message: 'Items Not Found!' }], + }, }, ]; const wrapper = mount( @@ -56,12 +47,11 @@ describe('<SingleItem/>', () => { <SingleItem id="123" /> </MockedProvider> ); - - // wait for response - await wait(55); + await wait(); wrapper.update(); - - const Item = wrapper.find('[data-test="graphql-error"]'); - expect(toJSON(Item)).toMatchSnapshot(); + console.log(wrapper.debug()); + const item = wrapper.find('[data-test="graphql-error"]'); + expect(item.text()).toContain('Items Not Found!'); + expect(toJSON(item)).toMatchSnapshot(); }); }); diff --git a/finished-application/frontend/__tests__/TakeMyMoney.test.js b/finished-application/frontend/__tests__/TakeMyMoney.test.js index 1c41410..3d68502 100644 --- a/finished-application/frontend/__tests__/TakeMyMoney.test.js +++ b/finished-application/frontend/__tests__/TakeMyMoney.test.js @@ -1,12 +1,13 @@ import { mount } from 'enzyme'; +import wait from 'waait'; import toJSON from 'enzyme-to-json'; import NProgress from 'nprogress'; import Router from 'next/router'; -import wait from 'waait'; import { MockedProvider } from 'react-apollo/test-utils'; -import TakeMyMoney from '../components/TakeMyMoney'; -import { fakeUser, fakeCartItem } from '../lib/testUtils'; +import { ApolloConsumer } from 'react-apollo'; +import TakeMyMoney, { CREATE_ORDER_MUTATION } from '../components/TakeMyMoney'; import { CURRENT_USER_QUERY } from '../components/User'; +import { fakeUser, fakeCartItem } from '../lib/testUtils'; Router.router = { push() {} }; @@ -23,34 +24,33 @@ const mocks = [ }, }, ]; -describe('<TakeMyMoney />', () => { - it('renders', async () => { + +describe('<TakeMyMoney/>', () => { + it('renders and matches snapshot', async () => { const wrapper = mount( <MockedProvider mocks={mocks}> <TakeMyMoney /> </MockedProvider> ); - // wait for it to load await wait(); wrapper.update(); - // find the button const checkoutButton = wrapper.find('ReactStripeCheckout'); expect(toJSON(checkoutButton)).toMatchSnapshot(); }); - - it('creates an order onToken', async () => { - const createOrderSpy = jest.fn().mockResolvedValue({ data: { createOrder: { id: 'xyz789' } } }); - + it('creates an order ontoken', async () => { + const createOrderMock = jest.fn().mockResolvedValue({ + data: { createOrder: { id: 'xyz789' } }, + }); const wrapper = mount( <MockedProvider mocks={mocks}> <TakeMyMoney /> </MockedProvider> ); - const component = wrapper.find('TakeMyMoney'); - component.instance().onToken({ id: 'abc123' }, createOrderSpy); - // check it - expect(createOrderSpy).toBeCalled(); - expect(createOrderSpy).toBeCalledWith({ variables: { token: 'abc123' } }); + const component = wrapper.find('TakeMyMoney').instance(); + // manully call that onToken method + component.onToken({ id: 'abc123' }, createOrderMock); + expect(createOrderMock).toHaveBeenCalled(); + expect(createOrderMock).toHaveBeenCalledWith({ variables: { token: 'abc123' } }); }); it('turns the progress bar on', async () => { @@ -62,16 +62,16 @@ describe('<TakeMyMoney />', () => { await wait(); wrapper.update(); NProgress.start = jest.fn(); - - 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'); + const createOrderMock = jest.fn().mockResolvedValue({ + data: { createOrder: { id: 'xyz789' } }, + }); + const component = wrapper.find('TakeMyMoney').instance(); + // manully call that onToken method + component.onToken({ id: 'abc123' }, createOrderMock); expect(NProgress.start).toHaveBeenCalled(); }); it('routes to the order page when completed', async () => { - // Mount the wrapper const wrapper = mount( <MockedProvider mocks={mocks}> <TakeMyMoney /> @@ -79,20 +79,20 @@ describe('<TakeMyMoney />', () => { ); await wait(); wrapper.update(); - - // Spy on Router Push + const createOrderMock = jest.fn().mockResolvedValue({ + data: { createOrder: { id: 'xyz789' } }, + }); + const component = wrapper.find('TakeMyMoney').instance(); Router.router.push = jest.fn(); - 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'); + // manully call that onToken method + component.onToken({ id: 'abc123' }, createOrderMock); await wait(); + expect(Router.router.push).toHaveBeenCalled(); expect(Router.router.push).toHaveBeenCalledWith({ pathname: '/order', - query: { id: 'xyz789' }, + query: { + id: 'xyz789', + }, }); }); }); diff --git a/finished-application/frontend/__tests__/__snapshots__/AddToCart.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/AddToCart.test.js.snap index e3f8229..2f489d4 100644 --- a/finished-application/frontend/__tests__/__snapshots__/AddToCart.test.js.snap +++ b/finished-application/frontend/__tests__/__snapshots__/AddToCart.test.js.snap @@ -1,11 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`<AddtoCart/> renders and matches snapshot 1`] = ` +exports[`<AddToCart/> renders and matches the snap shot 1`] = ` <button disabled={false} onClick={[Function]} > - π Add - To Cart + Add + To Cart π </button> `; diff --git a/finished-application/frontend/__tests__/__snapshots__/Cart.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/Cart.test.js.snap index 9aeedfd..d5c0d92 100644 --- a/finished-application/frontend/__tests__/__snapshots__/Cart.test.js.snap +++ b/finished-application/frontend/__tests__/__snapshots__/Cart.test.js.snap @@ -1,31 +1,31 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`<Cart/> renders 1`] = ` +exports[`<Cart/> renders and matches snappy 1`] = ` <header> - <styled.button + <CloseButton onClick={[Function]} title="close" > <button - className="sc-EHOje jytiuo" + className="CloseButton-sc-1seb878-0 lbNKfp" onClick={[Function]} title="close" > Γ </button> - </styled.button> - <styled.h3> + </CloseButton> + <Supreme> <h3 - className="sc-ifAKCX imryuh" + className="Supreme-xv30qb-0 hpaXsq" > Miss Coleman Berge - 's Cart. + 's Cart </h3> - </styled.h3> + </Supreme> <p> - You have + You Have 1 - item + Item in your cart. </p> </header> diff --git a/finished-application/frontend/__tests__/__snapshots__/CartCount.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/CartCount.test.js.snap index 224141b..92ee89a 100644 --- a/finished-application/frontend/__tests__/__snapshots__/CartCount.test.js.snap +++ b/finished-application/frontend/__tests__/__snapshots__/CartCount.test.js.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`<CartCount></CartCount> matches snapshot 1`] = ` -<styled.span> +exports[`<CartCount/> matches the snapshot 1`] = ` +<CartCount__AnimationStyles> <TransitionGroup childFactory={[Function]} component="div" @@ -9,7 +9,7 @@ exports[`<CartCount></CartCount> matches snapshot 1`] = ` <CSSTransition className="count" classNames="count" - key="10" + key="11" timeout={ Object { "enter": 400, @@ -18,188 +18,62 @@ exports[`<CartCount></CartCount> matches snapshot 1`] = ` } unmountOnExit={true} > - <styled.div> - 10 - </styled.div> + <CartCount__Dot> + 11 + </CartCount__Dot> </CSSTransition> </TransitionGroup> -</styled.span> +</CartCount__AnimationStyles> `; -exports[`<CartCount></CartCount> updates via props 1`] = ` -<CartCount - count={50} -> - <styled.span> - <span - className="sc-bwzfXH fWZfOZ" +exports[`<CartCount/> updates via props 1`] = ` +<CartCount__AnimationStyles> + <TransitionGroup + childFactory={[Function]} + component="div" + > + <CSSTransition + className="count" + classNames="count" + key="50" + timeout={ + Object { + "enter": 400, + "exit": 400, + } + } + unmountOnExit={true} > - <TransitionGroup - childFactory={[Function]} - component="div" - > - <div> - <CSSTransition - className="count" - classNames="count" - in={true} - key=".$50" - onExited={[Function]} - timeout={ - Object { - "enter": 400, - "exit": 400, - } - } - unmountOnExit={true} - > - <Transition - appear={false} - className="count" - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ - Object { - "enter": 400, - "exit": 400, - } - } - unmountOnExit={true} - > - <styled.div - className="count" - > - <div - className="count sc-bdVaJa ldHGxH" - > - 50 - </div> - </styled.div> - </Transition> - </CSSTransition> - </div> - </TransitionGroup> - </span> - </styled.span> -</CartCount> + <CartCount__Dot> + 50 + </CartCount__Dot> + </CSSTransition> + </TransitionGroup> +</CartCount__AnimationStyles> `; -exports[`<CartCount></CartCount> updates via props 2`] = ` -<CartCount - count={10} -> - <styled.span> - <span - className="sc-bwzfXH fWZfOZ" +exports[`<CartCount/> updates via props 2`] = ` +<CartCount__AnimationStyles> + <TransitionGroup + childFactory={[Function]} + component="div" + > + <CSSTransition + className="count" + classNames="count" + key="10" + timeout={ + Object { + "enter": 400, + "exit": 400, + } + } + unmountOnExit={true} > - <TransitionGroup - childFactory={[Function]} - component="div" - > - <div> - <CSSTransition - className="count" - classNames="count" - in={true} - key=".$10" - onExited={[Function]} - timeout={ - Object { - "enter": 400, - "exit": 400, - } - } - unmountOnExit={true} - > - <Transition - appear={false} - className="count" - enter={true} - exit={true} - in={true} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ - Object { - "enter": 400, - "exit": 400, - } - } - unmountOnExit={true} - > - <styled.div - className="count" - > - <div - className="count sc-bdVaJa ldHGxH" - > - 10 - </div> - </styled.div> - </Transition> - </CSSTransition> - <CSSTransition - className="count" - classNames="count" - in={false} - key=".$50" - onExited={[Function]} - timeout={ - Object { - "enter": 400, - "exit": 400, - } - } - unmountOnExit={true} - > - <Transition - appear={false} - className="count" - enter={true} - exit={true} - in={false} - mountOnEnter={false} - onEnter={[Function]} - onEntered={[Function]} - onEntering={[Function]} - onExit={[Function]} - onExited={[Function]} - onExiting={[Function]} - timeout={ - Object { - "enter": 400, - "exit": 400, - } - } - unmountOnExit={true} - > - <styled.div - className="count" - > - <div - className="count sc-bdVaJa ldHGxH" - > - 50 - </div> - </styled.div> - </Transition> - </CSSTransition> - </div> - </TransitionGroup> - </span> - </styled.span> -</CartCount> + <CartCount__Dot> + 10 + </CartCount__Dot> + </CSSTransition> + </TransitionGroup> +</CartCount__AnimationStyles> `; diff --git a/finished-application/frontend/__tests__/__snapshots__/CartItem.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/CartItem.test.js.snap deleted file mode 100644 index b8f5ad3..0000000 --- a/finished-application/frontend/__tests__/__snapshots__/CartItem.test.js.snap +++ /dev/null @@ -1,33 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<CartItem> renders and matches snapshot 1`] = ` -<styled.li - key="abc123" -> - <img - alt="Fake Item" - src="dog.jpg" - width="100" - /> - <div - className="cart-item-details" - > - <h3> - Fake Item - </h3> - <p> - $1,000 - β - <em> - 20 - Γ - $50 - each - </em> - </p> - </div> - <RemoveFromCart - id="abc123" - /> -</styled.li> -`; diff --git a/finished-application/frontend/__tests__/__snapshots__/CreateItem.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/CreateItem.test.js.snap index 89dbcd2..59d8557 100644 --- a/finished-application/frontend/__tests__/__snapshots__/CreateItem.test.js.snap +++ b/finished-application/frontend/__tests__/__snapshots__/CreateItem.test.js.snap @@ -1,14 +1,11 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`<Createitem/> renders and matches snapshot 1`] = ` +exports[`<CreateItem/> renders and matches snapshot 1`] = ` <form - className="sc-bwzfXH ikCwBB" - data-test={true} + className="Form-sc-1xszr8q-0 krRxky" + data-test="form" onSubmit={[Function]} > - <h2> - Sell an Item. - </h2> <DisplayError error={Object {}} /> @@ -21,9 +18,10 @@ exports[`<Createitem/> renders and matches snapshot 1`] = ` > Image <input - accept=".png, .jpg, .jpeg" id="file" + name="file" onChange={[Function]} + placeholder="Upload an image" required={true} type="file" /> @@ -45,26 +43,30 @@ exports[`<Createitem/> renders and matches snapshot 1`] = ` <label htmlFor="price" > - Price - 0 + Price <input id="price" - min="0" name="price" onChange={[Function]} + placeholder="Price" required={true} type="number" value={0} /> </label> - <textarea - id="description" - name="description" - onChange={[Function]} - placeholder="The desc for this item" - required={true} - value="" - /> + <label + htmlFor="description" + > + Description + <textarea + id="description" + name="description" + onChange={[Function]} + placeholder="Enter A Description" + required={true} + value="" + /> + </label> <button type="submit" > diff --git a/finished-application/frontend/__tests__/__snapshots__/EditUser.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/EditUser.test.js.snap deleted file mode 100644 index bbb672d..0000000 --- a/finished-application/frontend/__tests__/__snapshots__/EditUser.test.js.snap +++ /dev/null @@ -1,47 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`<EditUser/> renders 1`] = ` -<form - className="sc-bdVaJa LHejR" - onSubmit={[Function]} -> - <DisplayError - error={Object {}} - /> - <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" - > - {} - </pre> - </fieldset> -</form> -`; diff --git a/finished-application/frontend/__tests__/__snapshots__/Item.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/Item.test.js.snap index 930c7a9..70e4aa8 100644 --- a/finished-application/frontend/__tests__/__snapshots__/Item.test.js.snap +++ b/finished-application/frontend/__tests__/__snapshots__/Item.test.js.snap @@ -1,14 +1,12 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`<Item/> Renders and matches snapshot 1`] = ` -<styled.div - key="ABC123" -> +exports[`<Item/> renders and matches the snapshot 1`] = ` +<ItemStyles__Item> <img alt="A Cool Item" src="dog.jpg" /> - <styled.h3> + <Title> <Link href={ Object { @@ -23,10 +21,10 @@ exports[`<Item/> Renders and matches snapshot 1`] = ` A Cool Item </a> </Link> - </styled.h3> - <styled.span> - $50 - </styled.span> + </Title> + <PriceTag> + $40 + </PriceTag> <p> This item is really cool! </p> @@ -36,7 +34,7 @@ exports[`<Item/> Renders and matches snapshot 1`] = ` <Link href={ Object { - "pathname": "/update", + "pathname": "update", "query": Object { "id": "ABC123", }, @@ -52,7 +50,9 @@ exports[`<Item/> Renders and matches snapshot 1`] = ` /> <DeleteItem id="ABC123" - /> + > + Delete This Item + </DeleteItem> </div> -</styled.div> +</ItemStyles__Item> `; diff --git a/finished-application/frontend/__tests__/__snapshots__/Nav.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/Nav.test.js.snap index 354fbc1..c3155a9 100644 --- a/finished-application/frontend/__tests__/__snapshots__/Nav.test.js.snap +++ b/finished-application/frontend/__tests__/__snapshots__/Nav.test.js.snap @@ -1,8 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`<Nav></Nav> Renders minimal nav when logged out 1`] = ` +exports[`<Nav/> renders a minimal nav when signed out 1`] = ` <ul - className="sc-dnqmqq kxZizK" + className="NavStyles-sc-11c0d2g-0 YVEeD" data-test="nav" > <Link @@ -16,16 +16,6 @@ exports[`<Nav></Nav> Renders minimal nav when logged out 1`] = ` </a> </Link> <Link - href="/sell" - > - <a - href="/sell" - onClick={[Function]} - > - Sell - </a> - </Link> - <Link href="/signup" > <a @@ -37,3 +27,11 @@ exports[`<Nav></Nav> Renders minimal nav when logged out 1`] = ` </Link> </ul> `; + +exports[`<Nav/> renders the amount of items in the cart 1`] = ` +<div + className="count CartCount__Dot-xxvp4g-1 fJsVOg" +> + 9 +</div> +`; diff --git a/finished-application/frontend/__tests__/__snapshots__/Order.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/Order.test.js.snap index 8e76546..9dce80b 100644 --- a/finished-application/frontend/__tests__/__snapshots__/Order.test.js.snap +++ b/finished-application/frontend/__tests__/__snapshots__/Order.test.js.snap @@ -1,8 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`<Order/> Renders the order 1`] = ` +exports[`<Order/> renders the order 1`] = ` <div - className="sc-bwzfXH wJijb" + className="OrderStyles-sc-4oqalm-0 eDzsVm" data-test="order" > <SideEffect(Head)> @@ -10,7 +10,7 @@ exports[`<Order/> Renders the order 1`] = ` </SideEffect(Head)> <p> <span> - Order Id: + Order ID: </span> <span> ord123 @@ -29,7 +29,7 @@ exports[`<Order/> Renders the order 1`] = ` Date </span> <span> - March 90, 2018 8:00 A + March 31, 2018 8:00 PM </span> </p> <p> @@ -63,9 +63,7 @@ exports[`<Order/> Renders the order 1`] = ` className="item-details" > <h2> - soluta non omnis consequatur enim quia autem - </h2> <p> Qty: @@ -76,12 +74,8 @@ exports[`<Order/> Renders the order 1`] = ` $42.34 </p> <p> - Subtotal: - $42.34 - </p> - <p> SubTotal: - et modi tenetur amet modi reprehenderit omnis + $42.34 </p> <p> et modi tenetur amet modi reprehenderit omnis @@ -100,9 +94,7 @@ exports[`<Order/> Renders the order 1`] = ` className="item-details" > <h2> - quia sed exercitationem omnis laborum exercitationem est - </h2> <p> Qty: @@ -113,12 +105,8 @@ exports[`<Order/> Renders the order 1`] = ` $42.34 </p> <p> - Subtotal: - $42.34 - </p> - <p> SubTotal: - sapiente laudantium molestias assumenda quasi adipisci mollitia + $42.34 </p> <p> sapiente laudantium molestias assumenda quasi adipisci mollitia diff --git a/finished-application/frontend/__tests__/__snapshots__/Pagination.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/Pagination.test.js.snap index c757968..110f59d 100644 --- a/finished-application/frontend/__tests__/__snapshots__/Pagination.test.js.snap +++ b/finished-application/frontend/__tests__/__snapshots__/Pagination.test.js.snap @@ -1,8 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`<Pagination/> displays loading message 1`] = ` +exports[`<Pagination/> renders pagination for 18 items 1`] = ` <div - className="sc-bdVaJa ijYKGd" + className="PaginationStyles-aduuar-0 ewJsCc" data-test="pagination" > <SideEffect(Head)> @@ -25,26 +25,22 @@ exports[`<Pagination/> displays loading message 1`] = ` href="items?page=0" onClick={[Function]} > - βPrev + β Prev </a> </Link> <p> Page - <strong> - 1 - - </strong> - of - <strong + 1 + of + <span className="totalPages" > - 1 - </strong> + 5 + </span> + ! </p> <p> - <strong> - 1 - </strong> + 18 Items Total </p> <Link @@ -59,7 +55,7 @@ exports[`<Pagination/> displays loading message 1`] = ` prefetch={true} > <a - aria-disabled={true} + aria-disabled={false} className="next" href="items?page=2" onClick={[Function]} diff --git a/finished-application/frontend/__tests__/__snapshots__/RemoveFromCart.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/RemoveFromCart.test.js.snap index a80b678..db8687b 100644 --- a/finished-application/frontend/__tests__/__snapshots__/RemoveFromCart.test.js.snap +++ b/finished-application/frontend/__tests__/__snapshots__/RemoveFromCart.test.js.snap @@ -2,10 +2,10 @@ exports[`<RemoveFromCart/> renders and matches snapshot 1`] = ` <button - className="sc-bdVaJa fXnNqM" + className="RemoveFromCart__BigButton-emvtd6-0 gPWNSn" disabled={false} onClick={[Function]} - title="Remove From Cart" + title="Delete Item" > Γ </button> diff --git a/finished-application/frontend/__tests__/__snapshots__/ResetRequest.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/RequestReset.test.js.snap index a6a0375..c0de705 100644 --- a/finished-application/frontend/__tests__/__snapshots__/ResetRequest.test.js.snap +++ b/finished-application/frontend/__tests__/__snapshots__/RequestReset.test.js.snap @@ -1,18 +1,22 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`<ResetRequest/> renders and matches snapshot 1`] = ` +exports[`<RequestReset/> renders and matches snapshot 1`] = ` <form - className="sc-bdVaJa LHejR" - data-test="ResetRequest" + className="Form-sc-1xszr8q-0 krRxky" + data-test="form" + method="post" onSubmit={[Function]} > - <DisplayError - error={Object {}} - /> <fieldset aria-busy={false} disabled={false} > + <h2> + Request a password reset + </h2> + <DisplayError + error={Object {}} + /> <label htmlFor="email" > @@ -21,7 +25,7 @@ exports[`<ResetRequest/> renders and matches snapshot 1`] = ` name="email" onChange={[Function]} placeholder="email" - type="text" + type="email" value="" /> </label> diff --git a/finished-application/frontend/__tests__/__snapshots__/Signup.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/Signup.test.js.snap index b3c057e..bb61ff1 100644 --- a/finished-application/frontend/__tests__/__snapshots__/Signup.test.js.snap +++ b/finished-application/frontend/__tests__/__snapshots__/Signup.test.js.snap @@ -2,7 +2,7 @@ exports[`<Signup/> renders and matches snapshot 1`] = ` <form - className="sc-bdVaJa LHejR" + className="Form-sc-1xszr8q-0 krRxky" method="post" onSubmit={[Function]} > @@ -10,12 +10,12 @@ exports[`<Signup/> renders and matches snapshot 1`] = ` aria-busy={false} disabled={false} > + <h2> + Sign Up for An Account + </h2> <DisplayError error={Object {}} /> - <h2> - Sign Up for an Account - </h2> <label htmlFor="email" > @@ -24,7 +24,7 @@ exports[`<Signup/> renders and matches snapshot 1`] = ` name="email" onChange={[Function]} placeholder="email" - type="text" + type="email" value="" /> </label> @@ -41,12 +41,10 @@ exports[`<Signup/> renders and matches snapshot 1`] = ` /> </label> <label - htmlFor="signupPassword" + htmlFor="password" > Password <input - className="password" - id="signupPassword" name="password" onChange={[Function]} placeholder="password" @@ -57,7 +55,7 @@ exports[`<Signup/> renders and matches snapshot 1`] = ` <button type="submit" > - Submit + Sign Up! </button> </fieldset> </form> diff --git a/finished-application/frontend/__tests__/__snapshots__/SingleItem.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/SingleItem.test.js.snap index 28e9174..2f41d4c 100644 --- a/finished-application/frontend/__tests__/__snapshots__/SingleItem.test.js.snap +++ b/finished-application/frontend/__tests__/__snapshots__/SingleItem.test.js.snap @@ -1,31 +1,31 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`<SingleItem/> Errors with a not found Item 1`] = ` +exports[`<SingleItem/> Errors with a not found item 1`] = ` <p data-test="graphql-error" > <strong> Shoot! </strong> - Item not found! + Items Not Found! </p> `; -exports[`<SingleItem/> Renders with Proper Data 1`] = ` +exports[`<SingleItem/> renders with proper data 1`] = ` <h2> Viewing dogs are best </h2> `; -exports[`<SingleItem/> Renders with Proper Data 2`] = ` +exports[`<SingleItem/> renders with proper data 2`] = ` <img alt="dogs are best" src="dog.jpg" /> `; -exports[`<SingleItem/> Renders with Proper Data 3`] = ` +exports[`<SingleItem/> renders with proper data 3`] = ` <p> dogs </p> diff --git a/finished-application/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap index 00863d3..02a112e 100644 --- a/finished-application/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap +++ b/finished-application/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap @@ -1,19 +1,19 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`<TakeMyMoney /> renders 1`] = ` +exports[`<TakeMyMoney/> renders and matches snapshot 1`] = ` <ReactStripeCheckout ComponentClass="span" amount={15000} className="StripeCheckout" currency="USD" - description="Order of 3 Items From Sick Fits" + description="Order of 3 items!" email="Delmer.Smith@yahoo.com" image="dog-small.jpg" label="Pay With Card" locale="auto" - name="Sick Fits Haul" + name="Sick Fits" reconfigureOnUpdate={false} - stripeKey="pk_lclTtThFp8CnO3QtEZSd8HA9mFUps" + stripeKey="pk_test_Vtknn6vSdcZWSG2JWvEiWSqC" token={[Function]} triggerEvent="onClick" > diff --git a/finished-application/frontend/__tests__/formatMoney.test.js b/finished-application/frontend/__tests__/formatMoney.test.js index c5c79b6..23d8183 100644 --- a/finished-application/frontend/__tests__/formatMoney.test.js +++ b/finished-application/frontend/__tests__/formatMoney.test.js @@ -1,9 +1,11 @@ import formatMoney from '../lib/formatMoney'; -describe('formatMoney', () => { +describe('formatMoney Function', () => { it('works with fractional dollars', () => { expect(formatMoney(1)).toEqual('$0.01'); expect(formatMoney(10)).toEqual('$0.10'); + expect(formatMoney(9)).toEqual('$0.09'); + expect(formatMoney(40)).toEqual('$0.40'); }); it('leaves cents off for whole dollars', () => { @@ -16,6 +18,6 @@ describe('formatMoney', () => { expect(formatMoney(5012)).toEqual('$50.12'); expect(formatMoney(101)).toEqual('$1.01'); expect(formatMoney(110)).toEqual('$1.10'); - expect(formatMoney(54345345)).toEqual('$543,453.45'); + expect(formatMoney(20893749823749823749)).toEqual('$208,937,498,237,498,240.00'); }); }); diff --git a/finished-application/frontend/__tests__/mocking.test.js b/finished-application/frontend/__tests__/mocking.test.js new file mode 100644 index 0000000..d0a05bf --- /dev/null +++ b/finished-application/frontend/__tests__/mocking.test.js @@ -0,0 +1,36 @@ +function Person(name, foods) { + this.name = name; + this.foods = foods; +} + +Person.prototype.fetchFavFoods = function() { + return new Promise((resolve, reject) => { + // Simulate an API + setTimeout(() => resolve(this.foods), 2000); + }); +}; + +describe('mocking learning', () => { + it('mocks a reg function', () => { + const fetchDogs = jest.fn(); + fetchDogs('snickers'); + expect(fetchDogs).toHaveBeenCalled(); + expect(fetchDogs).toHaveBeenCalledWith('snickers'); + fetchDogs('hugo'); + expect(fetchDogs).toHaveBeenCalledTimes(2); + }); + + it('can create a person', () => { + const me = new Person('Wes', ['pizza', 'burgs']); + expect(me.name).toBe('Wes'); + }); + + it('can fetch foods', async () => { + const me = new Person('Wes', ['pizza', 'burgs']); + // mock the favFoods function + me.fetchFavFoods = jest.fn().mockResolvedValue(['sushi', 'ramen']); + const favFoods = await me.fetchFavFoods(); + console.log(favFoods); + expect(favFoods).toContain('sushi'); + }); +}); diff --git a/finished-application/frontend/__tests__/sample.test.js b/finished-application/frontend/__tests__/sample.test.js new file mode 100644 index 0000000..dbed94f --- /dev/null +++ b/finished-application/frontend/__tests__/sample.test.js @@ -0,0 +1,19 @@ +describe('sample test 101', () => { + it('works as expected', () => { + const age = 100; + expect(1).toEqual(1); + expect(age).toEqual(100); + }); + + it('handles ranges just fine', () => { + const age = 200; + expect(age).toBeGreaterThan(100); + }); + + it('makes a list of dog names', () => { + const dogs = ['snickers', 'hugo']; + expect(dogs).toEqual(dogs); + expect(dogs).toContain('snickers'); + expect(dogs).toContain('snickers'); + }); +}); |