Merge branch 'master' into randyridge/our

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');
+  });
+});