xxxxxx

author: Wes Bos <wesbos@gmail.com> 2018-04-19 10:09:51 -0400
committer: Wes Bos <wesbos@gmail.com> 2018-04-19 10:09:51 -0400
commit: 88ef4bd2df970cb6ea89123ffdd7fcb21dbc0f15 (patch)
tree: 619a1f46b719e1f6a0c64e9641ed094dcddfebff /frontend
parent: 54dd0e29830f04c9055863fb0449ee4fc2ab0689 (diff)
8 files changed, 303 insertions, 34 deletions
diff --git a/frontend/__tests__/AddToCart.test.js b/frontend/__tests__/AddToCart.test.js
index 2285b3b..f049152 100644
--- a/frontend/__tests__/AddToCart.test.js
+++ b/frontend/__tests__/AddToCart.test.js
@@ -10,13 +10,17 @@ const currentUser = {
 
 describe('<AddtoCart/>', () => {
   it('renders and matches snapshot', () => {
-    const wrapper = shallow(<AddToCart id="abc123" addToCart={() => {}} currentUser={currentUser} />);
+    const wrapper = shallow(
+      <AddToCart id="abc123" addToCart={() => {}} currentUser={currentUser} />
+    );
     expect(toJSON(wrapper)).toMatchSnapshot();
   });
 
   it('adds an item to the cart', () => {
     const addToCart = jest.fn(() => Promise.resolve());
-    const wrapper = shallow(<AddToCart id="abc123" addToCart={addToCart} currentUser={currentUser} />);
+    const wrapper = shallow(
+      <AddToCart id="abc123" addToCart={addToCart} currentUser={currentUser} />
+    );
     wrapper.simulate('click');
     expect(addToCart).toHaveBeenCalled();
     expect(addToCart).toHaveBeenCalledWith({ variables: { id: 'abc123' } });
diff --git a/frontend/__tests__/Order.test.js b/frontend/__tests__/Order.test.js
new file mode 100644
index 0000000..6bcf0b9
--- /dev/null
+++ b/frontend/__tests__/Order.test.js
@@ -0,0 +1,16 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import wait from 'waait';
+import toJSON from 'enzyme-to-json';
+import Order from '../components/Order';
+import mountOptions from './mockMang';
+
+describe('<Order/>', () => {
+  it('Renders with Proper Data', async () => {
+    const wrapper = mount(<Order id="123" />, mountOptions);
+    await wait();
+    wrapper.update();
+    const order = wrapper.find('[data-test="order"]');
+    expect(toJSON(order)).toMatchSnapshot();
+  });
+});
diff --git a/frontend/__tests__/SingleItem.test.js b/frontend/__tests__/SingleItem.test.js
index 313784e..3fe3943 100644
--- a/frontend/__tests__/SingleItem.test.js
+++ b/frontend/__tests__/SingleItem.test.js
@@ -1,19 +1,13 @@
 import React from 'react';
-import { shallow, mount } from 'enzyme';
+import { mount } from 'enzyme';
 import wait from 'waait';
 import toJSON from 'enzyme-to-json';
 import SingleItem from '../components/SingleItem';
-import { ApolloProvider } from 'react-apollo';
-import mockClient from './mockMang';
-import { SINGLE_ITEM_QUERY } from '../queries/queries';
+import mountOptions from './mockMang';
 
 describe('<SingleItem/>', () => {
   it('Renders with Proper Data', async () => {
-    const wrapper = mount(
-      <ApolloProvider client={mockClient.client}>
-        <SingleItem id="123" />
-      </ApolloProvider>
-    );
+    const wrapper = mount(<SingleItem id="123" />, mountOptions);
     await wait();
     wrapper.update();
 
@@ -21,11 +15,7 @@ describe('<SingleItem/>', () => {
     expect(toJSON(Item)).toMatchSnapshot();
   });
 
-  it('Errors with a not found Item', async () => {
-    const wrapper = mount(
-      <ApolloProvider client={mockClient.client}>
-        <SingleItem id="123" />
-      </ApolloProvider>
-    );
+  xit('Errors with a not found Item', async () => {
+    const wrapper = mount(<SingleItem id="123" />, mountOptions);
   });
 });
diff --git a/frontend/__tests__/__snapshots__/Order.test.js.snap b/frontend/__tests__/__snapshots__/Order.test.js.snap
new file mode 100644
index 0000000..21b9c35
--- /dev/null
+++ b/frontend/__tests__/__snapshots__/Order.test.js.snap
@@ -0,0 +1,262 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Order/> Renders with Proper Data 1`] = `
+Array [
+  <styled.div
+    data-test="order"
+  >
+    <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"
+      >
+        <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>
+      </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"
+    >
+      <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>
+    </div>
+  </div>,
+]
+`;
diff --git a/frontend/__tests__/mockMang.js b/frontend/__tests__/mockMang.js
index 5a98c6a..7d65cd7 100644
--- a/frontend/__tests__/mockMang.js
+++ b/frontend/__tests__/mockMang.js
@@ -4,7 +4,7 @@ import casual from 'casual';
 import PropTypes from 'prop-types';
 
 // seed it so we get consistent results
-casual.seed(123);
+casual.seed(777);
 
 const typeDefs = importSchema('../backend/src/schema.graphql');
 
@@ -13,10 +13,21 @@ const typeDefs = importSchema('../backend/src/schema.graphql');
 
 const mocks = {
   ID: () => casual.uuid,
+  DateTime: () => new Date(1400000000000),
+  Int: () => casual.integer(400, 5500),
+  OrderItem: () => ({
+    quantity: casual.integer(1, 10),
+    image: 'dog.jpg',
+    title: casual.title,
+    description: casual.description,
+    price: () => 50000,
+  }),
   Item: () => ({
     title: casual.title,
     description: casual.description,
     price: () => 50000,
+    image: 'dog.jpg',
+    largeImage: 'large-dog.jpg',
   }),
   User: () => ({
     email: casual.email,
diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js
index 01f9dc1..eead8f0 100644
--- a/frontend/components/AddToCart.js
+++ b/frontend/components/AddToCart.js
@@ -9,11 +9,8 @@ class AddToCart extends Component {
   };
 
   update = (proxy, payload) => {
-    console.log('Updating!');
-    console.log(payload);
     const newCartItem = payload.data.addToCart;
     const data = proxy.readQuery({ query: CURRENT_USER_QUERY });
-    console.log(newCartItem);
 
     const existingIndex = data.me.cart.findIndex(cartItem => cartItem.id === newCartItem.id);
     if (existingIndex >= 0) {
diff --git a/frontend/components/Nav.js b/frontend/components/Nav.js
index a0bed90..acfdfd1 100644
--- a/frontend/components/Nav.js
+++ b/frontend/components/Nav.js
@@ -99,17 +99,6 @@ class Nav extends React.Component {
                   <a>My Account</a>
                 </Link>
                 <Signout />
-                {/* <UIContext>
-                  {context => (
-                    <button onClick={context.toggle}>
-                      My Cart
-                      <CartCount
-                        className="cart-count"
-                        count={me.cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0)}
-                      />
-                    </button>
-                  )}
-                </UIContext> */}
                 <ApolloConsumer>
                   {cache => (
                     <button onClick={() => cache.writeData({ data: { cartOpen: true } })}>
diff --git a/frontend/components/Order.js b/frontend/components/Order.js
index f6743fa..0a71b18 100644
--- a/frontend/components/Order.js
+++ b/frontend/components/Order.js
@@ -4,7 +4,7 @@ import { format } from 'date-fns';
 import Head from 'next/head';
 import PropTypes from 'prop-types';
 import styled from 'styled-components';
-import { SINGLE_ORDER_QUERY } from '../queries';
+import { SINGLE_ORDER_QUERY } from '../queries/queries';
 import formatMoney from '../lib/formatMoney';
 import Dump from './Dump';
 import Error from './ErrorMessage';
@@ -62,7 +62,7 @@ class Order extends Component {
           if (error) return <Error error={error} refetch={refetch} />;
           const order = data.order;
           return (
-            <OrderStyles>
+            <OrderStyles data-test="order">
               <Head>
                 <title>Sick Fits - Order {order.id}</title>
               </Head>
author	Wes Bos <wesbos@gmail.com>	2018-04-19 10:09:51 -0400
committer	Wes Bos <wesbos@gmail.com>	2018-04-19 10:09:51 -0400
commit	88ef4bd2df970cb6ea89123ffdd7fcb21dbc0f15 (patch)
tree	619a1f46b719e1f6a0c64e9641ed094dcddfebff /frontend
parent	54dd0e29830f04c9055863fb0449ee4fc2ab0689 (diff)