diff --git a/src/constants/vehicle-lookup-alert-types.js b/src/constants/vehicle-lookup-alert-types.js index f658876e..293f887c 100644 --- a/src/constants/vehicle-lookup-alert-types.js +++ b/src/constants/vehicle-lookup-alert-types.js @@ -1,7 +1,8 @@ const vehicleLookupAlertTypes = Object.freeze({ NOT_FOUND: 'notFound', NOT_MATCHED: 'notMatched', - TWO_IDENTICAL_YMM_MATCHED:'twoIdenticalYMMMatched' + TWO_IDENTICAL_YMM_MATCHED:'twoIdenticalYMMMatched', + PERFECT_MATCH: 'perfectMatch' }); export default vehicleLookupAlertTypes; diff --git a/src/layouts/coverage-statement/coverage-statement.spec.js b/src/layouts/coverage-statement/coverage-statement.spec.js new file mode 100644 index 00000000..8469daba --- /dev/null +++ b/src/layouts/coverage-statement/coverage-statement.spec.js @@ -0,0 +1,192 @@ +// 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 } from "@/helpers/cms-content-helper"; +import { settleAllPromises } from "@/helpers/layout-helper.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 +jest.mock("@/helpers/cms-content-helper", () => ({ + fetchCmsContentForPage: jest.fn(), +})); + +describe("coverage-statement.vue...", () => { + describe("method arePagePrerequisitesValid...", () => { + test("Should return true for valid page requisites if vin exists", () => { + // Arrange + const { wrapper } = setupMocks({}); + + // 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.unverifiedNonADASRepairBodyText).toEqual("NonADASRepairTestReturn"); + }) + + test("If damage is NonADAS Replace, display NonADASReplace coverage statement", async () => { + // Arrange + const wrapper = shallowMount(coverageStatement, { + mixins: [mockMixin], + }); + + // Assert + expect(wrapper.vm.unverifiedNonADASNextStepsBodyText).toEqual("NonADASReplaceTestReturn"); + }) + + test("If damage is ADAS Replace, display ADASReplace coverage statement", async () => { + // Arrange + const wrapper = shallowMount(coverageStatement, { + mixins: [mockMixin], + }); + + useMainStore().order.lineItems.requiresRecalibration = true; + + // Assert + expect(wrapper.vm.unverifiedADASNextStepsBodyText).toEqual("ADASReplaceTestReturn"); + }) + }) +}); + +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, +// cmsPageContent = "CMS content goes here", +// unverifiedNonADASRepairBodyText = "repair body text", +}) { + //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", + }, + }; + useMainStore().order = { + vehicle: { + vin: "TESTVIN", + }, + lineItems: { + glassParts: [ + { + canSafeliteRecalibrate: false, + childParts: null, + color: "Green Tint", + description: "solar, driver side, encap", + partNumber: "DQ12204GTYNOEM", + partType: "DRIVER REAR QUARTER GLASS", + recalibrationType: null, + requiresCapabilityQuestions: false, + requiresRecalibration: false, + } + ] + }, + damage: { + isRepair: false, + } + }; + + const apiPromise = Promise.resolve(apiResponses); + + settleAllPromises.mockImplementation(() => apiPromise); + fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); + + const mountOptions = getMountOptions({ + + }); + + mountOptions.mixins = [baseMixin, vehicleQuestionsMixin]; + + const wrapper = shallowMount(coverageStatement, mountOptions); + + wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent; + + // //Mock CMS content + // const cmsContent = { + // PageContent: cmsPageContent, + // NonADASRepairBodyText: unverifiedNonADASRepairBodyText, + // }; + + return { wrapper }; + +} + diff --git a/src/layouts/coverage-statement/coverage-statement.vue b/src/layouts/coverage-statement/coverage-statement.vue index 310f2e97..b65339a7 100644 --- a/src/layouts/coverage-statement/coverage-statement.vue +++ b/src/layouts/coverage-statement/coverage-statement.vue @@ -23,12 +23,12 @@ cmsWidgetName="whatHappensNextCopy" class="mt-4 mb-2 fw-bold" /> -
+
@@ -44,36 +44,25 @@ import { Form } from 'vee-validate'; import siteFooter from '@/iss-components/site-footer/site-footer.vue'; import siteHeader from '@/iss-components/site-header/site-header.vue'; import siteSubHeader from '@/iss-components/site-sub-header/site-sub-header.vue'; -import vehicleBanner from '@/iss-components/vehicle-banner/vehicle-banner.vue'; import textBlock from "@/digital-components/text-block/text-block"; -import modal from "@/digital-components/modal/modal"; -import textLink from '@/ux-components/text-link/text-link.vue'; import recalModal from '@/layouts/coverage-statement/recal-modal/recal-modal.vue'; // Import Supporting Files -import { - fetchCmsContentForPage, - doesCopyContainTextLink, - splitCopyOnCMSPlaceHolder, - getRouterLinkDisplayTextFromCopy, - getRouterLinkRouteFromCopy -} from '@/helpers/cms-content-helper'; +import { fetchCmsContentForPage } from '@/helpers/cms-content-helper'; import { settleAllPromises } from '@/helpers/layout-helper'; import { getDamageString } from '@/helpers/damage-helper.js'; import { useMainStore } from "@/store"; +import vehicleQuestionsMixin from "@/mixins/vehicle-questions-mixin"; export default { name: 'coverage-statement', - mixins: [baseFormMixin], + mixins: [baseFormMixin, vehicleQuestionsMixin], components: { siteFooter, siteHeader, siteSubHeader, Form, - vehicleBanner, textBlock, - modal, - textLink, recalModal }, computed: { @@ -95,16 +84,16 @@ export default { } }, continueWithSchedulingBodyText() { - return this.getCmsContent('continueWithSchedulingCopy', 'BodyText'); + 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'); + return this.getCmsContent("UnverifiedNonADASRepairWidget", "BodyText"); }, damageText() { var damageString = getDamageString(); @@ -130,22 +119,24 @@ export default { }); }, methods: { - doesCopyContainTextLink, - splitCopyOnCMSPlaceHolder, - getRouterLinkDisplayTextFromCopy, - getRouterLinkRouteFromCopy, - arePagePrerequisiteValid() { - return true; + arePagePrerequisitesValid() { + if (useMainStore().order.vehicle.vin) { + return true; + } + return false; }, - backButtonAction() { - /** - * this.navigationScenarios comes from base-mixin - */ - this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); + + async forwardButtonAction() { + return this.navigateForward(); + }, + + navigateForward() { + this.$router.navigate( + this.navigationScenarios.CLICKED_FORWARD_COVERAGE_STATEMENT, + this.$route + ); }, }, - async forwardButtonAction() {}, - resetDependentState() {}, }; diff --git a/src/layouts/coverage-statement/recal-modal/recal-modal.spec.js b/src/layouts/coverage-statement/recal-modal/recal-modal.spec.js new file mode 100644 index 00000000..3ab73b9a --- /dev/null +++ b/src/layouts/coverage-statement/recal-modal/recal-modal.spec.js @@ -0,0 +1,68 @@ +import { shallowMount } from "@vue/test-utils"; +import recalModal from "@/layouts/coverage-statement/recal-modal/recal-modal.vue"; + +describe("modal.vue", () => { + it("Should display header text when HeaderText is defined in the CMS", async () => { + // Act + const wrapper = shallowMount(recalModal, { + mixins: [mockMixin], + props: { + cmsWidgetName: "test", + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"])); + }); + + it("Should display subheader text when SubheaderText is defined in the CMS", async () => { + // Act + const wrapper = shallowMount(recalModal, { + mixins: [mockMixin], + props: { + cmsWidgetName: "test", + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["SubheaderText"])); + }); + + it("Should insert image url when Image is defined in the CMS", async () => { + // Act + const wrapper = shallowMount(recalModal, { + mixins: [mockMixin], + props: { + cmsWidgetName: "test", + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["Image"])); + }); + + it("Should display body text when BodyText is defined in the CMS", async () => { + // Act + const wrapper = shallowMount(recalModal, { + mixins: [mockMixin], + props: { + cmsWidgetName: "test", + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"])); + }); +}); + +const mockMixin = { + methods: { + getCmsContent: jest.fn((widgetName, cmsFieldName) => { + return mockCmsContent[cmsFieldName]; + }), + }, +}; + +const mockCmsContent = { + HeaderText: "Sample header text here.", + SubheaderText: "Sample subheader text here.", + Image: "https://www.sampleImage.sample", + BodyText: "Sample body text here.", + FooterText: "Sample footer text here.", +}; diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.spec.js b/src/layouts/vehicle-lookup/vehicle-lookup.spec.js index 491adc70..085136f3 100644 --- a/src/layouts/vehicle-lookup/vehicle-lookup.spec.js +++ b/src/layouts/vehicle-lookup/vehicle-lookup.spec.js @@ -6,6 +6,12 @@ import { queryStrings } from '@/constants/query-strings'; import { GaActions } from "@/constants/analytics"; import VehicleLookup from './vehicle-lookup.vue'; import {vinLookupMethodSelections} from '@/constants/vin-lookup-methods'; +import { useMainStore } from '../../store'; +import { createTestingPinia } from '@pinia/testing'; +import { mapStores } from "pinia"; + +const pinia = createTestingPinia(); +useMainStore(pinia); const vinLookupMethodsMockData = { QuestionText: 'To find the right part, let’s get your VIN. Or we can look it up for you!', @@ -63,6 +69,7 @@ function setupMocks() { mixins: [ { computed: { + ...mapStores(useMainStore), GaActions() { return GaActions; }, @@ -181,6 +188,8 @@ describe('vehicle-lookup.vue', () => { answersFromCms: vinLookupMethodsMockData.Answers, }); + useMainStore().updateVehicleVin = jest.fn(); + const lookupByManualVinOptionLabel = wrapper.find('[data-test-id="vin-lookup-methods-button-question"] label[for="VinLookupMethods-ManualVin"]'); await lookupByManualVinOptionLabel.trigger('mousedown'); diff --git a/src/layouts/vehicle-lookup/vehicle-lookup.vue b/src/layouts/vehicle-lookup/vehicle-lookup.vue index bf66b978..7c5b1ea8 100644 --- a/src/layouts/vehicle-lookup/vehicle-lookup.vue +++ b/src/layouts/vehicle-lookup/vehicle-lookup.vue @@ -39,6 +39,7 @@ import { settleAllPromises } from '@/helpers/layout-helper'; import { Form } from 'vee-validate'; import BaseFormMixin from '@/mixins/base-form-mixin'; import {vinLookupMethodSelections} from '@/constants/vin-lookup-methods'; +import { useMainStore } from '@/store'; // Import Component import SiteFooter from '@/iss-components/site-footer/site-footer.vue'; @@ -99,6 +100,7 @@ export default { forwardButtonAction() { switch (this.selectedVinLookupMethod) { case vinLookupMethodSelections.MANUALVIN: + useMainStore().updateVehicleVin(null); this.$router.navigate(this.navigationScenarios.SELECTED_MANUAL_VIN, this.$route); break; case vinLookupMethodSelections.LICENSEPLATE: diff --git a/src/layouts/vin-lookup/vin-lookup-alerts/perfect-match-alert/perfect-match-alert.vue b/src/layouts/vin-lookup/vin-lookup-alerts/perfect-match-alert/perfect-match-alert.vue new file mode 100644 index 00000000..f0bfadd6 --- /dev/null +++ b/src/layouts/vin-lookup/vin-lookup-alerts/perfect-match-alert/perfect-match-alert.vue @@ -0,0 +1,38 @@ + + + + \ No newline at end of file diff --git a/src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue b/src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue index 4ca6f208..3625f2a1 100644 --- a/src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue +++ b/src/layouts/vin-lookup/vin-lookup-alerts/vin-lookup-alerts.vue @@ -12,6 +12,9 @@ +