DONE

5 files changed, 310 insertions, 0 deletions

diff --git a/stepped-solutions/65/frontend/__tests__/AddToCart.test.js b/stepped-solutions/65/frontend/__tests__/AddToCart.test.js
new file mode 100755
index 0000000..cfc2e3e
--- /dev/null
+++ b/stepped-solutions/65/frontend/__tests__/AddToCart.test.js
@@ -0,0 +1,97 @@
+import { mount } from 'enzyme';
+import wait from 'waait';
+import toJSON from 'enzyme-to-json';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { ApolloConsumer } from 'react-apollo';
+import AddToCart, { ADD_TO_CART_MUTATION } from '../components/AddToCart';
+import { CURRENT_USER_QUERY } from '../components/User';
+import { fakeUser, fakeCartItem } from '../lib/testUtils';
+
+const mocks = [
+  {
+    request: { query: CURRENT_USER_QUERY },
+    result: {
+      data: {
+        me: {
+          ...fakeUser(),
+          cart: [],
+        },
+      },
+    },
+  },
+  {
+    request: { query: CURRENT_USER_QUERY },
+    result: {
+      data: {
+        me: {
+          ...fakeUser(),
+          cart: [fakeCartItem()],
+        },
+      },
+    },
+  },
+  {
+    request: { query: ADD_TO_CART_MUTATION, variables: { id: 'abc123' } },
+    result: {
+      data: {
+        addToCart: {
+          ...fakeCartItem(),
+          quantity: 1,
+        },
+      },
+    },
+  },
+];
+
+describe('<AddToCart/>', () => {
+  it('renders and matches the snap shot', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <AddToCart id="abc123" />
+      </MockedProvider>
+    );
+    await wait();
+    wrapper.update();
+    expect(toJSON(wrapper.find('button'))).toMatchSnapshot();
+  });
+
+  it('adds an item to cart when clicked', async () => {
+    let apolloClient;
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <ApolloConsumer>
+          {client => {
+            apolloClient = client;
+            return <AddToCart id="abc123" />;
+          }}
+        </ApolloConsumer>
+      </MockedProvider>
+    );
+    await wait();
+    wrapper.update();
+    const { data: { me } } = await apolloClient.query({ query: CURRENT_USER_QUERY });
+    // console.log(me);
+    expect(me.cart).toHaveLength(0);
+    // add an item to the cart
+    wrapper.find('button').simulate('click');
+    await wait();
+    // check if the item is in the cart
+    const { data: { me: me2 } } = await apolloClient.query({ query: CURRENT_USER_QUERY });
+    expect(me2.cart).toHaveLength(1);
+    expect(me2.cart[0].id).toBe('omg123');
+    expect(me2.cart[0].quantity).toBe(3);
+  });
+
+  it('changes from add to adding when clicked', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <AddToCart id="abc123" />
+      </MockedProvider>
+    );
+    await wait();
+    wrapper.update();
+    expect(wrapper.text()).toContain('Add To Cart');
+    wrapper.find('button').simulate('click');
+    expect(wrapper.text()).toContain('Adding To Cart');
+  });
+});
diff --git a/stepped-solutions/65/frontend/__tests__/Cart.test.js b/stepped-solutions/65/frontend/__tests__/Cart.test.js
new file mode 100755
index 0000000..b8afc88
--- /dev/null
+++ b/stepped-solutions/65/frontend/__tests__/Cart.test.js
@@ -0,0 +1,39 @@
+import { mount } from 'enzyme';
+import wait from 'waait';
+import toJSON from 'enzyme-to-json';
+import { MockedProvider } from 'react-apollo/test-utils';
+import Cart, { LOCAL_STATE_QUERY } from '../components/Cart';
+import { CURRENT_USER_QUERY } from '../components/User';
+import { fakeUser, fakeCartItem } from '../lib/testUtils';
+
+const mocks = [
+  {
+    request: { query: CURRENT_USER_QUERY },
+    result: {
+      data: {
+        me: {
+          ...fakeUser(),
+          cart: [fakeCartItem()],
+        },
+      },
+    },
+  },
+  {
+    request: { query: LOCAL_STATE_QUERY },
+    result: { data: { cartOpen: true } },
+  },
+];
+
+describe('<Cart/>', () => {
+  it('renders and matches snappy', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <Cart />
+      </MockedProvider>
+    );
+    await wait();
+    wrapper.update();
+    expect(toJSON(wrapper.find('header'))).toMatchSnapshot();
+    expect(wrapper.find('CartItem')).toHaveLength(1);
+  });
+});
diff --git a/stepped-solutions/65/frontend/__tests__/RemoveFromCart.test.js b/stepped-solutions/65/frontend/__tests__/RemoveFromCart.test.js
new file mode 100755
index 0000000..faacc91
--- /dev/null
+++ b/stepped-solutions/65/frontend/__tests__/RemoveFromCart.test.js
@@ -0,0 +1,67 @@
+import { mount } from 'enzyme';
+import wait from 'waait';
+import toJSON from 'enzyme-to-json';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { ApolloConsumer } from 'react-apollo';
+import RemoveFromCart, { REMOVE_FROM_CART_MUTATION } from '../components/RemoveFromCart';
+import { CURRENT_USER_QUERY } from '../components/User';
+import { fakeUser, fakeCartItem } from '../lib/testUtils';
+
+global.alert = console.log;
+
+const mocks = [
+  {
+    request: { query: CURRENT_USER_QUERY },
+    result: {
+      data: {
+        me: {
+          ...fakeUser(),
+          cart: [fakeCartItem({ id: 'abc123' })],
+        },
+      },
+    },
+  },
+  {
+    request: { query: REMOVE_FROM_CART_MUTATION, variables: { id: 'abc123' } },
+    result: {
+      data: {
+        removeFromCart: {
+          __typename: 'CartItem',
+          id: 'abc123',
+        },
+      },
+    },
+  },
+];
+
+describe('<RemoveFromCart/>', () => {
+  it('renders and matches snapshot', async () => {
+    const wrapper = mount(
+      <MockedProvider>
+        <RemoveFromCart id="abc123" />
+      </MockedProvider>
+    );
+    expect(toJSON(wrapper.find('button'))).toMatchSnapshot();
+  });
+
+  it('removes the item from cart', async () => {
+    let apolloClient;
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <ApolloConsumer>
+          {client => {
+            apolloClient = client;
+            return <RemoveFromCart id="abc123" />;
+          }}
+        </ApolloConsumer>
+      </MockedProvider>
+    );
+    const res = await apolloClient.query({ query: CURRENT_USER_QUERY });
+    expect(res.data.me.cart).toHaveLength(1);
+    expect(res.data.me.cart[0].item.price).toBe(5000);
+    wrapper.find('button').simulate('click');
+    await wait();
+    const res2 = await apolloClient.query({ query: CURRENT_USER_QUERY });
+    expect(res2.data.me.cart).toHaveLength(0);
+  });
+});
diff --git a/stepped-solutions/65/frontend/components/AddToCart.js b/stepped-solutions/65/frontend/components/AddToCart.js
new file mode 100755
index 0000000..8a71cc3
--- /dev/null
+++ b/stepped-solutions/65/frontend/components/AddToCart.js
@@ -0,0 +1,36 @@
+import React from 'react';
+import { Mutation } from 'react-apollo';
+import gql from 'graphql-tag';
+import { CURRENT_USER_QUERY } from './User';
+
+const ADD_TO_CART_MUTATION = gql`
+  mutation addToCart($id: ID!) {
+    addToCart(id: $id) {
+      id
+      quantity
+    }
+  }
+`;
+
+class AddToCart extends React.Component {
+  render() {
+    const { id } = this.props;
+    return (
+      <Mutation
+        mutation={ADD_TO_CART_MUTATION}
+        variables={{
+          id,
+        }}
+        refetchQueries={[{ query: CURRENT_USER_QUERY }]}
+      >
+        {(addToCart, { loading }) => (
+          <button disabled={loading} onClick={addToCart}>
+            Add{loading && 'ing'} To Cart 🛒
+          </button>
+        )}
+      </Mutation>
+    );
+  }
+}
+export default AddToCart;
+export { ADD_TO_CART_MUTATION };
diff --git a/stepped-solutions/65/frontend/components/RemoveFromCart.js b/stepped-solutions/65/frontend/components/RemoveFromCart.js
new file mode 100755
index 0000000..025dae5
--- /dev/null
+++ b/stepped-solutions/65/frontend/components/RemoveFromCart.js
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Mutation } from 'react-apollo';
+import styled from 'styled-components';
+import PropTypes from 'prop-types';
+import gql from 'graphql-tag';
+import { CURRENT_USER_QUERY } from './User';
+
+const REMOVE_FROM_CART_MUTATION = gql`
+  mutation removeFromCart($id: ID!) {
+    removeFromCart(id: $id) {
+      id
+    }
+  }
+`;
+
+const BigButton = styled.button`
+  font-size: 3rem;
+  background: none;
+  border: 0;
+  &:hover {
+    color: ${props => props.theme.red};
+    cursor: pointer;
+  }
+`;
+
+class RemoveFromCart extends React.Component {
+  static propTypes = {
+    id: PropTypes.string.isRequired,
+  };
+  // This gets called as soon as we get a response back from the server after a mutation has been performed
+  update = (cache, payload) => {
+    // 1. first read the cache
+    const data = cache.readQuery({ query: CURRENT_USER_QUERY });
+    // 2. remove that item from the cart
+    const cartItemId = payload.data.removeFromCart.id;
+    data.me.cart = data.me.cart.filter(cartItem => cartItem.id !== cartItemId);
+    // 3. write it back to the cache
+    cache.writeQuery({ query: CURRENT_USER_QUERY, data });
+  };
+  render() {
+    return (
+      <Mutation
+        mutation={REMOVE_FROM_CART_MUTATION}
+        variables={{ id: this.props.id }}
+        update={this.update}
+        optimisticResponse={{
+          __typename: 'Mutation',
+          removeFromCart: {
+            __typename: 'CartItem',
+            id: this.props.id,
+          },
+        }}
+      >
+        {(removeFromCart, { loading, error }) => (
+          <BigButton
+            disabled={loading}
+            onClick={() => {
+              removeFromCart().catch(err => alert(err.message));
+            }}
+            title="Delete Item"
+          >
+            &times;
+          </BigButton>
+        )}
+      </Mutation>
+    );
+  }
+}
+
+export default RemoveFromCart;
+export { REMOVE_FROM_CART_MUTATION };