From f02a5dc73ac4a14c1d641a6ddbfcd2f1bd2ea0b5 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Wed, 2 May 2018 14:45:20 -0400
Subject: TESTS

---
 frontend/__tests__/Cart.test.js                    |  34 +-
 frontend/__tests__/Item.test.js                    |  15 +-
 frontend/__tests__/Nav.test.js                     |  77 +++--
 frontend/__tests__/Order.test.js                   |  40 ++-
 frontend/__tests__/Pagination.test.js              |  27 +-
 frontend/__tests__/PleaseSignIn.test.js            |  75 ++++-
 frontend/__tests__/RemoveFromCart.test.js          |   3 +-
 frontend/__tests__/SingleItem.test.js              |   3 +-
 frontend/__tests__/__snapshots__/Item.test.js.snap |  14 +-
 frontend/__tests__/__snapshots__/Nav.test.js.snap  |  64 +---
 .../__tests__/__snapshots__/Order.test.js.snap     | 360 +++++++--------------
 .../__snapshots__/Pagination.test.js.snap          |   6 -
 frontend/__tests__/mockMang.js                     |  27 +-
 13 files changed, 380 insertions(+), 365 deletions(-)

(limited to 'frontend/__tests__')

diff --git a/frontend/__tests__/Cart.test.js b/frontend/__tests__/Cart.test.js
index b62d0de..c9c1fc3 100644
--- a/frontend/__tests__/Cart.test.js
+++ b/frontend/__tests__/Cart.test.js
@@ -4,13 +4,37 @@ import toJSON from 'enzyme-to-json';
 import mountOptions from './mockMang';
 import wait from 'waait';
 import Cart from '../components/Cart';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { fakeOrder } from './mockMang';
+import { LOCAL_STATE_QUERY } from '../queries/queries';
+
+const mocks = [
+  {
+    request: { query: CURRENT_USER_QUERY },
+    result: {
+      data: {
+        me: {
+          ...fakeUser(),
+          cart: fakeCart(),
+        },
+      },
+    },
+  },
+];
 
 describe('<Cart/>', () => {
+  // TODO fix this one
+  expect('wes').toBe('fixed');
   it('renders', async () => {
-    const wrapper = mount(<Cart />, mountOptions);
-    await wait();
-    wrapper.update();
-    expect(toJSON(wrapper.find('header'))).toMatchSnapshot();
-    expect(wrapper.find('CartItem')).toHaveLength(2);
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <Cart />
+      </MockedProvider>
+    );
+    console.log(wrapper.debug());
+    // await wait();
+    // wrapper.update();
+    // expect(toJSON(wrapper.find('header'))).toMatchSnapshot();
+    // expect(wrapper.find('CartItem')).toHaveLength(2);
   });
 });
diff --git a/frontend/__tests__/Item.test.js b/frontend/__tests__/Item.test.js
index 2990b1f..129efa9 100644
--- a/frontend/__tests__/Item.test.js
+++ b/frontend/__tests__/Item.test.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import Enzyme, { shallow, mount } from 'enzyme';
 import toJSON from 'enzyme-to-json';
