Merge pull request #385 from Safelite/feature/digital/SSR-603

Feature/digital/ssr 603

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

@@ -1,231 +1,757 @@
-describe('test', () => {
+// Components
-    test('dummy test', () => {
+import coverageStatement from '@/layouts/coverage-statement/coverage-statement';
-        // Arrange
-        let test = 'test';
 
-        // Act
+// Supporting Files
-        test = 'test2';
+import { mount } from '@vue/test-utils';
+import { getMountOptions } from '@/helpers/unit-test-helper.js';
+import { createTestingPinia } from '@pinia/testing';
+import { navigationScenarios } from '@/router/router-constants/navigation-scenarios.js';
+import { useMainStore } from '@/store/index.js';
+import { getRandomString, getRandomInt } from '@/helpers/data-generation.js';
+import { settleAllPromises } from '@/helpers/layout-helper.js';
+import { fetchCmsContentForPage } from '@/helpers/cms-content-helper';
 
-        // Assert
+jest.mock('@/helpers/layout-helper.js', () => ({
-        expect(test.length).toBe(5);
+    settleAllPromises: jest.fn()
+}));
+
+jest.mock('@/helpers/cms-content-helper', () => ({
+    fetchCmsContentForPage: jest.fn(),
+    setupModalLinks: jest.fn(),
+    processIfStatements: jest.fn()
+}));
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn().mockImplementation(() => ''),
+        setCmsContent: jest.fn()
+    }
+};
+
+const footerStub = {
+    render: () => {},
+    methods: {
+        updateButtonText: jest.fn()
+    }
+};
+
+const loadingModalStub = {
+    render: () => {},
+    methods: {
+        showModal: jest.fn(),
+        hideModal: jest.fn()
+    }
+};
+
+function getMountedComponent(mainInitialState = {}, initialData = {}) {
+    const mountOptions = getMountOptions({
+        router: {
+            navigate: jest.fn()
+        }
+    });
+
+    mountOptions.global.stubs = {
+        siteFooter: footerStub,
+        siteHeader: true,
+        recalModal: true,
+        contentGroupModal: true,
+        alert: true,
+        loadingModal: loadingModalStub
+    };
+    mountOptions.global.plugins = [createTestingPinia({
+        initialState: {
+            main: mainInitialState
+        }
+    })];
+    mountOptions.mixins = [mockMixin];
+    mountOptions.data = () => (
+        initialData
+    //     {
+    //     foo: 'fromOptions',
+
+    // }
+    );
+
+    const apiResponses = {
+        supportingItems: []
+    };
+    const apiPromise = Promise.resolve(apiResponses);
+    settleAllPromises.mockImplementation(() => apiPromise);
+    fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
+
+    const wrapper = mount(coverageStatement, mountOptions);
+    return { wrapper };
+}
+
+describe('coverageStatement.vue', () => {
+    describe('method arePagePrerequisitesValid...', () => {
+        test('Should return true for valid page requisites if vin exists', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent({
+                order: {
+                    vehicle: {
+                        vin: getRandomString(5, 20)
+                    }
+                }
+            });
+
+            // Act
+            const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+
+            // Assert
+            expect(arePagePrerequisitesValid).toBeTruthy();
+        });
+        test('Should return false for valid page requisites if vin is missing', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent({
+                order: {
+                    vehicle: {
+                        vin: null
+                    }
+                }
+            });
+
+            // Act
+            const arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+
+            // Assert
+            expect(arePagePrerequisitesValid).not.toBeTruthy();
+        });
+    });
+    describe('Rendering', () => {
+        test('Should render site header', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent({});
+
+            // Act
+            const siteHeader = wrapper.findComponent({ ref: 'siteHeader' });
+
+            // Assert
+            expect(siteHeader.exists()).toBe(true);
+        });
+        test('Should render site subheader', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent({});
+
+            // Act
+            const subheader = wrapper.find({ ref: 'siteSubHeader' });
+
+            // Assert
+            expect(subheader.exists()).toBe(true);
+        });
+
+        test('Should render explanatory text', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent({});
+
+            // Act
+            const explanatoryText = wrapper.find({ ref: 'explanatoryText' });
+
+            // Assert
+            expect(explanatoryText.exists()).toBe(true);
+        });
+        test('Should render secondary text', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent({});
+
+            // Act
+            const secondaryText = wrapper.find({ ref: 'secondaryText' });
+
+            // Assert
+            expect(secondaryText.exists()).toBe(true);
+        });
+        test('Should render site footer', () => {
+            // Arrange
+            const { wrapper } = getMountedComponent({});
+
+            // Act
+            const footer = wrapper.findComponent({ ref: 'siteFooter' });
+
+            // Assert
+            expect(footer.exists()).toBe(true);
+        });
+    });
+    describe('Verified ITAC scenario', () => {
+        test('If policy lookup successful, not No Comp, and deductible > service price, verifiedITAC returns true', () => {
+            // Arrange
+            const sellingPrice = getRandomInt(100, 500);
+            const deductible = sellingPrice + 1;
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    },
+                    policy: {
+                        noCoverage: false,
+                        deductible: {
+                            repair: deductible
+                        },
+                        policyLookupSuccessful: true
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+            wrapper.setData({
+                availableLineItems: [
+                    {
+                        sellingPrice,
+                        kitPrice: 0,
+                        laborAmount: 0
+                    }
+                ]
+            });
+
+            // Assert
+            expect(wrapper.vm.verifiedITAC).toBeTruthy();
+        });
+        test('If policy lookup unsuccessful, verifiedITAC returns false', () => {
+            // Arrange
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    },
+                    policy: {
+                        policyLookupSuccessful: false
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+
+            // Assert
+            expect(wrapper.vm.verifiedITAC).toBeFalsy();
+        });
+        test('If No Comp, verifiedITAC returns false', () => {
+            // Arrange
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    },
+                    policy: {
+                        noCoverage: true
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+
+            // Assert
+            expect(wrapper.vm.verifiedITAC).toBeFalsy();
+        });
+        test('If deductible < service price, verifiedITAC returns false', () => {
+            // Arrange
+            const sellingPrice = getRandomInt(100, 500);
+            const deductible = sellingPrice - 1;
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    },
+                    policy: {
+                        noCoverage: false,
+                        deductible: {
+                            repair: deductible
+                        }
+                    }
+                }
+            };
+
+            const { wrapper } = getMountedComponent(mainInitialState);
+            wrapper.setData({
+                availableLineItems: [
+                    {
+                        sellingPrice,
+                        kitPrice: 0,
+                        laborAmount: 0
+                    }
+                ]
+            });
+
+            // Assert
+            expect(wrapper.vm.verifiedITAC).toBeFalsy();
+        });
+    });
+    describe('Verified Deductible scenario', () => {
+        test('If policy lookup successful, not No Comp, and service price > deductible, verifiedITAC returns true', () => {
+            // Arrange
+            const sellingPrice = getRandomInt(100, 500);
+            const deductible = sellingPrice - 1;
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    },
+                    policy: {
+                        noCoverage: false,
+                        deductible: {
+                            repair: deductible
+                        },
+                        policyLookupSuccessful: true
+                    }
+                }
+            };
+
+            const { wrapper } = getMountedComponent(mainInitialState);
+            wrapper.setData({
+                availableLineItems: [
+                    {
+                        sellingPrice,
+                        kitPrice: 0,
+                        laborAmount: 0
+                    }
+                ]
+            });
+
+            // Assert
+            expect(wrapper.vm.verifiedDeductible).toBeTruthy();
+        });
+        test('If policy lookup unsuccessful, verifiedDeductible returns false', () => {
+            // Arrange
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    },
+                    policy: {
+                        policyLookupSuccessful: false
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+
+            // Assert
+            expect(wrapper.vm.verifiedDeductible).toBeFalsy();
+        });
+        test('If No Comp, verifiedDeductible returns false', () => {
+            // Arrange
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    },
+                    policy: {
+                        noCoverage: true
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+
+            // Assert
+            expect(wrapper.vm.verifiedDeductible).toBeFalsy();
+        });
+        test('If service price < deductible, verifiedDeductible returns false', () => {
+            const sellingPrice = getRandomInt(100, 500);
+            const deductible = sellingPrice + 1;
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    },
+                    policy: {
+                        noCoverage: false,
+                        deductible: {
+                            repair: deductible
+                        }
+                    }
+                }
+            };
+
+            const { wrapper } = getMountedComponent(mainInitialState);
+            wrapper.setData({
+                availableLineItems: [
+                    {
+                        sellingPrice,
+                        kitPrice: 0,
+                        laborAmount: 0
+                    }
+                ]
+            });
+
+            // Assert
+            expect(wrapper.vm.verifiedDeductible).toBeFalsy();
+        });
+    });
+    describe('No Comp scenario', () => {
+        test('If noCoverage = true, verifiedNoComp returns true', () => {
+            // Arrange
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    },
+                    policy: {
+                        noCoverage: true,
+                        policyLookupSuccessful: true
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+
+            // Assert
+            expect(wrapper.vm.verifiedNoComp).toBeTruthy();
+        });
+        test('If noCoverage = false, verifiedNoComp returns false', () => {
+            // Arrange
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    },
+                    policy: {
+                        noCoverage: false
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+
+            // Assert
+            expect(wrapper.vm.verifiedNoComp).toBeFalsy();
+        });
+    });
+    describe('Unverified scenario', () => {
+        test('If policyLookupSuccessful false, unverified returns true', () => {
+            // Arrange
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    },
+                    policy: {
+                        policyLookupSuccessful: false
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+
+            // Assert
+            expect(wrapper.vm.unverified).toBeTruthy();
+        });
+        test('If policyLookupSuccessful is true, unverified returns false', () => {
+            // Arrange
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    },
+                    policy: {
+                        policyLookupSuccessful: true
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+
+            // Assert
+            expect(wrapper.vm.unverified).toBeFalsy();
+        });
+    });
+    describe('Navigation', () => {
+        test('If Unverified, navigate forward with CLICKED_FORWARD scenario', () => {
+            // Arrange
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    },
+                    policy: {
+                        policyLookupSuccessful: false
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate)
+                .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD, undefined);
+        });
+        test('If Verified Deductible, navigate forward with CLICKED_FORWARD scenario', () => {
+            // Arrange
+            const sellingPrice = getRandomInt(100, 500);
+            const deductible = sellingPrice - 1;
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    },
+                    policy: {
+                        noCoverage: false,
+                        deductible: {
+                            repair: deductible
+                        },
+                        policyLookupSuccessful: true
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+            wrapper.setData({
+                availableLineItems: [
+                    {
+                        sellingPrice,
+                        kitPrice: 0,
+                        laborAmount: 0
+                    }
+                ]
+            });
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate)
+                .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD, undefined);
+        });
+        test('If Verified ITAC and selected Safelite, navigate forward with CLICKED_FORWARD_WITH_SAFELITE scenario', () => {
+            // Arrange
+            const sellingPrice = getRandomInt(100, 500);
+            const deductible = sellingPrice + 1;
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    },
+                    policy: {
+                        noCoverage: false,
+                        deductible: {
+                            repair: deductible
+                        },
+                        policyLookupSuccessful: true
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+            wrapper.setData({
+                availableLineItems: [
+                    {
+                        sellingPrice,
+                        kitPrice: 0,
+                        laborAmount: 0
+                    }
+                ],
+                selectedProvider: 'Safelite'
+            });
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate)
+                .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, undefined);
+        });
+        test('If Verified ITAC, selected other shop, and TPA enabled, navigate forward w/ CLICKED_FORWARD_WITH_TPA_ENABLED', () => {
+            // Arrange
+            const sellingPrice = getRandomInt(100, 500);
+            const deductible = sellingPrice + 1;
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    },
+                    policy: {
+                        noCoverage: false,
+                        deductible: {
+                            repair: deductible
+                        },
+                        policyLookupSuccessful: true
+                    }
+                },
+                issConfig: {
+                    enableTPAFlow: true
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+            wrapper.setData({
+                availableLineItems: [
+                    {
+                        sellingPrice,
+                        kitPrice: 0,
+                        laborAmount: 0
+                    }
+                ],
+                selectedProvider: 'Other'
+            });
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate)
+                .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_TPA_ENABLED, undefined);
+        });
+        test('If Verified ITAC, selected other shop, and TPA disabled, navigate forward w/ CLICKED_FORWARD_WITH_TPA_DISABLED', () => {
+            // Arrange
+            const sellingPrice = getRandomInt(100, 500);
+            const deductible = sellingPrice + 1;
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    },
+                    policy: {
+                        noCoverage: false,
+                        deductible: {
+                            repair: deductible
+                        },
+                        policyLookupSuccessful: true
+                    }
+                },
+                issConfig: {
+                    enableTPAFlow: false
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+            wrapper.setData({
+                availableLineItems: [
+                    {
+                        sellingPrice,
+                        kitPrice: 0,
+                        laborAmount: 0
+                    }
+                ],
+                selectedProvider: 'Other'
+            });
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate)
+                .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_TPA_DISABLED, undefined);
+        });
+        test('If No Comp and selected Safelite, navigate forward with CLICKED_FORWARD scenario', () => {
+            // Arrange
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    },
+                    policy: {
+                        noCoverage: true,
+                        policyLookupSuccessful: true
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+            wrapper.setData({
+                isVerified: false,
+                selectedProvider: 'Safelite'
+            });
+
+            // Act
+            wrapper.vm.forwardButtonAction();
+
+            // Assert
+            expect(wrapper.vm.$router.navigate)
+                .toHaveBeenCalledWith(navigationScenarios.CLICKED_FORWARD_WITH_SAFELITE, undefined);
+        });
+    });
+    describe('ADAS', () => {
+        test('if Replace and parts require recalibration, isADAS should return true', () => {
+            // Arrange
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: false
+                    },
+                    lineItems: {
+                        glassParts: [
+                            {
+                                requiresRecalibration: true
+                            }
+                        ]
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+
+            // Assert
+            expect(wrapper.vm.isADAS).toBeTruthy();
+        });
+        test('if Replace and parts do not require recalibration, isADAS should return false', () => {
+            // Arrange
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: false
+                    },
+                    lineItems: {
+                        glassParts: [
+                            {
+                                requiresRecalibration: false
+                            }
+                        ]
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+
+            // Assert
+            expect(wrapper.vm.isADAS).toBeFalsy();
+        });
+        test('if Repair, isADAS should return true', () => {
+            // Arrange
+            const mainInitialState = {
+                order: {
+                    damage: {
+                        isRepair: true
+                    }
+                }
+            };
+            const { wrapper } = getMountedComponent(mainInitialState);
+
+            // Assert
+            expect(wrapper.vm.isADAS).toBeFalsy();
+        });
+    });
+    describe('claim registration api call', () => {
+        it('claim registration not required => method not called', async () => {
+            // Arrange
+            const { wrapper } = getMountedComponent({
+                issConfig: {
+                    isClaimRegistrationRequired: false
+                }
+            });
+
+            // Assert
+            expect(wrapper.vm.mainStore.registerClaim).not.toHaveBeenCalled();
+        });
+
+        it('claim registration required => register claim method called', async () => {
+            // Arrange
+            const sellingPrice = getRandomInt(50, 100);
+            const deductible = sellingPrice - 1;
+            const initialStore = {
+                order: {
+                    policy: {
+                        policyLookupSuccessful: true,
+                        noCoverage: false,
+                        deductible: {
+                            repair: deductible
+                        }
+                    },
+                    damage: {
+                        isRepair: true
+                    }
+                },
+                issConfig: {
+                    isClaimRegistrationRequired: true
+                }
+            };
+            const initialData = {
+                availableLineItems: [
+                    {
+                        sellingPrice,
+                        kitPrice: 0,
+                        laborAmount: 0
+                    }
+                ]
+            };
+
+            const { wrapper } = getMountedComponent(initialStore, initialData);
+
+            // Assert
+            expect(wrapper.vm.mainStore.registerClaim).toHaveBeenCalled();
+        });
     });
 });
