Finishing unit tests

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 '';
     }
-
+    return currencyFormatter.format(amount);
-    const roundedAmount = numericAmount.toFixed(2);
-    return `$${roundedAmount}`;
 }

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, '$1,234.57'],
-        ['1234.5678', '$1234.57'],
+        ['1234.5678', '$1,234.57'],
-        [1234.56, '$1234.56'],
+        [1234.56, '$1,234.56'],
-        ['1234.56', '$1234.56'],
+        ['1234.56', '$1,234.56'],
-        [1234.5, '$1234.50'],
+        [1234.5, '$1,234.50'],
-        ['1234.5', '$1234.50'],
+        ['1234.5', '$1,234.50'],
-        [1234, '$1234.00'],
+        [1234, '$1,234.00'],
-        ['1234', '$1234.00'],
+        ['1234', '$1,234.00'],
         [0, '$0.00'],
         ['0', '$0.00'],
         [NaN, ''],

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",
-  },
 }
 `;

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();
         });
-    });
+        test('cart deductible when showDeductibleLineItem is true', () => {
-    describe('computed', () => {
-        test.each([
-            [true, true],
-            [false, false],
-            [false, null]
-        ])('isVerified returns %p when isVerified store value is %p', (expected, isVerified) => {
             // 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.isVerifiedCoverageStatus;
+            const cartDeductible = wrapper.find(reference);
 
             // Assert
-            expect(result).toBe(expected);
+            expect(cartDeductible.exists()).toBeTruthy();
         });
-        describe('amountDueDisplayed', () => {
+        test('cart base price when showDeductibleLineItem is false', () => {
-            test('returns verifying coverage text when isVerified 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', () => {
+            test.each([
-                // TODO finish when methods done
+                [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([
+        describe('getDisplayed', () => {
-            ['$0.00', 0],
+            test('returns "Verifying coverage" when not no comp, not itac, and deductible null', () => {
-            ['$12.00', 12],
+                // Arrange
-            ['$12.30', 12.3],
+                const storeData = {
-            ['$12.34', 12.34],
+                    order: {
-            ['$12.35', 12.345],
+                        payment: {
-            ['$12.34', 12.344],
+                            insuranceCoverage: {
-            ['-$1.00', -1]
+                                coverageStatus: coverageStatuses.VERIFIED
-        ])('get FormattedAmount returns `%` when amount %', (expected, amount) => {
+                            }
-            // Arrange
+                        },
-            const { wrapper } = getMountedComponent();
+                        policy: {
+                            isITAC: false
+                        },
+                        currentDeductible: null
+                    }
+                };
+                const { wrapper } = getMountedComponent(storeData);
+                const amount = 123;
 
-            // Act
+                // Act
-            const result = wrapper.vm.getFormattedAmount(amount);
+                const result = wrapper.vm.getDisplayed(amount);
 
-            // Assert
+                // Assert
-            expect(result).toBe(expected);
+                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);
+            });
         });
     });
 });

src/iss-components/cart-dropdown/cart-dropdown.vue

@@ -45,6 +45,7 @@
 <script>
 import { useMainStore } from '@/store';
 import getPriceOfLineItems from '@/helpers/price-calculator.js';
+import { formatAmountInDollars } from '@/helpers/text-helper.js';
 
 const VERIFYING_COVERAGE = 'Verifying coverage';
 
@@ -55,18 +56,20 @@ export default {
         showAsPaid: Boolean,
         amountDueLabel: String,
         deductibleLabel: String,
-        basePriceLabel: String,
+        basePriceLabel: String
-        baseServiceLineItems: Array
     },
     data() {
         const { currentDeductible } = useMainStore().order;
+        const { supportingItems, glassParts, otherParts } = useMainStore().lineItems;
+        const baseServiceLineItems = [
+            ...(supportingItems ?? []),
+            ...(glassParts ?? []),
+            ...(otherParts ?? [])
+        ];
         return {
             deductible: currentDeductible,
-            isExpanded: false,
+            baseServiceLineItems,
-            currencyFormatter: new Intl.NumberFormat('en-US', {
+            isExpanded: false
-                style: 'currency',
-                currency: 'USD'
-            })
         };
     },
     computed: {
@@ -97,13 +100,10 @@ export default {
         toggleIsExpanded() {
             this.isExpanded = !this.isExpanded;
         },
-        getFormattedAmount(amount) {
-            return this.currencyFormatter.format(amount);
-        },
         getDisplayed(amount) {
             return this.isUnverified && this.showDeductibleLineItem
                 ? VERIFYING_COVERAGE
-                : this.getFormattedAmount(amount);
+                : formatAmountInDollars(amount);
         }
     }
 };
@@ -130,7 +130,7 @@ export default {
     overflow: hidden;
     visibility: hidden;
 }
-
+e3
 .cart-toggle {
     .amount-due {
         color: $green;

src/layouts/coverage-statement/__snapshots__/coverage-statement.spec.js.snap

@@ -3,7 +3,6 @@
 exports[`coverageStatement.vue-working returns the initial data 1`] = `
 Object {
   "baseServiceLineItems": Array [],
-  "currencyFormatter": NumberFormat {},
   "deductibleText": "Your deductible is",
   "isNoComp": false,
   "isRepair": true,

src/layouts/coverage-statement/coverage-statement.spec.js

@@ -882,25 +882,6 @@ describe('coverageStatement.vue-working', () => {
                 expect(result).toBeTruthy();
             });
         });
