From b1600adec47a04f60e1da07d94a3ed3906ff5aee Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Thu, 14 Jun 2018 16:44:21 -0400 Subject: starter files --- .../frontend/.vscode/settings.json | 7 + finished-application/frontend/README.md | 59 + .../frontend/__tests__/AddToCart.test.js | 92 + .../frontend/__tests__/Cart.test.js | 46 + .../frontend/__tests__/CartCount.test.js | 21 + .../frontend/__tests__/CartItem.test.js | 33 + .../frontend/__tests__/CreateItem.test.js | 132 + .../frontend/__tests__/EditUser.test.js | 75 + .../frontend/__tests__/Item.test.js | 22 + .../frontend/__tests__/Nav.test.js | 66 + .../frontend/__tests__/Order.test.js | 41 + .../frontend/__tests__/Pagination.test.js | 94 + .../frontend/__tests__/PleaseSignIn.test.js | 80 + .../frontend/__tests__/RemoveFromCart.test.js | 78 + .../frontend/__tests__/ResetRequest.test.js | 54 + .../frontend/__tests__/Signup.test.js | 91 + .../frontend/__tests__/SingleItem.test.js | 67 + .../frontend/__tests__/TakeMyMoney.test.js | 98 + .../__tests__/__snapshots__/AddToCart.test.js.snap | 11 + .../__tests__/__snapshots__/Cart.test.js.snap | 32 + .../__tests__/__snapshots__/CartCount.test.js.snap | 205 + .../__tests__/__snapshots__/CartItem.test.js.snap | 33 + .../__snapshots__/CreateItem.test.js.snap | 75 + .../__tests__/__snapshots__/EditUser.test.js.snap | 47 + .../__tests__/__snapshots__/Item.test.js.snap | 58 + .../__tests__/__snapshots__/Nav.test.js.snap | 39 + .../__tests__/__snapshots__/Order.test.js.snap | 130 + .../__snapshots__/Pagination.test.js.snap | 71 + .../__snapshots__/RemoveFromCart.test.js.snap | 12 + .../__snapshots__/ResetRequest.test.js.snap | 35 + .../__tests__/__snapshots__/Signup.test.js.snap | 64 + .../__snapshots__/SingleItem.test.js.snap | 32 + .../__snapshots__/TakeMyMoney.test.js.snap | 67 + .../frontend/__tests__/formatMoney.test.js | 21 + .../frontend/components/AddToCart.js | 68 + finished-application/frontend/components/Cart.js | 74 + .../frontend/components/CartCount.js | 64 + .../frontend/components/CartItem.js | 53 + .../frontend/components/CreateItem.js | 148 + .../frontend/components/DeleteItem.js | 71 + finished-application/frontend/components/Dump.js | 19 + .../frontend/components/EditUser.js | 81 + .../frontend/components/ErrorMessage.js | 51 + finished-application/frontend/components/Header.js | 71 + finished-application/frontend/components/Item.js | 53 + finished-application/frontend/components/Items.js | 74 + .../frontend/components/LoadingItem.js | 22 + finished-application/frontend/components/Meta.js | 16 + finished-application/frontend/components/Nav.js | 59 + finished-application/frontend/components/Order.js | 98 + .../frontend/components/OrderList.js | 93 + finished-application/frontend/components/Page.js | 67 + .../frontend/components/Pagination.js | 97 + .../frontend/components/Permissions.js | 133 + .../frontend/components/PleaseSignIn.js | 46 + .../frontend/components/RemoveFromCart.js | 57 + finished-application/frontend/components/Reset.js | 85 + .../frontend/components/ResetRequest.js | 55 + finished-application/frontend/components/Search.js | 143 + finished-application/frontend/components/Signin.js | 79 + .../frontend/components/Signout.js | 25 + finished-application/frontend/components/Signup.js | 93 + .../frontend/components/SingleItem.js | 77 + .../frontend/components/TakeMyMoney.js | 83 + .../frontend/components/UpdateItem.js | 105 + finished-application/frontend/components/User.js | 45 + .../frontend/components/styles/CartStyles.js | 47 + .../frontend/components/styles/CloseButton.js | 13 + .../frontend/components/styles/Form.js | 71 + .../frontend/components/styles/ItemStyles.js | 39 + .../frontend/components/styles/NavStyles.js | 64 + .../frontend/components/styles/OrderItemStyles.js | 44 + .../frontend/components/styles/OrderStyles.js | 38 + .../frontend/components/styles/PriceTag.js | 17 + .../frontend/components/styles/SickButton.js | 20 + .../frontend/components/styles/Supreme.js | 13 + .../frontend/components/styles/Table.js | 31 + .../frontend/components/styles/Title.js | 20 + finished-application/frontend/config.js | 3 + finished-application/frontend/jest.setup.js | 4 + .../frontend/lib/calcTotalPrice.js | 6 + finished-application/frontend/lib/formatMoney.js | 11 + finished-application/frontend/lib/testUtils.js | 79 + finished-application/frontend/lib/withData.js | 35 + finished-application/frontend/notes.md | 36 + finished-application/frontend/package-lock.json | 10005 +++++++++++++++++++ finished-application/frontend/package.json | 104 + finished-application/frontend/pages/_app.js | 36 + finished-application/frontend/pages/_document.js | 25 + finished-application/frontend/pages/add.js | 10 + finished-application/frontend/pages/diagram.js | 202 + finished-application/frontend/pages/index.js | 7 + finished-application/frontend/pages/item.js | 7 + finished-application/frontend/pages/items.js | 3 + finished-application/frontend/pages/me.js | 13 + finished-application/frontend/pages/order.js | 7 + finished-application/frontend/pages/orders.js | 10 + finished-application/frontend/pages/permissions.js | 10 + finished-application/frontend/pages/reset.js | 10 + finished-application/frontend/pages/sell.js | 10 + finished-application/frontend/pages/signup.js | 20 + finished-application/frontend/pages/update.js | 15 + finished-application/frontend/static/favicon.png | Bin 0 -> 5122 bytes finished-application/frontend/static/nprogress.css | 72 + 104 files changed, 15550 insertions(+) create mode 100644 finished-application/frontend/.vscode/settings.json create mode 100644 finished-application/frontend/README.md create mode 100644 finished-application/frontend/__tests__/AddToCart.test.js create mode 100644 finished-application/frontend/__tests__/Cart.test.js create mode 100644 finished-application/frontend/__tests__/CartCount.test.js create mode 100644 finished-application/frontend/__tests__/CartItem.test.js create mode 100644 finished-application/frontend/__tests__/CreateItem.test.js create mode 100644 finished-application/frontend/__tests__/EditUser.test.js create mode 100644 finished-application/frontend/__tests__/Item.test.js create mode 100644 finished-application/frontend/__tests__/Nav.test.js create mode 100644 finished-application/frontend/__tests__/Order.test.js create mode 100644 finished-application/frontend/__tests__/Pagination.test.js create mode 100644 finished-application/frontend/__tests__/PleaseSignIn.test.js create mode 100644 finished-application/frontend/__tests__/RemoveFromCart.test.js create mode 100644 finished-application/frontend/__tests__/ResetRequest.test.js create mode 100644 finished-application/frontend/__tests__/Signup.test.js create mode 100644 finished-application/frontend/__tests__/SingleItem.test.js create mode 100644 finished-application/frontend/__tests__/TakeMyMoney.test.js create mode 100644 finished-application/frontend/__tests__/__snapshots__/AddToCart.test.js.snap create mode 100644 finished-application/frontend/__tests__/__snapshots__/Cart.test.js.snap create mode 100644 finished-application/frontend/__tests__/__snapshots__/CartCount.test.js.snap create mode 100644 finished-application/frontend/__tests__/__snapshots__/CartItem.test.js.snap create mode 100644 finished-application/frontend/__tests__/__snapshots__/CreateItem.test.js.snap create mode 100644 finished-application/frontend/__tests__/__snapshots__/EditUser.test.js.snap create mode 100644 finished-application/frontend/__tests__/__snapshots__/Item.test.js.snap create mode 100644 finished-application/frontend/__tests__/__snapshots__/Nav.test.js.snap create mode 100644 finished-application/frontend/__tests__/__snapshots__/Order.test.js.snap create mode 100644 finished-application/frontend/__tests__/__snapshots__/Pagination.test.js.snap create mode 100644 finished-application/frontend/__tests__/__snapshots__/RemoveFromCart.test.js.snap create mode 100644 finished-application/frontend/__tests__/__snapshots__/ResetRequest.test.js.snap create mode 100644 finished-application/frontend/__tests__/__snapshots__/Signup.test.js.snap create mode 100644 finished-application/frontend/__tests__/__snapshots__/SingleItem.test.js.snap create mode 100644 finished-application/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap create mode 100644 finished-application/frontend/__tests__/formatMoney.test.js create mode 100644 finished-application/frontend/components/AddToCart.js create mode 100644 finished-application/frontend/components/Cart.js create mode 100644 finished-application/frontend/components/CartCount.js create mode 100644 finished-application/frontend/components/CartItem.js create mode 100644 finished-application/frontend/components/CreateItem.js create mode 100644 finished-application/frontend/components/DeleteItem.js create mode 100644 finished-application/frontend/components/Dump.js create mode 100644 finished-application/frontend/components/EditUser.js create mode 100644 finished-application/frontend/components/ErrorMessage.js create mode 100644 finished-application/frontend/components/Header.js create mode 100644 finished-application/frontend/components/Item.js create mode 100644 finished-application/frontend/components/Items.js create mode 100644 finished-application/frontend/components/LoadingItem.js create mode 100644 finished-application/frontend/components/Meta.js create mode 100644 finished-application/frontend/components/Nav.js create mode 100644 finished-application/frontend/components/Order.js create mode 100644 finished-application/frontend/components/OrderList.js create mode 100644 finished-application/frontend/components/Page.js create mode 100644 finished-application/frontend/components/Pagination.js create mode 100644 finished-application/frontend/components/Permissions.js create mode 100644 finished-application/frontend/components/PleaseSignIn.js create mode 100644 finished-application/frontend/components/RemoveFromCart.js create mode 100644 finished-application/frontend/components/Reset.js create mode 100644 finished-application/frontend/components/ResetRequest.js create mode 100644 finished-application/frontend/components/Search.js create mode 100644 finished-application/frontend/components/Signin.js create mode 100644 finished-application/frontend/components/Signout.js create mode 100644 finished-application/frontend/components/Signup.js create mode 100644 finished-application/frontend/components/SingleItem.js create mode 100644 finished-application/frontend/components/TakeMyMoney.js create mode 100644 finished-application/frontend/components/UpdateItem.js create mode 100644 finished-application/frontend/components/User.js create mode 100644 finished-application/frontend/components/styles/CartStyles.js create mode 100644 finished-application/frontend/components/styles/CloseButton.js create mode 100644 finished-application/frontend/components/styles/Form.js create mode 100644 finished-application/frontend/components/styles/ItemStyles.js create mode 100644 finished-application/frontend/components/styles/NavStyles.js create mode 100644 finished-application/frontend/components/styles/OrderItemStyles.js create mode 100644 finished-application/frontend/components/styles/OrderStyles.js create mode 100644 finished-application/frontend/components/styles/PriceTag.js create mode 100644 finished-application/frontend/components/styles/SickButton.js create mode 100644 finished-application/frontend/components/styles/Supreme.js create mode 100644 finished-application/frontend/components/styles/Table.js create mode 100644 finished-application/frontend/components/styles/Title.js create mode 100644 finished-application/frontend/config.js create mode 100644 finished-application/frontend/jest.setup.js create mode 100644 finished-application/frontend/lib/calcTotalPrice.js create mode 100644 finished-application/frontend/lib/formatMoney.js create mode 100644 finished-application/frontend/lib/testUtils.js create mode 100644 finished-application/frontend/lib/withData.js create mode 100644 finished-application/frontend/notes.md create mode 100644 finished-application/frontend/package-lock.json create mode 100644 finished-application/frontend/package.json create mode 100644 finished-application/frontend/pages/_app.js create mode 100644 finished-application/frontend/pages/_document.js create mode 100644 finished-application/frontend/pages/add.js create mode 100644 finished-application/frontend/pages/diagram.js create mode 100644 finished-application/frontend/pages/index.js create mode 100644 finished-application/frontend/pages/item.js create mode 100644 finished-application/frontend/pages/items.js create mode 100644 finished-application/frontend/pages/me.js create mode 100644 finished-application/frontend/pages/order.js create mode 100644 finished-application/frontend/pages/orders.js create mode 100644 finished-application/frontend/pages/permissions.js create mode 100644 finished-application/frontend/pages/reset.js create mode 100644 finished-application/frontend/pages/sell.js create mode 100644 finished-application/frontend/pages/signup.js create mode 100644 finished-application/frontend/pages/update.js create mode 100644 finished-application/frontend/static/favicon.png create mode 100644 finished-application/frontend/static/nprogress.css (limited to 'finished-application/frontend') diff --git a/finished-application/frontend/.vscode/settings.json b/finished-application/frontend/.vscode/settings.json new file mode 100644 index 0000000..2fd8efc --- /dev/null +++ b/finished-application/frontend/.vscode/settings.json @@ -0,0 +1,7 @@ +{ + "workbench.colorCustomizations": { + "titleBar.activeForeground": "#000", + "titleBar.inactiveForeground": "#000000CC", + "titleBar.activeBackground": "#FFC600", + "titleBar.inactiveBackground": "#FFC600CC" + } diff --git a/finished-application/frontend/README.md b/finished-application/frontend/README.md new file mode 100644 index 0000000..9914799 --- /dev/null +++ b/finished-application/frontend/README.md @@ -0,0 +1,59 @@ +# Advanced-React + + + diff --git a/finished-application/frontend/__tests__/AddToCart.test.js b/finished-application/frontend/__tests__/AddToCart.test.js new file mode 100644 index 0000000..fe15f3f --- /dev/null +++ b/finished-application/frontend/__tests__/AddToCart.test.js @@ -0,0 +1,92 @@ +import React from 'react'; +import { mount } from 'enzyme'; +import toJSON from 'enzyme-to-json'; +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 { CURRENT_USER_QUERY } from '../components/User'; + +const mocks = [ + { + request: { query: CURRENT_USER_QUERY }, + result: { + data: { + me: { + ...fakeUser(), + cart: [], + }, + }, + }, + }, + { + request: { query: ADD_TO_CART_MUTATION, variables: { id: 'abc123' } }, + result: { + data: { + addToCart: { + ...fakeCartItem(), + quantity: 1, + }, + }, + }, + }, +]; + +describe('', () => { + it('renders and matches snapshot', async () => { + const wrapper = mount( + + + + ); + 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 + let apolloClient; + // const wrapper = mountWithApollo(); + const wrapper = mount( + + + {client => { + apolloClient = client; + return ; + }} + + + ); + await wait(); + wrapper.update(); + + const { me } = apolloClient.readQuery({ query: CURRENT_USER_QUERY }); + expect(me.cart).toHaveLength(0); + + // add to 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 }); + + expect(me2.cart).toHaveLength(1); + expect(me2.cart[0].id).toBe('omg123'); + expect(me2.cart[0].quantity).toBe(1); + }); + + it('changes to adding when clicked', async () => { + const wrapper = mount( + + + + ); + 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/finished-application/frontend/__tests__/Cart.test.js b/finished-application/frontend/__tests__/Cart.test.js new file mode 100644 index 0000000..255183e --- /dev/null +++ b/finished-application/frontend/__tests__/Cart.test.js @@ -0,0 +1,46 @@ +import React from 'react'; +import { shallow, mount } from 'enzyme'; +import toJSON from 'enzyme-to-json'; +import mountOptions from '../lib/testUtils'; +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 } from '../components/User'; +import { LOCAL_STATE_QUERY } from '../components/Cart'; + +const mocks = [ + { + request: { query: CURRENT_USER_QUERY }, + result: { + data: { + me: { + ...fakeUser(), + cart: [fakeCartItem()], + }, + }, + }, + }, + { + request: { query: LOCAL_STATE_QUERY }, + result: { + data: { + cartOpen: true, + }, + }, + }, +]; + +describe('', () => { + it('renders', async () => { + const wrapper = mount( + + + + ); + await wait(); + wrapper.update(); + expect(toJSON(wrapper.find('header'))).toMatchSnapshot(); + expect(wrapper.find('CartItem')).toHaveLength(1); + }); +}); diff --git a/finished-application/frontend/__tests__/CartCount.test.js b/finished-application/frontend/__tests__/CartCount.test.js new file mode 100644 index 0000000..dcb9ca8 --- /dev/null +++ b/finished-application/frontend/__tests__/CartCount.test.js @@ -0,0 +1,21 @@ +import React from 'react'; +import { shallow, mount } from 'enzyme'; +import toJSON from 'enzyme-to-json'; +import CartCount from '../components/CartCount'; + +describe('', () => { + it('renders okay', () => { + shallow(); + }); + + it('matches snapshot', () => { + const wrapper = shallow(); + expect(toJSON(wrapper)).toMatchSnapshot(); + }); + it('updates via props', () => { + const wrapper = mount(); + 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 new file mode 100644 index 0000000..42dd39b --- /dev/null +++ b/finished-application/frontend/__tests__/CartItem.test.js @@ -0,0 +1,33 @@ +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('', () => { + it('renders and matches snapshot', () => { + const wrapper = shallow(); + expect(toJSON(wrapper)).toMatchSnapshot(); + }); + + it('renders a single quantity', () => { + const wrapper = shallow(); + const p = wrapper.find('p'); + expect(p.text()).toBe('$50 — 1 × $50 each'); + }); + + it('renders multiples', () => { + const wrapper = shallow(); + 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 new file mode 100644 index 0000000..56c3f10 --- /dev/null +++ b/finished-application/frontend/__tests__/CreateItem.test.js @@ -0,0 +1,132 @@ +import React from 'react'; +import { mount } from 'enzyme'; +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 +global.fetch = jest.fn().mockResolvedValue({ + json: () => ({ + secure_url: dogImage, + eager: [{ secure_url: dogImage }], + }), +}); + +describe('', () => { + it('renders and matches snapshot', () => { + const wrapper = mount( + + + + ); + const form = wrapper.find('form[data-test]'); + expect(toJSON(form)).toMatchSnapshot(); + }); + + it('uploads a file when changed', async () => { + const wrapper = mount( + + + + ); + 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); + expect(component.state.image).toEqual(dogImage); + expect(component.state.largeImage).toEqual(dogImage); + }); + + it('handles state updating', async () => { + const wrapper = mount( + + + + ); + + 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({ + title: 'Testing', + description: 'This is a really nice item', + image: '', + largeImage: '', + price: 50000, + }); + }); + + it('creates an item when form is submitted', async () => { + const item = fakeItem(); + const mocks = [ + { + request: { + query: CREATE_ITEM_MUTATION, + variables: { + title: item.title, + description: item.description, + image: '', + largeImage: '', + price: item.price, + }, + }, + result: { + data: { + createItem: { + ...fakeItem(), + __typeName: 'Item', + }, + }, + }, + }, + ]; + + const wrapper = mount( + + + + ); + + 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', + }, + }); + + 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' } }); + }); +}); diff --git a/finished-application/frontend/__tests__/EditUser.test.js b/finished-application/frontend/__tests__/EditUser.test.js new file mode 100644 index 0000000..a98cbb5 --- /dev/null +++ b/finished-application/frontend/__tests__/EditUser.test.js @@ -0,0 +1,75 @@ +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('', () => { + it('renders', async () => { + const wrapper = mount( + + + + ); + await wait(); + wrapper.update(); + expect(toJSON(wrapper.find('form'))).toMatchSnapshot(); + }); + + it('displays changes', async () => { + const wrapper = mount( + + + + ); + 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( + + + + ); + 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 new file mode 100644 index 0000000..129efa9 --- /dev/null +++ b/finished-application/frontend/__tests__/Item.test.js @@ -0,0 +1,22 @@ +/* eslint-env jest */ + +import React from 'react'; +import Enzyme, { shallow, mount } from 'enzyme'; +import toJSON from 'enzyme-to-json'; +import ItemComponent from '../components/Item'; + +const fakeItem = { + id: 'ABC123', + title: 'A Cool Item', + price: 5000, + description: 'This item is really cool!', + image: 'dog.jpg', + largeImage: 'largedog.jpg', +}; + +describe('', () => { + it('Renders and matches snapshot', () => { + const wrapper = shallow(); + expect(toJSON(wrapper)).toMatchSnapshot(); + }); +}); diff --git a/finished-application/frontend/__tests__/Nav.test.js b/finished-application/frontend/__tests__/Nav.test.js new file mode 100644 index 0000000..5c61c56 --- /dev/null +++ b/finished-application/frontend/__tests__/Nav.test.js @@ -0,0 +1,66 @@ +import React from 'react'; +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 } from '../lib/testUtils'; +import { CURRENT_USER_QUERY } from '../components/User'; + +// Mock the router +Router.router = { push() {} }; + +const loggedOutMocks = [ + { + request: { query: CURRENT_USER_QUERY }, + delay: 0, + result: { + data: { + me: null, + }, + }, + }, +]; + +const loggedInMocks = [ + { + request: { query: CURRENT_USER_QUERY }, + result: { + data: { + what: 'yah', + me: { + ...fakeUser(), + orders: [], + cart: [], + }, + }, + }, + }, +]; + +describe('', () => { + it('Renders minimal nav when logged out', () => { + const wrapper = mount( + +