-
-// *Testing to be completed on SSR-603
-
-// // Components
-// import coverageStatement from "@/layouts/coverage-statement/coverage-statement.vue";
-
-// // Supporting files
-// import { shallowMount } from "@vue/test-utils";
-// import { getMountOptions } from "@/helpers/unit-test-helper.js";
-// import { useMainStore } from "@/store";
-// import baseMixin from "@/mixins/base-mixin";
-// import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin";
-// import { applicationConfig } from "@/constants/application-config";
-// import { fetchCmsContentForPage, setupModalLinks } from "@/helpers/cms-content-helper";
-// import { settleAllPromises } from "@/helpers/layout-helper.js";
-// import { createTestingPinia } from '@pinia/testing';
-// import { getRandomString } from '@/helpers/data-generation.js';
-
-// jest.mock("@/helpers/damage-helper", () => ({
-//     getDamageString: jest.fn(),
-// }));
-
-// // Mock our module for promises.
-// jest.mock("@/helpers/layout-helper.js", () => ({
-//     settleAllPromises: jest.fn(),
-// }));
-
-// // Mock fetchCmsContentForPage, setupModalLinks
-// jest.mock("@/helpers/cms-content-helper", () => ({
-//     fetchCmsContentForPage: jest.fn(),
-//     setupModalLinks: jest.fn(),
-// }));
-
-// describe("coverage-statement.vue...", () => {
-//     describe("method arePagePrerequisitesValid...", () => {
-//         test("Should return true for valid page requisites if vin exists", () => {
-//             // Arrange
-//             const { wrapper } = setupMocks({});
-//             useMainStore().order.vehicle.vin = getRandomString(5,20);
-
-//             // Act
-//             let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
-
-//             //Assert
-//             expect(arePagePrerequisitesValid).toBe(true);
-//         });
-
-//         test("Should return false for valid page requisites if vin is missing", () => {
-//             // Arrange
-//             const { wrapper } = setupMocks({});
-
-//             useMainStore().order.vehicle.vin = null;
-
-//             // Act
-//             let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
-
-//             //Assert
-//             expect(arePagePrerequisitesValid).toBe(false);
-//         });
-//     });
-//     describe("navigation", () => {
-//         test("forwardButtonAction should trigger navigateForward", async () => {
-//             // Arrange
-//             const { wrapper } = setupMocks({});
-
-//             wrapper.vm.navigateForward = jest.fn();
-
-//             // Act
-//             await wrapper.vm.forwardButtonAction();
-
-//             //Assert
-//             expect(wrapper.vm.navigateForward).toHaveBeenCalled();
-//         });
-//     });
-//     describe("display correct coverage statement", () => {
-//         test("If damage is Repair, display NonADASRepair coverage statement", async () => {
-//             // Arrange
-//             const wrapper = shallowMount(coverageStatement, {
-//                 mixins: [mockMixin],
-//             });
-
-//             useMainStore().order.damage.isRepair = true;
-
-//             // Assert
-//             expect(wrapper.vm.bodyText).toEqual("NonADASRepairTestReturn");
-//         })
-
-//         test("If damage is NonADAS Replace, display NonADASReplace coverage statement", async () => {
-//             // Arrange
-//             const wrapper = shallowMount(coverageStatement, {
-//                 mixins: [mockMixin],
-//             });
-
-//             useMainStore().lineItems.glassParts =
-//             [
-//                 {
-//                     requiresRecalibration: false,
-//                 }
-//             ];
-//             useMainStore().order.damage.isRepair = false;
-
-//             // Assert
-//             expect(wrapper.vm.bodyText).toEqual("NonADASReplaceTestReturn");
-//         })
-
-//         test("If damage is ADAS Replace, display ADASReplace coverage statement", async () => {
-//             // Arrange
-//             const wrapper = shallowMount(coverageStatement, {
-//                 mixins: [mockMixin],
-//             });
-//             useMainStore().lineItems.glassParts = [
-//                 {
-//                     requiresRecalibration: true,
-//                 }
-//             ];
-//             useMainStore().order.damage.isRepair = false;
-
-//             // Assert
-//             expect(wrapper.vm.bodyText).toEqual("ADASReplaceTestReturn");
-//         })
-//     });
-//     describe("claim registration api call", () => {
-//         it("claim registration not required => method not called", async () => {
-//             // Arrange
-//             const wrapper = setupMocks({});
-
-//             const store = useMainStore();
-//             store.isClaimRegistrationRequired = false;
-
-//             const to = {
-//                 query: { issPage: getRandomString(4,10) }
-//             };
-//             const next = jest.fn();
-
-//             // SUT
-//             coverageStatement.beforeRouteEnter.call(wrapper.vm, to, undefined, next)
-
-//             // Assert
-//             expect(store.registerClaim).not.toHaveBeenCalled();
-//         });
-
-//         it("claim registration required => register claim method called", async () => {
-//             // Arrange
-//             const wrapper = setupMocks({});
-
-//             const store = useMainStore();
-//             store.isClaimRegistrationRequired = true;
-
-//             const to = {
-//                 query: { issPage: getRandomString(4,10) }
-//             };
-//             const next = jest.fn();
-
-//             // SUT
-//             coverageStatement.beforeRouteEnter.call(wrapper.vm, to, undefined, next)
-
-//             // Assert
-//             expect(store.registerClaim).toHaveBeenCalled();
-//         });
-//     })
-// });
-
-// const mockMixin = {
-//     methods: {
-//         getCmsContent: jest.fn((contentName) => {
-//             if (contentName === "UnverifiedADASNextStepsWidget") {
-//                 return "ADASReplaceTestReturn"
-//             }
-//             else if (contentName === "UnverifiedNonADASRepairWidget") {
-//                 return "NonADASRepairTestReturn"
-//             }
-//             else if (contentName === "UnverifiedNonADASNextStepsWidget") {
-//                 return "NonADASReplaceTestReturn"
-//             }
-//             return null;
-//         }),
-//     }
-// };
-
-// function setupMocks({
-// pageHeaderWidgetHeaderText,
-// mountOptionsMockData = {},
-// }) {
-//     //Mock api responses
-//     const apiResponses = {
-//         cmsContent: {
-//             SiteSubHeaderWidget: pageHeaderWidgetHeaderText,
-//             FunnelHeaderWidget: {
-//                 LogoImage:
-//                     `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`,
-//             },
-//             ColorQuestionWidget: "Please choose your rear window tint color",
-//             FeatureQuestionWidget: "Ok no choose features",
-//             AlertWidget: {
-//                 BodyText: "Please choose your tint color",
-//                 HeadlineText: "Just a few more steps to go",
-//             },
-//             unverifiedNonADASRepairBodyText: "Repair body text",
-//         },
-//     };
-
-//     const apiPromise = Promise.resolve(apiResponses);
-
-//     settleAllPromises.mockImplementation(() => apiPromise);
-//     fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
-
-//     const mountOptions = getMountOptions({});
-
-//     mountOptions.mixins = [baseMixin, vehicleQuestionsMixin];
-//     mountOptions.global = {
-//         plugins: [createTestingPinia()]
-//     }
-
-//     const wrapper = shallowMount(coverageStatement, mountOptions);
-
-//     wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent;
-
-//     return { wrapper };
-// }

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

