RemoveFromCart tests

4 files changed, 24 insertions, 11 deletions

diff --git a/frontend/README.md b/frontend/README.md
index 7e9575f..68ba3be 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -45,6 +45,6 @@ Things to Ask James:
 * Testing Mutations - overwrite instance Mutation.client.mutate?
 * Client via <ApolloConsumer> - best way?
 * Update on Items Pagination
-
+* Testing with context. Is this context okay? Deprecation
 
 -->
\ No newline at end of file
diff --git a/frontend/__tests__/RemoveFromCart.test.js b/frontend/__tests__/RemoveFromCart.test.js
index 0b1de74..9cdde5e 100644
--- a/frontend/__tests__/RemoveFromCart.test.js
+++ b/frontend/__tests__/RemoveFromCart.test.js
@@ -1,19 +1,22 @@
 import React from 'react';
 import { shallow, mount } from 'enzyme';
 import toJSON from 'enzyme-to-json';
+import { ApolloProvider } from 'react-apollo';
 import RemoveFromCart from '../components/RemoveFromCart';
-import mountOptions from './mockMang';
+import mountOptions, { mocked, mountWithApollo } from './mockMang';
 
 describe('<RemoveFromCart/>', () => {
   it('renders and matches snapshot', () => {
-    const wrapper = shallow(<RemoveFromCart id="abc123" removeFromCart={() => { }} />);
-    expect(toJSON(wrapper)).toMatchSnapshot();
+    const wrapper = mountWithApollo(<RemoveFromCart id="123" />);
+    expect(toJSON(wrapper.find('button'))).toMatchSnapshot();
   });
 
-  it("runs a function when it's clicked", () => {
-    const removeSpy = jest.fn();
-    const wrapper = shallow(<RemoveFromCart id="abc123" removeFromCart={removeSpy} />);
-    wrapper.simulate('click');
-    expect(removeSpy).toHaveBeenCalledWith({ variables: { id: 'abc123' } });
+  it('runs the mutation with correct variables', () => {
+    const wrapper = mountWithApollo(<RemoveFromCart id="abc123" />);
+    const mutation = wrapper.find('Mutation').instance();
+    mutation.client.mutate = jest.fn().mockResolvedValue({ removeFromCart: { id: 'abc123' } });
+    wrapper.find('button').simulate('click');
+    expect(mutation.client.mutate).toHaveBeenCalled();
+    expect(mutation.client.mutate).toHaveBeenCalledWithVariables({ id: 'abc123' });
   });
 });
diff --git a/frontend/__tests__/__snapshots__/RemoveFromCart.test.js.snap b/frontend/__tests__/__snapshots__/RemoveFromCart.test.js.snap
index b25bcc9..f982011 100644
--- a/frontend/__tests__/__snapshots__/RemoveFromCart.test.js.snap
+++ b/frontend/__tests__/__snapshots__/RemoveFromCart.test.js.snap
@@ -1,10 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<RemoveFromCart/> renders and matches snapshot 1`] = `
-<styled.button
+<button
+  className="sc-bdVaJa fXnNqM"
   onClick={[Function]}
   title="Remove From Cart"
 >
   ×
-</styled.button>
+</button>
 `;
diff --git a/frontend/__tests__/mockMang.js b/frontend/__tests__/mockMang.js
index 3dba703..6922601 100644
--- a/frontend/__tests__/mockMang.js
+++ b/frontend/__tests__/mockMang.js
@@ -3,6 +3,8 @@ import { makeExecutableSchema } from 'graphql-tools';
 import MockClient from 'graphql-mock';
 import casual from 'casual';
 import PropTypes from 'prop-types';
+import { ApolloProvider } from 'react-apollo';
+import { mount } from 'enzyme';
 
 // seed it so we get consistent results
 casual.seed(777);
@@ -61,4 +63,11 @@ const mountOptions = {
   },
 };
 
+const mountWithApollo = (Component, props) => {
+  const wrapper = mount(<ApolloProvider client={mocked.client}>{Component}</ApolloProvider>);
+  return wrapper.children();
+};
+
 export default mountOptions;
+
+export { mocked, mountWithApollo };