From 426aba70f5addfd3c6c1a972ced18395683feae9 Mon Sep 17 00:00:00 2001
From: Wes Bos <wesbos@gmail.com>
Date: Fri, 20 Apr 2018 13:54:42 -0400
Subject: test

---
 frontend/README.md                                 |  2 +
 frontend/__tests__/EditUser.test.js                | 55 +++++++++--------
 frontend/__tests__/RemoveFromCart.test.js          |  8 +--
 .../__tests__/__snapshots__/EditUser.test.js.snap  | 69 +++++++++++++---------
 frontend/__tests__/mockMang.js                     |  4 +-
 frontend/components/EditUser.js                    |  3 +-
 6 files changed, 80 insertions(+), 61 deletions(-)

diff --git a/frontend/README.md b/frontend/README.md
index 68ba3be..0791dfe 100644
--- a/frontend/README.md
+++ b/frontend/README.md
@@ -46,5 +46,7 @@ Things to Ask James:
 * Client via <ApolloConsumer> - best way?
 * Update on Items Pagination
 * Testing with context. Is this context okay? Deprecation
+* Testing Error States
+* wait and loading - normal?
 
 -->
\ No newline at end of file
diff --git a/frontend/__tests__/EditUser.test.js b/frontend/__tests__/EditUser.test.js
index 08dd6f6..f4aabfc 100644
--- a/frontend/__tests__/EditUser.test.js
+++ b/frontend/__tests__/EditUser.test.js
@@ -1,53 +1,60 @@
 import React from 'react';
 import { shallow } from 'enzyme';
 import toJSON from 'enzyme-to-json';
