@magento/venia-ui 9.2.0-beta.1 → 9.3.0-beta.1

package/lib/components/CartPage/PriceSummary/__tests__/__snapshots__/priceSummary.spec.js.snap

@@ -4,54 +4,74 @@ exports[`renders PriceSummary correctly on cart page 1`] = `
 <div
   className="root"
 >
-  <div
-    className="lineItems"
-  >
-    <span
-      className="lineItemLabel"
-    >
-      <mock-FormattedMessage
-        defaultMessage="Subtotal"
-        id="priceSummary.lineItemLabel"
+  <div>
+    <ul>
+      <li
+        className="lineItems"
+      >
+        <span
+          className="lineItemLabel"
+        >
+          <mock-FormattedMessage
+            defaultMessage="Subtotal"
+            id="priceSummary.lineItemLabel"
+          />
+        </span>
+        <span
+          className="price"
+        >
+          <span>
+            $
+          </span>
+          <span>
+            3
+          </span>
+          <span>
+            .
+          </span>
+          <span>
+            50
+          </span>
+        </span>
+      </li>
+      <li
+        className="lineItems"
       />
-    </span>
-    <span
-      className="price"
-    >
-      <span>
-        $
-      </span>
-      <span>
-        3
-      </span>
-      <span>
-        .
-      </span>
-      <span>
-        50
-      </span>
-    </span>
-    <span
-      className="totalLabel"
-    >
-      Estimated Total
-    </span>
-    <span
-      className="totalPrice"
-    >
-      <span>
-        $
-      </span>
-      <span>
-        8
-      </span>
-      <span>
-        .
-      </span>
-      <span>
-        50
-      </span>
-    </span>
+      <li
+        className="lineItems"
+      />
+      <li
+        className="lineItems"
+      />
+      <li
+        className="lineItems"
+      />
+      <li
+        className="lineItems"
+      >
+        <span
+          className="totalLabel"
+        >
+          Estimated Total
+        </span>
+        <span
+          className="totalPrice"
+        >
+          <span>
+            $
+          </span>
+          <span>
+            8
+          </span>
+          <span>
+            .
+          </span>
+          <span>
+            50
+          </span>
+        </span>
+      </li>
+    </ul>
   </div>
   <div
     className="checkoutButton_container"
@@ -89,54 +109,74 @@ exports[`renders PriceSummary correctly on checkout page 1`] = `
 <div
   className="root"
 >
-  <div
-    className="lineItems"
-  >
-    <span
-      className="lineItemLabel"
-    >
-      <mock-FormattedMessage
-        defaultMessage="Subtotal"
-        id="priceSummary.lineItemLabel"
+  <div>
+    <ul>
+      <li
+        className="lineItems"
+      >
+        <span
+          className="lineItemLabel"
+        >
+          <mock-FormattedMessage
+            defaultMessage="Subtotal"
+            id="priceSummary.lineItemLabel"
+          />
+        </span>
+        <span
+          className="price"
+        >
+          <span>
+            $
+          </span>
+          <span>
+            3
+          </span>
+          <span>
+            .
+          </span>
+          <span>
+            50
+          </span>
+        </span>
+      </li>
+      <li
+        className="lineItems"
       />
-    </span>
-    <span
-      className="price"
-    >
-      <span>
-        $
-      </span>
-      <span>
-        3
-      </span>
-      <span>
-        .
-      </span>
-      <span>
-        50
-      </span>
-    </span>
-    <span
-      className="totalLabel"
-    >
-      Total
-    </span>
-    <span
-      className="totalPrice"
-    >
-      <span>
-        $
-      </span>
-      <span>
-        8
-      </span>
-      <span>
-        .
-      </span>
-      <span>
-        50
-      </span>
-    </span>
+      <li
+        className="lineItems"
+      />
+      <li
+        className="lineItems"
+      />
+      <li
+        className="lineItems"
+      />
+      <li
+        className="lineItems"
+      >
+        <span
+          className="totalLabel"
+        >
+          Total
+        </span>
+        <span
+          className="totalPrice"
+        >
+          <span>
+            $
+          </span>
+          <span>
+            8
+          </span>
+          <span>
+            .
+          </span>
+          <span>
+            50
+          </span>
+        </span>
+      </li>
+    </ul>
   </div>
 </div>
 `;
@@ -162,54 +202,74 @@ exports[`renders summary with loading state if query is loading 1`] = `
 <div
   className="root"
 >
