Skip to content

Commit 33914c4

Browse files
CavanWaggCavanWagg
committed
Testing our cart
1 parent cbf4915 commit 33914c4

7 files changed

Lines changed: 280 additions & 13 deletions

File tree

‎frontend/__tests__/AddToCart.test.js‎

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
import { mount } from 'enzyme';
2+
import wait from 'waait';
3+
import toJSON from 'enzyme-to-json';
4+
import { MockedProvider } from 'react-apollo/test-utils';
5+
import { ApolloConsumer } from 'react-apollo';
6+
import AddToCart, { ADD_TO_CART_MUTATION } from '../components/AddToCart';
7+
import { CURRENT_USER_QUERY } from '../components/User';
8+
import { fakeUser, fakeCartItem } from '../lib/testUtils';
9+
10+
const mocks = [
11+
{
12+
request: { query: CURRENT_USER_QUERY },
13+
result: {
14+
data: {
15+
me: {
16+
...fakeUser(),
17+
cart: [],
18+
},
19+
},
20+
},
21+
},
22+
{
23+
request: { query: CURRENT_USER_QUERY },
24+
result: {
25+
data: {
26+
me: {
27+
...fakeUser(),
28+
cart: [fakeCartItem()],
29+
},
30+
},
31+
},
32+
},
33+
{
34+
request: { query: ADD_TO_CART_MUTATION, variables: { id: 'abc123' } },
35+
result: {
36+
data: {
37+
addToCart: {
38+
...fakeCartItem(),
39+
quantity: 1,
40+
},
41+
},
42+
},
43+
},
44+
];
45+
46+
describe('<AddToCart/>', () => {
47+
it('renders and matches the snap shot', async () => {
48+
const wrapper = mount(
49+
<MockedProvider mocks={mocks}>
50+
<AddToCart id="abc123" />
51+
</MockedProvider>
52+
);
53+
await wait();
54+
wrapper.update();
55+
expect(toJSON(wrapper.find('button'))).toMatchSnapshot();
56+
});
57+
58+
it('adds an item to cart when clicked', async () => {
59+
let apolloClient;
60+
const wrapper = mount(
61+
<MockedProvider mocks={mocks}>
62+
<ApolloConsumer>
63+
{client => {
64+
apolloClient = client;
65+
return <AddToCart id="abc123" />;
66+
}}
67+
</ApolloConsumer>
68+
</MockedProvider>
69+
);
70+
await wait();
71+
wrapper.update();
72+
const { data: { me } } = await apolloClient.query({ query: CURRENT_USER_QUERY });
73+
// console.log(me);
74+
expect(me.cart).toHaveLength(0);
75+
// add an item to the cart
76+
wrapper.find('button').simulate('click');
77+
await wait();
78+
// check if the item is in the cart
79+
const { data: { me: me2 } } = await apolloClient.query({ query: CURRENT_USER_QUERY });
80+
expect(me2.cart).toHaveLength(1);
81+
expect(me2.cart[0].id).toBe('omg123');
82+
expect(me2.cart[0].quantity).toBe(3);
83+
});
84+
85+
it('changes from add to adding when clicked', async () => {
86+
const wrapper = mount(
87+
<MockedProvider mocks={mocks}>
88+
<AddToCart id="abc123" />
89+
</MockedProvider>
90+
);
91+
await wait();
92+
wrapper.update();
93+
expect(wrapper.text()).toContain('Add To Cart');
94+
wrapper.find('button').simulate('click');
95+
expect(wrapper.text()).toContain('Adding To Cart');
96+
});
97+
});

‎frontend/__tests__/Cart.test.js‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import { mount } from 'enzyme';
2+
import wait from 'waait';
3+
import toJSON from 'enzyme-to-json';
4+
import { MockedProvider } from 'react-apollo/test-utils';
5+
import Cart, { LOCAL_STATE_QUERY } from '../components/Cart';
6+
import { CURRENT_USER_QUERY } from '../components/User';
7+
import { fakeUser, fakeCartItem } from '../lib/testUtils';
8+
9+
const mocks = [
10+
{
11+
request: { query: CURRENT_USER_QUERY },
12+
result: {
13+
data: {
14+
me: {
15+
...fakeUser(),
16+
cart: [fakeCartItem()],
17+
},
18+
},
19+
},
20+
},
21+
{
22+
request: { query: LOCAL_STATE_QUERY },
23+
result: { data: { cartOpen: true } },
24+
},
25+
];
26+
27+
describe('<Cart/>', () => {
28+
it('renders and matches snappy', async () => {
29+
const wrapper = mount(
30+
<MockedProvider mocks={mocks}>
31+
<Cart />
32+
</MockedProvider>
33+
);
34+
await wait();
35+
wrapper.update();
36+
expect(toJSON(wrapper.find('header'))).toMatchSnapshot();
37+
expect(wrapper.find('CartItem')).toHaveLength(1);
38+
});
39+
});

