From e3aaf8d61e6abde276d4f5649bf86723515ac73c Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Wed, 14 Mar 2018 21:25:32 -0400
Subject: more tests, remove unnessecary files

---
 frontend/__tests__/CartItem.test.js                | 33 ++++++++
 .../__tests__/__snapshots__/CartItem.test.js.snap  | 33 ++++++++
 .../__tests__/__snapshots__/CartList.test.js.snap  | 33 ++++++++
 frontend/components/CartList.js                    | 91 ----------------------
 frontend/components/Count.js                       | 37 ---------
 frontend/components/Page.js                        |  1 -
 6 files changed, 99 insertions(+), 129 deletions(-)
 create mode 100644 frontend/__tests__/CartItem.test.js
 create mode 100644 frontend/__tests__/__snapshots__/CartItem.test.js.snap
 create mode 100644 frontend/__tests__/__snapshots__/CartList.test.js.snap
 delete mode 100644 frontend/components/CartList.js
 delete mode 100644 frontend/components/Count.js

(limited to 'frontend')

diff --git a/frontend/__tests__/CartItem.test.js b/frontend/__tests__/CartItem.test.js
new file mode 100644
index 0000000..42dd39b
--- /dev/null
+++ b/frontend/__tests__/CartItem.test.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import { shallow, mount } from 'enzyme';
+import toJSON from 'enzyme-to-json';
+import CartItem from '../components/CartItem';
+
+const cartItem = {
+  item: {
+    price: 5000,
+    image: 'dog.jpg',
+    title: 'Fake Item',
+  },
+  id: 'abc123',
+  quantity: 20,
+};
+
+describe('<CartItem>', () => {
+  it('renders and matches snapshot', () => {
+    const wrapper = shallow(<CartItem cartItem={cartItem} />);
+    expect(toJSON(wrapper)).toMatchSnapshot();
+  });
+
+  it('renders a single quantity', () => {
+    const wrapper = shallow(<CartItem cartItem={{ ...cartItem, quantity: 1 }} />);
+    const p = wrapper.find('p');
+    expect(p.text()).toBe('$50 — 1 × $50 each');
+  });
+
+  it('renders multiples', () => {
+    const wrapper = shallow(<CartItem cartItem={{ ...cartItem, quantity: 23423 }} />);
+    const p = wrapper.find('p');
+    expect(p.text()).toBe('$1,171,150 — 23423 × $50 each');
+  });
+});
diff --git a/frontend/__tests__/__snapshots__/CartItem.test.js.snap b/frontend/__tests__/__snapshots__/CartItem.test.js.snap
new file mode 100644
index 0000000..1f3cca5
--- /dev/null
+++ b/frontend/__tests__/__snapshots__/CartItem.test.js.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CartItem> renders and matches snapshot 1`] = `
+<styled.li
+  key="abc123"
+>
+  <img
+    alt="Fake Item"
+    src="dog.jpg"
+    width="100"
+  />
+  <div
+    className="cart-item-details"
+  >
+    <h3>
+      Fake Item
+    </h3>
+    <p>
+      $1,000
+       — 
+      <em>
+        20
+         × 
+        $50
+         each
+      </em>
+    </p>
+  </div>
+  <Apollo(RemoveFromCart)
+    id="abc123"
+  />
+</styled.li>
+`;
diff --git a/frontend/__tests__/__snapshots__/CartList.test.js.snap b/frontend/__tests__/__snapshots__/CartList.test.js.snap
new file mode 100644
index 0000000..1f3cca5
--- /dev/null
+++ b/frontend/__tests__/__snapshots__/CartList.test.js.snap
@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<CartItem> renders and matches snapshot 1`] = `
+<styled.li
+  key="abc123"
+>
+  <img
+    alt="Fake Item"
+    src="dog.jpg"
+    width="100"
+  />
+  <div
+    className="cart-item-details"
+  >
+    <h3>
+      Fake Item
+    </h3>
+    <p>
+      $1,000
+       — 
+      <em>
+        20
+         × 
+        $50
+         each
+      </em>
+    </p>
+  </div>
+  <Apollo(RemoveFromCart)
+    id="abc123"
+  />
+</styled.li>
+`;
diff --git a/frontend/components/CartList.js b/frontend/components/CartList.js
deleted file mode 100644
index 8464398..0000000
--- a/frontend/components/CartList.js
+++ /dev/null
@@ -1,91 +0,0 @@
-// I THINK THIS CAN BE DELETED
-import { Component } from 'react';
-import { compose } from 'react-apollo';
-import styled from 'styled-components';
-import PropTypes from 'prop-types';
-import formatMoney from '../lib/formatMoney';
-import TakeMyMoney from './TakeMyMoney';
-import { removeFromCartEnhancer, userEnhancer, uiEnhancer } from '../enhancers/enhancers';
-
-const CartStyles = styled.div`
-  padding: 20px;
-  position: relative;
-  background: white;
-  position: fixed;
-  height: 100%;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  transform: translateX(100%);
-  transition: all 0.3s;
-  box-shadow: 0 0 10px 3px rgba(0, 0, 0, 0.2);
-  z-index: 5;
-  ${props => props.open && `transform: translateX(0);`};
-  .toggleOpen {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translateX(-100%);
-  }
-`;
-
-class CartList extends Component {
-  static contextTypes = {
-    client: PropTypes.object,
-  };
-
-  toggleOpen = () => {
-    this.props.uiQuery.updateQuery(() => ({ ui: { isCartOpen: false, __typename: 'Network' } }));
-  };
-
-  render() {
-    if (this.props.loading) {
-      return <p>Loading....</p>;
-    }
-
-    if (this.props.error) {
-      return <p>Error....</p>;
-    }
-
-    //   return <p>Don't have it yet!</p>;
-    // }
-    // OMG Clean this up
-
-    if (!user) user = {};
-    const cart = user.cart || [];
-    const userId = user.id;
-
-    const total = cart.reduce((a, b) => a + b.price, 0);
-    return (
-      <CartStyles open>
-        <button className="toggleOpen" onClick={this.toggleOpen}>
-          Open Cart
-        </button>
-        <h1>{cart.length} Items</h1>
-        <ul>
-          {cart.map(item => (
-            <li key={item.id}>
-              {item.title}
-              <button
-                onClick={() =>
-                  this.props.removeFromCart({
-                    variables: {
-                      userId,
-                      itemId: item.id,
-                    },
-                  })}
-              >
-                &times; Delete
-              </button>
-            </li>
-          ))}
-        </ul>
-        <TakeMyMoney amount={total} name="Testing 123" description="Test test 123">
-          <button>Buy for {formatMoney(total)}</button>
-        </TakeMyMoney>
-      </CartStyles>
-    );
-  }
-}
-
-export default compose(userEnhancer, removeFromCartEnhancer)(CartList);
diff --git a/frontend/components/Count.js b/frontend/components/Count.js
deleted file mode 100644
index 7dfd33f..0000000
--- a/frontend/components/Count.js
+++ /dev/null
@@ -1,37 +0,0 @@
-// TODO THis is not needed
-import React, { Component } from 'react'
-import { graphql, gql } from 'react-apollo'
-
-import { ALL_ITEMS_QUERY } from '../queries';
-
-class Count extends Component {
-
-  render() {
-
-    // 1
-    if (this.props.allLinksQuery && this.props.allLinksQuery.loading) {
-      return <div>Loading</div>
-    }
-
-    // 2
-    if (this.props.allLinksQuery && this.props.allLinksQuery.error) {
-      return <div>Error</div>
-    }
-
-    // 3
-    const itemsToRender = this.props.allLinksQuery.allItems
-
-    return (
-      <div>
-        <h1>There are {itemsToRender.length} items for sale</h1>
-      </div>
-    )
-  }
-
-}
-
-// 1
-
-// We export the graphQL HOC - this will fetch the data and inject it into the Count compeont via props
-
-export default graphql(ALL_ITEMS_QUERY, { name: 'allLinksQuery' })(Count)
diff --git a/frontend/components/Page.js b/frontend/components/Page.js
index e07df88..51d6b09 100644
--- a/frontend/components/Page.js
+++ b/frontend/components/Page.js
@@ -2,7 +2,6 @@ import styled, { ThemeProvider, injectGlobal } from 'styled-components';
 import Header from './Header';
 import Meta from './Meta';
 import Nav from './Nav';
-import CartList from './CartList';
 import { Component } from 'react';
 import { UIProvider } from './UIContext';
 // Global Style
-- 
cgit v1.3