-  <div
-    className="lineItems"
-  >
-    <span
-      className="lineItemLabel"
-    >
-      <mock-FormattedMessage
-        defaultMessage="Subtotal"
-        id="priceSummary.lineItemLabel"
+  <div>
+    <ul>
+      <li
+        className="lineItems"
+      >
+        <span
+          className="lineItemLabel"
+        >
+          <mock-FormattedMessage
+            defaultMessage="Subtotal"
+            id="priceSummary.lineItemLabel"
+          />
+        </span>
+        <span
+          className="priceUpdating"
+        >
+          <span>
+            $
+          </span>
+          <span>
+            3
+          </span>
+          <span>
+            .
+          </span>
+          <span>
+            50
+          </span>
+        </span>
+      </li>
+      <li
+        className="lineItems"
       />
-    </span>
-    <span
-      className="priceUpdating"
-    >
-      <span>
-        $
-      </span>
-      <span>
-        3
-      </span>
-      <span>
-        .
-      </span>
-      <span>
-        50
-      </span>
-    </span>
-    <span
-      className="totalLabel"
-    >
-      Estimated Total
-    </span>
-    <span
-      className="priceUpdating"
-    >
-      <span>
-        $
-      </span>
-      <span>
-        8
-      </span>
-      <span>
-        .
-      </span>
-      <span>
-        50
-      </span>
-    </span>
+      <li
+        className="lineItems"
+      />
+      <li
+        className="lineItems"
+      />
+      <li
+        className="lineItems"
+      />
+      <li
+        className="lineItems"
+      >
+        <span
+          className="totalLabel"
+        >
+          Estimated Total
+        </span>
+        <span
+          className="priceUpdating"
+        >
+          <span>
+            $
+          </span>
+          <span>
+            8
+          </span>
+          <span>
+            .
+          </span>
+          <span>
+            50
+          </span>
+        </span>
+      </li>
+    </ul>
   </div>
   <div
     className="checkoutButton_container"

package/lib/components/CartPage/PriceSummary/__tests__/discountSummary.spec.js

@@ -15,7 +15,8 @@ const defaultProps = {
             amount: {
                 value: 10,
                 currency: 'USD'
-            }
+            },
+            label: 'Special rebate'
         }
     ]
 };
