diff options
| author | Wes Bos <wesbos@gmail.com> | 2018-03-14 21:25:32 -0400 |
|---|---|---|
| committer | Wes Bos <wesbos@gmail.com> | 2018-03-14 21:25:32 -0400 |
| commit | e3aaf8d61e6abde276d4f5649bf86723515ac73c (patch) | |
| tree | 34e742a4242dd4e50cd9f306b0754d33fbcd991e /frontend | |
| parent | bd45d4c7aac6d1c6b054185058a96b2e01669828 (diff) | |
more tests, remove unnessecary files
Diffstat (limited to 'frontend')
| -rw-r--r-- | frontend/__tests__/CartItem.test.js | 33 | ||||
| -rw-r--r-- | frontend/__tests__/__snapshots__/CartItem.test.js.snap | 33 | ||||
| -rw-r--r-- | frontend/__tests__/__snapshots__/CartList.test.js.snap | 33 | ||||
| -rw-r--r-- | frontend/components/CartList.js | 91 | ||||
| -rw-r--r-- | frontend/components/Count.js | 37 | ||||
| -rw-r--r-- | frontend/components/Page.js | 1 |
6 files changed, 99 insertions, 129 deletions
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, - }, - })} - > - × 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 |