@@ -9,23 +9,26 @@
               <loadingModal
                 ref="loadingModal"
                 :textSlides="loadingText" />
-              <siteHeader cmsWidgetName="SiteHeaderWidget" />
+              <siteHeader cmsWidgetName="SiteHeaderWidget" ref="siteHeader" />
               <div class="select-car">
                   <div class="container-fluid pb-2">
                       <div class="row px-3">
                           <div class="col">
                               <div class="pb-1 mt-4">
                                   <h5
+                                    v-html="coverageStatementSubHeader"
                                     class="text-center text-black"
-                                    v-html="coverageStatementSubHeader">
+                                    ref="siteSubHeader">
                                   </h5>
                                   <div
-                                    class="body-text text-center mt-4"
+                                    class="body-text text-center mt-2"
-                                    v-html="explanatoryText">
+                                    v-html="explanatoryText"
+                                    ref="explanatoryText">
                                   </div>
                                   <div
                                     class="text-center mt-4 fw-bold text-black"
-                                    v-html="secondaryText">
+                                    v-html="secondaryText"
+                                    ref="secondaryText">
                                   </div>
                                   <div
                                     v-if="verifiedDeductible"
@@ -34,7 +37,7 @@
                                   </div>
                                   <div
                                     v-if="displayQuote"