-import { EditUser } from '../components/EditUser';
-
-const wait = amount => new Promise(resolve => setTimeout(resolve, amount));
+import EditUser from '../components/EditUser';
+import { mountWithApollo } from './mockMang';
+import wait from 'waait';
 
 const currentUser = {
   me: {
     name: 'Wes Bos',
   },
-  refetch() {},
+  refetch() { },
 };
 
 describe('<EditUser/>', () => {
-  it('renders', () => {
-    const wrapper = shallow(<EditUser currentUser={currentUser} updateUser={() => {}} />);
-    expect(toJSON(wrapper)).toMatchSnapshot();
+  it('renders', async () => {
+    const { wrapper, component } = mountWithApollo(<EditUser />);
+    await wait();
+    wrapper.update();
+    expect(toJSON(wrapper.find('Form'))).toMatchSnapshot();
   });
 
   it('asks you to log in when you arent logged in', () => {
-    const wrapper = shallow(<EditUser currentUser={{}} updateUser={() => {}} />);
+    const wrapper = shallow(<EditUser />);
     expect(toJSON(wrapper)).toMatchSnapshot();
   });
 
-  it('displays changes', () => {
-    const wrapper = shallow(<EditUser currentUser={currentUser} updateUser={() => {}} />);
+  it('displays changes', async () => {
+    const { wrapper } = mountWithApollo(<EditUser />);
+    await wait();
+    wrapper.update();
     const nameInput = wrapper.find('[name="name"]');
     nameInput.simulate('change', { target: { name: 'name', value: 'Scott' } });
     const diff = wrapper.find('pre[data-test="change"]');
     expect(diff.text()).toBe('{"name":"Scott"}');
   });
 
-  it('calls update user when form is submitted', () => {
-    const updateUserSpy = jest.fn();
-    const wrapper = shallow(<EditUser currentUser={currentUser} updateUser={updateUserSpy} />);
+  it('calls update user when form is submitted', async () => {
+    const { wrapper } = mountWithApollo(<EditUser />);
+    await wait();
+    wrapper.update();
+    const mutation = wrapper.find('Mutation').instance();
+    mutation.client.mutate = jest.fn();
     const nameInput = wrapper.find('[name="name"]');
     nameInput.simulate('change', { target: { name: 'name', value: 'Scott' } });
-    wrapper.simulate('submit', { preventDefault() {} });
-    expect(updateUserSpy).toHaveBeenCalledWith({ variables: { name: 'Scott' } });
+    wrapper.find('form').simulate('submit', { preventDefault() { } });
+    expect(mutation.client.mutate).toHaveBeenCalledWithVariables({ name: 'Scott' });
   });
 
-  it('refetches the current user after an update', async () => {
-    const currentUserWithSpy = {
-      me: { name: 'wes' },
-      refetch: jest.fn(),
-    };
-    const wrapper = shallow(<EditUser currentUser={currentUserWithSpy} updateUser={() => {}} />);
-    wrapper.simulate('submit', { preventDefault() {} });
-    await wait(0);
-    expect(currentUserWithSpy.refetch).toHaveBeenCalled();
+  it.only('refetches the current user after an update', async () => {
+    const { wrapper } = mountWithApollo(<EditUser />);
+    await wait();
+    wrapper.update();
+    const query = wrapper.find('Query').instance();
+    const mutation = wrapper.find('Mutation').instance();
+    console.log(mutation.props.mutation);
+    // wrapper.find('form').simulate('submit', { preventDefault() {} });
+    // expect(query.client.reFetchObservableQueries).toHaveBeenCalled();
   });
 });
diff --git a/frontend/__tests__/RemoveFromCart.test.js b/frontend/__tests__/RemoveFromCart.test.js
index 9cdde5e..5f1a54a 100644
--- a/frontend/__tests__/RemoveFromCart.test.js
+++ b/frontend/__tests__/RemoveFromCart.test.js
@@ -1,18 +1,16 @@
 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, { mocked, mountWithApollo } from './mockMang';
+import { mountWithApollo } from './mockMang';
 
 describe('<RemoveFromCart/>', () => {
   it('renders and matches snapshot', () => {
-    const wrapper = mountWithApollo(<RemoveFromCart id="123" />);
+    const { wrapper } = mountWithApollo(<RemoveFromCart id="123" />);
     expect(toJSON(wrapper.find('button'))).toMatchSnapshot();
   });
 
   it('runs the mutation with correct variables', () => {
-    const wrapper = mountWithApollo(<RemoveFromCart id="abc123" />);
+    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');
diff --git a/frontend/__tests__/__snapshots__/EditUser.test.js.snap b/frontend/__tests__/__snapshots__/EditUser.test.js.snap
index de5df25..1de9aef 100644
--- a/frontend/__tests__/__snapshots__/EditUser.test.js.snap
+++ b/frontend/__tests__/__snapshots__/EditUser.test.js.snap
@@ -10,35 +10,46 @@ exports[`<EditUser/> renders 1`] = `
 <Form
   onSubmit={[Function]}
 >
-  <label
-    htmlFor="name"
+  <form
+    className="sc-bdVaJa LHejR"
+    onSubmit={[Function]}
   >
-    Name:
-    <input
-      defaultValue="Wes Bos"
-      name="name"
-      onChange={[Function]}
-      type="text"
-    />
-  </label>
-  <button
-    type="submit"
-  >
-    Update
-  </button>
-  <strong>
-    me:
-  </strong>
-  <pre>
-    "Wes Bos"
-  </pre>
-  <strong>
-    Change:
-  </strong>
-  <pre
-    data-test="change"
-  >
-    {}
-  </pre>
+    <DisplayError />
+    <fieldset
+      aria-busy={false}
+      disabled={false}
+    >
+      <label
+        htmlFor="name"
+      >
+        Name:
+        <input
+          defaultValue="Miss Tillman Mitchell"
+          name="name"
+          onChange={[Function]}
+          type="text"
+        />
+      </label>
+      <button
+        type="submit"
+      >
+        Update
+      </button>
+      <strong>
+        me:
+      </strong>
+      <pre>
+        "Miss Tillman Mitchell"
+      </pre>
+      <strong>
+        Change:
+      </strong>
+      <pre
+        data-test="change"
+      >
+        {}
+      </pre>
+    </fieldset>
+  </form>
 </Form>
 `;
diff --git a/frontend/__tests__/mockMang.js b/frontend/__tests__/mockMang.js
index 6922601..15fc42c 100644
--- a/frontend/__tests__/mockMang.js
+++ b/frontend/__tests__/mockMang.js
@@ -63,9 +63,9 @@ const mountOptions = {
   },
 };
 
-const mountWithApollo = (Component, props) => {
+const mountWithApollo = Component => {
   const wrapper = mount(<ApolloProvider client={mocked.client}>{Component}</ApolloProvider>);
-  return wrapper.children();
+  return { wrapper, component: wrapper.children() };
 };
 
 export default mountOptions;
diff --git a/frontend/components/EditUser.js b/frontend/components/EditUser.js
index 9449ba7..eeba72e 100644
--- a/frontend/components/EditUser.js
+++ b/frontend/components/EditUser.js
@@ -29,7 +29,8 @@ class EditUser extends React.Component {
   render() {
     return (
       <Query query={CURRENT_USER_QUERY}>
-        {({ data: { me } }) => {
+        {({ data: { me }, loading }) => {
+          if (loading) return <p>Loading...</p>;
           if (!me) return <p>You must be logged in</p>;
           return (
             <Mutation
-- 
cgit v1.3