diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js index 72d3a604..20b8df9b 100644 --- a/src/layouts/vehicle-make/vehicle-make.spec.js +++ b/src/layouts/vehicle-make/vehicle-make.spec.js @@ -134,7 +134,8 @@ function setupMocks({ const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" }); makeQuestionWrapper.vm.initializeComponent = makeQuestion.methods.initializeComponent; - wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent; + + wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent; return { wrapper, apiPromise }; } diff --git a/src/layouts/vehicle-style/style-question/style-question.spec.js b/src/layouts/vehicle-style/style-question/style-question.spec.js index c0230131..bbb2bd70 100644 --- a/src/layouts/vehicle-style/style-question/style-question.spec.js +++ b/src/layouts/vehicle-style/style-question/style-question.spec.js @@ -1,31 +1,11 @@ import styleQuestion from "@/layouts/vehicle-style/style-question/style-question"; import { shallowMount } from "@vue/test-utils"; import { getMountOptions } from "@/helpers/unit-test-helper.js"; -import store from "@/store"; -jest.mock( - "@/store", - () => { - return {}; - }, - { virtual: true } -); +import { useMainStore } from "@/store"; + describe("style-question.vue", () => { - test("Selected style is emitted upon selection.", async () => { - //Arrange - const { wrapper } = setupMocks({ modelValueProp: "2 Door" }); - const styleToSelect = "4 Door"; - //Act - wrapper.setValue({ selectedStyle: styleToSelect }); - await wrapper.vm.$nextTick(); - - //Assert - expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ selectedStyle: "4 Door" }]); - }); -}); - -describe("style-question.vue", () => { test("Data from store api are used as radio question answers.", async () => { //Arrange const { wrapper, cmsContent } = setupMocks({ @@ -42,6 +22,20 @@ describe("style-question.vue", () => { }); expect(buttonQuestionComponent.attributes("answers")).toBe("2 Door,4 Door"); }); + + test("Selected style is emitted upon selection.", async () => { + //Arrange + const { wrapper } = setupMocks({ modelValueProp: "2 Door" }); + const styleToSelect = "4 Door"; + + //Act + wrapper.setValue({ selectedStyle: styleToSelect }); + await wrapper.vm.$nextTick(); + + //Assert + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ selectedStyle: "4 Door" }]); + }); + }); function setupMocks({ @@ -50,25 +44,14 @@ function setupMocks({ dataFromStoreApi = [], }) { //Mock store - store.dispatch = jest.fn(() => dataFromStoreApi); - store.getters = { vehicle: { year: 2019, make: "honda", model: "civc" } }; - const mountOptions = getMountOptions({ - store: { - dispatch: store.dispatch, - getters: store.getters, - }, - }); + const mountOptions = getMountOptions(); + + const store = useMainStore(); + store.getVehicleStyles = jest.fn(() => dataFromStoreApi); - //Mock props - const mockMixin = { - methods: { - getCmsContent: jest.fn(), - }, - }; mountOptions.propsData = { modelValue: modelValueProp, }; - mountOptions.mixins = [mockMixin]; const wrapper = shallowMount(styleQuestion, mountOptions); //Mock CMS content diff --git a/src/layouts/vehicle-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js index f7dacb6b..b584f74c 100644 --- a/src/layouts/vehicle-style/vehicle-style.spec.js +++ b/src/layouts/vehicle-style/vehicle-style.spec.js @@ -1,18 +1,16 @@ +// 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"; + // Components import vehicleStyle from "@/layouts/vehicle-style/vehicle-style.vue"; import styleQuestion from "@/layouts/vehicle-style/style-question/style-question"; -// Supporting files -import { settleAllPromises } from "@/helpers/layout-helper.js"; -import { nextTick } from "vue"; -import { shallowMount } from "@vue/test-utils"; -import { getMountOptions } from "@/helpers/unit-test-helper.js"; -import { storeActions } from "@/constants/store-actions"; -import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; -import baseMixin from "@/mixins/base-mixin.js"; -import router from "@/router"; -import store from "@/store"; -import { storeMutations } from "@/constants/store-mutations"; // Mock our module for promises. jest.mock("@/helpers/layout-helper.js", () => ({ @@ -24,17 +22,12 @@ jest.mock("@/helpers/cms-content-helper", () => ({ fetchCmsContentForPage: jest.fn(), })); -// Mock fetchCmsContentForPage -jest.mock("@/router", () => ({ - overrideNavigation: jest.fn(), -})); - describe("vehicle-style.vue", () => { beforeEach(() => { jest.clearAllMocks(); }); - test("Style question component is initized with api data", async (done) => { + test("Style question component is initized with api data", async () => { //Arrange const styleQuestionInitialData = ["2 Door", "4 Door"]; const { wrapper, apiPromise } = setupMocks({ @@ -44,7 +37,7 @@ describe("vehicle-style.vue", () => { //Act vehicleStyle.beforeRouteEnter.call( wrapper.vm, - { query: { fmgPage: "vehicle-style" } }, + { query: { issPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm) ); @@ -54,19 +47,16 @@ describe("vehicle-style.vue", () => { expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith( styleQuestionInitialData ); - done(); }); }); - test("BackButtonAction triggers a router.navigateWithoutSaving change", async (done) => { + test("BackButtonAction triggers a router.navigate change", async () => { //Arrange const { wrapper, apiPromise } = setupMocks({ pageHeaderWidgetHeaderText: "Select a style to get started", mountOptionsMockData: { router: { navigate: jest.fn(), - navigateWithSaving: jest.fn(), - navigateWithoutSaving: jest.fn(), }, }, }); @@ -74,7 +64,7 @@ describe("vehicle-style.vue", () => { //Act vehicleStyle.beforeRouteEnter.call( wrapper.vm, - { query: { fmgPage: "vehicle-style" } }, + { query: { issPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm) ); @@ -84,49 +74,18 @@ describe("vehicle-style.vue", () => { //Assert apiPromise.finally(() => { expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled(); - done(); - }); - }); - - test("setVehicle triggers a dispatchStoreAction commit", async (done) => { - //Arrange - const { wrapper, apiPromise } = setupMocks({ - pageHeaderWidgetHeaderText: "Select a style to get started", - mountOptionsMockData: { - actionList: [ - { - actionName: storeActions.SET_VEHICLE, - data: "mockData", - }, - ], - }, - }); - - //Act - vehicleStyle.beforeRouteEnter.call( - wrapper.vm, - { query: { fmgPage: "vehicle-style" } }, - undefined, - (c) => c(wrapper.vm) - ); - wrapper.vm.setVehicle(); - await nextTick(); - - //Assert - apiPromise.finally(() => { - expect(wrapper.vm.dispatchStoreAction).toHaveBeenCalled(); - done(); }); }); test("Model set, arePagePrerequisitesValid should be true ", async () => { //Arrange const { wrapper } = setupMocks({}); + useMainStore().order.vehicle = { year: 2011, make: "ford", model: "mustang", style: null } //Act vehicleStyle.beforeRouteEnter.call( wrapper.vm, - { query: { fmgPage: "vehicle-style" } }, + { query: { issPage: "vehicle-style" } }, undefined, (c) => c(wrapper.vm) ); @@ -137,59 +96,6 @@ describe("vehicle-style.vue", () => { //Assert expect(arePagePrerequisitesValid).toBe(true); }); - - test("there is only one vehicle style => autoselect and move to vehicle damage", async () => { - //Arrange - const { wrapper } = setupMocks({ - styleQuestionInitialData: ["2 door sedan"], - }); - - // Act - await vehicleStyle.beforeRouteEnter.call( - wrapper.vm, - { query: { fmgPage: "vehicle-style" } }, - undefined, - (c) => c(wrapper.vm) - ); - - // Assert - expect(store.commit).toHaveBeenCalledWith(storeMutations.UPDATE_STYLE, "2 door sedan"); - expect(router.overrideNavigation).toHaveBeenCalled(); - }); - - test("there is only one vehicle style and vehicle-damage was visited => don't autoselect or move to vehicle damage", async () => { - //Arrange - const { wrapper } = setupMocks({ - styleQuestionInitialData: ["2 door sedan"], - mountOptionsMockData: { - store: { - getters: { - applicationUser: { - pageData: { - "part-questions": null, - "vehicle-make": {}, - "vehicle-model": {}, - "vehicle-style": {}, - "vehicle-damage": {}, - }, - }, - }, - }, - }, - }); - - // Act - await vehicleStyle.beforeRouteEnter.call( - wrapper.vm, - { query: { fmgPage: "vehicle-style" } }, - undefined, - (c) => c(wrapper.vm) - ); - - // Assert - expect(store.commit).not.toHaveBeenCalledWith(storeMutations.UPDATE_STYLE, "2 door sedan"); - expect(router.overrideNavigation).not.toHaveBeenCalled(); - }); }); function setupMocks({ @@ -201,13 +107,13 @@ function setupMocks({ //Mock api responses const apiResponses = { cmsContent: { - FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, + SiteSubHeaderWidget: pageHeaderWidgetHeaderText, VehicleStyleQuestion: vehicleStyleQuestionCmsContent, VehicleBannerWidget: { GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", }, - FunnelHeaderWidget: { + SiteHeaderWidget: { LogoImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", }, @@ -226,31 +132,14 @@ function setupMocks({ initializeComponent: jest.fn(), }; - store.commit = jest.fn(); - store.dispatch = jest.fn(); - store.getters = mountOptionsMockData.store?.getters ?? { - vehicle: { - model: "TL", - }, - applicationUser: { - pageData: { - "part-questions": null, - "vehicle-make": {}, - "vehicle-model": {}, - "vehicle-style": {}, - }, - }, - }; - - const mountOptions = getMountOptions({ - ...mountOptionsMockData, - store, - }); + const mountOptions = getMountOptions(mountOptionsMockData); const wrapper = shallowMount(vehicleStyle, mountOptions); - wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent; const styleQuestionWrapper = wrapper.findComponent({ name: "styleQuestion" }); - styleQuestionWrapper.vm.initializeComponent = styleQuestion.methods.initializeComponent; - + styleQuestionWrapper.vm.initializeComponent = + styleQuestion.methods.initializeComponent; + + wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent; + return { wrapper, apiPromise }; } diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue index c77d0fb5..531c6693 100644 --- a/src/layouts/vehicle-style/vehicle-style.vue +++ b/src/layouts/vehicle-style/vehicle-style.vue @@ -39,8 +39,6 @@ export default { }; }, - computed: {}, - async beforeRouteEnter(to, from, next) { // Call APIs const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); @@ -67,7 +65,6 @@ export default { methods: { backButtonAction() { - // route to move backwards this.$router.navigate(this.navigationScenarios.CLICKED_BACK, this.$route); }, arePagePrerequisitesValid() {