-
Notifications
You must be signed in to change notification settings - Fork 685
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Pwa 2172: Validate Shopping Cart Promotions are displayed correctly (#…
…3609) * PWA-2172: Validate Shopping Cart Promotions are displayed correctly - Updated discountSummary and price summary allows individual discount dropdown - Added test coverage for feature * PWA-2172: Validate Shopping Cart Promotions are displayed correctly - Updated discountSummary and price summary allows individual discount dropdown - Added test coverage for feature * PWA-2172: Validate Shopping Cart Promotions are displayed correctly - Added dropdown animation - Updated tests - Updated discount summary styles * Fix formatting for fixture * Refactor talon out of discount summary component * Create jest test for talon * Refactor style to use Tailwind classes * Remove extra imports * Fix linting issue * Update snapshots * Remove bullets and increase spacing between price summary entries * Update tests and snapshots * Small change to trigger rebuild * Roll back small change * PWA-2172: Validate Shopping Cart Promotions are displayed correctly - Resolved cypress test failure * PWA-2172: Validate Shopping Cart Promotions are displayed correctly - Resolved cypress test failure * PWA-2171 Fix media files path Co-authored-by: James Calcaben <calcaben@adobe.com> Co-authored-by: James Calcaben <jcalcaben@users.noreply.github.com> Co-authored-by: Mikhaël Bois <mbois@absolunet.com> Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>
- Loading branch information
5 people
authored
Feb 25, 2022
1 parent
e3f5fd5
commit 5b87fec
Showing
23 changed files
with
1,751 additions
and
342 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
142 changes: 142 additions & 0 deletions
142
packages/peregrine/lib/talons/CartPage/PriceSummary/__tests__/useDiscountSummary.spec.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,142 @@ | ||
| import React from 'react'; | ||
| import { createTestInstance } from '@magento/peregrine'; | ||
|
|
||
| import { useDiscountSummary } from '../useDiscountSummary'; | ||
| import { act } from 'react-test-renderer'; | ||
|
|
||
| const Component = props => { | ||
| const talonProps = useDiscountSummary(props); | ||
|
|
||
| return <i {...talonProps} />; | ||
| }; | ||
|
|
||
| const mockDiscountData = [ | ||
| { | ||
| amount: { | ||
| currency: 'USD', | ||
| value: 10 | ||
| } | ||
| }, | ||
| { | ||
| amount: { | ||
| currency: 'USD', | ||
| value: 20 | ||
| } | ||
| }, | ||
| { | ||
| amount: { | ||
| currency: 'USD', | ||
| value: 30 | ||
| } | ||
| } | ||
| ]; | ||
|
|
||
| it('returns the proper shape', () => { | ||
| const props = { | ||
| data: mockDiscountData | ||
| }; | ||
|
|
||
| const rendered = createTestInstance(<Component {...props} />); | ||
|
|
||
| const talonProps = rendered.root.findByType('i').props; | ||
|
|
||
| expect(talonProps).toMatchInlineSnapshot(` | ||
| Object { | ||
| "discountData": Array [ | ||
| Object { | ||
| "amount": Object { | ||
| "currency": "USD", | ||
| "value": 10, | ||
| }, | ||
| }, | ||
| Object { | ||
| "amount": Object { | ||
| "currency": "USD", | ||
| "value": 20, | ||
| }, | ||
| }, | ||
| Object { | ||
| "amount": Object { | ||
| "currency": "USD", | ||
| "value": 30, | ||
| }, | ||
| }, | ||
| ], | ||
| "expanded": false, | ||
| "handleClick": [Function], | ||
| "totalDiscount": Object { | ||
| "currency": "USD", | ||
| "value": 60, | ||
| }, | ||
| } | ||
| `); | ||
| }); | ||
|
|
||
| it('toggles the expanded state when handleClick() is called', () => { | ||
| const props = { | ||
| data: mockDiscountData | ||
| }; | ||
|
|
||
| const rendered = createTestInstance(<Component {...props} />); | ||
|
|
||
| let talonProps = rendered.root.findByType('i').props; | ||
|
|
||
| act(() => { | ||
| talonProps.handleClick(); | ||
| }); | ||
|
|
||
| talonProps = rendered.root.findByType('i').props; | ||
|
|
||
| expect(talonProps.expanded).toBeTruthy(); | ||
|
|
||
| act(() => { | ||
| talonProps.handleClick(); | ||
| }); | ||
| talonProps = rendered.root.findByType('i').props; | ||
|
|
||
| expect(talonProps.expanded).toBeFalsy(); | ||
| }); | ||
|
|
||
| describe('returns a default amount when', () => { | ||
| test('there is no discount data', () => { | ||
| const props = {}; | ||
|
|
||
| const rendered = createTestInstance(<Component {...props} />); | ||
|
|
||
| const talonProps = rendered.root.findByType('i').props; | ||
|
|
||
| expect(talonProps).toMatchInlineSnapshot(` | ||
| Object { | ||
| "discountData": undefined, | ||
| "expanded": false, | ||
| "handleClick": [Function], | ||
| "totalDiscount": Object { | ||
| "currency": "USD", | ||
| "value": 0, | ||
| }, | ||
| } | ||
| `); | ||
| }); | ||
|
|
||
| test('discount data is an empty array', () => { | ||
| const props = { | ||
| data: [] | ||
| }; | ||
|
|
||
| const rendered = createTestInstance(<Component {...props} />); | ||
|
|
||
| const talonProps = rendered.root.findByType('i').props; | ||
|
|
||
| expect(talonProps).toMatchInlineSnapshot(` | ||
| Object { | ||
| "discountData": Array [], | ||
| "expanded": false, | ||
| "handleClick": [Function], | ||
| "totalDiscount": Object { | ||
| "currency": "USD", | ||
| "value": 0, | ||
| }, | ||
| } | ||
| `); | ||
| }); | ||
| }); |
71 changes: 71 additions & 0 deletions
71
packages/peregrine/lib/talons/CartPage/PriceSummary/useDiscountSummary.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import { useCallback, useState } from 'react'; | ||
|
|
||
| const DEFAULT_AMOUNT = { | ||
| currency: 'USD', | ||
| value: 0 | ||
| }; | ||
|
|
||
| /** | ||
| * Reduces discounts array into a single amount. | ||
| * | ||
| * @param {Array} discounts | ||
| */ | ||
| const getTotalDiscount = (discounts = []) => { | ||
| // discounts from data can be null | ||
| if (!discounts || !discounts.length) { | ||
| return DEFAULT_AMOUNT; | ||
| } else { | ||
| return { | ||
| currency: discounts[0].amount.currency, | ||
| value: discounts.reduce( | ||
| (acc, discount) => acc + discount.amount.value, | ||
| 0 | ||
| ) | ||
| }; | ||
| } | ||
| }; | ||
|
|
||
| /** | ||
| * This talon contains the logic for the discount summary component. | ||
| * | ||
| * @param {Object} props | ||
| * @param {Array} props.data Discount data | ||
| * @returns {DiscountSummaryProps} | ||
| */ | ||
| export const useDiscountSummary = props => { | ||
| const { data: discountData } = props; | ||
|
|
||
| const totalDiscount = getTotalDiscount(discountData); | ||
|
|
||
| const [expanded, setExpanded] = useState(false); | ||
|
|
||
| const handleClick = useCallback(() => { | ||
| setExpanded(value => !value); | ||
| }, [setExpanded]); | ||
|
|
||
| return { | ||
| totalDiscount, | ||
| discountData, | ||
| expanded, | ||
| handleClick | ||
| }; | ||
| }; | ||
|
|
||
| /** JSDocs type definitions */ | ||
|
|
||
| /** | ||
| * @typedef {Object} DiscountSummaryProps | ||
| * | ||
| * @property {DiscountObject} discount Object containing discount information | ||
| * @property {Array} discountData Array of discounts | ||
| * @property {Boolean} expanded | ||
| * @property {Function} handleClick Click handler for toggling the expanded state | ||
| * | ||
| */ | ||
|
|
||
| /** | ||
| * @typedef {Object} DiscountObject | ||
| * | ||
| * @property {String} currency Currency code | ||
| * @property {Number} value Discount amount | ||
| */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.