‎frontend/__tests__/RemoveFromCart.test.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
import { mount } from 'enzyme';
2+
import wait from 'waait';
3+
import toJSON from 'enzyme-to-json';
4+
import { MockedProvider } from 'react-apollo/test-utils';
5+
import { ApolloConsumer } from 'react-apollo';
6+
import RemoveFromCart, { REMOVE_FROM_CART_MUTATION } from '../components/RemoveFromCart';
7+
import { CURRENT_USER_QUERY } from '../components/User';
8+
import { fakeUser, fakeCartItem } from '../lib/testUtils';
9+
10+
global.alert = console.log;
11+
12+
const mocks = [
13+
{
14+
request: { query: CURRENT_USER_QUERY },
15+
result: {
16+
data: {
17+
me: {
18+
...fakeUser(),
19+
cart: [fakeCartItem({ id: 'abc123' })],
20+
},
21+
},
22+
},
23+
},
24+
{
25+
request: { query: REMOVE_FROM_CART_MUTATION, variables: { id: 'abc123' } },
26+
result: {
27+
data: {
28+
removeFromCart: {
29+
__typename: 'CartItem',
30+
id: 'abc123',
31+
},
32+
},
33+
},
34+
},
35+
];
36+
37+
describe('<RemoveFromCart/>', () => {
38+
it('renders and matches snapshot', async () => {
39+
const wrapper = mount(
40+
<MockedProvider>
41+
<RemoveFromCart id="abc123" />
42+
</MockedProvider>
43+
);
44+
expect(toJSON(wrapper.find('button'))).toMatchSnapshot();
45+
});
46+
47+
it('removes the item from cart', async () => {
48+
let apolloClient;
49+
const wrapper = mount(
50+
<MockedProvider mocks={mocks}>
51+
<ApolloConsumer>
52+
{client => {
53+
apolloClient = client;
54+
return <RemoveFromCart id="abc123" />;
55+
}}
56+
</ApolloConsumer>
57+
</MockedProvider>
58+
);
59+
const res = await apolloClient.query({ query: CURRENT_USER_QUERY });
60+
expect(res.data.me.cart).toHaveLength(1);
61+
expect(res.data.me.cart[0].item.price).toBe(5000);
62+
wrapper.find('button').simulate('click');
63+
await wait();
64+
const res2 = await apolloClient.query({ query: CURRENT_USER_QUERY });
65+
expect(res2.data.me.cart).toHaveLength(0);
66+
});
67+
});

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

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<AddToCart/> renders and matches the snap shot 1`] = `
4+
<button
5+
disabled={false}
6+
onClick={[Function]}
7+
>
8+
Add
9+
To Cart 🛒
10+
</button>
11+
`;

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

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<Cart/> renders and matches snappy 1`] = `
4+
<header>
5+
<CloseButton
6+
onClick={[Function]}
7+
title="close"
8+
>
9+
<button
10+
className="CloseButton-sc-1seb878-0 lbNKfp"
11+
onClick={[Function]}
12+
title="close"
13+
>
14+
×
15+
</button>
16+
</CloseButton>
17+
<Supreme>
18+
<h3
19+
className="Supreme-xv30qb-0 hpaXsq"
20+
>
21+
Miss Coleman Berge
22+
's Cart
23+
</h3>
24+
</Supreme>
25+
<p>
26+
You Have
27+
1
28+
Item
29+
in your cart.
30+
</p>
31+
</header>
32+
`;

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`<RemoveFromCart/> renders and matches snapshot 1`] = `
4+
<button
5+
className="RemoveFromCart__BigButton-emvtd6-0 gPWNSn"
6+
disabled={false}
7+
onClick={[Function]}
8+
title="Delete Item"
9+
>
10+
×
11+
</button>
12+
`;

‎frontend/components/AddToCart.js‎

Lines changed: 22 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,24 +4,33 @@ import gql from 'graphql-tag';
44
import { CURRENT_USER_QUERY } from './User';
55

66
const ADD_TO_CART_MUTATION = gql`
7-
mutation addToCart($id: ID!) {
8-
addToCart(id: $id) {
9-
id
10-
quantity
11-
}
12-
}
7+
mutation addToCart($id: ID!) {
8+
addToCart(id: $id) {
9+
id
10+
quantity
11+
}
12+
}
1313
`;
1414

1515
class AddToCart extends React.Component {
1616
render() {
1717
const { id } = this.props;
18-
return (<Mutation mutation={ADD_TO_CART_MUTATION} variables={{ id, }}
19-
refetchQueries={[{ query: CURRENT_USER_QUERY }]}
20-
>
21-
{(addToCart, { loading }) => <button disabled={loading} onClick={addToCart}>Add{loading && 'ing'} to Cart 🛒 </button>}
22-
</Mutation>
18+
return (
19+
<Mutation
20+
mutation={ADD_TO_CART_MUTATION}
21+
variables={{
22+
id,
23+
}}
24+
refetchQueries={[{ query: CURRENT_USER_QUERY }]}
25+
>
26+
{(addToCart, { loading }) => (
27+
<button disabled={loading} onClick={addToCart}>
28+
Add{loading && 'ing'} To Cart 🛒
29+
</button>
30+
)}
31+
</Mutation>
2332
);
2433
}
2534
}
26-
27-
export default AddToCart;
35+
export default AddToCart;
36+
export { ADD_TO_CART_MUTATION };

0 commit comments

Comments
 (0)