diff --git a/src/helpers/text-helper.js b/src/helpers/text-helper.js index d9f66779..8e00c776 100644 --- a/src/helpers/text-helper.js +++ b/src/helpers/text-helper.js @@ -82,6 +82,11 @@ export function formatAddress(addressLine1, addressLine2, city, state, zipCode) return address; } +const currencyFormatter = new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD' +}); + /** * @function formatAmountInDollars * @param {string, number} amount @@ -89,11 +94,8 @@ export function formatAddress(addressLine1, addressLine2, city, state, zipCode) */ export function formatAmountInDollars(amount) { const numericAmount = typeof amount === 'string' ? parseFloat(amount) : amount; - if (Number.isNaN(numericAmount) || amount === null || amount === undefined) { return ''; } - - const roundedAmount = numericAmount.toFixed(2); - return `$${roundedAmount}`; + return currencyFormatter.format(amount); } diff --git a/src/helpers/text-helper.spec.js b/src/helpers/text-helper.spec.js index 6062ee14..cfc61dcc 100644 --- a/src/helpers/text-helper.spec.js +++ b/src/helpers/text-helper.spec.js @@ -50,14 +50,14 @@ describe('text-helper', () => { expect(formatAddress(addressLine1, addressLine2, city, state, zipCode)).toBe(expected); }); test.each([ - [1234.5678, '$1234.57'], - ['1234.5678', '$1234.57'], - [1234.56, '$1234.56'], - ['1234.56', '$1234.56'], - [1234.5, '$1234.50'], - ['1234.5', '$1234.50'], - [1234, '$1234.00'], - ['1234', '$1234.00'], + [1234.5678, '$1,234.57'], + ['1234.5678', '$1,234.57'], + [1234.56, '$1,234.56'], + ['1234.56', '$1,234.56'], + [1234.5, '$1,234.50'], + ['1234.5', '$1,234.50'], + [1234, '$1,234.00'], + ['1234', '$1,234.00'], [0, '$0.00'], ['0', '$0.00'], [NaN, ''], diff --git a/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap b/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap index f0fe9808..df4a8ae4 100644 --- a/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap +++ b/src/iss-components/cart-dropdown/__snapshots__/cart-dropdown.spec.js.snap @@ -2,10 +2,8 @@ exports[`cart-dropdown component initial data rendered as expected 1`] = ` Object { - "currencyFormatter": NumberFormat {}, + "baseServiceLineItems": Array [], + "deductible": null, "isExpanded": false, - "widget": Object { - "amountDue": "AmountDueTextWidget", - }, } `; diff --git a/src/iss-components/cart-dropdown/cart-dropdown.spec.js b/src/iss-components/cart-dropdown/cart-dropdown.spec.js index e55bdc36..16a35951 100644 --- a/src/iss-components/cart-dropdown/cart-dropdown.spec.js +++ b/src/iss-components/cart-dropdown/cart-dropdown.spec.js @@ -5,6 +5,14 @@ import cartDropdown from '@/iss-components/cart-dropdown/cart-dropdown.vue'; // Supporting Files import { getMountOptions } from '@/helpers/unit-test-helper.js'; import { useMainStore } from '@/store'; +import coverageStatuses from '@/constants/coverage-statuses'; +import { formatAmountInDollars } from '@/helpers/text-helper.js'; + +const VERIFYING_COVERAGE = 'Verifying coverage'; + +jest.mock('@/helpers/text-helper', () => ({ + formatAmountInDollars: jest.fn() +})); function getMountedComponent(mainInitialState = {}, initialData = {}, propsData = {}) { const mountOptions = getMountOptions({ @@ -55,7 +63,7 @@ describe('cart-dropdown component', () => { const reference = '#cart-table'; const isExpanded = true; const initialData = { isExpanded }; - const { wrapper } = getMountedComponent(cartDropdown, {}, initialData); + const { wrapper } = getMountedComponent({}, {}, initialData); // Act const cartTable = wrapper.find(reference); @@ -63,52 +71,295 @@ describe('cart-dropdown component', () => { // Assert expect(cartTable.exists()).toBeTruthy(); }); - }); - describe('computed', () => { - test.each([ - [true, true], - [false, false], - [false, null] - ])('isVerified returns %p when isVerified store value is %p', (expected, isVerified) => { + test('cart deductible when showDeductibleLineItem is true', () => { // Arrange + const reference = '#cart-deductible'; + const isExpanded = true; + const initialData = { isExpanded }; const storeData = { order: { payment: { - insuranceCoverage: { isVerified } + insuranceCoverage: { + coverageStatus: coverageStatuses.PENDING + } + }, + policy: { + isITAC: false } } }; - const { wrapper } = getMountedComponent(storeData); + const { wrapper } = getMountedComponent(storeData, {}, initialData); // Act - const result = wrapper.vm.isVerified; + const cartDeductible = wrapper.find(reference); // Assert - expect(result).toBe(expected); + expect(cartDeductible.exists()).toBeTruthy(); }); - describe('amountDueDisplayed', () => { - test('returns verifying coverage text when isVerified false', () => { + test('cart base price when showDeductibleLineItem is false', () => { + // Arrange + const reference = '#cart-base-price'; + const isExpanded = true; + const initialData = { isExpanded }; + const storeData = { + order: { + payment: { + insuranceCoverage: { + coverageStatus: coverageStatuses.PENDING + } + }, + policy: { + isITAC: true + } + } + }; + const { wrapper } = getMountedComponent(storeData, {}, initialData); + + // Act + const cartBasePrice = wrapper.find(reference); + + // Assert + expect(cartBasePrice.exists()).toBeTruthy(); + }); + }); + describe('does not display', () => { + test('cart deductible when showDeductibleLineItem is false', () => { + // Arrange + const reference = '#cart-deductible'; + const isExpanded = true; + const initialData = { isExpanded }; + const storeData = { + order: { + payment: { + insuranceCoverage: { + coverageStatus: coverageStatuses.PENDING + } + }, + policy: { + isITAC: true + } + } + }; + const { wrapper } = getMountedComponent(storeData, {}, initialData); + + // Act + const cartDeductible = wrapper.find(reference); + + // Assert + expect(cartDeductible.exists()).toBeFalsy(); + }); + test('cart base price when showDeductibleLineItem is true', () => { + // Arrange + const reference = '#cart-base-price'; + const isExpanded = true; + const initialData = { isExpanded }; + const storeData = { + order: { + payment: { + insuranceCoverage: { + coverageStatus: coverageStatuses.PENDING + } + }, + policy: { + isITAC: false + } + } + }; + const { wrapper } = getMountedComponent(storeData, {}, initialData); + + // Act + const cartBasePrice = wrapper.find(reference); + + // Assert + expect(cartBasePrice.exists()).toBeFalsy(); + }); + }); + describe('computed', () => { + describe('showDeductibleLineItem', () => { + test.each([[true], [false]])('returns false when isNoComp true', (isItac) => { // Arrange - const VERIFYING_COVERAGE = 'Verifying coverage'; const storeData = { order: { payment: { insuranceCoverage: { - isVerified: false + coverageStatus: coverageStatuses.NO_COMP } + }, + policy: { + isITAC: isItac } } }; const { wrapper } = getMountedComponent(storeData); // Act - const result = wrapper.vm.amountDueDisplayed; + const result = wrapper.vm.showDeductibleLineItem; // Assert - expect(result).toBe(VERIFYING_COVERAGE); + expect(result).toBeFalsy(); }); - test('returns formatted amount due when isVerified false', () => { - // TODO finish when methods done + test.each([ + [coverageStatuses.NO_COMP], + [coverageStatuses.PENDING]])('returns false when isITAC true', (coverageStatus) => { + // Arrange + const storeData = { + order: { + payment: { + insuranceCoverage: { + coverageStatus + } + }, + policy: { + isITAC: true + } + } + }; + const { wrapper } = getMountedComponent(storeData); + + // Act + const result = wrapper.vm.showDeductibleLineItem; + + // Assert + expect(result).toBeFalsy(); + }); + test('returns true when isNoComp false and isITAC false', () => { + // Arrange + const storeData = { + order: { + payment: { + insuranceCoverage: { + coverageStatus: coverageStatuses.PENDING + } + }, + policy: { + isITAC: false + } + } + }; + const { wrapper } = getMountedComponent(storeData); + + // Act + const result = wrapper.vm.showDeductibleLineItem; + + // Assert + expect(result).toBeTruthy(); + }); + }); + describe('isUnverified', () => { + test('returns false when no comp', () => { + // Arrange + const storeData = { + order: { + payment: { + insuranceCoverage: { + coverageStatus: coverageStatuses.NO_COMP + } + }, + policy: { + isITAC: false + }, + currentDeductible: null + } + }; + const { wrapper } = getMountedComponent(storeData); + + // Act + const result = wrapper.vm.isUnverified; + + // Assert + expect(result).toBeFalsy(); + }); + test('returns false when itac', () => { + // Arrange + const storeData = { + order: { + payment: { + insuranceCoverage: { + coverageStatus: coverageStatuses.PENDING + } + }, + policy: { + isITAC: true + }, + currentDeductible: null + } + }; + const { wrapper } = getMountedComponent(storeData); + + // Act + const result = wrapper.vm.isUnverified; + + // Assert + expect(result).toBeFalsy(); + }); + test('returns false when deductible not null and verified coverage status', () => { + // Arrange + const storeData = { + order: { + payment: { + insuranceCoverage: { + coverageStatus: coverageStatuses.VERIFIED + } + }, + policy: { + isITAC: false + }, + currentDeductible: 23 + } + }; + const { wrapper } = getMountedComponent(storeData); + + // Act + const result = wrapper.vm.isUnverified; + + // Assert + expect(result).toBeFalsy(); + }); + test('returns true when not no comp, not itac, and deductible is null', () => { + // Arrange + const storeData = { + order: { + payment: { + insuranceCoverage: { + coverageStatus: coverageStatuses.VERIFIED + } + }, + policy: { + isITAC: false + }, + currentDeductible: null + } + }; + const { wrapper } = getMountedComponent(storeData); + + // Act + const result = wrapper.vm.isUnverified; + + // Assert + expect(result).toBeTruthy(); + }); + test('returns true when not no comp, not itac, and coverage status is not verified', () => { + // Arrange + const storeData = { + order: { + payment: { + insuranceCoverage: { + coverageStatus: coverageStatuses.PENDING + } + }, + policy: { + isITAC: false + }, + currentDeductible: 12 + } + }; + const { wrapper } = getMountedComponent(storeData); + + // Act + const result = wrapper.vm.isUnverified; + + // Assert + expect(result).toBeTruthy(); }); }); describe('amountDue', () => { @@ -137,23 +388,133 @@ describe('cart-dropdown component', () => { }); }); describe('method', () => { - test.each([ - ['$0.00', 0], - ['$12.00', 12], - ['$12.30', 12.3], - ['$12.34', 12.34], - ['$12.35', 12.345], - ['$12.34', 12.344], - ['-$1.00', -1] - ])('get FormattedAmount returns `%` when amount %', (expected, amount) => { - // Arrange - const { wrapper } = getMountedComponent(); + describe('getDisplayed', () => { + test('returns "Verifying coverage" when not no comp, not itac, and deductible null', () => { + // Arrange + const storeData = { + order: { + payment: { + insuranceCoverage: { + coverageStatus: coverageStatuses.VERIFIED + } + }, + policy: { + isITAC: false + }, + currentDeductible: null + } + }; + const { wrapper } = getMountedComponent(storeData); + const amount = 123; - // Act - const result = wrapper.vm.getFormattedAmount(amount); + // Act + const result = wrapper.vm.getDisplayed(amount); - // Assert - expect(result).toBe(expected); + // Assert + expect(result).toBe(VERIFYING_COVERAGE); + }); + test('returns "Verifying coverage" when not no comp, not itac, and coverage status PENDING', () => { + // Arrange + const storeData = { + order: { + payment: { + insuranceCoverage: { + coverageStatus: coverageStatuses.PENDING + } + }, + policy: { + isITAC: false + }, + currentDeductible: 321 + } + }; + const { wrapper } = getMountedComponent(storeData); + const amount = 123; + + // Act + const result = wrapper.vm.getDisplayed(amount); + + // Assert + expect(result).toBe(VERIFYING_COVERAGE); + }); + test('returns dollar amount when itac', () => { + // Arrange + const storeData = { + order: { + payment: { + insuranceCoverage: { + coverageStatus: coverageStatuses.PENDING + } + }, + policy: { + isITAC: true + }, + currentDeductible: 321 + } + }; + const { wrapper } = getMountedComponent(storeData); + const amount = 123; + const dollarAmount = '$84.00'; + formatAmountInDollars.mockImplementationOnce(() => dollarAmount); + + // Act + const result = wrapper.vm.getDisplayed(amount); + + // Assert + expect(result).toBe(dollarAmount); + }); + test('returns dollar amount when no comp', () => { + // Arrange + const storeData = { + order: { + payment: { + insuranceCoverage: { + coverageStatus: coverageStatuses.NO_COMP + } + }, + policy: { + isITAC: false + }, + currentDeductible: 321 + } + }; + const { wrapper } = getMountedComponent(storeData); + const amount = 123; + const dollarAmount = '$84.00'; + formatAmountInDollars.mockImplementationOnce(() => dollarAmount); + + // Act + const result = wrapper.vm.getDisplayed(amount); + + // Assert + expect(result).toBe(dollarAmount); + }); + test('returns dollar amount when deductible set, not itac, not no comp, and verified', () => { + // Arrange + const storeData = { + order: { + payment: { + insuranceCoverage: { + coverageStatus: coverageStatuses.VERIFIED + } + }, + policy: { + isITAC: false + }, + currentDeductible: 321 + } + }; + const { wrapper } = getMountedComponent(storeData); + const amount = 123; + const dollarAmount = '$84.00'; + formatAmountInDollars.mockImplementationOnce(() => dollarAmount); + + // Act + const result = wrapper.vm.getDisplayed(amount); + + // Assert + expect(result).toBe(dollarAmount); + }); }); }); }); diff --git a/src/iss-components/cart-dropdown/cart-dropdown.vue b/src/iss-components/cart-dropdown/cart-dropdown.vue index 9ebfa58d..774cdf3b 100644 --- a/src/iss-components/cart-dropdown/cart-dropdown.vue +++ b/src/iss-components/cart-dropdown/cart-dropdown.vue @@ -9,20 +9,43 @@ aria-label="expand cart details" href="javascript:void(0)" class="col d-flex justify-content-between py-0"> - {{ amountDueLabel }} - {{ amountDueDisplayed }} + {{ amountDueLabel }} + {{ getDisplayed(amountDue) }}