diff --git a/src/constants/application-config.js b/src/constants/application-config.js index 51496b9f..1c418688 100644 --- a/src/constants/application-config.js +++ b/src/constants/application-config.js @@ -8,6 +8,7 @@ const applicationConfig = { SITE_ENTRY_TRIGGER_VALUE: "SelfService", APPLICATION_ABBREVIATION: "iss", PAGE_QUERYSTRING: 'issPage', + ISS_DEV_CMS_DOMAIN: "https://digitalisscms.dev.safelite.io", }; export { applicationConfig }; \ No newline at end of file diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index 8512c417..74f14178 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -63,6 +63,10 @@ const endpoints = { url: "/vehicle/api/v1/vehicle/lookup", method: "POST", }, + LookupVinByPlate: { + url: "/vehicle/api/v1/vehicle/lookup-vin-by-plate", + method: "POST", + }, InitializeSession: { url: "/analytics/api/v1/analytics/initialize", method: "POST", diff --git a/src/layouts/license-plate-lookup/license-plate-lookup-alerts.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup-alerts.spec.js new file mode 100644 index 00000000..781079ab --- /dev/null +++ b/src/layouts/license-plate-lookup/license-plate-lookup-alerts.spec.js @@ -0,0 +1,63 @@ +/* eslint-env jest */ +import { getDamageString } from '@/helpers/damage-helper'; +import vehicleLookupAlertTypes from '@/constants/vehicle-lookup-alert-types'; +import { RouterLinkStub } from '@vue/test-utils'; +import { render } from '@testing-library/vue'; +import '@testing-library/jest-dom'; +import LicensePlateLookupAlertsComponent from './license-plate-lookup-alerts/license-plate-lookup-alerts.vue'; + +jest.mock('@/helpers/damage-helper'); + +const mountOptions = { + global: { + stubs: { + RouterLink: RouterLinkStub, + }, + mixins: [ + { + methods: { + getCmsContent: jest.fn(() => ''), + getFooterInfoBoxHeight: jest.fn(() => 80), + cssClassNameForCmsWidget: jest.fn(() => 'widget-name-mock-class'), + }, + }, + ], + }, +}; + +describe('license-plate-lookup-alerts.vue', () => { + test('VehicleNotFoundAlert is displayed on the screen', () => { + // Arrange + mountOptions.props = { + activeAlertType: vehicleLookupAlertTypes.NOT_FOUND, + }; + + // Act + const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions); + const VehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' }); + const VehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'}); + + // Assert + expect(VehicleNotFoundAlert).toBeVisible(); + expect(VehicleNotMatchedAlert).toEqual(null); + }); + + test('VehicleNotMatchedAlert is displayed on the screen', () => { + // Arrange + getDamageString.mockImplementation(() => 'Mock Damage String'); + mountOptions.props = { + activeAlertType: vehicleLookupAlertTypes.NOT_MATCHED, + }; + + // Act + const { queryByRole } = render(LicensePlateLookupAlertsComponent, mountOptions); + const VehicleNotFoundAlert = queryByRole('alert', { name: 'vehicle-not-found-alert' }); + const VehicleNotMatchedAlert = queryByRole('alert', { name: 'vehicle-not-matched-alert'}); + + // Assert + expect(VehicleNotMatchedAlert).toBeVisible(); + expect(VehicleNotFoundAlert).toEqual(null); + }); + + +}) \ No newline at end of file diff --git a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue new file mode 100644 index 00000000..42056eb9 --- /dev/null +++ b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/license-plate-lookup-alerts.vue @@ -0,0 +1,49 @@ + + \ No newline at end of file diff --git a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue new file mode 100644 index 00000000..805983ab --- /dev/null +++ b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-found-alert/vehicle-not-found-alert.vue @@ -0,0 +1,27 @@ + + + + \ No newline at end of file diff --git a/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue new file mode 100644 index 00000000..8b1d6878 --- /dev/null +++ b/src/layouts/license-plate-lookup/license-plate-lookup-alerts/vehicle-not-matched-alert/vehicle-not-matched-alert.vue @@ -0,0 +1,50 @@ + + + \ No newline at end of file diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.spec.js b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js new file mode 100644 index 00000000..959a6451 --- /dev/null +++ b/src/layouts/license-plate-lookup/license-plate-lookup.spec.js @@ -0,0 +1,172 @@ +// Components +import licensePlateLookup from "@/layouts/license-plate-lookup/license-plate-lookup.vue"; +import licensePlateQuestion from "@/layouts/license-plate-lookup/license-plate-question/license-plate-question.vue"; + +// Supporting files +import { shallowMount } from '@vue/test-utils'; +import { settleAllPromises } from "@/helpers/layout-helper.js"; +import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; +import baseMixin from "@/mixins/base-mixin.js"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { nextTick } from "vue"; +import { useMainStore } from "@/store"; +import { applicationConfig } from "@/constants/application-config"; + +// 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(), +})); + +// Mock damage helper +jest.mock("@/helpers/damage-helper", () => ({ + isGlassAvailableForCarId: () => { + return false; + }, + getDamageString: () => { + return "damage string"; + }, +})); + +describe("license-plate-lookup.vue", () => { + test("Vehicle make set, arePagePrerequisitesValid should be true", () => { + //Arrange + const { wrapper } = setupMocks({}); + useMainStore().order.vehicle.carId = "CR00000395"; + + //Act + licensePlateLookup.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "license-plate-lookup" } }, + undefined, + (c) => c(wrapper.vm) + ); + + let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); + + //Assert + expect(arePagePrerequisitesValid).toBe(true); + }); +}); + +describe("navigation", () => { + test("BackButtonAction triggers a router.navigate change", async () => { + //Arrange + const { wrapper, apiPromise } = setupMocks({ + mountOptionsMockData: { + router: { + navigate: jest.fn(), + }, + }, + }); + //Act + licensePlateLookup.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "license-plate-lookup" } }, + undefined, + (c) => c(wrapper.vm) + ); + wrapper.vm.backButtonAction(); + await nextTick(); + + //Assert + return apiPromise.finally(() => { + try { + expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); + } + catch (e) { + throw e + } + }); + }); + + // TODO: Create test for navigating forward when user clicks Continue + // and information entered is correct (no alerts) + + // TODO: Create test for license-plate-question component emitting value when user clicks Continue + // and information entered is correct (no alerts) + + // TODO: Create test for zip-question component emitting value when user clicks Continue + // and information entered is correct (no alerts) + + // *The above will be completed when navigation from page is complete (SSR-179) + }); + +function setupMocks({ + licensePlateQuestionCmsContent = {}, + licensePlateQuestionInitialData = {}, + pageHeaderWidgetHeaderText = {}, + pageFooterWidgetCmsContent = {}, + mountOptionsMockData = {}, + //Values to set in the state store + carId = null, + registrationZipCode = null, //"55555", + licensePlate = null, //"TESTPLATE", +}) { + //Mock api responses + const apiResponses = { + cmsContent: { + SiteSubHeaderWidget: pageHeaderWidgetHeaderText, + LicensePlateQuestion: licensePlateQuestionCmsContent, + VehicleBannerWidget: { + GenericVehicleImage: + `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`, + }, + SiteHeaderWidget: { + LogoImage: + `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`, + }, + SiteFooterWidget: pageFooterWidgetCmsContent, + + }, + licensePlateQuestionInitialData: licensePlateQuestionInitialData, + }; + + mountOptionsMockData = { + ...mountOptionsMockData, + router: { + navigate: jest.fn(), + navigateWithoutSaving: jest.fn(), + navigateWithSaving: jest.fn(), + }, + store: { + getters: { + vehicle: { + registration: { + licensePlate: licensePlate, + zipCode: registrationZipCode, + }, + carId: carId, + }, + }, + }, + }; + + + const apiPromise = Promise.resolve(apiResponses); + + settleAllPromises.mockImplementation(() => apiPromise); + fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); + + //Mock make question methods + licensePlateQuestion.methods = { + loadInitialData: jest.fn(), + initializeComponent: jest.fn(), + }; + + const mountOptions = getMountOptions(mountOptionsMockData); + + const wrapper = shallowMount(licensePlateLookup, mountOptions); + + const licensePlateQuestionWrapper = wrapper.findComponent({ name: "licensePlateQuestion" }); + licensePlateQuestionWrapper.vm.initializeComponent = + licensePlateQuestion.methods.initializeComponent; + + wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent; + + return { wrapper, apiPromise }; + } \ No newline at end of file diff --git a/src/layouts/license-plate-lookup/license-plate-lookup.vue b/src/layouts/license-plate-lookup/license-plate-lookup.vue index 73a4c3c7..dc0de3f8 100644 --- a/src/layouts/license-plate-lookup/license-plate-lookup.vue +++ b/src/layouts/license-plate-lookup/license-plate-lookup.vue @@ -1,53 +1,86 @@ + \ No newline at end of file diff --git a/src/layouts/license-plate-lookup/zip-question/zip-question.vue b/src/layouts/license-plate-lookup/zip-question/zip-question.vue new file mode 100644 index 00000000..4af9a5b2 --- /dev/null +++ b/src/layouts/license-plate-lookup/zip-question/zip-question.vue @@ -0,0 +1,44 @@ + + + \ No newline at end of file diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js index ff018348..3de29b6f 100644 --- a/src/layouts/vehicle-make/vehicle-make.spec.js +++ b/src/layouts/vehicle-make/vehicle-make.spec.js @@ -6,6 +6,7 @@ import baseMixin from "@/mixins/base-mixin.js"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { nextTick } from "vue"; import { useMainStore } from "@/store"; +import { applicationConfig } from "@/constants/application-config"; // Components import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue"; @@ -119,12 +120,12 @@ function setupMocks({ VehicleMakeQuestion: vehicleMakeQuestionCmsContent, VehicleBannerWidget: { GenericVehicleImage: - "https://digitalisscms.dev.safelite.io/images/default-source/default-album/blurred-image.jpg", - }, + `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`, + }, SiteHeaderWidget: { LogoImage: - "https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/insuranceLogo.jpg", - }, + `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`, + }, }, makeQuestionInitialData: makeQuestionInitialData, }; diff --git a/src/layouts/vehicle-model/vehicle-model.spec.js b/src/layouts/vehicle-model/vehicle-model.spec.js index 8e5a9593..c727358d 100644 --- a/src/layouts/vehicle-model/vehicle-model.spec.js +++ b/src/layouts/vehicle-model/vehicle-model.spec.js @@ -11,6 +11,7 @@ import baseMixin from "@/mixins/base-mixin.js"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { nextTick } from "vue"; import { useMainStore } from "@/store"; +import { applicationConfig } from "@/constants/application-config"; // Mock our module for promises. jest.mock("@/helpers/layout-helper.js", () => ({ @@ -120,12 +121,12 @@ function setupMocks({ VehicleModelQuestion: buttonQuestionContent, VehicleBannerWidget: { GenericVehicleImage: - "https://digitalisscms.dev.safelite.io/images/default-source/default-album/blurred-image.jpg", - }, + `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`, + }, SiteHeaderWidget: { LogoImage: - "https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/insuranceLogo.jpg", - }, + `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`, + }, }, modelQuestionInitialData: modelQuestionInitialData, }; diff --git a/src/layouts/vehicle-parts/vehicle-parts.spec.js b/src/layouts/vehicle-parts/vehicle-parts.spec.js index ed6732be..b100dce3 100644 --- a/src/layouts/vehicle-parts/vehicle-parts.spec.js +++ b/src/layouts/vehicle-parts/vehicle-parts.spec.js @@ -11,7 +11,7 @@ import { nextTick } from "vue"; import baseMixin from "@/mixins/base-mixin.js"; import { useMainStore } from "@/store"; import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; - +import { applicationConfig } from "@/constants/application-config"; // Mock our module for promises. jest.mock("@/helpers/layout-helper.js", () => ({ @@ -387,11 +387,11 @@ function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {} SiteSubHeaderWidget: pageHeaderWidgetHeaderText, VehicleBannerWidget: { GenericVehicleImage: - "https://digitalisscms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", + `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`, }, FunnelHeaderWidget: { LogoImage: - "https://digitalisscms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", + `${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", diff --git a/src/layouts/vehicle-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js index 6a383572..5e74b541 100644 --- a/src/layouts/vehicle-style/vehicle-style.spec.js +++ b/src/layouts/vehicle-style/vehicle-style.spec.js @@ -7,6 +7,7 @@ import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { nextTick } from "vue"; import { useMainStore } from "@/store"; import router from "@/router"; +import { applicationConfig } from "@/constants/application-config"; // Components import vehicleStyle from "@/layouts/vehicle-style/vehicle-style.vue"; @@ -175,12 +176,12 @@ function setupMocks({ VehicleStyleQuestion: vehicleStyleQuestionCmsContent, VehicleBannerWidget: { GenericVehicleImage: - "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", - }, + `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`, + }, SiteHeaderWidget: { LogoImage: - "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", - }, + `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`, + }, }, styleQuestionInitialData: styleQuestionInitialData, }; diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js index a590aaa5..5b054709 100644 --- a/src/layouts/vehicle-year/vehicle-year.spec.js +++ b/src/layouts/vehicle-year/vehicle-year.spec.js @@ -6,6 +6,7 @@ import yearQuestion from "@/layouts/vehicle-year/year-question/year-question"; import baseMixin from "@/mixins/base-mixin.js"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { nextTick } from "vue"; +import { applicationConfig } from "@/constants/application-config"; // Mock our module for promises. @@ -83,12 +84,12 @@ function setupMocks({ VehicleYearQuestion: vehicleYearQuestionCmsContent, VehicleBannerWidget: { GenericVehicleImage: - "https://digitalisscms.dev.safelite.io/images/default-source/default-album/blurred-image.jpg", - }, + `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/blurred-image.jpg`, + }, SiteHeaderWidget: { LogoImage: - "https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/insuranceLogo.jpg", - }, + `${applicationConfig.ISS_DEV_CMS_DOMAIN}/images/default-source/default-album/logos/insuranceLogo.jpg`, + }, }, yearQuestionInitialData: yearQuestionInitialData, }; diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 3d15d67b..6adcc361 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -103,6 +103,15 @@ const routingTable = function(store) { }, ], }, + { + issPageValue: issPageValues.LICENSE_PLATE_LOOKUP, + maps: [ + { + scenario: navigationScenarios.CLICKED_BACK, + destinationIssPageValue: issPageValues.VEHICLE_LOOKUP, + }, + ], + }, { issPageValue: issPageValues.PART_QUESTIONS, maps: [