[PWA-1002] Increase Test Coverage in venia-ui/lib/components/Checkout…

…Page (#3018)

* Add additional coverage to CheckoutPage components

* Bail on component manual mocks for now until warning can be suppressed

* Minor cleanup to mock names

Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>

packages/venia-ui/lib/components/CheckoutPage/OrderSummary/__tests__/__snapshots__/orderSummary.spec.js.snap

@@ -0,0 +1,19 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders order summary 1`] = `
+<div
+  className="root"
+>
+  <h1
+    className="title"
+  >
+    <mock-FormattedMessage
+      defaultMessage="Order Summary"
+      id="checkoutPage.orderSummary"
+    />
+  </h1>
+  <PriceSummary
+    isUpdating={[MockFunction isUpdating]}
+  />
+</div>
+`;

packages/venia-ui/lib/components/CheckoutPage/OrderSummary/__tests__/orderSummary.spec.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+
+import OrderSummary from '../orderSummary';
+
+jest.mock('../../../../classify');
+jest.mock('../../../CartPage/PriceSummary', () => 'PriceSummary');
+
+test('renders order summary', () => {
+    const mockIsUpdating = jest.fn().mockName('isUpdating');
+    const tree = createTestInstance(
+        <OrderSummary isUpdating={mockIsUpdating} />
+    );
+
+    expect(tree.toJSON()).toMatchSnapshot();
+});

packages/venia-ui/lib/components/CheckoutPage/PriceAdjustments/__tests__/__snapshots__/priceAdjustments.spec.js.snap

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders price adjustments 1`] = `
+<div
+  className="root"
+>
+  <mock-Accordion
+    canOpenMultiple={true}
+  >
+    <mock-Section
+      id="coupon_code"
+      title="Enter Coupon Code"
+    >
+      <CouponCode
+        setIsCartUpdating={[MockFunction setPageIsUpdating]}
+      />
+    </mock-Section>
+    <GiftCardSection
+      setIsCartUpdating={[MockFunction setPageIsUpdating]}
+    />
+    <mock-Section
+      id="gift_options"
+      title="See Gift Options"
+    >
+      <GiftOptions />
+    </mock-Section>
+  </mock-Accordion>
+</div>
+`;

packages/venia-ui/lib/components/CheckoutPage/PriceAdjustments/__tests__/priceAdjustments.spec.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+
+import PriceAdjustments from '../priceAdjustments';
+
+jest.mock('../../../../classify');
+jest.mock('../../../Accordion', () => ({
+    Accordion: props => <mock-Accordion {...props} />,
+    Section: props => <mock-Section {...props} />
+}));
+jest.mock('../../../CartPage/PriceAdjustments/CouponCode', () => 'CouponCode');
+jest.mock(
+    '../../../CartPage/PriceAdjustments/giftCardSection',
+    () => 'GiftCardSection'
+);
+jest.mock(
+    '../../../CartPage/PriceAdjustments/GiftOptions',
+    () => 'GiftOptions'
+);
+
+test('renders price adjustments', () => {
+    const mockSetPageIsUpdating = jest.fn().mockName('setPageIsUpdating');
+    const tree = createTestInstance(
+        <PriceAdjustments setPageIsUpdating={mockSetPageIsUpdating} />
+    );
+
+    expect(tree.toJSON()).toMatchSnapshot();
+});

packages/venia-ui/lib/components/CheckoutPage/__tests__/__snapshots__/checkoutPage.spec.js.snap

@@ -363,6 +363,37 @@ exports[`CheckoutPage renders checkout content for guest 1`] = `
 </div>
 `;
 
+exports[`CheckoutPage renders empty cart 1`] = `
+<div
+  className="root"
+>
+  Title
+  <div
+    className="empty_cart_container"
+  >
+    <div
+      className="heading_container"
+    >
+      <h1
+        className="heading"
+      >
+        Guest Checkout
+      </h1>
+    </div>
+    <h3>
+      <mock-FormattedMessage
+        defaultMessage="There are no items in your cart."
+        id="checkoutPage.emptyMessage"
+      />
+    </h3>
+  </div>
+  <GuestSignIn
+    isActive={false}
+    toggleActiveContent={[MockFunction toggleSignInContent]}
+  />
+</div>
+`;
+
 exports[`CheckoutPage renders loading indicator 1`] = `
 <div
   className="global"
@@ -442,3 +473,27 @@ exports[`CheckoutPage renders loading indicator 1`] = `
   </span>
 </div>
 `;
+
+exports[`CheckoutPage renders price adjustments and review order button 1`] = `
+Object {
+  "children": <PriceAdjustments
+    setPageIsUpdating={[MockFunction setIsUpdating]}
+  />,
+  "className": "price_adjustments_container",
+}
+`;
+
+exports[`CheckoutPage renders price adjustments and review order button 2`] = `
+Object {
+  "children": <FormattedMessage
+    defaultMessage="Review Order"
+    id="checkoutPage.reviewOrder"
+  />,
+  "className": "review_order_button",
+  "disabled": true,
+  "negative": false,
+  "onClick": [MockFunction handleReviewOrder],
+  "priority": "high",
+  "type": "button",
+}
+`;

packages/venia-ui/lib/components/CheckoutPage/__tests__/checkoutPage.spec.js

@@ -181,4 +181,34 @@ describe('CheckoutPage', () => {
 
         expect(signInComponent.props.isActive).toBe(true);
     });
+
+    test('renders empty cart', () => {
+        useCheckoutPage.mockReturnValueOnce({
+            ...defaultTalonProps,
+            isCartEmpty: true
+        });
+
+        const tree = createTestInstance(<CheckoutPage />);
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    test('renders price adjustments and review order button', () => {
+        useCheckoutPage.mockReturnValueOnce({
+            ...defaultTalonProps,
+            checkoutStep: CHECKOUT_STEP.PAYMENT,
+            handleReviewOrder: jest.fn().mockName('handleReviewOrder'),
+            isUpdating: true
+        });
+
+        const tree = createTestInstance(<CheckoutPage />);
+        const priceAdjustmentsComponent = tree.root.findByProps({
+            className: 'price_adjustments_container'
+        });
+        const reviewOrderButtonComponent = tree.root.findByProps({
+            className: 'review_order_button'
+        });
+
+        expect(priceAdjustmentsComponent.props).toMatchSnapshot();
+        expect(reviewOrderButtonComponent.props).toMatchSnapshot();
+    });
 });