Skip to content

Commit 5c02309

Browse files
CavanWaggCavanWagg
committed
Testing Order Components
1 parent 33914c4 commit 5c02309

6 files changed

Lines changed: 347 additions & 39 deletions

File tree

‎frontend/__tests__/Order.test.js‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { mount } from 'enzyme';
2+
import toJSON from 'enzyme-to-json';
3+
import wait from 'waait';
4+
import { MockedProvider } from 'react-apollo/test-utils';
5+
import Order, { SINGLE_ORDER_QUERY } from '../components/Order';
6+
import { fakeOrder } from '../lib/testUtils';
7+
8+
const mocks = [
9+
{
10+
request: { query: SINGLE_ORDER_QUERY, variables: { id: 'ord123' } },
11+
result: { data: { order: fakeOrder() } },
12+
},
13+
];
14+
15+
describe('<Order/>', () => {
16+
it('renders the order', async () => {
17+
const wrapper = mount(
18+
<MockedProvider mocks={mocks}>
19+
<Order id="ord123" />
20+
</MockedProvider>
21+
);
22+
await wait();
23+
wrapper.update();
24+
const order = wrapper.find('div[data-test="order"]');
25+
expect(toJSON(order)).toMatchSnapshot();
26+
});
27+
});

‎frontend/__tests__/TakeMyMoney.test.js‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
import { mount } from 'enzyme';
2+
import wait from 'waait';
3+
import toJSON from 'enzyme-to-json';
4+
import NProgress from 'nprogress';
5+
import Router from 'next/router';
6+
import { MockedProvider } from 'react-apollo/test-utils';
7+
import { ApolloConsumer } from 'react-apollo';
8+
import TakeMyMoney, { CREATE_ORDER_MUTATION } from '../components/TakeMyMoney';
9+
import { CURRENT_USER_QUERY } from '../components/User';
10+
import { fakeUser, fakeCartItem } from '../lib/testUtils';
11+
12+
Router.router = { push() {} };
13+
14+
const mocks = [
15+
{
16+
request: { query: CURRENT_USER_QUERY },
17+
result: {
18+
data: {
19+
me: {
20+
...fakeUser(),
21+
cart: [fakeCartItem()],
22+
},
23+
},
24+
},
25+
},
26+
];
27+
28+
describe('<TakeMyMoney/>', () => {
29+
it('renders and matches snapshot', async () => {
30+
const wrapper = mount(
31+
<MockedProvider mocks={mocks}>
32+
<TakeMyMoney />
33+
</MockedProvider>
34+
);
35+
await wait();
36+
wrapper.update();
37+
const checkoutButton = wrapper.find('ReactStripeCheckout');
38+
expect(toJSON(checkoutButton)).toMatchSnapshot();
39+
});
40+
it('creates an order ontoken', async () => {
41+
const createOrderMock = jest.fn().mockResolvedValue({
42+
data: { createOrder: { id: 'xyz789' } },
43+
});
44+
const wrapper = mount(
45+
<MockedProvider mocks={mocks}>
46+
<TakeMyMoney />
47+
</MockedProvider>
48+
);
49+
const component = wrapper.find('TakeMyMoney').instance();
50+
// manully call that onToken method
51+
component.onToken({ id: 'abc123' }, createOrderMock);
52+
expect(createOrderMock).toHaveBeenCalled();
53+
expect(createOrderMock).toHaveBeenCalledWith({ variables: { token: 'abc123' } });
54+
});
55+
56+
it('turns the progress bar on', async () => {
57+
const wrapper = mount(
58+
<MockedProvider mocks={mocks}>
59+
<TakeMyMoney />
60+
</MockedProvider>
61+
);
62+
await wait();
63+
wrapper.update();
64+
NProgress.start = jest.fn();
65+
const createOrderMock = jest.fn().mockResolvedValue({
66+
data: { createOrder: { id: 'xyz789' } },
67+
});
68+
const component = wrapper.find('TakeMyMoney').instance();
69+
// manully call that onToken method
70+
component.onToken({ id: 'abc123' }, createOrderMock);
71+
expect(NProgress.start).toHaveBeenCalled();
72+
});
73+
74+
it('routes to the order page when completed', async () => {
75+
const wrapper = mount(
76+
<MockedProvider mocks={mocks}>
77+
<TakeMyMoney />
78+
</MockedProvider>
79+
);
80+
await wait();
81+
wrapper.update();
82+
const createOrderMock = jest.fn().mockResolvedValue({
83+
data: { createOrder: { id: 'xyz789' } },
84+
});
85+
const component = wrapper.find('TakeMyMoney').instance();
86+
Router.router.push = jest.fn();
87+
// manully call that onToken method
88+
component.onToken({ id: 'abc123' }, createOrderMock);
89+
await wait();
90+
expect(Router.router.push).toHaveBeenCalled();
91+
expect(Router.router.push).toHaveBeenCalledWith({
92+
pathname: '/order',
93+
query: {
94+
id: 'xyz789',
95+
},
96+
});
97+
});
98+
});

