starter files

32 files changed, 2022 insertions, 0 deletions

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('<AddtoCart/>', () => {
+  it('renders and matches snapshot', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <AddToCart id="abc123" />
+      </MockedProvider>
+    );
+    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(<RemoveFromCart id="abc123" />);
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <ApolloConsumer>
+          {client => {
+            apolloClient = client;
+            return <AddToCart id="abc123" />;
+          }}
+        </ApolloConsumer>
+      </MockedProvider>
+    );
+    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(
+      <MockedProvider mocks={mocks}>
+        <AddToCart id="abc123" />
+      </MockedProvider>
+    );
+    await wait();
+    wrapper.update();
+    expect(wrapper.text()).toContain('🛒 Add To Cart');
+    wrapper.find('button').simulate('click');
+    expect(wrapper.text()).toContain('🛒 Adding To Cart');
+  });
+});
diff --git a/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('<Cart/>', () => {
+  it('renders', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <Cart />
+      </MockedProvider>
+    );
+    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('<CartCount></CartCount>', () => {
+  it('renders okay', () => {
+    shallow(<CartCount count={10} />);
+  });
+
+  it('matches snapshot', () => {
+    const wrapper = shallow(<CartCount count={10} />);
+    expect(toJSON(wrapper)).toMatchSnapshot();
+  });
+  it('updates via props', () => {
+    const wrapper = mount(<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
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('<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
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('<Createitem/>', () => {
+  it('renders and matches snapshot', () => {
+    const wrapper = mount(
+      <MockedProvider>
+        <CreateItem />
+      </MockedProvider>
+    );
+    const form = wrapper.find('form[data-test]');
+    expect(toJSON(form)).toMatchSnapshot();
+  });
+
+  it('uploads a file when changed', async () => {
+    const wrapper = mount(
+      <MockedProvider>
+        <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);
+    expect(component.state.image).toEqual(dogImage);
+    expect(component.state.largeImage).toEqual(dogImage);
+  });
+
+  it('handles state updating', async () => {
+    const wrapper = mount(
+      <MockedProvider>
+        <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({
+      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(
+      <MockedProvider mocks={mocks}>
+        <CreateItem />
+      </MockedProvider>
+    );
+
+    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('<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
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('<Item/>', () => {
+  it('Renders and matches snapshot', () => {
+    const wrapper = shallow(<ItemComponent item={fakeItem} />);
+    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('<Nav></Nav>', () => {
+  it('Renders minimal nav when logged out', () => {
+    const wrapper = mount(
+      <MockedProvider mocks={loggedOutMocks}>
+        <Nav />
+      </MockedProvider>
+    );
+    const nav = wrapper.find('ul[data-test="nav"]');
+    expect(toJSON(nav)).toMatchSnapshot();
+  });
+
+  it('renders full nav when logged in', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={loggedInMocks}>
+        <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);
+  });
+});
diff --git a/finished-application/frontend/__tests__/Order.test.js b/finished-application/frontend/__tests__/Order.test.js
new file mode 100644
index 0000000..f3a4f06
--- /dev/null
+++ b/finished-application/frontend/__tests__/Order.test.js
@@ -0,0 +1,41 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import toJSON from 'enzyme-to-json';
+import wait from 'waait';
+import { MockedProvider } from 'react-apollo/test-utils';
+import Order, { SINGLE_ORDER_QUERY } from '../components/Order';
+import { fakeOrder } from '../lib/testUtils';
+
+const mocks = [
+  {
+    request: { query: SINGLE_ORDER_QUERY, variables: { id: '123' } },
+    result: {
+      data: {
+        order: fakeOrder(),
+      },
+    },
+  },
+];
+
+describe('<Order/>', () => {
+  it('Renders loading state', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <Order id="123" />
+      </MockedProvider>
+    );
+    expect(wrapper.text()).toContain('Loading...');
+  });
+
+  it('Renders the order', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <Order id="123" />
+      </MockedProvider>
+    );
+    await wait(50);
+    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
new file mode 100644
index 0000000..29a57f9
--- /dev/null
+++ b/finished-application/frontend/__tests__/Pagination.test.js
@@ -0,0 +1,94 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import toJSON from 'enzyme-to-json';
+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() {} };
+
+function makeMocksFor(length) {
+  return [
+    {
+      request: { query: PAGINATION_QUERY, variables: { skip: 0, first: 4 } },
+      result: {
+        data: {
+          itemsConnection: {
+            __typename: 'aggregate',
+            aggregate: {
+              count: length,
+              __typename: 'count',
+            },
+          },
+        },
+      },
+    },
+  ];
+}
+
+describe('<Pagination/>', () => {
+  it('displays loading message', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={makeMocksFor(1)}>
+        <Pagination page={1} />
+      </MockedProvider>
+    );
+    await wait();
+    wrapper.update();
+    expect(toJSON(wrapper.find('div[data-test="pagination"]'))).toMatchSnapshot();
+  });
+
+  it('renders pagination for 18 items', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={makeMocksFor(18)}>
+        <Pagination page={1} />
+      </MockedProvider>
+    );
+    await wait();
+    wrapper.update();
+    expect(wrapper.find('.totalPages').text()).toEqual('5');
+  });
+
+  it('disables prev button on first page', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={makeMocksFor(18)}>
+        <Pagination page={1} />
+      </MockedProvider>
+    );
+    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)}>
+        <Pagination page={5} />
+      </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(true);
+  });
+
+  it('enables all buttons on a middle page', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={makeMocksFor(18)}>
+        <Pagination page={2} />
+      </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
new file mode 100644
index 0000000..f516ea3
--- /dev/null
+++ b/finished-application/frontend/__tests__/PleaseSignIn.test.js
@@ -0,0 +1,80 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import wait from 'waait';
+import PleaseSignIn from '../components/PleaseSignIn';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { fakeUser } from '../lib/testUtils';
+import { CURRENT_USER_QUERY } from '../components/User';
+
+const notSignedInMocks = [
+  {
+    request: { query: CURRENT_USER_QUERY },
+    result: {
+      data: {
+        me: null,
+      },
+    },
+  },
+];
+
+const signedInMocks = [
+  {
+    request: { query: CURRENT_USER_QUERY },
+    result: {
+      data: {
+        me: {
+          ...fakeUser(),
+          permissions: ['VIEW_HEY'],
+        },
+      },
+    },
+  },
+];
+// some dummy child component
+const Hey = () => <p>Hey!</p>;
+
+describe('<PleaseSignIn />', () => {
+  it('renders sign in dialog to logged out users', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={notSignedInMocks}>
+        <PleaseSignIn allowedPermissions={[]}>
+          <Hey />
+        </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();
+  });
+
+  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 () => {
+    const wrapper = mount(
+      <MockedProvider mocks={signedInMocks}>
+        <PleaseSignIn allowedPermissions={['ADMIN']}>
+          <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();
+  });
+});
diff --git a/finished-application/frontend/__tests__/RemoveFromCart.test.js b/finished-application/frontend/__tests__/RemoveFromCart.test.js
new file mode 100644
index 0000000..34229a5
--- /dev/null
+++ b/finished-application/frontend/__tests__/RemoveFromCart.test.js
@@ -0,0 +1,78 @@
+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 RemoveFromCart, { REMOVE_FROM_CART_MUTATION } from '../components/RemoveFromCart';
+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: [fakeCartItem({ id: 'abc123' })],
+          orders: [],
+        },
+      },
+    },
+  },
+  {
+    request: {
+      // This is the mutation
+      query: REMOVE_FROM_CART_MUTATION,
+      variables: { id: 'abc123' },
+    },
+    result: {
+      data: {
+        removeFromCart: {
+          __typename: 'CartItem',
+          id: 'abc123',
+        },
+      },
+    },
+  },
+];
+
+describe('<RemoveFromCart/>', () => {
+  it('renders and matches snapshot', () => {
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <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
+    let apolloClient;
+    // const wrapper = mountWithApollo(<RemoveFromCart id="abc123" />);
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <ApolloConsumer>
+          {client => {
+            apolloClient = client;
+            return <RemoveFromCart id="abc123" />;
+          }}
+        </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
+    wrapper.find('button').simulate('click');
+    await wait();
+    const { me: me2 } = apolloClient.readQuery({ query: CURRENT_USER_QUERY });
+    expect(me2.cart).toHaveLength(0);
+  });
+});
diff --git a/finished-application/frontend/__tests__/ResetRequest.test.js b/finished-application/frontend/__tests__/ResetRequest.test.js
new file mode 100644
index 0000000..22a9508
--- /dev/null
+++ b/finished-application/frontend/__tests__/ResetRequest.test.js
@@ -0,0 +1,54 @@
+import { mount } from 'enzyme';
+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';
+
+const mocks = [
+  {
+    request: {
+      query: REQUEST_RESET_MUTATION,
+      variables: {
+        email: 'wesbos@gmail.com',
+      },
+    },
+    result: {
+      data: {
+        requestReset: { id: 'abc123', __typename: 'User' },
+      },
+    },
+  },
+];
+
+describe('<ResetRequest/>', () => {
+  it('renders and matches snapshot', async () => {
+    const wrapper = mount(
+      <MockedProvider>
+        <ResetRequest />
+      </MockedProvider>
+    );
+    const form = wrapper.find("form[data-test='ResetRequest']");
+    expect(toJSON(form)).toMatchSnapshot();
+  });
+
+  it('calls the mutation', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <ResetRequest />
+      </MockedProvider>
+    );
+
+    wrapper.find('input').simulate('change', {
+      target: { value: 'wesbos@gmail.com' },
+    });
+
+    // submit the form
+    const form = wrapper.find('form');
+    console.log(form);
+    form.simulate('submit');
+
+    await wait();
+    wrapper.update();
+    expect(wrapper.find('p').text()).toContain('Success! Check Your Email!');
+  });
+});
diff --git a/finished-application/frontend/__tests__/Signup.test.js b/finished-application/frontend/__tests__/Signup.test.js
new file mode 100644
index 0000000..2a668a6
--- /dev/null
+++ b/finished-application/frontend/__tests__/Signup.test.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import toJSON from 'enzyme-to-json';
+import wait from 'waait';
+import { ApolloConsumer } from 'react-apollo';
+import { MockedProvider } from 'react-apollo/test-utils';
+import Signup, { SIGNUP_MUTATION } from '../components/Signup';
+import { fakeUser } from '../lib/testUtils';
+import { CURRENT_USER_QUERY } from '../components/User';
+
+function type(wrapper, name, value) {
+  wrapper.find(`input[name="${name}"]`).simulate('change', {
+    target: {
+      name,
+      value,
+    },
+  });
+}
+const me = fakeUser();
+const mocks = [
+  {
+    request: {
+      query: SIGNUP_MUTATION,
+      variables: {
+        email: me.email,
+        name: me.name,
+        password: 'wes',
+      },
+    },
+    result: {
+      data: {
+        signup: {
+          __typename: 'User',
+          id: 'abc123',
+          email: me.email,
+          name: me.name,
+        },
+      },
+    },
+  },
+  {
+    request: { query: CURRENT_USER_QUERY },
+    result: {
+      data: {
+        me: {
+          __typename: 'User',
+          ...me,
+          cart: [],
+        },
+      },
+    },
+  },
+];
+
+describe('<Signup/>', () => {
+  it('renders and matches snapshot', () => {
+    const wrapper = mount(
+      <MockedProvider>
+        <Signup />
+      </MockedProvider>
+    );
+    expect(toJSON(wrapper.find('form'))).toMatchSnapshot();
+  });
+
+  it('calls mutation with correct data', async () => {
+    let apolloClient;
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <ApolloConsumer>
+          {client => {
+            apolloClient = client;
+            return <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');
+
+    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
new file mode 100644
index 0000000..aeb8554
--- /dev/null
+++ b/finished-application/frontend/__tests__/SingleItem.test.js
@@ -0,0 +1,67 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import wait from 'waait';
+import toJSON from 'enzyme-to-json';
+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()],
+};
+
+describe('<SingleItem/>', () => {
+  it('Renders with Proper Data', async () => {
+    const mocks = [
+      {
+        request: { query: SINGLE_ITEM_QUERY, variables: { id: '123' } },
+        result: { data },
+      },
+      {
+        request: { query: CURRENT_USER_QUERY },
+        result: { data: { me: fakeUser() } },
+      },
+    ];
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <SingleItem id="123" />
+      </MockedProvider>
+    );
+    // Check for loading state
+    expect(wrapper.text()).toContain('Loading...');
+
+    // wait for response and refresh
+    await wait(55);
+    wrapper.update();
+    // Grab the piece we want
+    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 () => {
+    const mocks = [
+      {
+        request: { query: SINGLE_ITEM_QUERY, variables: { id: '123' } },
+        delay: 50,
+        // we can return data and an error
+        result: { data, errors: [{ message: 'Item not found!' }] },
+        // or just an error!
+        // error: new Error('offline!'),
+      },
+    ];
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <SingleItem id="123" />
+      </MockedProvider>
+    );
+
+    // wait for response
+    await wait(55);
+    wrapper.update();
+
+    const Item = wrapper.find('[data-test="graphql-error"]');
+    expect(toJSON(Item)).toMatchSnapshot();
+  });
+});
diff --git a/finished-application/frontend/__tests__/TakeMyMoney.test.js b/finished-application/frontend/__tests__/TakeMyMoney.test.js
new file mode 100644
index 0000000..1c41410
--- /dev/null
+++ b/finished-application/frontend/__tests__/TakeMyMoney.test.js
@@ -0,0 +1,98 @@
+import { mount } from 'enzyme';
+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 { CURRENT_USER_QUERY } from '../components/User';
+
+Router.router = { push() {} };
+
+const mocks = [
+  {
+    request: { query: CURRENT_USER_QUERY },
+    result: {
+      data: {
+        me: {
+          ...fakeUser(),
+          cart: [fakeCartItem()],
+        },
+      },
+    },
+  },
+];
+describe('<TakeMyMoney />', () => {
+  it('renders', 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' } } });
+
+    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' } });
+  });
+
+  it('turns the progress bar on', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <TakeMyMoney />
+      </MockedProvider>
+    );
+    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');
+    expect(NProgress.start).toHaveBeenCalled();
+  });
+
+  it('routes to the order page when completed', async () => {
+    // Mount the wrapper
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <TakeMyMoney />
+      </MockedProvider>
+    );
+    await wait();
+    wrapper.update();
+
+    // Spy on Router Push
+    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');
+    await wait();
+    expect(Router.router.push).toHaveBeenCalledWith({
+      pathname: '/order',
+      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
new file mode 100644
index 0000000..e3f8229
--- /dev/null
+++ b/finished-application/frontend/__tests__/__snapshots__/AddToCart.test.js.snap
@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<AddtoCart/> renders and matches snapshot 1`] = `
+<button
+  disabled={false}
+  onClick={[Function]}
+>
+  🛒 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
new file mode 100644
index 0000000..9aeedfd
--- /dev/null
+++ b/finished-application/frontend/__tests__/__snapshots__/Cart.test.js.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Cart/> renders 1`] = `
+<header>
+  <styled.button
+    onClick={[Function]}
+    title="close"
+  >
+    <button
+      className="sc-EHOje jytiuo"
+      onClick={[Function]}
+      title="close"
+    >
+      ×
+    </button>
+  </styled.button>
+  <styled.h3>
+    <h3
+      className="sc-ifAKCX imryuh"
+    >
+      Miss Coleman Berge
+      's Cart.
+    </h3>
+  </styled.h3>
+  <p>
+    You have 
+    1
+     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
new file mode 100644
index 0000000..224141b
--- /dev/null
+++ b/finished-application/frontend/__tests__/__snapshots__/CartCount.test.js.snap
@@ -0,0 +1,205 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CartCount></CartCount> matches snapshot 1`] = `
+<styled.span>
+  <TransitionGroup
+    childFactory={[Function]}
+    component="div"
+  >
+    <CSSTransition
+      className="count"
+      classNames="count"
+      key="10"
+      timeout={
+        Object {
+          "enter": 400,
+          "exit": 400,
+        }
+      }
+      unmountOnExit={true}
+    >
+      <styled.div>
+        10
+      </styled.div>
+    </CSSTransition>
+  </TransitionGroup>
+</styled.span>
+`;
+
+exports[`<CartCount></CartCount> updates via props 1`] = `
+<CartCount
+  count={50}
+>
+  <styled.span>
+    <span
+      className="sc-bwzfXH fWZfOZ"
+    >
+      <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>
+`;
+
+exports[`<CartCount></CartCount> updates via props 2`] = `
+<CartCount
+  count={10}
+>
+  <styled.span>
+    <span
+      className="sc-bwzfXH fWZfOZ"
+    >
+      <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>
+`;
diff --git a/finished-application/frontend/__tests__/__snapshots__/CartItem.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/CartItem.test.js.snap
new file mode 100644
index 0000000..b8f5ad3
--- /dev/null
+++ b/finished-application/frontend/__tests__/__snapshots__/CartItem.test.js.snap
@@ -0,0 +1,33 @@
+// 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
new file mode 100644
index 0000000..89dbcd2
--- /dev/null
+++ b/finished-application/frontend/__tests__/__snapshots__/CreateItem.test.js.snap
@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Createitem/> renders and matches snapshot 1`] = `
+<form
+  className="sc-bwzfXH ikCwBB"
+  data-test={true}
+  onSubmit={[Function]}
+>
+  <h2>
+    Sell an Item.
+  </h2>
+  <DisplayError
+    error={Object {}}
+  />
+  <fieldset
+    aria-busy={false}
+    disabled={false}
+  >
+    <label
+      htmlFor="file"
+    >
+      Image
+      <input
+        accept=".png, .jpg, .jpeg"
+        id="file"
+        onChange={[Function]}
+        required={true}
+        type="file"
+      />
+    </label>
+    <label
+      htmlFor="title"
+    >
+      Title
+      <input
+        id="title"
+        name="title"
+        onChange={[Function]}
+        placeholder="Title"
+        required={true}
+        type="text"
+        value=""
+      />
+    </label>
+    <label
+      htmlFor="price"
+    >
+      Price 
+      0
+      <input
+        id="price"
+        min="0"
+        name="price"
+        onChange={[Function]}
+        required={true}
+        type="number"
+        value={0}
+      />
+    </label>
+    <textarea
+      id="description"
+      name="description"
+      onChange={[Function]}
+      placeholder="The desc for this item"
+      required={true}
+      value=""
+    />
+    <button
+      type="submit"
+    >
+      Submit
+    </button>
+  </fieldset>
+</form>
+`;
diff --git a/finished-application/frontend/__tests__/__snapshots__/EditUser.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/EditUser.test.js.snap
new file mode 100644
index 0000000..bbb672d
--- /dev/null
+++ b/finished-application/frontend/__tests__/__snapshots__/EditUser.test.js.snap
@@ -0,0 +1,47 @@
+// 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
new file mode 100644
index 0000000..930c7a9
--- /dev/null
+++ b/finished-application/frontend/__tests__/__snapshots__/Item.test.js.snap
@@ -0,0 +1,58 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Item/> Renders and matches snapshot 1`] = `
+<styled.div
+  key="ABC123"
+>
+  <img
+    alt="A Cool Item"
+    src="dog.jpg"
+  />
+  <styled.h3>
+    <Link
+      href={
+        Object {
+          "pathname": "/item",
+          "query": Object {
+            "id": "ABC123",
+          },
+        }
+      }
+    >
+      <a>
+        A Cool Item
+      </a>
+    </Link>
+  </styled.h3>
+  <styled.span>
+    $50
+  </styled.span>
+  <p>
+    This item is really cool!
+  </p>
+  <div
+    className="buttonList"
+  >
+    <Link
+      href={
+        Object {
+          "pathname": "/update",
+          "query": Object {
+            "id": "ABC123",
+          },
+        }
+      }
+    >
+      <a>
+        Edit ✏️
+      </a>
+    </Link>
+    <AddToCart
+      id="ABC123"
+    />
+    <DeleteItem
+      id="ABC123"
+    />
+  </div>
+</styled.div>
+`;
diff --git a/finished-application/frontend/__tests__/__snapshots__/Nav.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/Nav.test.js.snap
new file mode 100644
index 0000000..354fbc1
--- /dev/null
+++ b/finished-application/frontend/__tests__/__snapshots__/Nav.test.js.snap
@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Nav></Nav> Renders minimal nav when logged out 1`] = `
+<ul
+  className="sc-dnqmqq kxZizK"
+  data-test="nav"
+>
+  <Link
+    href="/items"
+  >
+    <a
+      href="/items"
+      onClick={[Function]}
+    >
+      Shop
+    </a>
+  </Link>
+  <Link
+    href="/sell"
+  >
+    <a
+      href="/sell"
+      onClick={[Function]}
+    >
+      Sell
+    </a>
+  </Link>
+  <Link
+    href="/signup"
+  >
+    <a
+      href="/signup"
+      onClick={[Function]}
+    >
+      Sign In
+    </a>
+  </Link>
+</ul>
+`;
diff --git a/finished-application/frontend/__tests__/__snapshots__/Order.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/Order.test.js.snap
new file mode 100644
index 0000000..8e76546
--- /dev/null
+++ b/finished-application/frontend/__tests__/__snapshots__/Order.test.js.snap
@@ -0,0 +1,130 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Order/> Renders the order 1`] = `
+<div
+  className="sc-bwzfXH wJijb"
+  data-test="order"
+>
+  <SideEffect(Head)>
+    <Head />
+  </SideEffect(Head)>
+  <p>
+    <span>
+      Order Id:
+    </span>
+    <span>
+      ord123
+    </span>
+  </p>
+  <p>
+    <span>
+      Charge
+    </span>
+    <span>
+      ch_123
+    </span>
+  </p>
+  <p>
+    <span>
+      Date
+    </span>
+    <span>
+      March 90, 2018 8:00 A
+    </span>
+  </p>
+  <p>
+    <span>
+      Order Total
+    </span>
+    <span>
+      $400
+    </span>
+  </p>
+  <p>
+    <span>
+      Item Count
+    </span>
+    <span>
+      2
+    </span>
+  </p>
+  <div
+    className="items"
+  >
+    <div
+      className="order-item"
+      key="3a430a73-c9e9-4bcc-b46a-41618965ffea"
+    >
+      <img
+        alt="soluta non omnis consequatur enim quia autem"
+        src="reprehenderit.jpg"
+      />
+      <div
+        className="item-details"
+      >
+        <h2>
+           
+          soluta non omnis consequatur enim quia autem
+           
+        </h2>
+        <p>
+          Qty: 
+          1
+        </p>
+        <p>
+          Each: 
+          $42.34
+        </p>
+        <p>
+          Subtotal: 
+          $42.34
+        </p>
+        <p>
+          SubTotal: 
+          et modi tenetur amet modi reprehenderit omnis
+        </p>
+        <p>
+          et modi tenetur amet modi reprehenderit omnis
+        </p>
+      </div>
+    </div>
+    <div
+      className="order-item"
+      key="2393e090-592f-4d03-b808-c9d81098deec"
+    >
+      <img
+        alt="quia sed exercitationem omnis laborum exercitationem est"
+        src="sint.jpg"
+      />
+      <div
+        className="item-details"
+      >
+        <h2>
+           
+          quia sed exercitationem omnis laborum exercitationem est
+           
+        </h2>
+        <p>
+          Qty: 
+          1
+        </p>
+        <p>
+          Each: 
+          $42.34
+        </p>
+        <p>
+          Subtotal: 
+          $42.34
+        </p>
+        <p>
+          SubTotal: 
+          sapiente laudantium molestias assumenda quasi adipisci mollitia
+        </p>
+        <p>
+          sapiente laudantium molestias assumenda quasi adipisci mollitia
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/finished-application/frontend/__tests__/__snapshots__/Pagination.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/Pagination.test.js.snap
new file mode 100644
index 0000000..c757968
--- /dev/null
+++ b/finished-application/frontend/__tests__/__snapshots__/Pagination.test.js.snap
@@ -0,0 +1,71 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Pagination/> displays loading message 1`] = `
+<div
+  className="sc-bdVaJa ijYKGd"
+  data-test="pagination"
+>
+  <SideEffect(Head)>
+    <Head />
+  </SideEffect(Head)>
+  <Link
+    href={
+      Object {
+        "pathname": "items",
+        "query": Object {
+          "page": 0,
+        },
+      }
+    }
+    prefetch={true}
+  >
+    <a
+      aria-disabled={true}
+      className="prev"
+      href="items?page=0"
+      onClick={[Function]}
+    >
+      ←Prev
+    </a>
+  </Link>
+  <p>
+    Page 
+    <strong>
+      1
+       
+    </strong>
+     of 
+    <strong
+      className="totalPages"
+    >
+      1
+    </strong>
+  </p>
+  <p>
+    <strong>
+      1
+    </strong>
+     Items Total
+  </p>
+  <Link
+    href={
+      Object {
+        "pathname": "items",
+        "query": Object {
+          "page": 2,
+        },
+      }
+    }
+    prefetch={true}
+  >
+    <a
+      aria-disabled={true}
+      className="next"
+      href="items?page=2"
+      onClick={[Function]}
+    >
+      Next →
+    </a>
+  </Link>
+</div>
+`;
diff --git a/finished-application/frontend/__tests__/__snapshots__/RemoveFromCart.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/RemoveFromCart.test.js.snap
new file mode 100644
index 0000000..a80b678
--- /dev/null
+++ b/finished-application/frontend/__tests__/__snapshots__/RemoveFromCart.test.js.snap
@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<RemoveFromCart/> renders and matches snapshot 1`] = `
+<button
+  className="sc-bdVaJa fXnNqM"
+  disabled={false}
+  onClick={[Function]}
+  title="Remove From Cart"
+>
+  ×
+</button>
+`;
diff --git a/finished-application/frontend/__tests__/__snapshots__/ResetRequest.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/ResetRequest.test.js.snap
new file mode 100644
index 0000000..a6a0375
--- /dev/null
+++ b/finished-application/frontend/__tests__/__snapshots__/ResetRequest.test.js.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<ResetRequest/> renders and matches snapshot 1`] = `
+<form
+  className="sc-bdVaJa LHejR"
+  data-test="ResetRequest"
+  onSubmit={[Function]}
+>
+  <DisplayError
+    error={Object {}}
+  />
+  <fieldset
+    aria-busy={false}
+    disabled={false}
+  >
+    <label
+      htmlFor="email"
+    >
+      Email
+      <input
+        name="email"
+        onChange={[Function]}
+        placeholder="email"
+        type="text"
+        value=""
+      />
+    </label>
+    <button
+      type="submit"
+    >
+      Request Reset!
+    </button>
+  </fieldset>
+</form>
+`;
diff --git a/finished-application/frontend/__tests__/__snapshots__/Signup.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/Signup.test.js.snap
new file mode 100644
index 0000000..b3c057e
--- /dev/null
+++ b/finished-application/frontend/__tests__/__snapshots__/Signup.test.js.snap
@@ -0,0 +1,64 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Signup/> renders and matches snapshot 1`] = `
+<form
+  className="sc-bdVaJa LHejR"
+  method="post"
+  onSubmit={[Function]}
+>
+  <fieldset
+    aria-busy={false}
+    disabled={false}
+  >
+    <DisplayError
+      error={Object {}}
+    />
+    <h2>
+      Sign Up for an Account
+    </h2>
+    <label
+      htmlFor="email"
+    >
+      Email
+      <input
+        name="email"
+        onChange={[Function]}
+        placeholder="email"
+        type="text"
+        value=""
+      />
+    </label>
+    <label
+      htmlFor="name"
+    >
+      Name
+      <input
+        name="name"
+        onChange={[Function]}
+        placeholder="name"
+        type="text"
+        value=""
+      />
+    </label>
+    <label
+      htmlFor="signupPassword"
+    >
+      Password
+      <input
+        className="password"
+        id="signupPassword"
+        name="password"
+        onChange={[Function]}
+        placeholder="password"
+        type="password"
+        value=""
+      />
+    </label>
+    <button
+      type="submit"
+    >
+      Submit
+    </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
new file mode 100644
index 0000000..28e9174
--- /dev/null
+++ b/finished-application/frontend/__tests__/__snapshots__/SingleItem.test.js.snap
@@ -0,0 +1,32 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<SingleItem/> Errors with a not found Item 1`] = `
+<p
+  data-test="graphql-error"
+>
+  <strong>
+    Shoot!
+  </strong>
+  Item not found!
+</p>
+`;
+
+exports[`<SingleItem/> Renders with Proper Data 1`] = `
+<h2>
+  Viewing 
+  dogs are best
+</h2>
+`;
+
+exports[`<SingleItem/> Renders with Proper Data 2`] = `
+<img
+  alt="dogs are best"
+  src="dog.jpg"
+/>
+`;
+
+exports[`<SingleItem/> Renders with Proper Data 3`] = `
+<p>
+  dogs
+</p>
+`;
diff --git a/finished-application/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap b/finished-application/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap
new file mode 100644
index 0000000..00863d3
--- /dev/null
+++ b/finished-application/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TakeMyMoney /> renders 1`] = `
+<ReactStripeCheckout
+  ComponentClass="span"
+  amount={15000}
+  className="StripeCheckout"
+  currency="USD"
+  description="Order of 3 Items From Sick Fits"
+  email="Delmer.Smith@yahoo.com"
+  image="dog-small.jpg"
+  label="Pay With Card"
+  locale="auto"
+  name="Sick Fits Haul"
+  reconfigureOnUpdate={false}
+  stripeKey="pk_lclTtThFp8CnO3QtEZSd8HA9mFUps"
+  token={[Function]}
+  triggerEvent="onClick"
+>
+  <button
+    className="StripeCheckout"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onMouseDown={[Function]}
+    onMouseOut={[Function]}
+    onMouseUp={[Function]}
+    style={
+      Object {
+        "background": "linear-gradient(#28a0e5,#015e94)",
+        "border": 0,
+        "borderRadius": 5,
+        "boxShadow": "0 1px 0 rgba(0,0,0,0.2)",
+        "cursor": "pointer",
+        "display": "inline-block",
+        "overflow": "hidden",
+        "padding": 1,
+        "textDecoration": "none",
+        "userSelect": "none",
+        "visibility": "visible",
+      }
+    }
+  >
+    <span
+      style={
+        Object {
+          "backgroundImage": "linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4)",
+          "borderRadius": 4,
+          "boxShadow": "inset 0 1px 0 rgba(255,255,255,0.25)",
+          "color": "#fff",
+          "display": "block",
+          "fontFamily": "\\"Helvetica Neue\\",Helvetica,Arial,sans-serif",
+          "fontSize": 14,
+          "fontWeight": "bold",
+          "height": 30,
+          "lineHeight": "30px",
+          "padding": "0 12px",
+          "position": "relative",
+          "textShadow": "0 -1px 0 rgba(0,0,0,0.25)",
+        }
+      }
+    >
+      Pay With Card
+    </span>
+  </button>
+</ReactStripeCheckout>
+`;
diff --git a/finished-application/frontend/__tests__/formatMoney.test.js b/finished-application/frontend/__tests__/formatMoney.test.js
new file mode 100644
index 0000000..c5c79b6
--- /dev/null
+++ b/finished-application/frontend/__tests__/formatMoney.test.js
@@ -0,0 +1,21 @@
+import formatMoney from '../lib/formatMoney';
+
+describe('formatMoney', () => {
+  it('works with fractional dollars', () => {
+    expect(formatMoney(1)).toEqual('$0.01');
+    expect(formatMoney(10)).toEqual('$0.10');
+  });
+
+  it('leaves cents off for whole dollars', () => {
+    expect(formatMoney(5000)).toEqual('$50');
+    expect(formatMoney(100)).toEqual('$1');
+    expect(formatMoney(50000000)).toEqual('$500,000');
+  });
+
+  it('works with whole and fractional dollars', () => {
+    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');
+  });
+});