From e018f5482e550a49535f4df990d3bfc09128f5d8 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Thu, 19 Apr 2018 13:29:25 -0400
Subject: Add to cart tests

---
 frontend/__tests__/AddToCart.test.js               | 35 ++++++++++++----------
 .../__tests__/__snapshots__/AddToCart.test.js.snap |  4 ++-
 frontend/components/AddToCart.js                   | 20 ++++++++-----
 frontend/jest.setup.js                             |  2 +-
 4 files changed, 35 insertions(+), 26 deletions(-)

(limited to 'frontend')

diff --git a/frontend/__tests__/AddToCart.test.js b/frontend/__tests__/AddToCart.test.js
index f049152..92ad0ad 100644
--- a/frontend/__tests__/AddToCart.test.js
+++ b/frontend/__tests__/AddToCart.test.js
@@ -1,28 +1,31 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import toJSON from 'enzyme-to-json';
-import { AddToCart } from '../components/AddToCart';
-
-const currentUser = {
-  me: {},
-  refetch() {},
-};
+import AddToCart from '../components/AddToCart';
+import mountOptions from './mockMang';
 
 describe('<AddtoCart/>', () => {
   it('renders and matches snapshot', () => {
-    const wrapper = shallow(
-      <AddToCart id="abc123" addToCart={() => {}} currentUser={currentUser} />
-    );
-    expect(toJSON(wrapper)).toMatchSnapshot();
+    const wrapper = mount(<AddToCart id="abc123" />, mountOptions);
+    expect(toJSON(wrapper.find('button'))).toMatchSnapshot();
   });
 
   it('adds an item to the cart', () => {
-    const addToCart = jest.fn(() => Promise.resolve());
-    const wrapper = shallow(
-      <AddToCart id="abc123" addToCart={addToCart} currentUser={currentUser} />
-    );
+    const wrapper = mount(<AddToCart id="abc123" />, mountOptions);
+    const mutation = wrapper.find('Mutation').instance();
+    mutation.client.mutate = jest.fn().mockResolvedValue(null);
     wrapper.simulate('click');
-    expect(addToCart).toHaveBeenCalled();
-    expect(addToCart).toHaveBeenCalledWith({ variables: { id: 'abc123' } });
+    // check that it was called
+    expect(mutation.client.mutate).toHaveBeenCalled();
+    // check that it was called with the correct ID
+    expect(mutation.client.mutate).toHaveBeenCalledWithVariables({ id: 'abc123' });
+  });
+
+  it('changes to adding when clicked', () => {
+    const wrapper = mount(<AddToCart id="abc123" />, mountOptions);
+    const button = wrapper.find('button');
+    expect(button.text()).toContain('Add To Cart');
+    button.simulate('click');
+    expect(button.text()).toContain('Adding To Cart');
   });
 });
diff --git a/frontend/__tests__/__snapshots__/AddToCart.test.js.snap b/frontend/__tests__/__snapshots__/AddToCart.test.js.snap
index 999161c..e3f8229 100644
--- a/frontend/__tests__/__snapshots__/AddToCart.test.js.snap
+++ b/frontend/__tests__/__snapshots__/AddToCart.test.js.snap
@@ -2,8 +2,10 @@
 
 exports[`<AddtoCart/> renders and matches snapshot 1`] = `
 <button
+  disabled={false}
   onClick={[Function]}
 >
-  🛒 Add To Cart
+  🛒 Add
+   To Cart
 </button>
 `;
diff --git a/frontend/components/AddToCart.js b/frontend/components/AddToCart.js
index eead8f0..e2770cb 100644
--- a/frontend/components/AddToCart.js
+++ b/frontend/components/AddToCart.js
@@ -1,7 +1,7 @@
 import { Component } from 'react';
-import { Mutation } from 'react-apollo';
+import { Mutation, Query } from 'react-apollo';
 import PropTypes from 'prop-types';
-import { ADD_TO_CART_MUTATION, CURRENT_USER_QUERY } from 'queries';
+import { ADD_TO_CART_MUTATION, CURRENT_USER_QUERY } from '../queries/queries';
 
 class AddToCart extends Component {
   static propTypes = {
@@ -29,13 +29,17 @@ class AddToCart extends Component {
   render() {
     const { id } = this.props;
     return (
-      <Mutation mutation={ADD_TO_CART_MUTATION} variables={{ id }} update={this.update}>
-        {(addToCart, { loading }) => (
-          <button disabled={loading} onClick={addToCart}>
-            🛒 Add{loading && 'ing'} To Cart
-          </button>
+      <Query query={CURRENT_USER_QUERY}>
+        {() => (
+          <Mutation mutation={ADD_TO_CART_MUTATION} variables={{ id }} update={this.update}>
+            {(addToCart, { loading }) => (
+              <button disabled={loading} onClick={addToCart}>
+                🛒 Add{loading && 'ing'} To Cart
+              </button>
+            )}
+          </Mutation>
         )}
-      </Mutation>
+      </Query>
     );
   }
 }
diff --git a/frontend/jest.setup.js b/frontend/jest.setup.js
index c3fa88e..ad01898 100644
--- a/frontend/jest.setup.js
+++ b/frontend/jest.setup.js
@@ -4,7 +4,7 @@ import Adapter from 'enzyme-adapter-react-16';
 configure({ adapter: new Adapter() });
 
 expect.extend({
-  toBeCalledWithVariables(received, argument) {
+  toHaveBeenCalledWithVariables(received, argument) {
     const receivedVariables = received.mock.calls[0][0].variables;
     const pass = this.equals(receivedVariables, argument);
     const message = () =>
-- 
cgit v1.3