-                                    class="d-flex justify-content-center cost mb-1">
+                                    class="d-flex justify-content-center cost mb-5">
                                     {{ formattedServicePrice }}
                                   </div>
                                   <div
@@ -115,7 +118,7 @@ import { useMainStore } from '@/store/index.js';
 import vehicleQuestionsMixin from '@/mixins/vehicle-questions-mixin.js';
 import globalRules from '@/constants/global-rules.js';
 import baseFormMixin from '@/mixins/base-form-mixin.js';
-import navigationScenarios from '@/router/router-constants/navigation-scenarios.js';
+import { navigationScenarios } from '@/router/router-constants/navigation-scenarios.js';
 
 export default {
     name: 'coverage-statement',
@@ -131,10 +134,9 @@ export default {
         loadingModal
     },
     mixins: [baseFormMixin, vehicleQuestionsMixin],
-    async beforeRouteEnter(to, _from, next) {
+    async beforeRouteEnter(to, from, next) {
-        // Call APIs
+    // Call APIs
         const cmsContentPromise = fetchCmsContentForPage(to.query.issPage);
-
         const supportingItemsPromise = await useMainStore().getSupportingItems();
 
         // Settle promises and get results
@@ -155,7 +157,7 @@ export default {
             : [];
         const availableLineItems = [
             ...resultMap.supportingItems,
-            ...clonedGlassParts
+            ...clonedGlassParts,
         ];
 
         const pricingResults = await useMainStore().getPriceOrderItems(availableLineItems);
@@ -166,6 +168,10 @@ export default {
             vm.availableLineItems = pricingResults;
         });
     },
+    setup() {
+        const mainStore = useMainStore();
+        return { mainStore };
+    },
     data() {
         return {
             availableLineItems: [],
@@ -189,7 +195,7 @@ export default {
         },
         verifiedITACAlertBody() {
             return this.getCmsContent('VerifiedITACAlert',
-                'BodyText').replaceAll('{custom:costSavings}', this.costSavings);
+                'BodyText')?.replaceAll('{custom:costSavings}', this.costSavings);
         },
         coverageStatementSubHeader() {
             return this.getSubheaderTextFromCms('SiteSubHeaderWidget');
@@ -204,16 +210,16 @@ export default {
             return this.getHeaderTextFromCms('NextStepsWidget');
         },
         nextStepsBody() {
-            return this.getBodyTextFromCms('NextStepsWidget').replaceAll('{custom:damage}', this.damageText);
+            return this.getBodyTextFromCms('NextStepsWidget')?.replaceAll('{custom:damage}', this.damageText);
         },
         continueWithSchedulingBodyText() {
             return this.getCmsContent('continueWithSchedulingCopy', 'BodyText');
         },
         unverifiedADASNextStepsBodyText() {
-            return this.getCmsContent('UnverifiedADASNextStepsWidget', 'BodyText').replaceAll('{custom:damage}', this.damageText);
+            return this.getCmsContent('UnverifiedADASNextStepsWidget', 'BodyText')?.replaceAll('{custom:damage}', this.damageText);
         },
         unverifiedNonADASNextStepsBodyText() {
-            return this.getCmsContent('UnverifiedNonADASNextStepsWidget', 'BodyText').replaceAll('{custom:damage}', this.damageText);
+            return this.getCmsContent('UnverifiedNonADASNextStepsWidget', 'BodyText')?.replaceAll('{custom:damage}', this.damageText);
         },
         unverifiedNonADASRepairBodyText() {
             return this.getCmsContent('UnverifiedNonADASRepairWidget', 'BodyText');
@@ -310,7 +316,7 @@ export default {
         if (this.policyLookupSuccessful
             && useMainStore().isClaimRegistrationRequired
             && this.coveredAndServicePriceAboveOrEqualDeductible) {
-            await useMainStore().registerClaim().catch(() => {});
+            await useMainStore().registerClaim()?.catch(() => {});
         }
         vm.$refs.loadingModal.hideModal();
     },

src/router/router-constants/navigation-scenarios.js

@@ -53,6 +53,7 @@ const navigationScenarios = {
 
     // Coverage Statement
     CLICKED_BACK_WITH_REPAIR: 'CLICKED_BACK_WITH_REPAIR',
+    CLICKED_FORWARD_WITH_INVALID_STATE: 'CLICKED_FORWARD_WITH_INVALID_STATE',
 
     // Provider Preference
     CLICKED_FORWARD_WITH_SAFELITE: 'CLICKED_FORWARD_WITH_SAFELITE',