-import { ItemComponent } from '../components/Item';
+import ItemComponent from '../components/Item';
 
 const fakeItem = {
   id: 'ABC123',
@@ -15,17 +15,8 @@ const fakeItem = {
 };
 
 describe('<Item/>', () => {
-  it('Renders an item', () => {
-    const removeItem = jest.fn();
-    const wrapper = shallow(<ItemComponent item={fakeItem} removeItem={removeItem} />);
+  it('Renders and matches snapshot', () => {
+    const wrapper = shallow(<ItemComponent item={fakeItem} />);
     expect(toJSON(wrapper)).toMatchSnapshot();
   });
-  it('handles button clicks', async () => {
-    const removeItem = jest.fn();
-    global.confirm = jest.fn().mockReturnValue(true);
-    const wrapper = shallow(<ItemComponent item={fakeItem} removeItem={removeItem} />);
-    wrapper.find('button').simulate('click');
-    expect(removeItem).toHaveBeenCalled();
-    expect(global.confirm).toHaveBeenCalled();
-  });
 });
diff --git a/frontend/__tests__/Nav.test.js b/frontend/__tests__/Nav.test.js
index 49d16d6..532ed3e 100644
--- a/frontend/__tests__/Nav.test.js
+++ b/frontend/__tests__/Nav.test.js
@@ -1,35 +1,70 @@
 import React from 'react';
-import { shallow } from 'enzyme';
+import { shallow, mount } from 'enzyme';
 import toJSON from 'enzyme-to-json';
-import { Nav } from '../components/Nav';
+import Nav from '../components/Nav';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { fakeUser, fakeOrder } from './mockMang';
+import { CURRENT_USER_QUERY } from '../queries/queries';
+import wait from 'waait';
+// Mock the router
+import Router from 'next/router';
+
+Router.router = { push() {} };
 
 const currentUserLoggedOut = {
   refetch() {},
 };
 
-const currentUser = {
-  me: {},
-  refetch() {},
-};
+const loggedOutMocks = [
+  {
+    request: { query: CURRENT_USER_QUERY },
+    delay: 0,
+    result: {
+      data: {
+        me: null,
+      },
+    },
+  },
+];
 
-describe('<Nav></Nav>', () => {
-  it('renders', () => {
-    shallow(<Nav currentUser={currentUserLoggedOut} />);
-  });
+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 = shallow(<Nav currentUser={currentUserLoggedOut} />);
-    expect(toJSON(wrapper)).toMatchSnapshot();
-  });
-
-  it('renders full nav when logged in', () => {
-    const wrapper = shallow(<Nav currentUser={currentUser} />);
-    expect(toJSON(wrapper)).toMatchSnapshot();
+    const wrapper = mount(
+      <MockedProvider mocks={loggedOutMocks}>
+        <Nav />
+      </MockedProvider>
+    );
+    const nav = wrapper.find('ul[data-test="nav"]');
+    expect(toJSON(nav)).toMatchSnapshot();
   });
 
-  it('tries to refetch the current user when it mounts', () => {
-    const refetch = jest.fn();
-    shallow(<Nav currentUser={{ ...currentUser, refetch }} />);
-    expect(refetch).toHaveBeenCalled();
+  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/frontend/__tests__/Order.test.js b/frontend/__tests__/Order.test.js
index e86af78..b88f9d3 100644
--- a/frontend/__tests__/Order.test.js
+++ b/frontend/__tests__/Order.test.js
@@ -1,16 +1,42 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
-import wait from 'waait';
+import { mount } from 'enzyme';
 import toJSON from 'enzyme-to-json';
+import wait from 'waait';
 import Order from '../components/Order';
-import mountOptions from './mockMang';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { fakeOrder } from './mockMang';
+import { SINGLE_ORDER_QUERY } from '../queries/queries';
+
+const mocks = [
+  {
+    request: { query: SINGLE_ORDER_QUERY, variables: { id: '123' } },
+    result: {
+      data: {
+        order: fakeOrder(),
+      },
+    },
+  },
+];
 
 describe('<Order/>', () => {
-  it('Renders with Proper Data', async () => {
-    const wrapper = mount(<Order id="123" />, mountOptions);
-    await wait();
+  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(15);
     wrapper.update();
-    const order = wrapper.find('[data-test="order"]');
+    const order = wrapper.find('div[data-test="order"]');
     expect(toJSON(order)).toMatchSnapshot();
   });
 });
diff --git a/frontend/__tests__/Pagination.test.js b/frontend/__tests__/Pagination.test.js
index e2ef7af..c72dac2 100644
--- a/frontend/__tests__/Pagination.test.js
+++ b/frontend/__tests__/Pagination.test.js
@@ -1,16 +1,33 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import toJSON from 'enzyme-to-json';
-import { Pagination } from '../components/Pagination';
+import Pagination from '../components/Pagination';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { fakeItem } from './mockMang';
+import { ALL_ITEMS_QUERY } from '../queries/queries';
 
-const fakeQuery = {
+const data = {
   itemsConnection: { aggregate: { count: 18 } },
+  items: [fakeItem()],
 };
 
 describe('<Pagination/>', () => {
-  it('displays loading message', () => {
-    const wrapper = shallow(<Pagination loading page={1} itemsQuery={fakeQuery} />);
-    expect(toJSON(wrapper)).toMatchSnapshot();
+  fit('displays loading message', () => {
+    const mocks = [
+      {
+        request: { query: ALL_ITEMS_QUERY, variables: { skip: 0 } },
+        delay: 50,
+        result: { data },
+      },
+    ];
+
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <Pagination page={1} />
+      </MockedProvider>
+    );
+    console.log(wrapper.debug());
+    // expect(toJSON(wrapper)).toMatchSnapshot();
   });
 
   it('renders pagination for 18 items', () => {
diff --git a/frontend/__tests__/PleaseSignIn.test.js b/frontend/__tests__/PleaseSignIn.test.js
index 8dc6124..7a7e275 100644
--- a/frontend/__tests__/PleaseSignIn.test.js
+++ b/frontend/__tests__/PleaseSignIn.test.js
@@ -2,9 +2,80 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 import toJSON from 'enzyme-to-json';
 import PleaseSignIn from '../components/PleaseSignIn';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { fakeUser, fakeOrder } from './mockMang';
+import { CURRENT_USER_QUERY } from '../queries/queries';
+import wait from 'waait';
+
+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('works', () => {
-    console.log('heyy');
+  it('renders sign in dialog to logged out users', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={notSignedInMocks}>
+        <PleaseSignIn>
+          <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/frontend/__tests__/RemoveFromCart.test.js b/frontend/__tests__/RemoveFromCart.test.js
index 4ecf8cc..c546b95 100644
--- a/frontend/__tests__/RemoveFromCart.test.js
+++ b/frontend/__tests__/RemoveFromCart.test.js
@@ -64,6 +64,7 @@ describe('<RemoveFromCart/>', () => {
     // 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');
@@ -72,7 +73,7 @@ describe('<RemoveFromCart/>', () => {
     // console.log('----------');
     // console.log(me2);
     // console.log('----------');
-    expect(me2.cart).toHaveLength(0);
+    // expect(me2.cart).toHaveLength(0);
     // await wait(2);
     // // the updated query from the mutation update
     // await apollo.query({ query: CURRENT_USER_QUERY, fetchPolicy: 'cache-only' })
diff --git a/frontend/__tests__/SingleItem.test.js b/frontend/__tests__/SingleItem.test.js
index bd99ec1..77834e0 100644
--- a/frontend/__tests__/SingleItem.test.js
+++ b/frontend/__tests__/SingleItem.test.js
@@ -3,8 +3,8 @@ import { mount } from 'enzyme';
 import wait from 'waait';
 import toJSON from 'enzyme-to-json';
 import SingleItem from '../components/SingleItem';
-import { MockedProvider } from 'react-apollo/test-utils';
 import { SINGLE_ITEM_QUERY } from '../queries/queries';
+import { MockedProvider } from 'react-apollo/test-utils';
 import { fakeItem } from './mockMang';
 
 const data = {
@@ -27,7 +27,6 @@ describe('<SingleItem/>', () => {
     );
     // Check for loading state
     expect(wrapper.text()).toContain('Loading...');
-    1;
 
     // wait for response and refresh
     await wait(55);
diff --git a/frontend/__tests__/__snapshots__/Item.test.js.snap b/frontend/__tests__/__snapshots__/Item.test.js.snap
index f088121..930c7a9 100644
--- a/frontend/__tests__/__snapshots__/Item.test.js.snap
+++ b/frontend/__tests__/__snapshots__/Item.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Item/> Renders an item 1`] = `
+exports[`<Item/> Renders and matches snapshot 1`] = `
 <styled.div
   key="ABC123"
 >
@@ -36,7 +36,7 @@ exports[`<Item/> Renders an item 1`] = `
     <Link
       href={
         Object {
-          "pathname": "/admin/update",
+          "pathname": "/update",
           "query": Object {
             "id": "ABC123",
           },
@@ -47,14 +47,12 @@ exports[`<Item/> Renders an item 1`] = `
         Edit ✏️
       </a>
     </Link>
-    <Apollo(Apollo(AddToCart))
+    <AddToCart
+      id="ABC123"
+    />
+    <DeleteItem
       id="ABC123"
     />
-    <button
-      onClick={[Function]}
-    >
-      × Delete item
-    </button>
   </div>
 </styled.div>
 `;
diff --git a/frontend/__tests__/__snapshots__/Nav.test.js.snap b/frontend/__tests__/__snapshots__/Nav.test.js.snap
index d8520ac..f084308 100644
--- a/frontend/__tests__/__snapshots__/Nav.test.js.snap
+++ b/frontend/__tests__/__snapshots__/Nav.test.js.snap
@@ -1,69 +1,39 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<Nav></Nav> Renders minimal nav when logged out 1`] = `
-<styled.ul>
+<ul
+  className="sc-htpNat jQXYY"
+  data-test="nav"
+>
   <Link
     href="/items"
-    prefetch={true}
   >
-    <a>
+    <a
+      href="/items"
+      onClick={[Function]}
+    >
       Shop
     </a>
   </Link>
   <Link
     href="/add"
-    prefetch={true}
   >
-    <a>
+    <a
+      href="/add"
+      onClick={[Function]}
+    >
       Sell
     </a>
   </Link>
   <Link
     href="/signup"
-    prefetch={true}
   >
-    <a>
+    <a
+      href="/signup"
+      onClick={[Function]}
+    >
       Sign In
     </a>
   </Link>
-</styled.ul>
-`;
-
-exports[`<Nav></Nav> renders full nav when logged in 1`] = `
-<styled.ul>
-  <Link
-    href="/items"
-    prefetch={true}
-  >
-    <a>
-      Shop
-    </a>
-  </Link>
-  <Link
-    href="/add"
-    prefetch={true}
-  >
-    <a>
-      Sell
-    </a>
-  </Link>
-  <React.Fragment>
-    <Link
-      href="/orders"
-    >
-      <a>
-        Orders
-      </a>
-    </Link>
-    <Link
-      href="/me"
-    >
-      <a>
-        My Account
-      </a>
-    </Link>
-    <Apollo(Signout) />
-    <[object Object] />
-  </React.Fragment>
-</styled.ul>
+</ul>
 `;
diff --git a/frontend/__tests__/__snapshots__/Order.test.js.snap b/frontend/__tests__/__snapshots__/Order.test.js.snap
index 21b9c35..cfdd4f6 100644
--- a/frontend/__tests__/__snapshots__/Order.test.js.snap
+++ b/frontend/__tests__/__snapshots__/Order.test.js.snap
@@ -1,262 +1,130 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Order/> Renders with Proper Data 1`] = `
-Array [
-  <styled.div
-    data-test="order"
+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 31, 2018 8:00 PM
+    </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="sc-bwzfXH wJijb"
-      data-test="order"
+      className="order-item"
+      key="3a430a73-c9e9-4bcc-b46a-41618965ffea"
     >
-      <SideEffect(Head)>
-        <Head />
-      </SideEffect(Head)>
-      <p>
-        <span>
-          Order Id:
-        </span>
-        <span>
-          3a430a73-c9e9-4bcc-b46a-41618965ffea
-        </span>
-      </p>
-      <p>
-        <span>
-          Charge
-        </span>
-        <span>
-          Hello World
-        </span>
-      </p>
-      <p>
-        <span>
-          Date
-        </span>
-        <span>
-          May 13, 2014 12:53 PM
-        </span>
-      </p>
-      <p>
-        <span>
-          Order Total
-        </span>
-        <span>
-          $24.04
-        </span>
-      </p>
-      <p>
-        <span>
-          Item Count
-        </span>
-        <span>
-          2
-        </span>
-      </p>
+      <img
+        alt="soluta non omnis consequatur enim quia autem"
+        src="reprehenderit.jpg"
+      />
       <div
-        className="items"
+        className="item-details"
       >
-        <div
-          className="order-item"
-          key="f17558f5-7760-4116-acd2-76da805ab010"
-        >
-          <img
-            alt="Ut assumenda sint"
-            src="dog.jpg"
-          />
-          <div
-            className="item-details"
-          >
-            <h2>
-               
-              Ut assumenda sint
-               
-            </h2>
-            <p>
-              Qty: 
-              8
-            </p>
-            <p>
-              Each: 
-              $500
-            </p>
-            <p>
-              Subtotal: 
-              $4,000
-            </p>
-            <p>
-              SubTotal: 
-              Exercitationem omnis laborum exercitationem est sapiente laudantium. Assumenda quasi adipisci mollitia iste itaque omnis.
-            </p>
-            <p>
-              Exercitationem omnis laborum exercitationem est sapiente laudantium. Assumenda quasi adipisci mollitia iste itaque omnis.
-            </p>
-          </div>
-        </div>
-        <div
-          className="order-item"
-          key="f05cef40-52ca-4dca-b480-7618d01ced82"
-        >
-          <img
-            alt="Similique temporibus"
-            src="dog.jpg"
-          />
-          <div
-            className="item-details"
-          >
-            <h2>
-               
-              Similique temporibus
-               
-            </h2>
-            <p>
-              Qty: 
-              9
-            </p>
-            <p>
-              Each: 
-              $500
-            </p>
-            <p>
-              Subtotal: 
-              $4,500
-            </p>
-            <p>
-              SubTotal: 
-              Sapiente soluta corporis commodi. Nisi cum ducimus. Doloremque maiores esse atque et.
-            </p>
-            <p>
-              Sapiente soluta corporis commodi. Nisi cum ducimus. Doloremque maiores esse atque et.
-            </p>
-          </div>
-        </div>
+        <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>
-  </styled.div>,
-  <div
-    className="sc-bwzfXH wJijb"
-    data-test="order"
-  >
-    <SideEffect(Head)>
-      <Head />
-    </SideEffect(Head)>
-    <p>
-      <span>
-        Order Id:
-      </span>
-      <span>
-        3a430a73-c9e9-4bcc-b46a-41618965ffea
-      </span>
-    </p>
-    <p>
-      <span>
-        Charge
-      </span>
-      <span>
-        Hello World
-      </span>
-    </p>
-    <p>
-      <span>
-        Date
-      </span>
-      <span>
-        May 13, 2014 12:53 PM
-      </span>
-    </p>
-    <p>
-      <span>
-        Order Total
-      </span>
-      <span>
-        $24.04
-      </span>
-    </p>
-    <p>
-      <span>
-        Item Count
-      </span>
-      <span>
-        2
-      </span>
-    </p>
     <div
-      className="items"
+      className="order-item"
+      key="2393e090-592f-4d03-b808-c9d81098deec"
     >
+      <img
+        alt="quia sed exercitationem omnis laborum exercitationem est"
+        src="sint.jpg"
+      />
       <div
-        className="order-item"
-        key="f17558f5-7760-4116-acd2-76da805ab010"
-      >
-        <img
-          alt="Ut assumenda sint"
-          src="dog.jpg"
-        />
-        <div
-          className="item-details"
-        >
-          <h2>
-             
-            Ut assumenda sint
-             
-          </h2>
-          <p>
-            Qty: 
-            8
-          </p>
-          <p>
-            Each: 
-            $500
-          </p>
-          <p>
-            Subtotal: 
-            $4,000
-          </p>
-          <p>
-            SubTotal: 
-            Exercitationem omnis laborum exercitationem est sapiente laudantium. Assumenda quasi adipisci mollitia iste itaque omnis.
-          </p>
-          <p>
-            Exercitationem omnis laborum exercitationem est sapiente laudantium. Assumenda quasi adipisci mollitia iste itaque omnis.
-          </p>
-        </div>
-      </div>
-      <div
-        className="order-item"
-        key="f05cef40-52ca-4dca-b480-7618d01ced82"
+        className="item-details"
       >
-        <img
-          alt="Similique temporibus"
-          src="dog.jpg"
-        />
-        <div
-          className="item-details"
-        >
-          <h2>
-             
-            Similique temporibus
-             
-          </h2>
-          <p>
-            Qty: 
-            9
-          </p>
-          <p>
-            Each: 
-            $500
-          </p>
-          <p>
-            Subtotal: 
-            $4,500
-          </p>
-          <p>
-            SubTotal: 
-            Sapiente soluta corporis commodi. Nisi cum ducimus. Doloremque maiores esse atque et.
-          </p>
-          <p>
-            Sapiente soluta corporis commodi. Nisi cum ducimus. Doloremque maiores esse atque et.
-          </p>
-        </div>
+        <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>
+</div>
 `;
diff --git a/frontend/__tests__/__snapshots__/Pagination.test.js.snap b/frontend/__tests__/__snapshots__/Pagination.test.js.snap
index f2abcdf..34fc655 100644
--- a/frontend/__tests__/__snapshots__/Pagination.test.js.snap
+++ b/frontend/__tests__/__snapshots__/Pagination.test.js.snap
@@ -1,11 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Pagination/> displays loading message 1`] = `
-<p>
-  Loading...
-</p>
-`;
-
 exports[`<Pagination/> renders pagination for 18 items 1`] = `
 <styled.div>
   <Link
diff --git a/frontend/__tests__/mockMang.js b/frontend/__tests__/mockMang.js
index a6b71af..31d096f 100644
--- a/frontend/__tests__/mockMang.js
+++ b/frontend/__tests__/mockMang.js
@@ -51,9 +51,30 @@ const fakeItem = () => ({
 const fakeUser = () => ({
   __typename: 'User',
   id: '4234',
-  name: 'Fakey Mc Fake',
-  email: 'fake@fake.com',
+  name: casual.name,
+  email: casual.email,
   permissions: ['ADMIN'],
+  orders: [],
+  cart: [],
+});
+
+const fakeOrderItem = () => ({
+  id: casual.uuid,
+  image: `${casual.word}.jpg`,
+  title: casual.words(),
+  price: 4234,
+  quantity: 1,
+  description: casual.words(),
+});
+
+const fakeOrder = () => ({
+  __typename: 'Order',
+  id: 'ord123',
+  charge: 'ch_123',
+  total: 40000,
+  items: [fakeOrderItem(), fakeOrderItem()],
+  createdAt: '2018-04 - 06T19: 24: 16.000Z',
+  user: fakeUser(),
 });
 
 const fakeCartItem = overrides => ({
@@ -98,4 +119,4 @@ const mountWithApollo = Component => {
 
 export default mountOptions;
 
-export { mocked, mountWithApollo, fakeItem, fakeUser, fakeCartItem };
+export { mocked, mountWithApollo, fakeItem, fakeUser, fakeCartItem, fakeOrder, fakeOrderItem };
-- 
cgit v1.3