diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js index 67ec17260..770dd893e 100644 --- a/src/helpers/unit-test-helper.js +++ b/src/helpers/unit-test-helper.js @@ -9,6 +9,7 @@ import baseMixin from "@/mixins/base-mixin"; import { getCookieDomainValue } from "@/helpers/heritage-integration/cookie-helper"; import { analyticsPageEvents, GaCategories, GaActions, GaLabels, GaEvents } from "@/constants/analytics"; import { queryStrings } from "@/constants/query-strings"; +import { routerParams } from "@/router/router-constants/router-params"; // Common methods export function getMountOptions(mockData) { @@ -48,6 +49,7 @@ export function getMountOptions(mockData) { mocks.GaLabels = GaLabels; mocks.GaEvents = GaEvents; mocks.queryStrings = queryStrings; + mocks.routerParams = routerParams; // Mock $store and $router when accessing this.$store/$router mocks.$store = mockData.store; diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js index 25bf3e908..9a9f7e6d7 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.spec.js +++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js @@ -17,6 +17,7 @@ import { storeMutations } from "@/constants/store-mutations"; import store from "@/store"; import { validate } from "vee-validate"; import { damageLocationsSelected } from "@/constants/damage-locations-selected.js"; +import { routerParams } from "@/router/router-constants/router-params"; // Mock our module for promises. jest.mock("@/helpers/layout-helper.js", () => ({ @@ -703,6 +704,57 @@ describe("vehicle-damage.vue", () => { }); }); +describe("vehicle-damage.vue", () => { + test("when displayVehicleChangeAlert router params is true, the alert: 'vehicleChangeAlert' should be visible", () => { + // Arrange & Act + const { wrapper } = setupMocks({ + mountOptionsMockData: { + route: { + params: { + [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: true + } + } + } + }); + // Assert + expect(wrapper.findComponent({ref: 'vehicleChangeAlert'}).isVisible()).toBe(true); + }) +}); + +describe("vehicle-damage.vue", () => { + test("when displayVehicleChangeAlert router params is false, the alert: 'vehicleChangeAlert' should not be visible", () => { + // Arrange & Act + const { wrapper } = setupMocks({ + mountOptionsMockData: { + route: { + params: { + [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false + } + } + } + }); + // Assert + expect(wrapper.findComponent({ref: 'vehicleChangeAlert'}).isVisible()).toBe(false); + }) +}); + +describe("vehicle-damage.vue", () => { + test("when displayVehicleChangeAlert router params is undefined, the alert: 'vehicleChangeAlert' should not be visible", () => { + // Arrange & Act + const { wrapper } = setupMocks({ + mountOptionsMockData: { + route: { + params: { + [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: undefined + } + } + } + }); + // Assert + expect(wrapper.findComponent({ref: 'vehicleChangeAlert'}).isVisible()).toBe(false); + }) +}); + // THE FOLLOWING TEST IS NOT NECESSARILY REQUIRED FOR COVERAGE // BUT KEEP FOR AN EXAMPLE OF A VALIDATION TEST // @@ -734,32 +786,41 @@ describe("vehicle-damage.vue", () => { }); -function setupMocks({ - pageHeaderWidgetHeaderText = {}, - mountOptionsMockData = { +function setupMocks({pageHeaderWidgetHeaderText, mountOptionsMockData}) { + var pageHeaderWidgetHeaderTextDefault = {}; + var mountOptionsMockDataDefault = { router: { navigate: jest.fn(), }, + route: { + params: { + [routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]: false + } + }, store: { getters: { vehicle: {}, - payment: { insuranceCoverage: { isVerified: false } }, + payment: { + insuranceCoverage: { + isVerified: false + } + }, }, }, - }, -}) { + }; + // Combine parameters with default values + pageHeaderWidgetHeaderText = Object.assign(pageHeaderWidgetHeaderTextDefault, pageHeaderWidgetHeaderText); + mountOptionsMockData = Object.assign(mountOptionsMockDataDefault, mountOptionsMockData); //Mock api responses baseMixin.methods.dispatchStoreAction = jest.fn(); const apiResponses = { cmsContent: { FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, VehicleBannerWidget: { - GenericVehicleImage: - "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", + GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", }, FunnelHeaderWidget: { - LogoImage: - "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", + LogoImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", }, }, damageOptions: { diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue index 4ee05f507..47a2c1de4 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.vue +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -9,50 +9,57 @@ - - - - - - + + + + + + + @@ -417,6 +424,9 @@ export default { }) ); }, + shouldDisplayVehicleChangeAlert() { + return this.$route.params[this.routerParams.DISPLAY_VEHICLE_CHANGE_ALERT]; + }, shouldHideBackButton(){ return this.$store.getters.payment.insuranceCoverage.isVerified; } diff --git a/src/mixins/base-mixin.js b/src/mixins/base-mixin.js index ea0f99013..d8df53281 100644 --- a/src/mixins/base-mixin.js +++ b/src/mixins/base-mixin.js @@ -3,6 +3,7 @@ import { storeActions } from "@/constants/store-actions.js"; import { storeMutations } from "@/constants/store-mutations.js"; import { navigationScenarios } from "@/router/router-constants/navigation-scenarios"; import { vehicleCategories } from "@/constants/vehicle-categories.js"; +import { routerParams } from "@/router/router-constants/router-params"; import { queryStrings } from "@/constants/query-strings"; export default { @@ -55,6 +56,9 @@ export default { vehicleCategories() { return vehicleCategories; }, + routerParams() { + return routerParams; + }, queryStrings(){ return queryStrings; } diff --git a/src/router/router-constants/router-params.js b/src/router/router-constants/router-params.js new file mode 100644 index 000000000..80ddb779d --- /dev/null +++ b/src/router/router-constants/router-params.js @@ -0,0 +1,5 @@ +const routerParams = { + DISPLAY_VEHICLE_CHANGE_ALERT: "displayVehicleChangeAlert" + }; + + export { routerParams }; \ No newline at end of file