‎frontend/__tests__/__snapshots__/Order.test.js.snap‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<Order/> renders the order 1`] = `
4+
<div
5+
className="OrderStyles-sc-4oqalm-0 camMij"
6+
data-test="order"
7+
>
8+
<SideEffect(Head)>
9+
<Head />
10+
</SideEffect(Head)>
11+
<p>
12+
<span>
13+
Order ID:
14+
</span>
15+
<span>
16+
ord123
17+
</span>
18+
</p>
19+
<p>
20+
<span>
21+
Charge
22+
</span>
23+
<span>
24+
ch_123
25+
</span>
26+
</p>
27+
<p>
28+
<span>
29+
Date
30+
</span>
31+
<span>
32+
March 31, 2018 7:00 PM
33+
</span>
34+
</p>
35+
<p>
36+
<span>
37+
Order Total
38+
</span>
39+
<span>
40+
$400
41+
</span>
42+
</p>
43+
<p>
44+
<span>
45+
Item Count
46+
</span>
47+
<span>
48+
2
49+
</span>
50+
</p>
51+
<div
52+
className="items"
53+
>
54+
<div
55+
className="order-item"
56+
key="3a430a73-c9e9-4bcc-b46a-41618965ffea"
57+
>
58+
<img
59+
alt="soluta non omnis consequatur enim quia autem"
60+
src="reprehenderit.jpg"
61+
/>
62+
<div
63+
className="item-details"
64+
>
65+
<h2>
66+
soluta non omnis consequatur enim quia autem
67+
</h2>
68+
<p>
69+
Qty:
70+
1
71+
</p>
72+
<p>
73+
Each:
74+
$42.34
75+
</p>
76+
<p>
77+
SubTotal:
78+
$42.34
79+
</p>
80+
<p>
81+
et modi tenetur amet modi reprehenderit omnis
82+
</p>
83+
</div>
84+
</div>
85+
<div
86+
className="order-item"
87+
key="2393e090-592f-4d03-b808-c9d81098deec"
88+
>
89+
<img
90+
alt="quia sed exercitationem omnis laborum exercitationem est"
91+
src="sint.jpg"
92+
/>
93+
<div
94+
className="item-details"
95+
>
96+
<h2>
97+
quia sed exercitationem omnis laborum exercitationem est
98+
</h2>
99+
<p>
100+
Qty:
101+
1
102+
</p>
103+
<p>
104+
Each:
105+
$42.34
106+
</p>
107+
<p>
108+
SubTotal:
109+
$42.34
110+
</p>
111+
<p>
112+
sapiente laudantium molestias assumenda quasi adipisci mollitia
113+
</p>
114+
</div>
115+
</div>
116+
</div>
117+
</div>
118+
`;

‎frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<TakeMyMoney/> renders and matches snapshot 1`] = `
4+
<ReactStripeCheckout
5+
ComponentClass="span"
6+
amount={15000}
7+
className="StripeCheckout"
8+
currency="USD"
9+
description="Order of 3 items!"
10+
email="Delmer.Smith@yahoo.com"
11+
image="dog-small.jpg"
12+
label="Pay With Card"
13+
locale="auto"
14+
name="Sick Fits"
15+
reconfigureOnUpdate={false}
16+
stripeKey="pk_test_Vtknn6vSdcZWSG2JWvEiWSqC"
17+
token={[Function]}
18+
triggerEvent="onClick"
19+
>
20+
<button
21+
className="StripeCheckout"
22+
onBlur={[Function]}
23+
onClick={[Function]}
24+
onFocus={[Function]}
25+
onMouseDown={[Function]}
26+
onMouseOut={[Function]}
27+
onMouseUp={[Function]}
28+
style={
29+
Object {
30+
"background": "linear-gradient(#28a0e5,#015e94)",
31+
"border": 0,
32+
"borderRadius": 5,
33+
"boxShadow": "0 1px 0 rgba(0,0,0,0.2)",
34+
"cursor": "pointer",
35+
"display": "inline-block",
36+
"overflow": "hidden",
37+
"padding": 1,
38+
"textDecoration": "none",
39+
"userSelect": "none",
40+
"visibility": "visible",
41+
}
42+
}
43+
>
44+
<span
45+
style={
46+
Object {
47+
"backgroundImage": "linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4)",
48+
"borderRadius": 4,
49+
"boxShadow": "inset 0 1px 0 rgba(255,255,255,0.25)",
50+
"color": "#fff",
51+
"display": "block",
52+
"fontFamily": "\\"Helvetica Neue\\",Helvetica,Arial,sans-serif",
53+
"fontSize": 14,
54+
"fontWeight": "bold",
55+
"height": 30,
56+
"lineHeight": "30px",
57+
"padding": "0 12px",
58+
"position": "relative",
59+
"textShadow": "0 -1px 0 rgba(0,0,0,0.25)",
60+
}
61+
}
62+
>
63+
Pay With Card
64+
</span>
65+
</button>
66+
</ReactStripeCheckout>
67+
`;

‎frontend/components/Order.js‎

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -42,17 +42,13 @@ class Order extends React.Component {
4242
if (loading) return <p>Loading...</p>;
4343
const order = data.order;
4444
return (
45-
<OrderStyles>
45+
<OrderStyles data-test="order">
4646
<Head>
47-
<title>Sick Fits - Order {order.id} </title>
47+
<title>Sick Fits - Order {order.id}</title>
4848
</Head>
4949
<p>
50-
<span>
51-
Order ID:
52-
</span>
53-
<span>
54-
{this.props.id}
55-
</span>
50+
<span>Order ID:</span>
51+
<span>{this.props.id}</span>
5652
</p>
5753
<p>
5854
<span>Charge</span>
@@ -78,7 +74,7 @@ class Order extends React.Component {
7874
<h2>{item.title}</h2>
7975
<p>Qty: {item.quantity}</p>
8076
<p>Each: {formatMoney(item.price)}</p>
81-
<p>Subtotal: {formatMoney(item.price * item.quantity)}</p>
77+
<p>SubTotal: {formatMoney(item.price * item.quantity)}</p>
8278
<p>{item.description}</p>
8379
</div>
8480
</div>
@@ -92,4 +88,5 @@ class Order extends React.Component {
9288
}
9389
}
9490

95-
export default Order;
91+
export default Order;
92+
export { SINGLE_ORDER_QUERY };

0 commit comments

Comments
 (0)