Merge branch 'master' into randyridge/our

4 files changed, 310 insertions, 0 deletions

diff --git a/stepped-solutions/66/frontend/__tests__/Order.test.js b/stepped-solutions/66/frontend/__tests__/Order.test.js
new file mode 100755
index 0000000..71accfa
--- /dev/null
+++ b/stepped-solutions/66/frontend/__tests__/Order.test.js
@@ -0,0 +1,27 @@
+import { mount } from 'enzyme';
+import toJSON from 'enzyme-to-json';
+import wait from 'waait';
+import { MockedProvider } from 'react-apollo/test-utils';
+import Order, { SINGLE_ORDER_QUERY } from '../components/Order';
+import { fakeOrder } from '../lib/testUtils';
+
+const mocks = [
+  {
+    request: { query: SINGLE_ORDER_QUERY, variables: { id: 'ord123' } },
+    result: { data: { order: fakeOrder() } },
+  },
+];
+
+describe('<Order/>', () => {
+  it('renders the order', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <Order id="ord123" />
+      </MockedProvider>
+    );
+    await wait();
+    wrapper.update();
+    const order = wrapper.find('div[data-test="order"]');
+    expect(toJSON(order)).toMatchSnapshot();
+  });
+});
diff --git a/stepped-solutions/66/frontend/__tests__/TakeMyMoney.test.js b/stepped-solutions/66/frontend/__tests__/TakeMyMoney.test.js
new file mode 100755
index 0000000..3d68502
--- /dev/null
+++ b/stepped-solutions/66/frontend/__tests__/TakeMyMoney.test.js
@@ -0,0 +1,98 @@
+import { mount } from 'enzyme';
+import wait from 'waait';
+import toJSON from 'enzyme-to-json';
+import NProgress from 'nprogress';
+import Router from 'next/router';
+import { MockedProvider } from 'react-apollo/test-utils';
+import { ApolloConsumer } from 'react-apollo';
+import TakeMyMoney, { CREATE_ORDER_MUTATION } from '../components/TakeMyMoney';
+import { CURRENT_USER_QUERY } from '../components/User';
+import { fakeUser, fakeCartItem } from '../lib/testUtils';
+
+Router.router = { push() {} };
+
+const mocks = [
+  {
+    request: { query: CURRENT_USER_QUERY },
+    result: {
+      data: {
+        me: {
+          ...fakeUser(),
+          cart: [fakeCartItem()],
+        },
+      },
+    },
+  },
+];
+
+describe('<TakeMyMoney/>', () => {
+  it('renders and matches snapshot', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <TakeMyMoney />
+      </MockedProvider>
+    );
+    await wait();
+    wrapper.update();
+    const checkoutButton = wrapper.find('ReactStripeCheckout');
+    expect(toJSON(checkoutButton)).toMatchSnapshot();
+  });
+  it('creates an order ontoken', async () => {
+    const createOrderMock = jest.fn().mockResolvedValue({
+      data: { createOrder: { id: 'xyz789' } },
+    });
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <TakeMyMoney />
+      </MockedProvider>
+    );
+    const component = wrapper.find('TakeMyMoney').instance();
+    // manully call that onToken method
+    component.onToken({ id: 'abc123' }, createOrderMock);
+    expect(createOrderMock).toHaveBeenCalled();
+    expect(createOrderMock).toHaveBeenCalledWith({ variables: { token: 'abc123' } });
+  });
+
+  it('turns the progress bar on', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <TakeMyMoney />
+      </MockedProvider>
+    );
+    await wait();
+    wrapper.update();
+    NProgress.start = jest.fn();
+    const createOrderMock = jest.fn().mockResolvedValue({
+      data: { createOrder: { id: 'xyz789' } },
+    });
+    const component = wrapper.find('TakeMyMoney').instance();
+    // manully call that onToken method
+    component.onToken({ id: 'abc123' }, createOrderMock);
+    expect(NProgress.start).toHaveBeenCalled();
+  });
+
+  it('routes to the order page when completed', async () => {
+    const wrapper = mount(
+      <MockedProvider mocks={mocks}>
+        <TakeMyMoney />
+      </MockedProvider>
+    );
+    await wait();
+    wrapper.update();
+    const createOrderMock = jest.fn().mockResolvedValue({
+      data: { createOrder: { id: 'xyz789' } },
+    });
+    const component = wrapper.find('TakeMyMoney').instance();
+    Router.router.push = jest.fn();
+    // manully call that onToken method
+    component.onToken({ id: 'abc123' }, createOrderMock);
+    await wait();
+    expect(Router.router.push).toHaveBeenCalled();
+    expect(Router.router.push).toHaveBeenCalledWith({
+      pathname: '/order',
+      query: {
+        id: 'xyz789',
+      },
+    });
+  });
+});
diff --git a/stepped-solutions/66/frontend/__tests__/__snapshots__/Order.test.js.snap b/stepped-solutions/66/frontend/__tests__/__snapshots__/Order.test.js.snap
new file mode 100755
index 0000000..9dce80b
--- /dev/null
+++ b/stepped-solutions/66/frontend/__tests__/__snapshots__/Order.test.js.snap
@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Order/> renders the order 1`] = `
+<div
+  className="OrderStyles-sc-4oqalm-0 eDzsVm"
+  data-test="order"
+>
+  <SideEffect(Head)>
+    <Head />
+  </SideEffect(Head)>
+  <p>
+    <span>
+      Order ID:
+    </span>
+    <span>
+      ord123
+    </span>
+  </p>
+  <p>
+    <span>
+      Charge
+    </span>
+    <span>
+      ch_123
+    </span>
+  </p>
+  <p>
+    <span>
+      Date
+    </span>
+    <span>
+      March 31, 2018 8:00 PM
+    </span>
+  </p>
+  <p>
+    <span>
+      Order Total
+    </span>
+    <span>
+      $400
+    </span>
+  </p>
+  <p>
+    <span>
+      Item Count
+    </span>
+    <span>
+      2
+    </span>
+  </p>
+  <div
+    className="items"
+  >
+    <div
+      className="order-item"
+      key="3a430a73-c9e9-4bcc-b46a-41618965ffea"
+    >
+      <img
+        alt="soluta non omnis consequatur enim quia autem"
+        src="reprehenderit.jpg"
+      />
+      <div
+        className="item-details"
+      >
+        <h2>
+          soluta non omnis consequatur enim quia autem
+        </h2>
+        <p>
+          Qty: 
+          1
+        </p>
+        <p>
+          Each: 
+          $42.34
+        </p>
+        <p>
+          SubTotal: 
+          $42.34
+        </p>
+        <p>
+          et modi tenetur amet modi reprehenderit omnis
+        </p>
+      </div>
+    </div>
+    <div
+      className="order-item"
+      key="2393e090-592f-4d03-b808-c9d81098deec"
+    >
+      <img
+        alt="quia sed exercitationem omnis laborum exercitationem est"
+        src="sint.jpg"
+      />
+      <div
+        className="item-details"
+      >
+        <h2>
+          quia sed exercitationem omnis laborum exercitationem est
+        </h2>
+        <p>
+          Qty: 
+          1
+        </p>
+        <p>
+          Each: 
+          $42.34
+        </p>
+        <p>
+          SubTotal: 
+          $42.34
+        </p>
+        <p>
+          sapiente laudantium molestias assumenda quasi adipisci mollitia
+        </p>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/stepped-solutions/66/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap b/stepped-solutions/66/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap
new file mode 100755
index 0000000..02a112e
--- /dev/null
+++ b/stepped-solutions/66/frontend/__tests__/__snapshots__/TakeMyMoney.test.js.snap
@@ -0,0 +1,67 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<TakeMyMoney/> renders and matches snapshot 1`] = `
+<ReactStripeCheckout
+  ComponentClass="span"
+  amount={15000}
+  className="StripeCheckout"
+  currency="USD"
+  description="Order of 3 items!"
+  email="Delmer.Smith@yahoo.com"
+  image="dog-small.jpg"
+  label="Pay With Card"
+  locale="auto"
+  name="Sick Fits"
+  reconfigureOnUpdate={false}
+  stripeKey="pk_test_Vtknn6vSdcZWSG2JWvEiWSqC"
+  token={[Function]}
+  triggerEvent="onClick"
+>
+  <button
+    className="StripeCheckout"
+    onBlur={[Function]}
+    onClick={[Function]}
+    onFocus={[Function]}
+    onMouseDown={[Function]}
+    onMouseOut={[Function]}
+    onMouseUp={[Function]}
+    style={
+      Object {
+        "background": "linear-gradient(#28a0e5,#015e94)",
+        "border": 0,
+        "borderRadius": 5,
+        "boxShadow": "0 1px 0 rgba(0,0,0,0.2)",
+        "cursor": "pointer",
+        "display": "inline-block",
+        "overflow": "hidden",
+        "padding": 1,
+        "textDecoration": "none",
+        "userSelect": "none",
+        "visibility": "visible",
+      }
+    }
+  >
+    <span
+      style={
+        Object {
+          "backgroundImage": "linear-gradient(#7dc5ee,#008cdd 85%,#30a2e4)",
+          "borderRadius": 4,
+          "boxShadow": "inset 0 1px 0 rgba(255,255,255,0.25)",
+          "color": "#fff",
+          "display": "block",
+          "fontFamily": "\\"Helvetica Neue\\",Helvetica,Arial,sans-serif",
+          "fontSize": 14,
+          "fontWeight": "bold",
+          "height": 30,
+          "lineHeight": "30px",
+          "padding": "0 12px",
+          "position": "relative",
+          "textShadow": "0 -1px 0 rgba(0,0,0,0.25)",
+        }
+      }
+    >
+      Pay With Card
+    </span>
+  </button>
+</ReactStripeCheckout>
+`;