Add tests for coupon code

Signed-off-by: Stephen Rugh <rugh@adobe.com>

packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/__tests__/__snapshots__/couponCode.spec.js.snap

@@ -0,0 +1,190 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`disables remove button on click 1`] = `
+<div>
+  <span>
+    COUPON
+  </span>
+  <button
+    className="removeButton"
+    disabled={true}
+    onClick={[Function]}
+  >
+    Remove
+  </button>
+</div>
+`;
+
+exports[`disables submit button on coupon entry 1`] = `
+<form
+  className="entryForm"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div>
+    <label
+      htmlFor="couponCode"
+    >
+      Coupon Code
+    </label>
+    <span
+      style={
+        Object {
+          "--iconsAfter": 0,
+          "--iconsBefore": 0,
+        }
+      }
+    >
+      <span>
+        <input
+          id="couponCode"
+          name="couponCode"
+          onBlur={[Function]}
+          onChange={[Function]}
+          placeholder="Enter code"
+          value=""
+        />
+      </span>
+      <span />
+      <span />
+    </span>
+    <p>
+      
+    </p>
+  </div>
+  <div>
+    <label />
+    <button
+      className="applybutton"
+      disabled={true}
+      type="submit"
+    >
+      <span>
+        Apply
+      </span>
+    </button>
+  </div>
+</form>
+`;
+
+exports[`renders CouponCode input and submit button 1`] = `
+<form
+  className="entryForm"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div>
+    <label
+      htmlFor="couponCode"
+    >
+      Coupon Code
+    </label>
+    <span
+      style={
+        Object {
+          "--iconsAfter": 0,
+          "--iconsBefore": 0,
+        }
+      }
+    >
+      <span>
+        <input
+          id="couponCode"
+          name="couponCode"
+          onBlur={[Function]}
+          onChange={[Function]}
+          placeholder="Enter code"
+          value=""
+        />
+      </span>
+      <span />
+      <span />
+    </span>
+    <p>
+      
+    </p>
+  </div>
+  <div>
+    <label />
+    <button
+      className="applybutton"
+      disabled={false}
+      type="submit"
+    >
+      <span>
+        Apply
+      </span>
+    </button>
+  </div>
+</form>
+`;
+
+exports[`renders an error message if an error occurs on code entry 1`] = `
+<form
+  className="entryForm"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div>
+    <label
+      htmlFor="couponCode"
+    >
+      Coupon Code
+    </label>
+    <span
+      style={
+        Object {
+          "--iconsAfter": 0,
+          "--iconsBefore": 0,
+        }
+      }
+    >
+      <span>
+        <input
+          id="couponCode"
+          name="couponCode"
+          onBlur={[Function]}
+          onChange={[Function]}
+          placeholder="Enter code"
+          value=""
+        />
+      </span>
+      <span />
+      <span />
+    </span>
+    <p>
+      An error occurred. Try again.
+    </p>
+  </div>
+  <div>
+    <label />
+    <button
+      className="applybutton"
+      type="submit"
+    >
+      <span>
+        Apply
+      </span>
+    </button>
+  </div>
+</form>
+`;
+
+exports[`renders an error state if unable to fetch applied coupons 1`] = `"Something went wrong. Refresh and try again."`;
+
+exports[`renders nothing if no data is returned 1`] = `null`;
+
+exports[`renders the coupon code view if applied coupons has data 1`] = `
+<div>
+  <span>
+    COUPON
+  </span>
+  <button
+    className="removeButton"
+    disabled={false}
+    onClick={[Function]}
+  >
+    Remove
+  </button>
+</div>
+`;

packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/__tests__/couponCode.spec.js

