From c6ed1ea032fe9a14a30969d38bcbc50a567ca1cf Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 18 Jan 2022 09:05:13 -0500 Subject: [PATCH 01/57] creating replace options question widget --- .../replace-options-question.vue | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 src/ux-components/replace-options-question/replace-options-question.vue diff --git a/src/ux-components/replace-options-question/replace-options-question.vue b/src/ux-components/replace-options-question/replace-options-question.vue new file mode 100644 index 000000000..e8c14a42d --- /dev/null +++ b/src/ux-components/replace-options-question/replace-options-question.vue @@ -0,0 +1,18 @@ + From 2bb7d5985c944ec6f7b5851b75d85c9029b3ac39 Mon Sep 17 00:00:00 2001 From: Max Date: Thu, 20 Jan 2022 22:43:08 -0500 Subject: [PATCH 02/57] replace options component created --- .../make-question/make-question.vue | 2 +- .../model-question/model-question.vue | 2 +- .../style-question/style-question.vue | 2 +- .../year-question/year-question.vue | 3 ++- .../replace-options-question.vue | 22 ++++++++++++++++++- 5 files changed, 26 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 eaa6b7306..7af0ceb83 100644 --- a/src/layouts/vehicle-make/make-question/make-question.vue +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -1,10 +1,10 @@ @@ -913,75 +923,97 @@ export default { checkbox, funnelHeader, buttonQuestion, - textLink + textLink, }, data() { return { years: [2023, 2022, 2021, 2020], - checkboxAnswers: ['Checkbox Answer 1', 'Checkbox Answer 2', 'Checkbox Answer 3'], - radioAnswers: ['Radio Answer 1', 'Radio Answer 2', 'Radio Answer 3'], - horizontalCheckboxAnswers: ['HCB Answer 1', 'HCB Answer 2', 'HCB Answer 3'], - horizontalRadioAnswers: ['HR Answer 1', 'HR Answer 2', 'HR Answer 3'], - listCardCheckBox: [{ - Name: 'List-Card-CB', - Text: "List Card CB", - SubText: "checkbox", - ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955', - AnswerImageUrl: "side-window-damage-right-all.svg" - }], - listCardRadio: [{ - Name: 'List-Card-R', - Text: "List Card R", - SubText: "Radio", - ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955', - AnswerImageUrl: "side-window-damage-right-all.svg" - }], - listCardCheckBoxHorizontalSubText: [{ - Name: 'List-Card-CBHst', - Text: "List Card CBHst", - SubText: "With Subtext", - ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955', - AnswerImageUrl: "side-window-damage-right-all.svg" - }], - listCardCheckBoxHorizontal: [{ - Name: 'List-Card-CBH', - Text: "List Card CBH", - ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955', - AnswerImageUrl: "side-window-damage-right-all.svg" - }], - listRadioHorizontalSubText: [{ - Name: 'List-Card-RHst', - Text: "List Card RHst", - SubText: "With Subtext", - ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955', - AnswerImageUrl: "side-window-damage-right-all.svg" - }], - listRadioHorizontal: [{ - Name: 'List-Card-RH', - Text: "List Card RH", - ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955', - AnswerImageUrl: "side-window-damage-right-all.svg" - }], - listCardGroup: [{ - Name: 'Side-Window-1', - Text: "Side Window", - SubText: "With Subtext", - ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955', - AnswerImageUrl: "side-window-damage-right-all.svg" - }, - { - Name: 'Side-Window-2', - Text: "Side Window", - SubText: "With Subtext that is more than one line", - ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955', - AnswerImageUrl: "side-window-damage-right-all.svg" - }, - { - Name: 'Side-Window-3', - Text: "Side Window", - ImageId: '53343ce4-5b6a-46aa-a80a-f948c1723955', - AnswerImageUrl: "side-window-damage-right-all.svg" - }], + checkboxAnswers: [ + "Checkbox Answer 1", + "Checkbox Answer 2", + "Checkbox Answer 3", + ], + radioAnswers: ["Radio Answer 1", "Radio Answer 2", "Radio Answer 3"], + horizontalCheckboxAnswers: [ + "HCB Answer 1", + "HCB Answer 2", + "HCB Answer 3", + ], + horizontalRadioAnswers: ["HR Answer 1", "HR Answer 2", "HR Answer 3"], + listCardCheckBox: [ + { + Name: "List-Card-CB", + Text: "List Card CB", + SubText: "checkbox", + ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955", + AnswerImageUrl: "side-window-damage-right-all.svg", + }, + ], + listCardRadio: [ + { + Name: "List-Card-R", + Text: "List Card R", + SubText: "Radio", + ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955", + AnswerImageUrl: "side-window-damage-right-all.svg", + }, + ], + listCardCheckBoxHorizontalSubText: [ + { + Name: "List-Card-CBHst", + Text: "List Card CBHst", + SubText: "With Subtext", + ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955", + AnswerImageUrl: "side-window-damage-right-all.svg", + }, + ], + listCardCheckBoxHorizontal: [ + { + Name: "List-Card-CBH", + Text: "List Card CBH", + ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955", + AnswerImageUrl: "side-window-damage-right-all.svg", + }, + ], + listRadioHorizontalSubText: [ + { + Name: "List-Card-RHst", + Text: "List Card RHst", + SubText: "With Subtext", + ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955", + AnswerImageUrl: "side-window-damage-right-all.svg", + }, + ], + listRadioHorizontal: [ + { + Name: "List-Card-RH", + Text: "List Card RH", + ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955", + AnswerImageUrl: "side-window-damage-right-all.svg", + }, + ], + listCardGroup: [ + { + Name: "Side-Window-1", + Text: "Side Window", + SubText: "With Subtext", + ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955", + AnswerImageUrl: "side-window-damage-right-all.svg", + }, + { + Name: "Side-Window-2", + Text: "Side Window", + SubText: "With Subtext that is more than one line", + ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955", + AnswerImageUrl: "side-window-damage-right-all.svg", + }, + { + Name: "Side-Window-3", + Text: "Side Window", + ImageId: "53343ce4-5b6a-46aa-a80a-f948c1723955", + AnswerImageUrl: "side-window-damage-right-all.svg", + }, + ], }; }, }; diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue index 33a7e6a70..d56b764b3 100644 --- a/src/layouts/form-test/form-test.vue +++ b/src/layouts/form-test/form-test.vue @@ -1,119 +1,126 @@ diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js index 02a50023c..81c7c8b7a 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.spec.js +++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js @@ -26,24 +26,32 @@ jest.mock("@/helpers/cms-content-helper", () => ({ jest.mock("@/store", () => ({ getters: { vehicle: { - carId: "C00000000" - } - } + carId: "C00000000", + }, + }, })); describe("vehicle-damage.vue", () => { test("Page header is initailized with api data", async (done) => { - //Arrange const pageHeaderWidgetHeaderText = "Select Damage"; - const { wrapper, apiPromise } = setupMocks({ pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText }); + const { wrapper, apiPromise } = setupMocks({ + pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText, + }); //Act - vehicleDamage.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-damage" } }, undefined, (c) => c(wrapper.vm)); + vehicleDamage.beforeRouteEnter.call( + wrapper.vm, + { query: { fmgPage: "vehicle-damage" } }, + undefined, + (c) => c(wrapper.vm) + ); //Assert apiPromise.finally(() => { - expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText); + expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith( + pageHeaderWidgetHeaderText + ); done(); }); }); @@ -51,20 +59,28 @@ describe("vehicle-damage.vue", () => { describe("vehicle-damage.vue", () => { test("Page logo image is initailized with api data", async (done) => { - //Arrange const SiteHeaderWidget = { LogoImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", - } - const { wrapper, apiPromise } = setupMocks({ SiteHeaderWidget: SiteHeaderWidget }); + }; + const { wrapper, apiPromise } = setupMocks({ + SiteHeaderWidget: SiteHeaderWidget, + }); //Act - vehicleDamage.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-damage" } }, undefined, (c) => c(wrapper.vm)); + vehicleDamage.beforeRouteEnter.call( + wrapper.vm, + { query: { fmgPage: "vehicle-damage" } }, + undefined, + (c) => c(wrapper.vm) + ); //Assert apiPromise.finally(() => { - expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget); + expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith( + SiteHeaderWidget + ); done(); }); }); @@ -72,20 +88,28 @@ describe("vehicle-damage.vue", () => { describe("vehicle-damage.vue", () => { test("Vehicle image is initailized with api data", async (done) => { - //Arrange const VehicleBannerWidget = { GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", - } - const { wrapper, apiPromise } = setupMocks({ VehicleBannerWidget: VehicleBannerWidget }); + }; + const { wrapper, apiPromise } = setupMocks({ + VehicleBannerWidget: VehicleBannerWidget, + }); //Act - vehicleDamage.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-damage" } }, undefined, (c) => c(wrapper.vm)); + vehicleDamage.beforeRouteEnter.call( + wrapper.vm, + { query: { fmgPage: "vehicle-damage" } }, + undefined, + (c) => c(wrapper.vm) + ); //Assert apiPromise.finally(() => { - expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget); + expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith( + VehicleBannerWidget + ); done(); }); }); @@ -93,12 +117,16 @@ describe("vehicle-damage.vue", () => { describe("vehicle-damage.vue", () => { test("CarId set, arePagePrerequisitesValid should be true ", async () => { - //Arrange const { wrapper } = setupMocks({}); //Act - vehicleDamage.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-damage" } }, undefined, (c) => c(wrapper.vm)); + vehicleDamage.beforeRouteEnter.call( + wrapper.vm, + { query: { fmgPage: "vehicle-damage" } }, + undefined, + (c) => c(wrapper.vm) + ); let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); await nextTick(); @@ -112,27 +140,26 @@ function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}, }) { - //Mock api responses baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn(); baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation(() => { - return Promise.resolve({ data: ['Front Window', 'Back Window', 'Side Window'] }); + return Promise.resolve({ + data: ["Front Window", "Back Window", "Side Window"], + }); }); const apiResponses = { cmsContent: { FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, - VehicleBannerWidget: - { + VehicleBannerWidget: { GenericVehicleImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", }, - FunnelHeaderWidget: - { + FunnelHeaderWidget: { LogoImage: "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", }, }, - damageOptions: ['Front Window', 'Back Window', 'Side Window'], + damageOptions: ["Front Window", "Back Window", "Side Window"], }; const apiPromise = Promise.resolve(apiResponses); @@ -157,13 +184,18 @@ function setupMocks({ const wrapper = shallowMount(vehicleDamage, mountOptions); const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" }); - funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent; + funnelHeaderWrapper.vm.initializeComponent = + funnelHeader.methods.initializeComponent; const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" }); - vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent; + vehicleBannerWrapper.vm.initializeComponent = + vehicleBanner.methods.initializeComponent; - const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" }); - funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent; + const funnelSubHeaderWrapper = wrapper.findComponent({ + name: "funnelSubHeader", + }); + funnelSubHeaderWrapper.vm.initializeComponent = + funnelSubHeader.methods.initializeComponent; return { wrapper, apiPromise }; -} \ 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 index 6a811459f..469be6d24 100644 --- a/src/layouts/vehicle-make/make-question/make-question.spec.js +++ b/src/layouts/vehicle-make/make-question/make-question.spec.js @@ -2,11 +2,16 @@ 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}); +jest.mock( + "@/store", + () => { + return {}; + }, + { virtual: true } +); describe("make-question.vue", () => { test("Selected make is emitted upon selection.", async () => { - //Arrange const { wrapper } = setupMocks({ modelValueProp: "honda" }); const makeToSelect = "ford"; @@ -16,51 +21,65 @@ describe("make-question.vue", () => { await wrapper.vm.$nextTick(); //Assert - expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{selectedMake: "ford"}]); + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([ + { selectedMake: "ford" }, + ]); }); }); describe("make-question.vue", () => { test("CMS question text is used as radio question text.", async () => { - //Arrange - const { wrapper, cmsContent } = setupMocks({ cmsQuestionText: "What make is your vehicle?" }); + const { wrapper, cmsContent } = setupMocks({ + cmsQuestionText: "What make is your vehicle?", + }); //Act makeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, null); //Assert - const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" }); - expect(buttonQuestionComponent.attributes("questiontext")).toBe("What make is your vehicle?"); + const buttonQuestionComponent = await wrapper.findComponent({ + name: "buttonQuestion", + }); + expect(buttonQuestionComponent.attributes("questiontext")).toBe( + "What make is your vehicle?" + ); }); }); 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"] }); + const { wrapper, cmsContent } = setupMocks({ + dataFromStoreApi: ["honda", "ford", "dodge"], + }); //Act const initialData = makeQuestion.methods.loadInitialData.call(wrapper.vm); - makeQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, initialData); + makeQuestion.methods.initializeComponent.call( + wrapper.vm, + cmsContent, + initialData + ); //Assert - const buttonQuestionComponent = await wrapper.findComponent({ name: "buttonQuestion" }); - expect(buttonQuestionComponent.attributes("answers")).toBe("honda,ford,dodge"); + const buttonQuestionComponent = await wrapper.findComponent({ + name: "buttonQuestion", + }); + expect(buttonQuestionComponent.attributes("answers")).toBe( + "honda,ford,dodge" + ); }); }); - function setupMocks({ modelValueProp = "1900", cmsQuestionText = "CMS text goes here", dataFromStoreApi = [], }) { - //Mock store store.dispatch = jest.fn(() => dataFromStoreApi); - store.getters = { vehicle: {year: 2019} }; + store.getters = { vehicle: { year: 2019 } }; const mountOptions = getMountOptions({ store: { dispatch: store.dispatch, @@ -76,7 +95,7 @@ function setupMocks({ //Mock CMS content const cmsContent = { - QuestionText: cmsQuestionText - }; + QuestionText: cmsQuestionText, + }; return { wrapper, cmsContent }; -} \ No newline at end of file +} diff --git a/src/layouts/vehicle-make/make-question/make-question.vue b/src/layouts/vehicle-make/make-question/make-question.vue index 0276f1a67..2a94deafe 100644 --- a/src/layouts/vehicle-make/make-question/make-question.vue +++ b/src/layouts/vehicle-make/make-question/make-question.vue @@ -1,5 +1,6 @@