From 8a5825d52271d712ec7c8348447d433067e13ef2 Mon Sep 17 00:00:00 2001 From: Wes Bos Date: Thu, 13 Sep 2018 14:18:56 -0400 Subject: DONE --- .../66/frontend/__tests__/Order.test.js | 27 +++++ .../66/frontend/__tests__/TakeMyMoney.test.js | 98 +++++++++++++++++ .../__tests__/__snapshots__/Order.test.js.snap | 118 +++++++++++++++++++++ .../__snapshots__/TakeMyMoney.test.js.snap | 67 ++++++++++++ stepped-solutions/66/frontend/components/Order.js | 92 ++++++++++++++++ .../66/frontend/components/TakeMyMoney.js | 79 ++++++++++++++ 6 files changed, 481 insertions(+) create mode 100755 stepped-solutions/66/frontend/__tests__/Order.test.js create mode 100755 stepped-solutions/66/frontend/__tests__/TakeMyMoney.test.js create mode 100755 stepped-solutions/66/frontend/__tests__/__snapshots__/Order.test.js.snap create mode 100755 stepped-solutions/66/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap create mode 100755 stepped-solutions/66/frontend/components/Order.js create mode 100755 stepped-solutions/66/frontend/components/TakeMyMoney.js (limited to 'stepped-solutions/66/frontend') diff --git a/stepped-solutions/66/frontend/__tests__/Order.test.js b/stepped-solutions/66/frontend/__tests__/Order.test.js new file mode 100755 index 0000000..71accfa --- /dev/null +++ b/stepped-solutions/66/frontend/__tests__/Order.test.js @@ -0,0 +1,27 @@ +import { mount } from 'enzyme'; +import toJSON from 'enzyme-to-json'; +import wait from 'waait'; +import { MockedProvider } from 'react-apollo/test-utils'; +import Order, { SINGLE_ORDER_QUERY } from '../components/Order'; +import { fakeOrder } from '../lib/testUtils'; + +const mocks = [ + { + request: { query: SINGLE_ORDER_QUERY, variables: { id: 'ord123' } }, + result: { data: { order: fakeOrder() } }, + }, +]; + +describe('', () => { + it('renders the order', async () => { + const wrapper = mount( + + + + ); + await wait(); + wrapper.update(); + const order = wrapper.find('div[data-test="order"]'); + expect(toJSON(order)).toMatchSnapshot(); + }); +}); diff --git a/stepped-solutions/66/frontend/__tests__/TakeMyMoney.test.js b/stepped-solutions/66/frontend/__tests__/TakeMyMoney.test.js new file mode 100755 index 0000000..3d68502 --- /dev/null +++ b/stepped-solutions/66/frontend/__tests__/TakeMyMoney.test.js @@ -0,0 +1,98 @@ +import { mount } from 'enzyme'; +import wait from 'waait'; +import toJSON from 'enzyme-to-json'; +import NProgress from 'nprogress'; +import Router from 'next/router'; +import { MockedProvider } from 'react-apollo/test-utils'; +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() {} }; + +const mocks = [ + { + request: { query: CURRENT_USER_QUERY }, + result: { + data: { + me: { + ...fakeUser(), + cart: [fakeCartItem()], + }, + }, + }, + }, +]; + +describe('', () => { + it('renders and matches snapshot', async () => { + const wrapper = mount( + + + + ); + await wait(); + wrapper.update(); + const checkoutButton = wrapper.find('ReactStripeCheckout'); + expect(toJSON(checkoutButton)).toMatchSnapshot(); + }); + it('creates an order ontoken', async () => { + const createOrderMock = jest.fn().mockResolvedValue({ + data: { createOrder: { id: 'xyz789' } }, + }); + const wrapper = mount( + + + + ); + 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 () => { + const wrapper = mount( + + + + ); + await wait(); + wrapper.update(); + NProgress.start = jest.fn(); + 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 () => { + const wrapper = mount( + + + + ); + await wait(); + wrapper.update(); + const createOrderMock = jest.fn().mockResolvedValue({ + data: { createOrder: { id: 'xyz789' } }, + }); + const component = wrapper.find('TakeMyMoney').instance(); + Router.router.push = jest.fn(); + // 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', + }, + }); + }); +}); diff --git a/stepped-solutions/66/frontend/__tests__/__snapshots__/Order.test.js.snap b/stepped-solutions/66/frontend/__tests__/__snapshots__/Order.test.js.snap new file mode 100755 index 0000000..9dce80b --- /dev/null +++ b/stepped-solutions/66/frontend/__tests__/__snapshots__/Order.test.js.snap @@ -0,0 +1,118 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders the order 1`] = ` +
+ + + +

+ + Order ID: + + + ord123 + +

+

+ + Charge + + + ch_123 + +

+

+ + Date + + + March 31, 2018 8:00 PM + +

+

+ + Order Total + + + $400 + +

+

+ + Item Count + + + 2 + +

+
+
+ soluta non omnis consequatur enim quia autem +
+

+ soluta non omnis consequatur enim quia autem +

+

+ Qty: + 1 +

+

+ Each: + $42.34 +

+

+ SubTotal: + $42.34 +

+

+ et modi tenetur amet modi reprehenderit omnis +

+
+
+
+ quia sed exercitationem omnis laborum exercitationem est +
+

+ quia sed exercitationem omnis laborum exercitationem est +

+

+ Qty: + 1 +

+

+ Each: + $42.34 +

+

+ SubTotal: + $42.34 +

+

+ sapiente laudantium molestias assumenda quasi adipisci mollitia +

+
+
+
+
+`; diff --git a/stepped-solutions/66/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap b/stepped-solutions/66/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap new file mode 100755 index 0000000..02a112e --- /dev/null +++ b/stepped-solutions/66/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap @@ -0,0 +1,67 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[` renders and matches snapshot 1`] = ` + + + +`; diff --git a/stepped-solutions/66/frontend/components/Order.js b/stepped-solutions/66/frontend/components/Order.js new file mode 100755 index 0000000..5177c0a --- /dev/null +++ b/stepped-solutions/66/frontend/components/Order.js @@ -0,0 +1,92 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Query } from 'react-apollo'; +import { format } from 'date-fns'; +import Head from 'next/head'; +import gql from 'graphql-tag'; +import formatMoney from '../lib/formatMoney'; +import Error from './ErrorMessage'; +import OrderStyles from './styles/OrderStyles'; + +const SINGLE_ORDER_QUERY = gql` + query SINGLE_ORDER_QUERY($id: ID!) { + order(id: $id) { + id + charge + total + createdAt + user { + id + } + items { + id + title + description + price + image + quantity + } + } + } +`; + +class Order extends React.Component { + static propTypes = { + id: PropTypes.string.isRequired, + }; + render() { + return ( + + {({ data, error, loading }) => { + if (error) return ; + if (loading) return

Loading...

; + const order = data.order; + return ( + + + Sick Fits - Order {order.id} + +

+ Order ID: + {this.props.id} +

+

+ Charge + {order.charge} +

+

+ Date + {format(order.createdAt, 'MMMM d, YYYY h:mm a')} +

+

+ Order Total + {formatMoney(order.total)} +

+

+ Item Count + {order.items.length} +

+
+ {order.items.map(item => ( +
+ {item.title} +
+

{item.title}

+

Qty: {item.quantity}

+

Each: {formatMoney(item.price)}

+

SubTotal: {formatMoney(item.price * item.quantity)}

+

{item.description}

+
+
+ ))} +
+ + ); + }} + + ); + } +} + +export default Order; +export { SINGLE_ORDER_QUERY }; diff --git a/stepped-solutions/66/frontend/components/TakeMyMoney.js b/stepped-solutions/66/frontend/components/TakeMyMoney.js new file mode 100755 index 0000000..ca87832 --- /dev/null +++ b/stepped-solutions/66/frontend/components/TakeMyMoney.js @@ -0,0 +1,79 @@ +import React from 'react'; +import StripeCheckout from 'react-stripe-checkout'; +import { Mutation } from 'react-apollo'; +import Router from 'next/router'; +import NProgress from 'nprogress'; +import PropTypes from 'prop-types'; +import gql from 'graphql-tag'; +import calcTotalPrice from '../lib/calcTotalPrice'; +import Error from './ErrorMessage'; +import User, { CURRENT_USER_QUERY } from './User'; + +const CREATE_ORDER_MUTATION = gql` + mutation createOrder($token: String!) { + createOrder(token: $token) { + id + charge + total + items { + id + title + } + } + } +`; + +function totalItems(cart) { + return cart.reduce((tally, cartItem) => tally + cartItem.quantity, 0); +} + +class TakeMyMoney extends React.Component { + onToken = async (res, createOrder) => { + NProgress.start(); + // manually call the mutation once we have the stripe token + const order = await createOrder({ + variables: { + token: res.id, + }, + }).catch(err => { + alert(err.message); + }); + Router.push({ + pathname: '/order', + query: { id: order.data.createOrder.id }, + }); + }; + render() { + return ( + + {({ data: { me }, loading }) => { + if (loading) return null; + return ( + + {createOrder => ( + this.onToken(res, createOrder)} + > + {this.props.children} + + )} + + ); + }} + + ); + } +} + +export default TakeMyMoney; +export { CREATE_ORDER_MUTATION }; -- cgit v1.3