diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js index 20b8df9b..0e13d56f 100644 --- a/src/layouts/vehicle-make/vehicle-make.spec.js +++ b/src/layouts/vehicle-make/vehicle-make.spec.js @@ -107,11 +107,11 @@ function setupMocks({ VehicleMakeQuestion: vehicleMakeQuestionCmsContent, VehicleBannerWidget: { GenericVehicleImage: - "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", + "https://digitalisscms.dev.safelite.io/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", + "https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/insuranceLogo.jpg", }, }, makeQuestionInitialData: makeQuestionInitialData, diff --git a/src/layouts/vehicle-model/model-question/model-question.spec.js b/src/layouts/vehicle-model/model-question/model-question.spec.js new file mode 100644 index 00000000..c681ee85 --- /dev/null +++ b/src/layouts/vehicle-model/model-question/model-question.spec.js @@ -0,0 +1,71 @@ +import modelQuestion from "@/layouts/vehicle-model/model-question/model-question"; +import { shallowMount } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { useMainStore } from "@/store"; + +describe("model-question.vue", () => { + test("Selected model is emitted upon selection.", async () => { + //Arrange + const { wrapper } = setupMocks({ modelValueProp: "Accord" }); + const modelToSelect = "Civic"; + + //Act + wrapper.setValue({ selectedModel: modelToSelect }); + await wrapper.vm.$nextTick(); + + //Assert + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([ + { selectedModel: "Civic" }, + ]); + }); +}); + + +describe("model-question.vue", () => { + test("Data from store api are used as radio question answers.", async () => { + //Arrange + const { wrapper, cmsContent } = setupMocks({ + dataFromStoreApi: ["accord", "civic", "insight"], + }); + + //Act + const initialData = modelQuestion.methods.loadInitialData.call(wrapper.vm); + modelQuestion.methods.initializeComponent.call( + wrapper.vm, + initialData + ); + + //Assert + const buttonQuestionComponent = await wrapper.findComponent({ + name: "buttonQuestion", + }); + expect(buttonQuestionComponent.attributes("answers")).toBe( + "accord,civic,insight" + ); + }); +}); + +function setupMocks({ + modelValueProp = "1900", + cmsQuestionText = "CMS text goes here", + dataFromStoreApi = [], +}) { + //Mock store + const store = useMainStore(); + store.getVehicleModels = jest.fn(() => dataFromStoreApi); + + const mountOptions = getMountOptions(); + + //Mock props + mountOptions.propsData = { + modelValue: modelValueProp, + }; + + const wrapper = shallowMount(modelQuestion, mountOptions); + + //Mock CMS content + const cmsContent = { + QuestionText: cmsQuestionText, + }; + return { wrapper, cmsContent }; +} diff --git a/src/layouts/vehicle-model/vehicle-model.spec.js b/src/layouts/vehicle-model/vehicle-model.spec.js new file mode 100644 index 00000000..21ddd5fa --- /dev/null +++ b/src/layouts/vehicle-model/vehicle-model.spec.js @@ -0,0 +1,138 @@ +// Components +import vehicleModel from "@/layouts/vehicle-model/vehicle-model.vue"; +import modelQuestion from "@/layouts/vehicle-model/model-question/model-question"; + +// 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"; + +// 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("vehicle-model.vue", () => { + test("Model question component is initized with api data", async () => { + //Arange + const modelQuestionInitialData = ["accord", "civic", "insight"]; + const { wrapper, apiPromise } = setupMocks({ + modelQuestionInitialData: modelQuestionInitialData, + }); + //Act + vehicleModel.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "vehicle-model" } }, + undefined, + (c) => c(wrapper.vm) + ); + //Assert + apiPromise.finally(() => { + expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith( + modelQuestionInitialData + ); + }); + }); +}); + +describe("vehicle-model.vue", () => { + test("BackButtonAction triggers a router.navigateWithoutSaving change", async () => { + //Arrange + const { wrapper, apiPromise } = setupMocks({ + pageHeaderWidgetHeaderText: "Select a model to get started", + mountOptionsMockData: { + router: { + navigate: jest.fn(), + }, + }, + }); + //Act + vehicleModel.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "vehicle-model" } }, + undefined, + (c) => c(wrapper.vm) + ); + wrapper.vm.backButtonAction(); + await nextTick(); + //Assert + apiPromise.finally(() => { + expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); + }); + }); +}); +describe("vehicle-model.vue", () => { + test("Make set, arePagePrerequisitesValid should be true ", async () => { + //Arrange + const { wrapper } = setupMocks({}); + useMainStore().order.vehicle.make = "Honda"; + + //Act + vehicleModel.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "vehicle-model" } }, + undefined, + (c) => c(wrapper.vm) + ); + + let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); + await nextTick(); + + //Assert + expect(arePagePrerequisitesValid).toBe(true); + }); +}); + + +function setupMocks({ + buttonQuestionContent = {}, + modelQuestionInitialData = {}, + pageHeaderWidgetHeaderText = {}, + mountOptionsMockData = {}, +}) { + //Mock api responses + const apiResponses = { + cmsContent: { + FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, + VehicleModelQuestion: buttonQuestionContent, + VehicleBannerWidget: { + GenericVehicleImage: + "https://digitalisscms.dev.safelite.io/images/default-source/default-album/blurred-image.jpg", + }, + FunnelHeaderWidget: { + LogoImage: + "https://digitalisscms.dev.safelite.io/images/default-source/default-album/logos/insuranceLogo.jpg", + }, + }, + modelQuestionInitialData: modelQuestionInitialData, + }; + const apiPromise = Promise.resolve(apiResponses); + + settleAllPromises.mockImplementation(() => apiPromise); + fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); + + //Mock model question methods + modelQuestion.methods = { + loadInitialData: jest.fn(), + initializeComponent: jest.fn(), + }; + const mountOptions = getMountOptions(mountOptionsMockData); + const wrapper = shallowMount(vehicleModel, mountOptions); + wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent; + + const modelQuestionWrapper = wrapper.findComponent({ name: "modelQuestion" }); + modelQuestionWrapper.vm.initializeComponent = + modelQuestion.methods.initializeComponent; + + return { wrapper, apiPromise }; +} diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js index 21200c1b..0d05479d 100644 --- a/src/layouts/vehicle-year/vehicle-year.spec.js +++ b/src/layouts/vehicle-year/vehicle-year.spec.js @@ -5,6 +5,7 @@ import vehicleYear from "@/layouts/vehicle-year/vehicle-year.vue"; 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"; // Mock our module for promises. @@ -43,6 +44,27 @@ describe("vehicle-year.vue", () => { }); }); +describe("vehicle-year.vue", () => { + test("arePagePrerequisitesValid should be true ", async () => { + //Arrange + const { wrapper } = setupMocks({}); + + //Act + vehicleYear.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "vehicle-make" } }, + undefined, + (c) => c(wrapper.vm) + ); + + let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); + await nextTick(); + + //Assert + expect(arePagePrerequisitesValid).toBe(true); + }); +}); + function setupMocks({ vehicleYearQuestionCmsContent = {}, yearQuestionInitialData = {}, diff --git a/src/layouts/vehicle-year/year-question/year-question.spec.js b/src/layouts/vehicle-year/year-question/year-question.spec.js index c6e17547..c5e418d1 100644 --- a/src/layouts/vehicle-year/year-question/year-question.spec.js +++ b/src/layouts/vehicle-year/year-question/year-question.spec.js @@ -3,6 +3,23 @@ import { shallowMount } from "@vue/test-utils"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { useMainStore } from "@/store"; +describe("year-question.vue", () => { + test("Selected year is emitted upon selection.", async () => { + //Arrange + const { wrapper } = setupMocks({ modelValueProp: "2020" }); + const yearToSelect = "2021"; + + //Act + wrapper.setValue({ modelValue: yearToSelect }); + await wrapper.vm.$nextTick(); + + //Assert + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([ + { modelValue: "2021" }, + ]); + }); +}); + describe("year-question.vue", () => { test("Data from store api are used as radio question answers.", async () => { //Arrange