From 9737ffbb270358db83df1ae3402028afef5711c0 Mon Sep 17 00:00:00 2001 From: Max Date: Tue, 4 Jan 2022 15:13:09 -0500 Subject: [PATCH 001/142] CSR 77 --- src/constants/endpoints.js | 4 +++ src/constants/store-actions.js | 1 + src/layouts/vehicle-damage/vehicle-damage.vue | 36 +++++++++++++++++++ src/router/router-constants/fmgPage-values.js | 1 + .../router-constants/navigation-scenarios.js | 1 + src/store/index.js | 12 +++++++ 6 files changed, 55 insertions(+) create mode 100644 src/layouts/vehicle-damage/vehicle-damage.vue diff --git a/src/constants/endpoints.js b/src/constants/endpoints.js index 1cc1c1187..a3ed3ed2c 100644 --- a/src/constants/endpoints.js +++ b/src/constants/endpoints.js @@ -19,6 +19,10 @@ const endpoints = { url: "/vehicle/api/v1/vehicle/Styles", method: "GET", }, + GetVehicle: { + url: "/vehicle/api/v1/vehicle/lookup", + method: "GET", + }, GetPageData: { url: "/content/api/v1/content", method: "GET", diff --git a/src/constants/store-actions.js b/src/constants/store-actions.js index db80d3d3f..b06b2f10b 100644 --- a/src/constants/store-actions.js +++ b/src/constants/store-actions.js @@ -5,6 +5,7 @@ const storeActions = { GET_VEHICLE_MAKES: "getVehicleMakes", GET_VEHICLE_MODELS: "getVehicleModels", GET_VEHICLE_STYLES: "getVehicleStyles", + GET_VEHICLE: "getVehicle", GET_EVOX_IMAGE: "getEvoxImage", LOOKUP_VEHICLE_BY_YMMS: "lookupVehicleByYmms", LOOKUP_VEHICLE_BY_VIN: "lookupVehicleByVin", diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue new file mode 100644 index 000000000..ca7d701f6 --- /dev/null +++ b/src/layouts/vehicle-damage/vehicle-damage.vue @@ -0,0 +1,36 @@ + + + diff --git a/src/router/router-constants/fmgPage-values.js b/src/router/router-constants/fmgPage-values.js index 38486e111..9b82cdf7e 100644 --- a/src/router/router-constants/fmgPage-values.js +++ b/src/router/router-constants/fmgPage-values.js @@ -3,6 +3,7 @@ const fmgPageValues = { VEHICLE_MAKE: "vehicle-make", VEHICLE_MODEL: "vehicle-model", VEHICLE_STYLE: "vehicle-style", + VEHICLE_DAMAGE: "vehicle-damage", }; export { fmgPageValues }; diff --git a/src/router/router-constants/navigation-scenarios.js b/src/router/router-constants/navigation-scenarios.js index 48e36996b..51064576c 100644 --- a/src/router/router-constants/navigation-scenarios.js +++ b/src/router/router-constants/navigation-scenarios.js @@ -3,6 +3,7 @@ const navigationScenarios = { SELECTED_MODEL: "SELECTED_MODEL", SELECTED_MAKE: "SELECTED_MAKE", SELECTED_STYLE: "SELECTED_STYLE", + CLICKED_BACK: "CLICKED_BACK", }; diff --git a/src/store/index.js b/src/store/index.js index daf34e38c..275b21f2e 100644 --- a/src/store/index.js +++ b/src/store/index.js @@ -24,6 +24,7 @@ export default createStore({ vin: null, licensePlate: null, carId: null, + category: null, evoxImageId: null, hasSplitWindshieldOption: null, hasBackglassSliderOption: null, @@ -73,6 +74,10 @@ export default createStore({ updateStyle(state, style) { state.order.vehicle.style = style; }, + updateVehicle(state, data) { + state.carId = data.carId; + state.category = data.category; + } }, getters: { vehicle: state => state.order.vehicle @@ -123,6 +128,13 @@ export default createStore({ payload: {}, }); }, + getVehicle(context, {year, make, model, style}) { + return globalMethods.callHttpClient({ + methods: endpoints.GetVehicle.method, + endpoint: `${endpoints.GetVehicle.url}/${year}/${make}/${model}/${style}`, + payload: {}, + }) + }, // Content API Actions getRouteInfo(context, { pageName }) { From 549a8b359319b32217ab348ce226e04f39f1596f Mon Sep 17 00:00:00 2001 From: Adam Caouette Date: Fri, 7 Jan 2022 16:00:34 -0500 Subject: [PATCH 002/142] CSR-254: create form-test page and begin testing validation --- package.json | 1 + src/layouts/form-test/form-test.vue | 162 ++++++++++++++++++ src/router/index.js | 6 + .../list-button-horizontal.vue | 60 ++++++- src/ux-components/list-card/list-card.vue | 104 +++++++++-- 5 files changed, 317 insertions(+), 16 deletions(-) create mode 100644 src/layouts/form-test/form-test.vue diff --git a/package.json b/package.json index 58b8837dd..50a9b5760 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "core-js": "^3.6.5", "http-status-codes": "^2.1.4", "jest-junit": "^13.0.0", + "vee-validate": "^4.5.7", "vue": "^3.0.0", "vue-router": "^4.0.11", "vuex": "^4.0.2", diff --git a/src/layouts/form-test/form-test.vue b/src/layouts/form-test/form-test.vue new file mode 100644 index 000000000..96bc9bd33 --- /dev/null +++ b/src/layouts/form-test/form-test.vue @@ -0,0 +1,162 @@ + + + diff --git a/src/router/index.js b/src/router/index.js index c135d60c1..2f4f0daad 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -3,6 +3,7 @@ import { storeActions } from "@/constants/store-actions.js"; import { lazyLoadComponent } from "@/router/dynamic-routing/component-loader.js"; import { routingTable } from "@/router/router-constants/routing-table.js"; import ComponentTest from "@/layouts/component-test/component-test.vue"; +import FormTest from "@/layouts/form-test/form-test.vue"; import NotFound from "@/layouts/not-found/not-found.vue"; import store from "@/store"; @@ -17,6 +18,11 @@ const routes = [ name: "ComponentTest", component: ComponentTest, }, + { + path: "/form-test", // This is a temporary route for testing. + name: "FormTest", + component: FormTest, + }, { path: "/", beforeEnter(to, from, next) { diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue index 97642d2c1..ef5632b5a 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -2,16 +2,46 @@ diff --git a/src/ux-components/list-card/list-card.vue b/src/ux-components/list-card/list-card.vue index 68b1c80b0..6d06651f4 100644 --- a/src/ux-components/list-card/list-card.vue +++ b/src/ux-components/list-card/list-card.vue @@ -1,24 +1,61 @@ From 0808962f3655399f8b225259f3c674aef45f1370 Mon Sep 17 00:00:00 2001 From: CarlNation Date: Mon, 10 Jan 2022 08:37:21 -0500 Subject: [PATCH 003/142] CSR-251 map widget name changes --- src/helpers/cms-content-helper.js | 24 ++++++++++++--------- src/layouts/vehicle-make/vehicle-make.vue | 8 +++---- src/layouts/vehicle-model/vehicle-model.vue | 8 +++---- src/layouts/vehicle-style/vehicle-style.vue | 8 +++---- src/layouts/vehicle-year/vehicle-year.vue | 8 +++---- 5 files changed, 30 insertions(+), 26 deletions(-) diff --git a/src/helpers/cms-content-helper.js b/src/helpers/cms-content-helper.js index b0aa9bed2..1c795aab2 100644 --- a/src/helpers/cms-content-helper.js +++ b/src/helpers/cms-content-helper.js @@ -10,16 +10,20 @@ export function fetchCmsContentForPage(fmgPage) { response.data.Result.forEach((widget) => { - let widgetWithReplacements = findAndReplaceGlobalStateValues(widget.Model, widget.Type); + let widgetWithReplacements = findAndReplaceGlobalStateValues(widget.Model, widget.Name); - if (Object.values(widgetNames).includes(widgetWithReplacements.Type)) { - // If we already have this widget, push it on the collection - if (widgetWithReplacements.Type in pageDataFromCms) { - pageDataFromCms[widgetWithReplacements.Type].push(widgetWithReplacements.Model); - return; - } + // If we already have this widget, push it on the collection + if (widgetWithReplacements.Name in pageDataFromCms) { + pageDataFromCms[widgetWithReplacements.Name].push(widgetWithReplacements.Model); + return; + } - pageDataFromCms[widgetWithReplacements.Type] = [widgetWithReplacements.Model]; + pageDataFromCms[widgetWithReplacements.Name] = [widgetWithReplacements.Model]; + }); + + Object.keys(pageDataFromCms).forEach((key) => { + if (pageDataFromCms[key].length === 1){ + pageDataFromCms[key] = pageDataFromCms[key][0]; } }); @@ -66,10 +70,10 @@ function mapStringToState(str) { // Parent function for processWidgetItemForReplacement. This will loop through the parent // object and pass any objects that need additional processing to the processWidgetItemForReplacement function. -function findAndReplaceGlobalStateValues(widgetModel, widgetType) { +function findAndReplaceGlobalStateValues(widgetModel, widgetName) { const objWithReplacements = { - Type: widgetType, + Name: widgetName, Model: {} }; diff --git a/src/layouts/vehicle-make/vehicle-make.vue b/src/layouts/vehicle-make/vehicle-make.vue index e9fdb7686..e641c4c73 100644 --- a/src/layouts/vehicle-make/vehicle-make.vue +++ b/src/layouts/vehicle-make/vehicle-make.vue @@ -55,10 +55,10 @@ export default { settleAllPromises(promiseResultMap).then((resultMap) => { // Call the "next" function to complete the transition to this page. next((vm) => { - vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]); - vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]); - vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]); - vm.$refs.makeQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.makeQuestionInitialData); + vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget); + vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget); + vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget); + vm.$refs.makeQuestion.initializeComponent(resultMap.cmsContent.VehicleMakeQuestion, resultMap.makeQuestionInitialData); }); }); }, diff --git a/src/layouts/vehicle-model/vehicle-model.vue b/src/layouts/vehicle-model/vehicle-model.vue index e10d51fa7..c682e9e24 100644 --- a/src/layouts/vehicle-model/vehicle-model.vue +++ b/src/layouts/vehicle-model/vehicle-model.vue @@ -55,10 +55,10 @@ export default { settleAllPromises(promiseResultMap).then((resultMap) => { // Call the "next" function to complete the transition to this page. next((vm) => { - vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]); - vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]); - vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]); - vm.$refs.modelQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.modelQuestionInitialData); + vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget); + vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget); + vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget); + vm.$refs.modelQuestion.initializeComponent(resultMap.cmsContent.VehicleModelQuestion, resultMap.modelQuestionInitialData); }); }); }, diff --git a/src/layouts/vehicle-style/vehicle-style.vue b/src/layouts/vehicle-style/vehicle-style.vue index e258254d4..9a1706b97 100644 --- a/src/layouts/vehicle-style/vehicle-style.vue +++ b/src/layouts/vehicle-style/vehicle-style.vue @@ -55,10 +55,10 @@ export default { settleAllPromises(promiseResultMap).then((resultMap) => { // Call the "next" function to complete the transition to this page. next((vm) => { - vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]); - vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]); - vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]); - vm.$refs.styleQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.styleQuestionInitialData); + vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget); + vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget); + vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget); + vm.$refs.styleQuestion.initializeComponent(resultMap.cmsContent.VehicleStyleQuestion, resultMap.styleQuestionInitialData); }); }); }, diff --git a/src/layouts/vehicle-year/vehicle-year.vue b/src/layouts/vehicle-year/vehicle-year.vue index 8456c3275..c5c85675e 100644 --- a/src/layouts/vehicle-year/vehicle-year.vue +++ b/src/layouts/vehicle-year/vehicle-year.vue @@ -53,10 +53,10 @@ export default { settleAllPromises(promiseResultMap).then((resultMap) => { // Call the "next" function to complete the transition to this page. next((vm) => { - vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]); - vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]); - vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]); - vm.$refs.yearQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.yearQuestionInitialData); + vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget); + vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget); + vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget); + vm.$refs.yearQuestion.initializeComponent(resultMap.cmsContent.VehicleYearQuestion, resultMap.yearQuestionInitialData); }); }); }, From 4d7a66b9439cab74ce07ae3fd56086061be88d4f Mon Sep 17 00:00:00 2001 From: CarlNation Date: Mon, 10 Jan 2022 10:42:13 -0500 Subject: [PATCH 004/142] CSR-251 unit tests --- src/helpers/cms-helper.spec.js | 28 ++++++------ src/layouts/vehicle-make/vehicle-make.spec.js | 18 ++++---- .../vehicle-model/vehicle-model.spec.js | 43 ++++--------------- .../vehicle-style/vehicle-style.spec.js | 18 ++++---- src/layouts/vehicle-year/vehicle-year.spec.js | 18 ++++---- 5 files changed, 46 insertions(+), 79 deletions(-) diff --git a/src/helpers/cms-helper.spec.js b/src/helpers/cms-helper.spec.js index 4aa25710b..efc0ee56c 100644 --- a/src/helpers/cms-helper.spec.js +++ b/src/helpers/cms-helper.spec.js @@ -15,19 +15,19 @@ describe("cms-content-helper.js", () => { const cmsMockData = { Result: [ { - Type: "FunnelSubHeaderWidget", + Name: "FunnelHeaderWidget", Model: { HeaderText: "Select a year to get started", }, }, { - Type: "FunnelSubHeaderWidget", + Name: "FunnelSubHeaderWidget", Model: { HeaderText: "Select a model", }, }, { - Type: "RadioQuestionWidget", + Name: "VehicleYearQuestion", Model: { QuestionText: "What year is your vehicle?", }, @@ -40,7 +40,7 @@ describe("cms-content-helper.js", () => { // Act fetchCmsContentForPage("testPage").then((response) => { // Assert - expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual( + expect(response.FunnelHeaderWidget.HeaderText).toEqual( "Select a year to get started" ); }); @@ -53,7 +53,7 @@ describe("cms-content-helper.js", () => { const cmsMockData = { Result: [ { - Type: "FunnelSubHeaderWidget", + Name: "FunnelSubHeaderWidget", Model: { HeaderText: "{globalState:order.vehicle.year}", }, @@ -65,7 +65,7 @@ describe("cms-content-helper.js", () => { fetchCmsContentForPage("testPage").then((response) => { // Assert - expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual( + expect(response.FunnelSubHeaderWidget.HeaderText).toEqual( "2019" ); }); @@ -78,13 +78,13 @@ describe("cms-content-helper.js", () => { const cmsMockData = { Result: [ { - Type: "FunnelSubHeaderWidget", + Name: "FunnelSubHeaderWidget", Model: { HeaderText: "{globalState:order.vehicle.year}", }, }, { - Type: "RadioQuestionWidget", + Name: "VehicleYearQuestion", Model: { ExampleText: "My widget value!", }, @@ -96,8 +96,8 @@ describe("cms-content-helper.js", () => { fetchCmsContentForPage("testPage").then((response) => { // Assert - expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual("2019"); - expect(response.RadioQuestionWidget[0].ExampleText).toEqual("My widget value!"); + expect(response.FunnelSubHeaderWidget.HeaderText).toEqual("2019"); + expect(response.VehicleYearQuestion.ExampleText).toEqual("My widget value!"); }); }); @@ -109,13 +109,13 @@ describe("cms-content-helper.js", () => { const cmsMockData = { Result: [ { - Type: "FunnelSubHeaderWidget", + Name: "FunnelSubHeaderWidget", Model: { HeaderText: "{globalState:order.vehicle.year}", }, }, { - Type: "RadioQuestionWidget", + Name: "VehicleMakeQuestion", Model: { OtherObjectInside: { ExampleText: "{globalState:order.vehicle.make}", @@ -130,8 +130,8 @@ describe("cms-content-helper.js", () => { fetchCmsContentForPage("testPage").then((response) => { // Assert - expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual("2019"); - expect(response.RadioQuestionWidget[0].OtherObjectInside.ExampleText).toEqual("Acura"); + expect(response.FunnelSubHeaderWidget.HeaderText).toEqual("2019"); + expect(response.VehicleMakeQuestion.OtherObjectInside.ExampleText).toEqual("Acura"); }); }); diff --git a/src/layouts/vehicle-make/vehicle-make.spec.js b/src/layouts/vehicle-make/vehicle-make.spec.js index f1625dd6e..83a7f1862 100644 --- a/src/layouts/vehicle-make/vehicle-make.spec.js +++ b/src/layouts/vehicle-make/vehicle-make.spec.js @@ -17,10 +17,10 @@ describe("vehicle-make.vue", () => { test("Make question component is initized with api data", async (done) => { //Arrange - const radioQuestionCmsContent = { QuestionText: "What make is your vehicle?" }; + const vehicleMakeQuestionCmsContent = { QuestionText: "What make is your vehicle?" }; const makeQuestionInitialData = ["honda", "ford", "dodge"]; const { wrapper, apiPromise } = setupMocks( { - radioQuestionCmsContent: radioQuestionCmsContent, + vehicleMakeQuestionCmsContent: vehicleMakeQuestionCmsContent, makeQuestionInitialData: makeQuestionInitialData, } ); @@ -29,7 +29,7 @@ describe("vehicle-make.vue", () => { //Assert apiPromise.finally(() => { - expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, makeQuestionInitialData); + expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(vehicleMakeQuestionCmsContent, makeQuestionInitialData); done(); }); }); @@ -122,7 +122,7 @@ describe("vehicle-make.vue", () => { }); function setupMocks({ - radioQuestionCmsContent = {}, + vehicleMakeQuestionCmsContent = {}, makeQuestionInitialData = {}, pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}, @@ -131,20 +131,18 @@ function setupMocks({ //Mock api responses const apiResponses = { cmsContent: { - FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText], - RadioQuestionWidget: [radioQuestionCmsContent], - VehicleBannerWidget: [ + FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, + VehicleMakeQuestion: vehicleMakeQuestionCmsContent, + 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", }, - ], }, makeQuestionInitialData: makeQuestionInitialData, }; diff --git a/src/layouts/vehicle-model/vehicle-model.spec.js b/src/layouts/vehicle-model/vehicle-model.spec.js index b3aab50b4..861303ac8 100644 --- a/src/layouts/vehicle-model/vehicle-model.spec.js +++ b/src/layouts/vehicle-model/vehicle-model.spec.js @@ -7,44 +7,35 @@ import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner"; import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header"; import { settleAllPromises } from "@/helpers/layout-helper.js"; import { nextTick } from "vue"; - // Mock our module for promises. jest.mock("@/helpers/layout-helper.js", () => ({ settleAllPromises: jest.fn(), })); - describe("vehicle-model.vue", () => { test("Model question component is initized with api data", async (done) => { - //Arange - const radioQuestionCmsContent = { QuestionText: "What model is your vehicle?" }; + const buttonQuestionContent = { QuestionText: "What model is your vehicle?" }; const modelQuestionInitialData = ["accord", "civic", "insight"]; const { wrapper, apiPromise } = setupMocks( { - radioQuestionCmsContent: radioQuestionCmsContent, + buttonQuestionContent: buttonQuestionContent, modelQuestionInitialData: modelQuestionInitialData, } ); - //Act vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm)); - //Assert apiPromise.finally(() => { - expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, modelQuestionInitialData); + expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith(buttonQuestionContent, modelQuestionInitialData); done(); }); }); }); - describe("vehicle-model.vue", () => { test("Page header is initailized with api data", async (done) => { - //Arrange const pageHeaderWidgetHeaderText = "Select a model to get started"; const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText }); - //Act vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm)); - //Assert apiPromise.finally(() => { expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText); @@ -52,20 +43,16 @@ describe("vehicle-model.vue", () => { }); }); }); - describe("vehicle-model.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}); - //Act vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm)); - //Assert apiPromise.finally(() => { expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget); @@ -73,20 +60,16 @@ describe("vehicle-model.vue", () => { }); }); }); - describe("vehicle-model.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}); - //Act vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm)); - //Assert apiPromise.finally(() => { expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget); @@ -94,10 +77,8 @@ describe("vehicle-model.vue", () => { }); }); }); - describe("vehicle-model.vue", () => { test("BackButtonAction triggers a router.navigate change", async (done) => { - //Arrange const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: "Select a model to get started", @@ -107,12 +88,10 @@ describe("vehicle-model.vue", () => { }, }, }); - //Act vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm)); wrapper.vm.backButtonAction(); await nextTick(); - //Assert apiPromise.finally(() => { expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); @@ -120,37 +99,32 @@ describe("vehicle-model.vue", () => { }); }); }); - function setupMocks({ - radioQuestionCmsContent = {}, + buttonQuestionContent = {}, modelQuestionInitialData = {}, pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}, }) { - //Mock api responses const apiResponses = { cmsContent: { - FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText], - RadioQuestionWidget: [radioQuestionCmsContent], - VehicleBannerWidget: [ + FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, + VehicleModelQuestion: buttonQuestionContent, + 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", }, - ], }, modelQuestionInitialData: modelQuestionInitialData, }; const apiPromise = Promise.resolve(apiResponses); settleAllPromises.mockImplementation(() => apiPromise); - //Mock model question methods modelQuestion.methods = { loadInitialData: jest.fn(), @@ -175,6 +149,5 @@ function setupMocks({ vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.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-style/vehicle-style.spec.js b/src/layouts/vehicle-style/vehicle-style.spec.js index 15264e53e..222daa50c 100644 --- a/src/layouts/vehicle-style/vehicle-style.spec.js +++ b/src/layouts/vehicle-style/vehicle-style.spec.js @@ -17,10 +17,10 @@ describe("vehicle-style.vue", () => { test("Style question component is initized with api data", async (done) => { //Arrange - const radioQuestionCmsContent = { QuestionText: "What style is your vehicle?" }; + const vehicleStyleQuestionCmsContent = { QuestionText: "What style is your vehicle?" }; const styleQuestionInitialData = ["2 Door", "4 Door"]; const { wrapper, apiPromise } = setupMocks( { - radioQuestionCmsContent: radioQuestionCmsContent, + vehicleStyleQuestionCmsContent: vehicleStyleQuestionCmsContent, styleQuestionInitialData: styleQuestionInitialData, } ); @@ -29,7 +29,7 @@ describe("vehicle-style.vue", () => { //Assert apiPromise.finally(() => { - expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, styleQuestionInitialData); + expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(vehicleStyleQuestionCmsContent, styleQuestionInitialData); done(); }); }); @@ -122,7 +122,7 @@ describe("vehicle-style.vue", () => { }); function setupMocks({ - radioQuestionCmsContent = {}, + vehicleStyleQuestionCmsContent = {}, styleQuestionInitialData = {}, pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}, @@ -131,20 +131,18 @@ function setupMocks({ //Mock api responses const apiResponses = { cmsContent: { - FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText], - RadioQuestionWidget: [radioQuestionCmsContent], - VehicleBannerWidget: [ + FunnelSubHeaderWidget: pageHeaderWidgetHeaderText, + VehicleStyleQuestion: vehicleStyleQuestionCmsContent, + 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", }, - ], }, styleQuestionInitialData: styleQuestionInitialData, }; diff --git a/src/layouts/vehicle-year/vehicle-year.spec.js b/src/layouts/vehicle-year/vehicle-year.spec.js index 26f4d61b2..df0668c31 100644 --- a/src/layouts/vehicle-year/vehicle-year.spec.js +++ b/src/layouts/vehicle-year/vehicle-year.spec.js @@ -17,10 +17,10 @@ describe("vehicle-year.vue", () => { test("Year question component is initized with api data", async (done) => { //Arrange - const radioQuestionCmsContent = { QuestionText: "What year is your vehicle?" }; + const vehicleYearQuestionCmsContent = { QuestionText: "What year is your vehicle?" }; const yearQuestionInitialData = ["2023", "2022", "2021"]; const { wrapper, apiPromise } = setupMocks( { - radioQuestionCmsContent: radioQuestionCmsContent, + vehicleYearQuestionCmsContent: vehicleYearQuestionCmsContent, yearQuestionInitialData: yearQuestionInitialData, } ); @@ -29,7 +29,7 @@ describe("vehicle-year.vue", () => { //Assert apiPromise.finally(() => { - expect(yearQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, yearQuestionInitialData); + expect(yearQuestion.methods.initializeComponent).toHaveBeenCalledWith(vehicleYearQuestionCmsContent, yearQuestionInitialData); done(); }); }); @@ -78,7 +78,7 @@ describe("vehicle-year.vue", () => { }); function setupMocks({ - radioQuestionCmsContent = {}, + vehicleYearQuestionCmsContent = {}, yearQuestionInitialData = {}, pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {}, @@ -87,20 +87,18 @@ function setupMocks({ //Mock api responses const apiResponses = { cmsContent: { - FunnelSubHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }], - RadioQuestionWidget: [radioQuestionCmsContent], - VehicleBannerWidget: [ + FunnelSubHeaderWidget: { HeaderText: pageHeaderWidgetHeaderText }, + VehicleYearQuestion: vehicleYearQuestionCmsContent, + 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", }, - ], }, yearQuestionInitialData: yearQuestionInitialData, }; From b1457c713e73f33ab8e349459c3e910f6e7c8039 Mon Sep 17 00:00:00 2001 From: bmauger Date: Mon, 10 Jan 2022 15:19:19 -0500 Subject: [PATCH 005/142] CSR-241 unit test updates. --- src/layouts/component-test/component-test.vue | 9 +- .../list-button-horizontal.spec.js | 236 +++++++++++++++--- .../list-button-horizontal.vue | 9 +- 3 files changed, 210 insertions(+), 44 deletions(-) diff --git a/src/layouts/component-test/component-test.vue b/src/layouts/component-test/component-test.vue index b1f10e7d5..2fe818932 100644 --- a/src/layouts/component-test/component-test.vue +++ b/src/layouts/component-test/component-test.vue @@ -475,7 +475,6 @@ groupName="demo-4" ariaLabelBy="vehicle-model" buttonID="1" - buttonLabelSubCopy="" textPosition="text-center" loaderColor="blue" loaderPosition="right" @@ -489,7 +488,6 @@ groupName="demo-4" ariaLabelBy="vehicle-model" buttonID="2" - buttonLabelSubCopy="" textPosition="text-center" loaderColor="blue" loaderPosition="right" @@ -503,7 +501,6 @@ groupName="demo-4" ariaLabelBy="vehicle-model" buttonID="3" - buttonLabelSubCopy="" textPosition="text-center" loaderColor="blue" loaderPosition="right" @@ -526,8 +523,8 @@ groupName="demo-4-checkbox" ariaLabelBy="vehicle-model" buttonID="4" - buttonLabelSubCopy="" textPosition="text-center" + loaderEnabled=true loaderColor="blue" loaderPosition="right" sizeInRem="1" @@ -539,8 +536,8 @@ groupName="demo-4-checkbox" ariaLabelBy="vehicle-model" buttonID="5" - buttonLabelSubCopy="" textPosition="text-center" + loaderEnabled=true loaderColor="blue" loaderPosition="right" sizeInRem="1" @@ -552,8 +549,8 @@ groupName="demo-4-checkbox" ariaLabelBy="vehicle-model" buttonID="6" - buttonLabelSubCopy="" textPosition="text-center" + loaderEnabled=true loaderColor="blue" loaderPosition="right" sizeInRem="1" diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js index bb575074c..5a13cf67a 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.spec.js @@ -1,47 +1,219 @@ import { shallowMount } from "@vue/test-utils"; import listButtonHorizontal from "./list-button-horizontal"; +import { nextTick } from "vue"; describe("list-button.vue", () => { - it("Should render the 'buttonID' prop value as the label and id value as well as the button value, groupName as the name value, and fire a click even that sets the display data attribute to true.", async () => { + + it("Should return input type checkbox if isMultiSelect is true", async () => { // Act const wrapper = shallowMount(listButtonHorizontal, { propsData: { - buttonID: "2023", - groupName: "TestGroup", - loaderColor: "blue", - loaderPosition: "right", - loaderEnabled: "true", - sizeInRem: "1.5", + isMultiSelect: true, }, }); // Assert const input = wrapper.find("input"); - const label = wrapper.find("label"); - const paragraph = wrapper.find("span"); - await input.trigger("click"); - - expect(input.attributes()).toEqual({ - id: "2023", - type: "radio", - value: "2023", - name: "TestGroup", - "aria-required": "true", - }); - - expect(label.attributes()).toEqual({ - tabindex: "-1", - for: "2023", - "aria-labelledby": "2023", - class: "d-flex flex-column justify-content-center py-3 px-4 last-item", - "aria-checked": "false", - }); - - expect(label.text()).toEqual("2023"); - - expect(paragraph.text()).toEqual("2023"); - - expect(wrapper.vm.isLoaderDisplayed).toBe(true); + expect(input.attributes().type).toEqual("checkbox"); }); + + it("Should return input type radio if isMultiSelect is false or not specified", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + isMultiSelect: false, + }, + }); + + // Assert + const input = wrapper.find("input"); + + expect(input.attributes().type).toEqual("radio"); + }); + + it("Should return primary label text (buttonID)", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + buttonID: "List Card Checkbox" + }, + }); + + // Assert + const label = wrapper.find("label"); + + expect(label.attributes().for).toEqual("List Card Checkbox"); + + }); + + it("Should return screen reader text", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + screenReaderOnlyText: "Screen Reader Only Text" + }, + }); + + // Assert + const paragraph = wrapper.find("span.sr-only"); + + expect(paragraph.text()).toEqual("Screen Reader Only Text"); + + }); + + it("Should return text alignment class", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + textPosition: "text-center" + }, + }); + + // Assert + const paragraph = wrapper.find("span.m-0"); + + expect(paragraph.attributes('class')).toContain("text-center"); + + }); + + it("Should return aria-required state", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + isRequired: true + }, + }); + + // Assert + const input = wrapper.find("input"); + + expect(input.attributes()["aria-required"]).toEqual("true"); + + }); + + it("Should return loader enabled true", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + loaderEnabled: true + }, + }); + + // Assert + + const label = wrapper.find("label"); + + wrapper.vm.handleClick(); + + await nextTick(); + + const loader = wrapper.find("loader-stub"); + + expect(loader.exists()).toBe(true); + + }); + + it("Should return loader color", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + loaderColor: "blue", + loaderEnabled: true + }, + }); + + // Assert + + const label = wrapper.find("label"); + + wrapper.vm.handleClick(); + + await nextTick(); + + const loader = wrapper.find("loader-stub"); + + expect(loader.attributes('class')).toContain("blue"); + + }); + + it("Should return loader position", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + loaderPosition: "right", + loaderEnabled: true + }, + }); + + // Assert + + const label = wrapper.find("label"); + + wrapper.vm.handleClick(); + + await nextTick(); + + const loader = wrapper.find("loader-stub"); + + expect(loader.attributes('class')).toContain("right"); + + }); + + it("Should return loader size in rem", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + sizeInRem: 1, + loaderEnabled: true + }, + }); + + // Assert + + const label = wrapper.find("label"); + + wrapper.vm.handleClick(); + + await nextTick(); + + const loader = wrapper.find("loader-stub"); + + expect(loader.attributes('style')).toContain("1rem"); + + }); + + it("Should return first item if first item in group", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + positionInGroup: 1 + }, + }); + + // Assert + + const label = wrapper.find("label"); + + expect(label.attributes('class')).toContain("first-item"); + + }); + + it("Should return last item if last item in group", async () => { + // Act + const wrapper = shallowMount(listButtonHorizontal, { + propsData: { + positionInGroup: 3, + totalInGroup: 3 + }, + }); + + // Assert + + const label = wrapper.find("label"); + + expect(label.attributes('class')).toContain("last-item"); + + }); + }); diff --git a/src/ux-components/list-button-horizontal/list-button-horizontal.vue b/src/ux-components/list-button-horizontal/list-button-horizontal.vue index 97642d2c1..c4f8d995c 100644 --- a/src/ux-components/list-button-horizontal/list-button-horizontal.vue +++ b/src/ux-components/list-button-horizontal/list-button-horizontal.vue @@ -5,17 +5,15 @@
@@ -29,13 +27,12 @@ export default { isMultiSelect: Boolean, /* Defines use as checkbox */ groupName: String, /* Required, unique for each button GROUP */ buttonID: String, /* Required, unique for each button. Used for button id, label and