From 934248dbce0998232cf800f0faff190fb6fcc216 Mon Sep 17 00:00:00 2001 From: Jason Wheeler Date: Thu, 27 Oct 2022 16:58:59 -0400 Subject: [PATCH 01/19] started vehicle-make layout and fixed bug in cms-content-helper --- .../vehicle-banner/vehicle-banner.vue | 6 +- src/helpers/cms-content-helper.js | 2 +- src/layouts/vehicle-make/vehicle-make.vue | 78 +++++++++++++++++-- src/layouts/vehicle-year/vehicle-year.vue | 2 +- 4 files changed, 75 insertions(+), 13 deletions(-) diff --git a/src/common-components/vehicle-banner/vehicle-banner.vue b/src/common-components/vehicle-banner/vehicle-banner.vue index 534313df..9fffd974 100644 --- a/src/common-components/vehicle-banner/vehicle-banner.vue +++ b/src/common-components/vehicle-banner/vehicle-banner.vue @@ -9,7 +9,7 @@ \ No newline at end of file diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index 676c1e33..86f06484 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -3,7 +3,7 @@
- +
Date: Fri, 28 Oct 2022 14:31:45 -0400 Subject: [PATCH 02/19] Created make-question and finished vehicle-make template --- src/constants/endpoints.js | 4 ++ .../make-question/make-question.vue | 59 +++++++++++++++++++ src/layouts/vehicle-make/vehicle-make.vue | 39 ++++-------- .../year-question/year-question.vue | 2 + .../router-constants/navigation-scenarios.js | 2 +- src/router/router-constants/routing-table.js | 20 ++++++- src/store/index.js | 15 +++++ 7 files changed, 112 insertions(+), 29 deletions(-) create mode 100644 src/layouts/vehicle-make/make-question/make-question.vue diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index 2aeaf26a..89e1f1fc 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -15,6 +15,10 @@ const endpoints = { url: "/vehicle/api/v1/vehicle/years", method: "GET", }, + GetVehicleMakes: { + url: "/vehicle/api/v1/vehicle/makes/", + method: "GET", + }, }; export { endpoints }; diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue new file mode 100644 index 00000000..f99f5d45 --- /dev/null +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -0,0 +1,59 @@ + + + + \ No newline at end of file diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue index 8b1785e1..3d4ca8b5 100644 --- a/src/layouts/vehicle-make/vehicle-make.vue +++ b/src/layouts/vehicle-make/vehicle-make.vue @@ -6,11 +6,11 @@
-
@@ -20,7 +20,7 @@ + + diff --git a/src/common-components/site-sub-header/site-sub-header.vue b/src/common-components/site-sub-header/site-sub-header.vue index 22064035..c394d214 100644 --- a/src/common-components/site-sub-header/site-sub-header.vue +++ b/src/common-components/site-sub-header/site-sub-header.vue @@ -5,23 +5,39 @@ {{ content }} +
diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue index 3d4ca8b5..b3997b1b 100644 --- a/src/layouts/vehicle-make/vehicle-make.vue +++ b/src/layouts/vehicle-make/vehicle-make.vue @@ -4,7 +4,12 @@
- +
Date: Tue, 1 Nov 2022 10:54:26 -0400 Subject: [PATCH 05/19] wip --- package-lock.json | 52 ++++--- package.json | 1 + src/helpers/unit-test-helper.js | 46 ++++++ .../make-question/make-question.spec.js | 84 +++++++++++ .../make-question/make-question.vue | 1 - src/layouts/vehicle-make/vehicle-make.spec.js | 131 +++++++++++++++++- 6 files changed, 292 insertions(+), 23 deletions(-) create mode 100644 src/helpers/unit-test-helper.js create mode 100644 src/layouts/vehicle-make/make-question/make-question.spec.js diff --git a/package-lock.json b/package-lock.json index 93875c8b..7ff32a19 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1794,6 +1794,14 @@ "fastq": "^1.6.0" } }, + "@pinia/testing": { + "version": "0.0.14", + "resolved": "https://registry.npmjs.org/@pinia/testing/-/testing-0.0.14.tgz", + "integrity": "sha512-ZmZwVNd/NnKYLIfjfuKl0zlJ3UdiXFpsHzSlL6wCeezSlyrqGMxsIQKv0J6fleu38gyCNTPBEipfxrt8V4+VIg==", + "requires": { + "vue-demi": "*" + } + }, "@polka/url": { "version": "1.0.0-next.21", "resolved": "https://registry.npmjs.org/@polka/url/-/url-1.0.0-next.21.tgz", @@ -2540,6 +2548,29 @@ "webpack-merge": "^5.7.3", "webpack-virtual-modules": "^0.4.2", "whatwg-fetch": "^3.6.2" + }, + "dependencies": { + "@vue/vue-loader-v15": { + "version": "npm:vue-loader@15.10.0", + "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.0.tgz", + "integrity": "sha512-VU6tuO8eKajrFeBzMssFUP9SvakEeeSi1BxdTH5o3+1yUyrldp8IERkSdXlMI2t4kxF2sqYUDsQY+WJBxzBmZg==", + "dev": true, + "requires": { + "@vue/component-compiler-utils": "^3.1.0", + "hash-sum": "^1.0.2", + "loader-utils": "^1.1.0", + "vue-hot-reload-api": "^2.3.0", + "vue-style-loader": "^4.1.0" + }, + "dependencies": { + "hash-sum": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz", + "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==", + "dev": true + } + } + } } }, "@vue/cli-shared-utils": { @@ -2789,27 +2820,6 @@ "integrity": "sha512-E2P4oXSaWDqTZNbmKZFVLrNN/siVN78YkEqs7pHryWerrlZR9bBFLWdJwRoguX45Ru6HxIflzKl4vQvwRMwm5g==", "dev": true }, - "@vue/vue-loader-v15": { - "version": "npm:vue-loader@15.10.0", - "resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.0.tgz", - "integrity": "sha512-VU6tuO8eKajrFeBzMssFUP9SvakEeeSi1BxdTH5o3+1yUyrldp8IERkSdXlMI2t4kxF2sqYUDsQY+WJBxzBmZg==", - "dev": true, - "requires": { - "@vue/component-compiler-utils": "^3.1.0", - "hash-sum": "^1.0.2", - "loader-utils": "^1.1.0", - "vue-hot-reload-api": "^2.3.0", - "vue-style-loader": "^4.1.0" - }, - "dependencies": { - "hash-sum": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz", - "integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==", - "dev": true - } - } - }, "@vue/vue3-jest": { "version": "27.0.0", "resolved": "https://registry.npmjs.org/@vue/vue3-jest/-/vue3-jest-27.0.0.tgz", diff --git a/package.json b/package.json index 9b586f69..e9250297 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "test:unit:lite": "vue-cli-service test:unit --ci" }, "dependencies": { + "@pinia/testing": "0.0.14", "@popperjs/core": "^2.10.2", "axios": "^0.27.2", "bootstrap": "^5.2.2", diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js new file mode 100644 index 00000000..20e33a7e --- /dev/null +++ b/src/helpers/unit-test-helper.js @@ -0,0 +1,46 @@ +import { storeActions } from "@/constants/store-actions"; +import { navigationScenarios } from "@/router/router-constants/navigation-scenarios.js"; +import { vehicleCategories } from "@/constants/vehicle-categories.js"; +import { issPageValues } from "@/router/router-constants/issPage-values"; +import { Form } from "vee-validate"; +import { queryStrings } from "@/constants/query-strings"; +import { useMainStore } from "@/store"; +import { mapStores } from "pinia"; +import { createTestingPinia } from '@pinia/testing'; + +const pinia = createTestingPinia(); +useMainStore(pinia); + +const mockMixin = { + methods: { + getCmsContent: jest.fn() + }, + computed: { + ...mapStores(useMainStore), + } +}; + + +// Common methods +export function getMountOptions(mockData) { + // Define our mocks to attached to the 'global' object for Vue/Jest. + const mocks = {}; + + + // Mock const files + mocks.storeActions = storeActions; + mocks.navigationScenarios = navigationScenarios; + mocks.vehicleCategories = vehicleCategories; + mocks.issPageValues = issPageValues; + mocks.queryStrings = queryStrings; + + + const global = { + mocks: mocks, + mixins: [mockMixin], + plugins: [pinia], + stubs: { Form } + }; + + return { global }; +} \ No newline at end of file diff --git a/src/layouts/vehicle-make/make-question/make-question.spec.js b/src/layouts/vehicle-make/make-question/make-question.spec.js new file mode 100644 index 00000000..c9e096e5 --- /dev/null +++ b/src/layouts/vehicle-make/make-question/make-question.spec.js @@ -0,0 +1,84 @@ +import makeQuestion from "@/layouts/vehicle-make/make-question/make-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 } +); + +describe("make-question.vue", () => { + + test("Data from store api are used as radio question answers.", async () => { + //Arrange + const { wrapper, cmsContent } = setupMocks({ + dataFromStoreApi: ["honda", "ford", "dodge"], + }); + + //Act + const initialData = makeQuestion.methods.loadInitialData.call(wrapper.vm); + makeQuestion.methods.initializeComponent.call( + wrapper.vm, + initialData + ); + + //Assert + const buttonQuestionComponent = await wrapper.findComponent({ + name: "buttonQuestion", + }); + expect(buttonQuestionComponent.attributes("answers")).toBe( + "honda,ford,dodge" + ); + }); + + test("Selected make is emitted upon selection.", async () => { + //Arrange + const { wrapper } = setupMocks({ modelValueProp: "honda" }); + const makeToSelect = "ford"; + + //Act + wrapper.setValue({ selectedMake: makeToSelect }); + await wrapper.vm.$nextTick(); + + //Assert + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([ + { selectedMake: "ford" }, + ]); + }); + +}); + +function setupMocks({ + modelValueProp = "1900", + cmsQuestionText = "CMS text goes here", + dataFromStoreApi = [], +}) { + //Mock store + store.getVehicleMakes = jest.fn(() => dataFromStoreApi); + const mountOptions = getMountOptions({ + store: { + getVehicleMakes: store.getVehicleMakes, + }, + }); + + //Mock props + const mockMixin = { + methods: { + getCmsContent: jest.fn() + } + } + mountOptions.propsData = { + modelValue: modelValueProp, + }; + mountOptions.mixins = [mockMixin]; + const wrapper = shallowMount(makeQuestion, mountOptions); + + //Mock CMS content + const cmsContent = { + QuestionText: cmsQuestionText, + }; + return { wrapper, cmsContent }; +} diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue index f99f5d45..0062f422 100644 --- a/src/layouts/vehicle-make/make-question/make-question.vue +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -41,7 +41,6 @@ set: function(newValue) { this.$emit("update:modelValue", newValue); this.mainStore.updateVehicleMake(newValue); - console.log(this.mainStore.order.vehicle.make) this.$router.navigate(this.navigationScenarios.SELECTED_MAKE, this.$route) } } diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js index 66012402..d61297cd 100644 --- a/src/layouts/vehicle-make/vehicle-make.spec.js +++ b/src/layouts/vehicle-make/vehicle-make.spec.js @@ -1 +1,130 @@ -test.todo("some test to be written in the future"); \ No newline at end of file +// Supporting Files +import { shallowMount } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import { settleAllPromises } from "@/helpers/layout-helper.js"; +import { nextTick } from "vue"; +import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; + + +// Components +import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue"; +import makeQuestion from "@/layouts/vehicle-make/make-question/make-question"; + +jest.mock("@/store", () => ({ + getVehicleMakes: jest.fn(), + order: { + vehicle: { + year: 2019, + }, + }, +})); + +// Mock fetchCmsContentForPage +jest.mock("@/helpers/cms-content-helper", () => ({ + fetchCmsContentForPage: jest.fn(), +})); + +// Mock our module for promises. +jest.mock("@/helpers/layout-helper.js", () => ({ + settleAllPromises: jest.fn(), +})); + +/* +describe("vehicle-make.vue", () => { + test("Make question component is initized with api data", async (done) => { + //Arrange + const makeQuestionInitialData = ["honda", "ford", "dodge"]; + const { wrapper, apiPromise } = setupMocks({ + makeQuestionInitialData: makeQuestionInitialData, + }); + + //Act + vehicleMake.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "vehicle-make" } }, + undefined, + (c) => c(wrapper.vm) + ); + + //Assert + apiPromise.finally(() => { + expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith( + makeQuestionInitialData + ); + //done(); + }); + }); +}); +*/ + +describe("vehicle-make.vue", () => { + test("BackButtonAction triggers a router.navigate change", async (done) => { + const { wrapper, apiPromise } = setupMocks({ + pageHeaderWidgetHeaderText: "Select a make to get started", + mountOptionsMockData: { + router: { + navigate: jest.fn(), + }, + }, + }); + + vehicleMake.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "vehicle-make" } }, + undefined, + (c) => c(wrapper.vm) + ); + wrapper.vm.backButtonAction(); + await nextTick(); + + apiPromise.finally(() => { + expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); + //done(); + }); + + }); +}); + +function setupMocks({ + vehicleMakeQuestionCmsContent = {}, + makeQuestionInitialData = {}, + pageHeaderWidgetHeaderText = {}, + mountOptionsMockData = {}, +}) { + //Mock api responses + const apiResponses = { + cmsContent: { + FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, + VehicleMakeQuestion: vehicleMakeQuestionCmsContent, + VehicleBannerWidget: { + 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", + }, + }, + makeQuestionInitialData: makeQuestionInitialData, + }; + + const apiPromise = Promise.resolve(apiResponses); + + fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); + settleAllPromises.mockImplementation(() => apiPromise); + + //Mock make question methods + makeQuestion.methods = { + loadInitialData: jest.fn(), + initializeComponent: jest.fn(), + }; + + const mountOptions = getMountOptions(mountOptionsMockData); + const wrapper = shallowMount(vehicleMake, mountOptions); + const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" }); + makeQuestionWrapper.vm.initializeComponent = + makeQuestion.methods.initializeComponent; + wrapper.vm.setCmsContent = jest.fn(); + + return { wrapper, apiPromise }; +} From badbece45ceb6be49d6bd366b4dba9883a0f332f Mon Sep 17 00:00:00 2001 From: Jason Wheeler Date: Tue, 1 Nov 2022 11:19:25 -0400 Subject: [PATCH 06/19] updated to match vehicle-year tests --- src/layouts/vehicle-make/vehicle-make.spec.js | 58 +++++++++++-------- src/layouts/vehicle-make/vehicle-make.vue | 2 +- 2 files changed, 36 insertions(+), 24 deletions(-) diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js index d61297cd..0bc25d0c 100644 --- a/src/layouts/vehicle-make/vehicle-make.spec.js +++ b/src/layouts/vehicle-make/vehicle-make.spec.js @@ -1,24 +1,15 @@ // Supporting Files import { shallowMount } from "@vue/test-utils"; -import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { settleAllPromises } from "@/helpers/layout-helper.js"; -import { nextTick } from "vue"; 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"; // Components import vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue"; import makeQuestion from "@/layouts/vehicle-make/make-question/make-question"; -jest.mock("@/store", () => ({ - getVehicleMakes: jest.fn(), - order: { - vehicle: { - year: 2019, - }, - }, -})); - // Mock fetchCmsContentForPage jest.mock("@/helpers/cms-content-helper", () => ({ fetchCmsContentForPage: jest.fn(), @@ -29,7 +20,6 @@ jest.mock("@/helpers/layout-helper.js", () => ({ settleAllPromises: jest.fn(), })); -/* describe("vehicle-make.vue", () => { test("Make question component is initized with api data", async (done) => { //Arrange @@ -51,14 +41,13 @@ describe("vehicle-make.vue", () => { expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith( makeQuestionInitialData ); - //done(); }); }); }); -*/ - +/* describe("vehicle-make.vue", () => { - test("BackButtonAction triggers a router.navigate change", async (done) => { + test("BackButtonAction triggers a router.navigateWithoutSaving change", async (done) => { + //Arrange const { wrapper, apiPromise } = setupMocks({ pageHeaderWidgetHeaderText: "Select a make to get started", mountOptionsMockData: { @@ -68,6 +57,7 @@ describe("vehicle-make.vue", () => { }, }); + //Act vehicleMake.beforeRouteEnter.call( wrapper.vm, { query: { issPage: "vehicle-make" } }, @@ -77,14 +67,35 @@ describe("vehicle-make.vue", () => { wrapper.vm.backButtonAction(); await nextTick(); + //Assert apiPromise.finally(() => { expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); - //done(); + done(); }); - }); }); +describe("vehicle-make.vue", () => { + test("Year set, arePagePrerequisitesValid should be true ", async () => { + //Arrange + const { wrapper } = setupMocks({}); + + //Act + vehicleMake.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "vehicle-make" } }, + undefined, + (c) => c(wrapper.vm) + ); + + let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); + + //Assert + expect(arePagePrerequisitesValid).toBe(true); + }); +}); +*/ + function setupMocks({ vehicleMakeQuestionCmsContent = {}, makeQuestionInitialData = {}, @@ -94,13 +105,13 @@ function setupMocks({ //Mock api responses const apiResponses = { cmsContent: { - FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, + SiteSubHeaderWidget: pageHeaderWidgetHeaderText, VehicleMakeQuestion: vehicleMakeQuestionCmsContent, 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", }, @@ -110,8 +121,8 @@ function setupMocks({ const apiPromise = Promise.resolve(apiResponses); - fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); settleAllPromises.mockImplementation(() => apiPromise); + fetchCmsContentForPage.mockImplementation(() => Promise.resolve()); //Mock make question methods makeQuestion.methods = { @@ -121,10 +132,11 @@ function setupMocks({ const mountOptions = getMountOptions(mountOptionsMockData); const wrapper = shallowMount(vehicleMake, mountOptions); + const makeQuestionWrapper = wrapper.findComponent({ name: "makeQuestion" }); makeQuestionWrapper.vm.initializeComponent = makeQuestion.methods.initializeComponent; - wrapper.vm.setCmsContent = jest.fn(); + wrapper.vm.setCmsContent = baseMixin.methods.setCmsContent; return { wrapper, apiPromise }; } diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue index b3997b1b..cc10d326 100644 --- a/src/layouts/vehicle-make/vehicle-make.vue +++ b/src/layouts/vehicle-make/vehicle-make.vue @@ -83,5 +83,5 @@ siteSubHeader, vehicleBanner, }, - } + }; \ No newline at end of file From 5eb899c0803849d7864c5de4877a2c79b0df7750 Mon Sep 17 00:00:00 2001 From: Kulbhushan Kaushik Date: Tue, 1 Nov 2022 11:45:00 -0400 Subject: [PATCH 07/19] commit --- .../make-question/make-question.spec.js | 28 +++++-------------- src/layouts/vehicle-make/vehicle-make.spec.js | 2 +- 2 files changed, 8 insertions(+), 22 deletions(-) diff --git a/src/layouts/vehicle-make/make-question/make-question.spec.js b/src/layouts/vehicle-make/make-question/make-question.spec.js index c9e096e5..af0063df 100644 --- a/src/layouts/vehicle-make/make-question/make-question.spec.js +++ b/src/layouts/vehicle-make/make-question/make-question.spec.js @@ -1,14 +1,8 @@ import makeQuestion from "@/layouts/vehicle-make/make-question/make-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("make-question.vue", () => { @@ -57,23 +51,15 @@ function setupMocks({ dataFromStoreApi = [], }) { //Mock store - store.getVehicleMakes = jest.fn(() => dataFromStoreApi); - const mountOptions = getMountOptions({ - store: { - getVehicleMakes: store.getVehicleMakes, - }, - }); + const mountOptions = getMountOptions(); + + const store = useMainStore(); + store.getVehicleMakes = jest.fn(() => dataFromStoreApi); + - //Mock props - const mockMixin = { - methods: { - getCmsContent: jest.fn() - } - } mountOptions.propsData = { modelValue: modelValueProp, }; - mountOptions.mixins = [mockMixin]; const wrapper = shallowMount(makeQuestion, mountOptions); //Mock CMS content diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js index 0bc25d0c..e205921d 100644 --- a/src/layouts/vehicle-make/vehicle-make.spec.js +++ b/src/layouts/vehicle-make/vehicle-make.spec.js @@ -21,7 +21,7 @@ jest.mock("@/helpers/layout-helper.js", () => ({ })); describe("vehicle-make.vue", () => { - test("Make question component is initized with api data", async (done) => { + test("Make question component is initized with api data", async () => { //Arrange const makeQuestionInitialData = ["honda", "ford", "dodge"]; const { wrapper, apiPromise } = setupMocks({ From 882e8c011094349247ce49277b51f17d52e31989 Mon Sep 17 00:00:00 2001 From: Kulbhushan Kaushik Date: Tue, 1 Nov 2022 12:58:01 -0400 Subject: [PATCH 08/19] commit --- .../model-question/model-question.vue | 62 +++++++++++++++++++ src/layouts/vehicle-model/vehicle-model.vue | 0 2 files changed, 62 insertions(+) create mode 100644 src/layouts/vehicle-model/model-question/model-question.vue create mode 100644 src/layouts/vehicle-model/vehicle-model.vue diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue new file mode 100644 index 00000000..5259e0fd --- /dev/null +++ b/src/layouts/vehicle-model/model-question/model-question.vue @@ -0,0 +1,62 @@ + + + + \ No newline at end of file diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue new file mode 100644 index 00000000..e69de29b From 5606f41432707b9d85b13f07ee0baebf2af14ac8 Mon Sep 17 00:00:00 2001 From: Jason Wheeler Date: Tue, 1 Nov 2022 14:44:57 -0400 Subject: [PATCH 09/19] brought over custom mixins for button gradient, added links to google fonts to fix font-weight issue, finished tests vehicle make. --- public/index.html | 8 +++-- .../button-question/button-question.vue | 2 +- src/helpers/unit-test-helper.js | 2 +- src/layouts/vehicle-make/vehicle-make.spec.js | 30 +++---------------- src/router/router-constants/routing-table.js | 2 +- src/styles/mixins/customMixins.scss | 6 ++++ vue.config.js | 1 + vue.release.config.js | 3 +- 8 files changed, 22 insertions(+), 32 deletions(-) create mode 100644 src/styles/mixins/customMixins.scss diff --git a/public/index.html b/public/index.html index 5f556395..97071c00 100644 --- a/public/index.html +++ b/public/index.html @@ -3,12 +3,16 @@ - + + + + + + <%= htmlWebpackPlugin.options.title %> diff --git a/src/common-components/button-question/button-question.vue b/src/common-components/button-question/button-question.vue index 10337778..4734ed12 100644 --- a/src/common-components/button-question/button-question.vue +++ b/src/common-components/button-question/button-question.vue @@ -225,7 +225,7 @@ margin-top: 1.5rem; margin-bottom: 1rem; font-size: 1rem; - line-height: 1.625rem; + line-height: 1.5rem; & > span { text-align: center; diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js index 87ed9f4c..c52adf5d 100644 --- a/src/helpers/unit-test-helper.js +++ b/src/helpers/unit-test-helper.js @@ -33,7 +33,7 @@ export function getMountOptions(mockData) { mocks.vehicleCategories = vehicleCategories; mocks.issPageValues = issPageValues; mocks.queryStrings = queryStrings; - + mocks.$router = mockData?.router; const global = { mocks: mocks, diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js index e205921d..7856dfeb 100644 --- a/src/layouts/vehicle-make/vehicle-make.spec.js +++ b/src/layouts/vehicle-make/vehicle-make.spec.js @@ -21,6 +21,7 @@ jest.mock("@/helpers/layout-helper.js", () => ({ })); describe("vehicle-make.vue", () => { + test("Make question component is initized with api data", async () => { //Arrange const makeQuestionInitialData = ["honda", "ford", "dodge"]; @@ -43,10 +44,8 @@ describe("vehicle-make.vue", () => { ); }); }); -}); -/* -describe("vehicle-make.vue", () => { - 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 make to get started", @@ -70,32 +69,11 @@ describe("vehicle-make.vue", () => { //Assert apiPromise.finally(() => { expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); - done(); }); }); + }); -describe("vehicle-make.vue", () => { - test("Year set, arePagePrerequisitesValid should be true ", async () => { - //Arrange - const { wrapper } = setupMocks({}); - - //Act - vehicleMake.beforeRouteEnter.call( - wrapper.vm, - { query: { issPage: "vehicle-make" } }, - undefined, - (c) => c(wrapper.vm) - ); - - let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); - - //Assert - expect(arePagePrerequisitesValid).toBe(true); - }); -}); -*/ - function setupMocks({ vehicleMakeQuestionCmsContent = {}, makeQuestionInitialData = {}, diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 5b56837d..b97dfb13 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -35,7 +35,7 @@ const routingTable = function(store) { maps: [ { scenario: navigationScenarios.CLICKED_FORWARD, - destinationIssPageValue: issPageValues.VEHICLE_MAKE, + destinationIssPageValue: issPageValues.VEHICLE_YEAR, }, { scenario: navigationScenarios.CLICKED_TEST, diff --git a/src/styles/mixins/customMixins.scss b/src/styles/mixins/customMixins.scss new file mode 100644 index 00000000..3576a8ac --- /dev/null +++ b/src/styles/mixins/customMixins.scss @@ -0,0 +1,6 @@ +//Custom Mixins + +//Blue gradient background mixin +@mixin blue-gradient { + background: linear-gradient(270deg, $blue 0%, $blue-800 100%); +} diff --git a/vue.config.js b/vue.config.js index 3c474a35..1f356d22 100644 --- a/vue.config.js +++ b/vue.config.js @@ -19,6 +19,7 @@ module.exports = { @import "@/styles/ux-variables.scss"; @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/mixins"; + @import "@/styles/mixins/customMixins"; `, }, }, diff --git a/vue.release.config.js b/vue.release.config.js index 93af085c..442e244b 100644 --- a/vue.release.config.js +++ b/vue.release.config.js @@ -17,10 +17,11 @@ module.exports = { @import "@/styles/ux-variables.scss"; @import "./node_modules/bootstrap/scss/variables"; @import "./node_modules/bootstrap/scss/mixins"; + @import "@/styles/mixins/customMixins"; `, }, }, - }, + }, configureWebpack: { devtool: 'source-map' }, From f74ee61231531d536367a3dbda91888d54e8d352 Mon Sep 17 00:00:00 2001 From: Kulbhushan Kaushik Date: Tue, 1 Nov 2022 15:09:43 -0400 Subject: [PATCH 10/19] commit --- src/constants/endpoints.js | 4 + .../model-question/model-question.vue | 10 +- src/layouts/vehicle-model/vehicle-model.vue | 97 +++++++++++++++++++ src/router/router-constants/issPage-values.js | 1 + .../router-constants/navigation-scenarios.js | 2 + src/router/router-constants/routing-table.js | 15 ++- src/store/index.js | 15 +++ 7 files changed, 135 insertions(+), 9 deletions(-) diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index 89e1f1fc..642fc752 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -19,6 +19,10 @@ const endpoints = { url: "/vehicle/api/v1/vehicle/makes/", method: "GET", }, + GetVehicleModels: { + url: "/vehicle/api/v1/vehicle/Models", + method: "GET", + } }; export { endpoints }; diff --git a/src/layouts/vehicle-model/model-question/model-question.vue b/src/layouts/vehicle-model/model-question/model-question.vue index 5259e0fd..064007e0 100644 --- a/src/layouts/vehicle-model/model-question/model-question.vue +++ b/src/layouts/vehicle-model/model-question/model-question.vue @@ -14,10 +14,7 @@ + \ No newline at end of file diff --git a/src/router/router-constants/issPage-values.js b/src/router/router-constants/issPage-values.js index 8bdc935c..1fe10c52 100644 --- a/src/router/router-constants/issPage-values.js +++ b/src/router/router-constants/issPage-values.js @@ -3,5 +3,6 @@ export const issPageValues = { WELCOME_PAGE: "welcome-page", VEHICLE_MAKE: "vehicle-make", VEHICLE_YEAR: "vehicle-year", + VEHICLE_MODEL: "vehicle-model" }; \ No newline at end of file diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js index bcfd87d4..01a1d7a8 100644 --- a/src/router/router-constants/navigation-scenarios.js +++ b/src/router/router-constants/navigation-scenarios.js @@ -6,6 +6,8 @@ const navigationScenarios = { // YMMS SELECTED_YEAR: "SELECTED_YEAR", SELECTED_MAKE: "SELECTED_MAKE", + SELECTED_MODEL: "SELECTED_MODEL", + // TESTING CLICKED_TEST: "CLICKED_TEST" }; diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 5b56837d..1f5a87d5 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -26,10 +26,23 @@ const routingTable = function(store) { }, { scenario: navigationScenarios.SELECTED_MAKE, - destinationIssPageValue: issPageValues.WELCOME_PAGE + destinationIssPageValue: issPageValues.VEHICLE_MODEL }, ], }, + { + issPageValue: issPageValues.VEHICLE_MODEL, + maps: [ + { + scenario: navigationScenarios.CLICKED_BACK, + destinationIssPageValue: issPageValues.VEHICLE_MAKE, + }, + { + scenario: navigationScenarios.SELC, + destinationUrl: "https://www.google.com" + } + ] + }, { issPageValue: issPageValues.WELCOME_PAGE, maps: [ diff --git a/src/store/index.js b/src/store/index.js index 7d3dca5b..a9c9acd8 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -91,6 +91,14 @@ export const useMainStore = defineStore({ }); }, + getVehicleModels() { + return globalMethods.callHttpClient({ + method: endpoints.GetVehicleModels.method, + endpoint: endpoints.GetVehicleModels.url + this.order.vehicle.year + this.order.vehicle.make, + payload: {}, + }); + }, + // Vehicle API Actions updateVehicleYear(year) { @@ -106,6 +114,13 @@ export const useMainStore = defineStore({ } }, + updateVehicleModel(model) + { + if (this.order.vehicle.model !== model) { + this.order.vehicle.model = model; + } + }, + // populate initial state populateInitialState() { From ced1b59fed044e08f1092bb476cd68df1525996e Mon Sep 17 00:00:00 2001 From: Jason Wheeler Date: Tue, 1 Nov 2022 16:12:58 -0400 Subject: [PATCH 11/19] Moved setting selected value in store from question components to parent components. Pulled over arePagePrerequisitesValids methods. --- .../make-question/make-question.vue | 2 -- src/layouts/vehicle-make/vehicle-make.spec.js | 20 +++++++++++++++++++ src/layouts/vehicle-make/vehicle-make.vue | 18 ++++++++++++++++- src/layouts/vehicle-year/vehicle-year.vue | 16 +++++++++++++++ .../year-question/year-question.vue | 2 -- 5 files changed, 53 insertions(+), 5 deletions(-) diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue index 0062f422..9ed4f4ea 100644 --- a/src/layouts/vehicle-make/make-question/make-question.vue +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -40,8 +40,6 @@ }, set: function(newValue) { this.$emit("update:modelValue", newValue); - this.mainStore.updateVehicleMake(newValue); - this.$router.navigate(this.navigationScenarios.SELECTED_MAKE, this.$route) } } }, diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js index 7856dfeb..72d3a604 100644 --- a/src/layouts/vehicle-make/vehicle-make.spec.js +++ b/src/layouts/vehicle-make/vehicle-make.spec.js @@ -5,6 +5,7 @@ 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 vehicleMake from "@/layouts/vehicle-make/vehicle-make.vue"; @@ -72,6 +73,25 @@ describe("vehicle-make.vue", () => { }); }); + test("Year set, arePagePrerequisitesValid should be true ", async () => { + //Arrange + const { wrapper } = setupMocks({}); + useMainStore().order.vehicle.year = 2001; + + //Act + vehicleMake.beforeRouteEnter.call( + wrapper.vm, + { query: { issPage: "vehicle-make" } }, + undefined, + (c) => c(wrapper.vm) + ); + + let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); + + //Assert + expect(arePagePrerequisitesValid).toBe(true); + }); + }); function setupMocks({ diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue index cc10d326..3fc8185d 100644 --- a/src/layouts/vehicle-make/vehicle-make.vue +++ b/src/layouts/vehicle-make/vehicle-make.vue @@ -42,7 +42,7 @@ }; }, - async beforeRouteEnter(to, from, next) { + async beforeRouteEnter(to, from, next) { // Call APIs const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); const makeQuestionInitialDataPromise = makeQuestion.methods.loadInitialData(); @@ -76,6 +76,13 @@ this.$route ); }, + arePagePrerequisitesValid() { + console.log(this.mainStore.order) + if (this.mainStore.order.vehicle.year){ + return true; + } + return false; + }, }, components: { makeQuestion, @@ -83,5 +90,14 @@ siteSubHeader, vehicleBanner, }, + watch: { + selectedMake(make) { + this.mainStore.updateVehicleMake(make); + this.$router.navigate( + this.navigationScenarios.SELECTED_MAKE, + this.$route + ); + }, + }, }; \ No newline at end of file diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index 86f06484..96fa0804 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -65,6 +65,22 @@ ); }); }, + + watch: { + selectedYear(year) { + const parsedYear = parseInt(year); + this.mainStore.updateVehicleYear(parsedYear); + this.$router.navigate( + this.navigationScenarios.SELECTED_YEAR, + this.$route + ); + }, + }, + methods: { + arePagePrerequisitesValid() { + return true; + }, + }, components: { yearQuestion, diff --git a/src/layouts/vehicle-year/year-question/year-question.vue b/src/layouts/vehicle-year/year-question/year-question.vue index 28b3c255..0cd35425 100644 --- a/src/layouts/vehicle-year/year-question/year-question.vue +++ b/src/layouts/vehicle-year/year-question/year-question.vue @@ -40,8 +40,6 @@ }, set: function(newValue) { this.$emit("update:modelValue", newValue); - this.mainStore.updateVehicleYear(newValue); - this.$router.navigate(this.navigationScenarios.SELECTED_YEAR, this.$route) } } }, From 75eef92707cb5f674725dc74720435bc79964bdf Mon Sep 17 00:00:00 2001 From: Kulbhushan Kaushik Date: Wed, 2 Nov 2022 09:01:53 -0400 Subject: [PATCH 12/19] commit --- src/layouts/vehicle-model/vehicle-model.vue | 22 +++++++++++++------- src/router/router-constants/routing-table.js | 2 +- src/store/index.js | 4 ++-- 3 files changed, 17 insertions(+), 11 deletions(-) diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue index 6640f9cc..374909d3 100644 --- a/src/layouts/vehicle-model/vehicle-model.vue +++ b/src/layouts/vehicle-model/vehicle-model.vue @@ -8,6 +8,7 @@ cmsWidgetName="SiteSubHeaderWidget" :hasBackButton="true" @click-event="backButtonAction" + backButtonAccessibleText = "Change vehicle make" />
@@ -35,8 +36,6 @@ selectedModel: null, }; }, - computed: {}, - async beforeRouteEnter(to, from, next) { // Call APIs const cmsContentPromise = fetchCmsContentForPage(to.query.issPage); @@ -67,13 +66,20 @@ }, methods: { - backButtonAction() { + backButtonAction() { // route to move backwards - this.$router.navigate( - this.navigationScenarios.CLICKED_BACK, - this.$route - ); - }, + this.$router.navigate( + this.navigationScenarios.CLICKED_BACK, + this.$route + ); + }, + arePagePrerequisitesValid() + { + if(this.mainStore.order.vehicle.make){ + return true; + } + return false; + }, }, watch: { diff --git a/src/router/router-constants/routing-table.js b/src/router/router-constants/routing-table.js index 67c7c284..106a103f 100644 --- a/src/router/router-constants/routing-table.js +++ b/src/router/router-constants/routing-table.js @@ -38,7 +38,7 @@ const routingTable = function(store) { destinationIssPageValue: issPageValues.VEHICLE_MAKE, }, { - scenario: navigationScenarios.SELC, + scenario: navigationScenarios.SELECTED_MODEL, destinationUrl: "https://www.google.com" } ] diff --git a/src/store/index.js b/src/store/index.js index a9c9acd8..769a36fd 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -1,4 +1,4 @@ -import { defineStore, createPinia } from "pinia"; +import { defineStore } from "pinia"; import { endpoints } from "@/constants/endpoints.js"; import globalMethods from "@/global-methods"; import { applicationConfig } from "@/constants/application-config"; @@ -94,7 +94,7 @@ export const useMainStore = defineStore({ getVehicleModels() { return globalMethods.callHttpClient({ method: endpoints.GetVehicleModels.method, - endpoint: endpoints.GetVehicleModels.url + this.order.vehicle.year + this.order.vehicle.make, + endpoint: `${endpoints.GetVehicleModels.url}/${this.order.vehicle.year}/${this.order.vehicle.make}`, payload: {}, }); }, From fc842b0c5beb402b2c045436d33e87a73b2cd0df Mon Sep 17 00:00:00 2001 From: Jason Wheeler Date: Wed, 2 Nov 2022 09:03:51 -0400 Subject: [PATCH 13/19] removed console.log --- src/layouts/vehicle-make/vehicle-make.vue | 1 - 1 file changed, 1 deletion(-) diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue index 3fc8185d..f074ecbc 100644 --- a/src/layouts/vehicle-make/vehicle-make.vue +++ b/src/layouts/vehicle-make/vehicle-make.vue @@ -77,7 +77,6 @@ ); }, arePagePrerequisitesValid() { - console.log(this.mainStore.order) if (this.mainStore.order.vehicle.year){ return true; } From a8e44a6fa9de89133fc2fa3eabb48a4d7db69461 Mon Sep 17 00:00:00 2001 From: Kulbhushan Kaushik Date: Wed, 2 Nov 2022 09:16:03 -0400 Subject: [PATCH 14/19] commit --- src/helpers/cms-content-helper.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js index 45f7943c..356ffb76 100644 --- a/src/helpers/cms-content-helper.js +++ b/src/helpers/cms-content-helper.js @@ -89,7 +89,7 @@ function mapStringToState(str) { const regexMatches = [...str.matchAll(regexExp)]; const globalStateMatches = regexMatches.filter(match => { return match[1] === dynamicStrings.GLOBAL_STATE; - }) + }); // Our final string value that will be built from the matches. let stringBuilder = ""; From d4adc7910d8d6b8d774d37bdb95508ab3e412947 Mon Sep 17 00:00:00 2001 From: Kulbhushan Kaushik Date: Wed, 2 Nov 2022 09:30:38 -0400 Subject: [PATCH 15/19] commit --- src/layouts/vehicle-model/vehicle-model.vue | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue index 374909d3..76bb35b2 100644 --- a/src/layouts/vehicle-model/vehicle-model.vue +++ b/src/layouts/vehicle-model/vehicle-model.vue @@ -24,8 +24,8 @@ import siteHeader from "@/common-components/site-header/site-header"; import siteSubHeader from "@/common-components/site-sub-header/site-sub-header"; import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; + // Supporting files - // Supporting files import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { settleAllPromises } from "@/helpers/layout-helper"; From b77078266ea147ada0ae26b0acac38ac5e5379de Mon Sep 17 00:00:00 2001 From: Kulbhushan Kaushik Date: Wed, 2 Nov 2022 12:09:59 -0400 Subject: [PATCH 16/19] commit --- .../vehicle-model/vehicle-model.spec.js | 138 ++++++++++++++++++ 1 file changed, 138 insertions(+) create mode 100644 src/layouts/vehicle-model/vehicle-model.spec.js 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..6576d43e --- /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.navigateWithoutSaving).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 }; +} From a0494cd07eb18ae7c4b7ea8eefac35ce4bf2ac1c Mon Sep 17 00:00:00 2001 From: Kulbhushan Kaushik Date: Wed, 2 Nov 2022 12:14:33 -0400 Subject: [PATCH 17/19] commit --- src/layouts/vehicle-make/vehicle-make.spec.js | 4 +- .../model-question/model-question.spec.js | 71 +++++++++++++++++++ 2 files changed, 73 insertions(+), 2 deletions(-) create mode 100644 src/layouts/vehicle-model/model-question/model-question.spec.js diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js index 72d3a604..f1cd1b21 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 }; +} From f9ff6916d8965d6c23e3f4579ffd30a2d9d4c3f5 Mon Sep 17 00:00:00 2001 From: Kulbhushan Kaushik Date: Wed, 2 Nov 2022 12:20:22 -0400 Subject: [PATCH 18/19] commit --- src/layouts/vehicle-year/vehicle-year.spec.js | 22 +++++++++++++++++++ .../year-question/year-question.spec.js | 17 ++++++++++++++ 2 files changed, 39 insertions(+) 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 From dad65390dd162894a5cc192115707ba789dace6a Mon Sep 17 00:00:00 2001 From: Kulbhushan Kaushik Date: Wed, 2 Nov 2022 12:34:27 -0400 Subject: [PATCH 19/19] COMMIT --- src/layouts/vehicle-model/vehicle-model.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/layouts/vehicle-model/vehicle-model.spec.js b/src/layouts/vehicle-model/vehicle-model.spec.js index 6576d43e..21ddd5fa 100644 --- a/src/layouts/vehicle-model/vehicle-model.spec.js +++ b/src/layouts/vehicle-model/vehicle-model.spec.js @@ -67,7 +67,7 @@ describe("vehicle-model.vue", () => { await nextTick(); //Assert apiPromise.finally(() => { - expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled(); + expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); }); }); });