@@ -31,18 +32,21 @@ test('renders accumulated discount value', () => {
         ...defaultProps,
         data: [
             {
+                label: 'Discount 1',
                 amount: {
                     value: 0,
                     currency: 'USD'
                 }
             },
             {
+                label: 'Discount 2',
                 amount: {
                     value: 1,
                     currency: 'USD'
                 }
             },
             {
+                label: 'Discount 3',
                 amount: {
                     value: 1,
                     currency: 'USD'
@@ -71,6 +75,7 @@ test('renders nothing if discount value is "0"', () => {
         ...defaultProps,
         data: [
             {
+                label: 'Discount 1',
                 amount: {
                     value: 0,
                     currency: 'USD'
@@ -82,3 +87,38 @@ test('renders nothing if discount value is "0"', () => {
 
     expect(tree.toJSON()).toMatchSnapshot();
 });
+
+test('renders discount label value from data ', () => {
+    const props = {
+        ...defaultProps,
+        data: [
+            {
+                amount: {
+                    value: 1,
+                    currency: 'USD'
+                },
+                label: 'Rebate'
+            }
+        ]
+    };
+    const tree = createTestInstance(<DiscountSummary {...props} />);
+
+    expect(tree.toJSON()).toMatchSnapshot();
+});
+
+test('renders "Discount applied" label if label data is empty', () => {
+    const props = {
+        ...defaultProps,
+        data: [
+            {
+                amount: {
+                    value: 1,
+                    currency: 'USD'
+                }
+            }
+        ]
+    };
+    const tree = createTestInstance(<DiscountSummary {...props} />);
+
+    expect(tree.toJSON()).toMatchSnapshot();
+});

package/lib/components/CartPage/PriceSummary/__tests__/giftCardSummary.ce.spec.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import GiftCardSummary from '../giftCardSummary.ce';
+
+const Component = () => {
+    return <GiftCardSummary />;
+};
+
+describe('#GiftCardSummary CE', () => {
+    it('renders', () => {
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});

package/lib/components/CartPage/PriceSummary/__tests__/giftCardSummary.ee.spec.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { createTestInstance } from '@magento/peregrine';
+
+import GiftCardSummary from '../giftCardSummary.ee';
+
+const defaultProps = {
+    classes: {
+        lineItemLabel: 'lineItemLabel',
+        price: 'price'
+    },
+    data: [
+        {
+            applied_balance: {
+                value: 10,
+                currency: 'USD'
+            }
+        }
+    ]
+};
+
+describe('#GiftCardSummary EE', () => {
+    it('renders gift card summary line item correctly', () => {
+        const tree = createTestInstance(<GiftCardSummary {...defaultProps} />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders accumulated gift card value', () => {
+        const props = {
+            ...defaultProps,
+            data: [
+                {
+                    applied_balance: {
+                        value: 0,
+                        currency: 'USD'
+                    }
+                },
+                {
+                    applied_balance: {
+                        value: 1,
+                        currency: 'USD'
+                    }
+                },
+                {
+                    applied_balance: {
+                        value: 1,
+                        currency: 'USD'
+                    }
+                }
+            ]
+        };
+
+        const tree = createTestInstance(<GiftCardSummary {...props} />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders nothing if gift card data is empty', () => {
+        const props = {
+            ...defaultProps,
+            data: []
+        };
+        const tree = createTestInstance(<GiftCardSummary {...props} />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders nothing if gift card value is "0"', () => {
+        const props = {
+            ...defaultProps,
+            data: [
+                {
+                    applied_balance: {
+                        value: 0,
+                        currency: 'USD'
+                    }
+                }
+            ]
+        };
+        const tree = createTestInstance(<GiftCardSummary {...props} />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});

package/lib/components/CartPage/PriceSummary/__tests__/giftOptionsSummary.ce.spec.js

@@ -0,0 +1,17 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import GiftOptionsSummary from '../giftOptionsSummary.ce';
+
+const Component = () => {
+    return <GiftOptionsSummary />;
+};
+
+describe('#GiftOptionsSummary CE', () => {
+    it('renders', () => {
+        const tree = createTestInstance(<Component />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});

package/lib/components/CartPage/PriceSummary/__tests__/giftOptionsSummary.ee.spec.js

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { createTestInstance } from '@magento/peregrine';
+
+import GiftOptionsSummary from '../giftOptionsSummary.ee';
+
+const defaultProps = {
+    classes: {
+        lineItemLabel: 'lineItemLabel',
+        price: 'price'
+    },
+    data: {
+        printed_card: {
+            value: 10,
+            currency: 'USD'
+        }
+    }
+};
+
+describe('#GiftOptionsSummary EE', () => {
+    it('renders gift options summary line item correctly', () => {
+        const tree = createTestInstance(
+            <GiftOptionsSummary {...defaultProps} />
+        );
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders accumulated gift options value', () => {
+        const props = {
+            ...defaultProps,
+            data: {
+                printed_card: {
+                    value: 10,
+                    currency: 'USD'
+                }
+            }
+        };
+
+        const tree = createTestInstance(<GiftOptionsSummary {...props} />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders nothing if gift options data is empty', () => {
+        const props = {
+            ...defaultProps,
+            data: {}
+        };
+        const tree = createTestInstance(<GiftOptionsSummary {...props} />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+
+    it('renders nothing if gift options value is "0"', () => {
+        const props = {
+            ...defaultProps,
+            data: {
+                printed_card: {
+                    value: 0,
+                    currency: 'USD'
+                }
+            }
+        };
+        const tree = createTestInstance(<GiftOptionsSummary {...props} />);
+
+        expect(tree.toJSON()).toMatchSnapshot();
+    });
+});

package/lib/components/CartPage/PriceSummary/__tests__/priceSummary.spec.js

@@ -77,6 +77,7 @@ const defaultTalonProps = {
         total: { currency: 'USD', value: 8.5 },
         discounts: null,
         giftCards: [],
+        giftOptions: {},
         taxes: [],
         shipping: { currency: 'USD', value: 5 }
     }
@@ -95,6 +96,7 @@ jest.mock(
                 total: { currency: 'USD', value: 8.5 },
                 discounts: null,
                 giftCards: [],
+                giftOptions: {},
                 taxes: [],
                 shipping: { currency: 'USD', value: 5 }
             }