-        test.each([
-            [0, '$0.00'],
-            [1, '$1.00'],
-            [12, '$12.00'],
-            [1.2, '$1.20'],
-            [1.25, '$1.25'],
-            [1.254, '$1.25'],
-            [1.255, '$1.26'],
-            [-1, '-$1.00']
-        ])('getFormattedAmount given %p returns "%p"', (value, expected) => {
-            // Arrange
-            const { wrapper } = getMountedComponent();
-
-            // Act
-            const result = wrapper.vm.getFormattedAmount(value);
-
-            // Assert
-            expect(result).toBe(expected);
-        });
         describe('navigateForward', () => {
             const servicePrice = 82;
             beforeEach(() => {

src/layouts/coverage-statement/coverage-statement.vue

@@ -131,6 +131,7 @@ import bailoutMessage from '@/constants/bailoutMessage';
 import coverageStatuses from '@/constants/coverage-statuses';
 import widgetFields from '@/constants/cms-widget-fields.js';
 import getPriceOfLineItems from '@/helpers/price-calculator.js';
+import { formatAmountInDollars } from '@/helpers/text-helper.js';
 
 const SAFELITE_PROVIDER = 'Safelite';
 
@@ -213,10 +214,6 @@ export default {
         const { isRepair } = useMainStore().damage;
         const { policyLookupSuccessful, noCoverage } = useMainStore().policy;
         return {
-            currencyFormatter: new Intl.NumberFormat('en-US', {
-                style: 'currency',
-                currency: 'USD'
-            }),
             isRepair,
             policyLookupSuccessful,
             isNoComp: noCoverage ?? false,
@@ -293,7 +290,7 @@ export default {
             return useMainStore().order.currentDeductible;
         },
         deductibleForDisplay() {
-            return this.getFormattedAmount(this.deductibleValue);
+            return formatAmountInDollars(this.deductibleValue);
         },
         registerClaimSuccessful() {
             return useMainStore().payment.insuranceCoverage.isVerified;
@@ -328,13 +325,13 @@ export default {
             return getPriceOfLineItems(this.baseServiceLineItems);
         },
         servicePriceForDisplay() {
-            return this.getFormattedAmount(this.totalServicePrice);
+            return formatAmountInDollars(this.totalServicePrice);
         },
         itacCostSavings() {
             return this.deductibleValue - this.totalServicePrice;
         },
         itacCostSavingsForDisplay() {
-            return this.getFormattedAmount(this.itacCostSavings);
+            return formatAmountInDollars(this.itacCostSavings);
         },
         serviceProviderQuestionText() {
             return this.getCmsContent(
@@ -379,9 +376,6 @@ export default {
         arePagePrerequisitesValid() {
             return !!useMainStore().vehicle.carId;
         },
-        getFormattedAmount(amount) {
-            return this.currencyFormatter.format(amount);
-        },
         async initializeComponent() {
             useMainStore().updatePolicyITACFlag(this.verifiedITAC);
             const coverageStatus = this.verifiedITAC || this.verifiedNoComp

src/store/index.js

@@ -258,7 +258,7 @@ export const useMainStore = defineStore({
         isClaimRegistrationRequired: (state) => state.issConfig.isClaimRegistrationRequired,
         isClaimAlreadyRegistered: (state) => state.order.payment.insuranceCoverage.claimNumber !== null,
         isBailout: (state) => state.applicationUser.pageData[issPageValues.BAILOUT_PAGE] != null,
-        isNoComp: (state) => state.order.policy.coverageStatus === coverageStatuses.NO_COMP,
+        isNoComp: (state) => state.order.payment.insuranceCoverage.coverageStatus === coverageStatuses.NO_COMP,
         isVerifiedCoverageStatus: (state) => state.order.payment.insuranceCoverage.coverageStatus === coverageStatuses.VERIFIED,
         eventBusItem: (state) => (eventCategory, eventSubCategory) => {
             const matchedEvent = state.applicationUser.eventBus.find(({ category, subCategory }) => category === eventCategory && subCategory === eventSubCategory);

src/store/store.spec.js

@@ -441,6 +441,7 @@ describe('Store', () => {
             expect.assertions(5);
             const error = 'register claim error';
             globalMethods.callHttpClient = jest.fn().mockReturnValue(Promise.reject(error));
+            store.payment.insuranceCoverage.coverageStatus = coverageStatuses.PENDING;
 
             // Act
             await store.registerClaim().catch((e) => {