@@ -0,0 +1,159 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+
+import CouponCode from '../couponCode';
+import { useLazyQuery, useMutation } from '@apollo/react-hooks';
+
+jest.mock('@apollo/react-hooks', () => {
+    const runQuery = jest.fn();
+    const runMutation = jest.fn();
+    const queryResult = {
+        data: {
+            cart: {
+                id: 'cartId',
+                applied_coupons: null
+            }
+        },
+        error: null,
+        loading: false
+    };
+
+    const mutationResult = {
+        error: null,
+        loading: false
+    };
+
+    const useLazyQuery = jest.fn(() => [runQuery, queryResult]);
+    const useMutation = jest.fn(() => [runMutation, mutationResult]);
+
+    return { useLazyQuery, useMutation };
+});
+
+jest.mock('@magento/peregrine/lib/context/cart', () => {
+    const state = { cartId: 'cart123' };
+    const api = {};
+    const useCartContext = jest.fn(() => [state, api]);
+
+    return { useCartContext };
+});
+
+const defaultProps = {
+    classes: {
+        applyButton: 'applybutton',
+        appliedCoupon: 'appliedCoupon',
+        entryForm: 'entryForm',
+        removeButton: 'removeButton'
+    }
+};
+
+test('renders nothing if no data is returned', () => {
+    useLazyQuery.mockReturnValueOnce([
+        jest.fn(),
+        {
+            data: null
+        }
+    ]);
+
+    const tree = createTestInstance(<CouponCode {...defaultProps} />);
+
+    expect(tree.toJSON()).toMatchSnapshot();
+});
+
+test('renders an error state if unable to fetch applied coupons', () => {
+    useLazyQuery.mockReturnValueOnce([
+        jest.fn(),
+        {
+            data: {},
+            error: true
+        }
+    ]);
+
+    const tree = createTestInstance(<CouponCode {...defaultProps} />);
+
+    expect(tree.toJSON()).toMatchSnapshot();
+});
+
+test('renders CouponCode input and submit button', () => {
+    const instance = createTestInstance(<CouponCode {...defaultProps} />);
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('disables submit button on coupon entry', () => {
+    useMutation.mockReturnValueOnce([
+        jest.fn(),
+        {
+            loading: true
+        }
+    ]);
+
+    const instance = createTestInstance(<CouponCode {...defaultProps} />);
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('renders an error message if an error occurs on code entry', () => {
+    useMutation.mockReturnValueOnce([
+        jest.fn(),
+        {
+            error: 'AN ERROR'
+        }
+    ]);
+    const instance = createTestInstance(<CouponCode {...defaultProps} />);
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('renders the coupon code view if applied coupons has data', () => {
+    useLazyQuery.mockReturnValueOnce([
+        jest.fn(),
+        {
+            data: {
+                cart: {
+                    applied_coupons: [
+                        {
+                            code: 'COUPON'
+                        }
+                    ]
+                }
+            }
+        }
+    ]);
+    const instance = createTestInstance(<CouponCode {...defaultProps} />);
+
+    expect(instance.toJSON()).toMatchSnapshot();
+});
+
+test('disables remove button on click', () => {
+    useLazyQuery.mockReturnValueOnce([
+        jest.fn(),
+        {
+            data: {
+                cart: {
+                    applied_coupons: [
+                        {
+                            code: 'COUPON'
+                        }
+                    ]
+                }
+            }
+        }
+    ]);
+
+    // Mock the click of the remove button
+    useMutation
+        .mockReturnValueOnce([
+            jest.fn(),
+            {
+                loading: false
+            }
+        ])
+        .mockReturnValueOnce([
+            jest.fn(),
+            {
+                loading: true
+            }
+        ]);
+
+    const instance = createTestInstance(<CouponCode {...defaultProps} />);
+    expect(instance.toJSON()).toMatchSnapshot();
+});

packages/venia-ui/lib/components/CartPage/PriceAdjustments/CouponCode/couponCode.css

@@ -1,3 +1,4 @@
+/* Styles for "add" view. */
 .entryForm {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -28,7 +29,6 @@
 }
 
 /* Styles for "removal" view. */
-
 .removeButton {
     margin-left: 1rem;
     font-weight: bold;