jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge pull request #130 from Safelite/feature/CSR-251

Browse source 
CSR-251 map widget name changes
This commit is contained in:
CarlNation 2022-01-10 10:49:18 -05:00 committed by GitHub
commit 5797db2ee3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 76 additions and 105 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/helpers/cms-content-helper.js
View file

@ -10,16 +10,20 @@ export function fetchCmsContentForPage(fmgPage) {
response.data.Result.forEach((widget) => { 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 we already have this widget, push it on the collection if (widgetWithReplacements.Name in pageDataFromCms) {
if (widgetWithReplacements.Type in pageDataFromCms) { pageDataFromCms[widgetWithReplacements.Name].push(widgetWithReplacements.Model);
pageDataFromCms[widgetWithReplacements.Type].push(widgetWithReplacements.Model); return;
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 // Parent function for processWidgetItemForReplacement. This will loop through the parent
// object and pass any objects that need additional processing to the processWidgetItemForReplacement function. // object and pass any objects that need additional processing to the processWidgetItemForReplacement function.
function findAndReplaceGlobalStateValues(widgetModel, widgetType) { function findAndReplaceGlobalStateValues(widgetModel, widgetName) {
const objWithReplacements = { const objWithReplacements = {
Type: widgetType, Name: widgetName,
Model: {} Model: {}
}; };

28
src/helpers/cms-helper.spec.js
View file

@ -15,19 +15,19 @@ describe("cms-content-helper.js", () => {
const cmsMockData = { const cmsMockData = {
Result: [ Result: [
{ {
Type: "FunnelSubHeaderWidget", Name: "FunnelHeaderWidget",
Model: { Model: {
HeaderText: "Select a year to get started", HeaderText: "Select a year to get started",
}, },
}, },
{ {
Type: "FunnelSubHeaderWidget", Name: "FunnelSubHeaderWidget",
Model: { Model: {
HeaderText: "Select a model", HeaderText: "Select a model",
}, },
}, },
{ {
Type: "RadioQuestionWidget", Name: "VehicleYearQuestion",
Model: { Model: {
QuestionText: "What year is your vehicle?", QuestionText: "What year is your vehicle?",
}, },
@ -40,7 +40,7 @@ describe("cms-content-helper.js", () => {
// Act // Act
fetchCmsContentForPage("testPage").then((response) => { fetchCmsContentForPage("testPage").then((response) => {
// Assert // Assert
expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual( expect(response.FunnelHeaderWidget.HeaderText).toEqual(
"Select a year to get started" "Select a year to get started"
); );
}); });
@ -53,7 +53,7 @@ describe("cms-content-helper.js", () => {
const cmsMockData = { const cmsMockData = {
Result: [ Result: [
{ {
Type: "FunnelSubHeaderWidget", Name: "FunnelSubHeaderWidget",
Model: { Model: {
HeaderText: "{globalState:order.vehicle.year}", HeaderText: "{globalState:order.vehicle.year}",
}, },
@ -65,7 +65,7 @@ describe("cms-content-helper.js", () => {
fetchCmsContentForPage("testPage").then((response) => { fetchCmsContentForPage("testPage").then((response) => {
// Assert // Assert
expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual( expect(response.FunnelSubHeaderWidget.HeaderText).toEqual(
"2019" "2019"
); );
}); });
@ -78,13 +78,13 @@ describe("cms-content-helper.js", () => {
const cmsMockData = { const cmsMockData = {
Result: [ Result: [
{ {
Type: "FunnelSubHeaderWidget", Name: "FunnelSubHeaderWidget",
Model: { Model: {
HeaderText: "{globalState:order.vehicle.year}", HeaderText: "{globalState:order.vehicle.year}",
}, },
}, },
{ {
Type: "RadioQuestionWidget", Name: "VehicleYearQuestion",
Model: { Model: {
ExampleText: "My widget value!", ExampleText: "My widget value!",
}, },
@ -96,8 +96,8 @@ describe("cms-content-helper.js", () => {
fetchCmsContentForPage("testPage").then((response) => { fetchCmsContentForPage("testPage").then((response) => {
// Assert // Assert
expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual("2019"); expect(response.FunnelSubHeaderWidget.HeaderText).toEqual("2019");
expect(response.RadioQuestionWidget[0].ExampleText).toEqual("My widget value!"); expect(response.VehicleYearQuestion.ExampleText).toEqual("My widget value!");
}); });
}); });
@ -109,13 +109,13 @@ describe("cms-content-helper.js", () => {
const cmsMockData = { const cmsMockData = {
Result: [ Result: [
{ {
Type: "FunnelSubHeaderWidget", Name: "FunnelSubHeaderWidget",
Model: { Model: {
HeaderText: "{globalState:order.vehicle.year}", HeaderText: "{globalState:order.vehicle.year}",
}, },
}, },
{ {
Type: "RadioQuestionWidget", Name: "VehicleMakeQuestion",
Model: { Model: {
OtherObjectInside: { OtherObjectInside: {
ExampleText: "{globalState:order.vehicle.make}", ExampleText: "{globalState:order.vehicle.make}",
@ -130,8 +130,8 @@ describe("cms-content-helper.js", () => {
fetchCmsContentForPage("testPage").then((response) => { fetchCmsContentForPage("testPage").then((response) => {
// Assert // Assert
expect(response.FunnelSubHeaderWidget[0].HeaderText).toEqual("2019"); expect(response.FunnelSubHeaderWidget.HeaderText).toEqual("2019");
expect(response.RadioQuestionWidget[0].OtherObjectInside.ExampleText).toEqual("Acura"); expect(response.VehicleMakeQuestion.OtherObjectInside.ExampleText).toEqual("Acura");
}); });
}); });

18
src/layouts/vehicle-make/vehicle-make.spec.js
View file

@ -17,10 +17,10 @@ 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 (done) => {
//Arrange //Arrange
const radioQuestionCmsContent = { QuestionText: "What make is your vehicle?" }; const vehicleMakeQuestionCmsContent = { QuestionText: "What make is your vehicle?" };
const makeQuestionInitialData = ["honda", "ford", "dodge"]; const makeQuestionInitialData = ["honda", "ford", "dodge"];
const { wrapper, apiPromise } = setupMocks( { const { wrapper, apiPromise } = setupMocks( {
radioQuestionCmsContent: radioQuestionCmsContent, vehicleMakeQuestionCmsContent: vehicleMakeQuestionCmsContent,
makeQuestionInitialData: makeQuestionInitialData, makeQuestionInitialData: makeQuestionInitialData,
} ); } );
@ -29,7 +29,7 @@ describe("vehicle-make.vue", () => {
//Assert //Assert
apiPromise.finally(() => { apiPromise.finally(() => {
expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, makeQuestionInitialData); expect(makeQuestion.methods.initializeComponent).toHaveBeenCalledWith(vehicleMakeQuestionCmsContent, makeQuestionInitialData);
done(); done();
}); });
}); });
@ -122,7 +122,7 @@ describe("vehicle-make.vue", () => {
}); });
function setupMocks({ function setupMocks({
radioQuestionCmsContent = {}, vehicleMakeQuestionCmsContent = {},
makeQuestionInitialData = {}, makeQuestionInitialData = {},
pageHeaderWidgetHeaderText = {}, pageHeaderWidgetHeaderText = {},
mountOptionsMockData = {}, mountOptionsMockData = {},
@ -131,20 +131,18 @@ function setupMocks({
//Mock api responses //Mock api responses
const apiResponses = { const apiResponses = {
cmsContent: { cmsContent: {
FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText], FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
RadioQuestionWidget: [radioQuestionCmsContent], VehicleMakeQuestion: vehicleMakeQuestionCmsContent,
VehicleBannerWidget: [ VehicleBannerWidget:
{ {
GenericVehicleImage: GenericVehicleImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
}, },
], FunnelHeaderWidget:
FunnelHeaderWidget: [
{ {
LogoImage: LogoImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
}, },
],
}, },
makeQuestionInitialData: makeQuestionInitialData, makeQuestionInitialData: makeQuestionInitialData,
}; };

8
src/layouts/vehicle-make/vehicle-make.vue
View file

@ -55,10 +55,10 @@ export default {
settleAllPromises(promiseResultMap).then((resultMap) => { settleAllPromises(promiseResultMap).then((resultMap) => {
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]); vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget);
vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]); vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget);
vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]); vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget);
vm.$refs.makeQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.makeQuestionInitialData); vm.$refs.makeQuestion.initializeComponent(resultMap.cmsContent.VehicleMakeQuestion, resultMap.makeQuestionInitialData);
}); });
}); });
}, },

43
src/layouts/vehicle-model/vehicle-model.spec.js
View file

@ -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 funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import { settleAllPromises } from "@/helpers/layout-helper.js"; import { settleAllPromises } from "@/helpers/layout-helper.js";
import { nextTick } from "vue"; import { nextTick } from "vue";
// Mock our module for promises. // Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({ jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(), settleAllPromises: jest.fn(),
})); }));
describe("vehicle-model.vue", () => { describe("vehicle-model.vue", () => {
test("Model question component is initized with api data", async (done) => { test("Model question component is initized with api data", async (done) => {
//Arange //Arange
const radioQuestionCmsContent = { QuestionText: "What model is your vehicle?" }; const buttonQuestionContent = { QuestionText: "What model is your vehicle?" };
const modelQuestionInitialData = ["accord", "civic", "insight"]; const modelQuestionInitialData = ["accord", "civic", "insight"];
const { wrapper, apiPromise } = setupMocks( { const { wrapper, apiPromise } = setupMocks( {
radioQuestionCmsContent: radioQuestionCmsContent, buttonQuestionContent: buttonQuestionContent,
modelQuestionInitialData: modelQuestionInitialData, modelQuestionInitialData: modelQuestionInitialData,
} ); } );
//Act //Act
vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm)); vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
//Assert //Assert
apiPromise.finally(() => { apiPromise.finally(() => {
expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, modelQuestionInitialData); expect(modelQuestion.methods.initializeComponent).toHaveBeenCalledWith(buttonQuestionContent, modelQuestionInitialData);
done(); done();
}); });
}); });
}); });
describe("vehicle-model.vue", () => { describe("vehicle-model.vue", () => {
test("Page header is initailized with api data", async (done) => { test("Page header is initailized with api data", async (done) => {
//Arrange //Arrange
const pageHeaderWidgetHeaderText = "Select a model to get started"; const pageHeaderWidgetHeaderText = "Select a model to get started";
const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText }); const { wrapper, apiPromise } = setupMocks( { pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText });
//Act //Act
vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm)); vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
//Assert //Assert
apiPromise.finally(() => { apiPromise.finally(() => {
expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText); expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
@ -52,20 +43,16 @@ describe("vehicle-model.vue", () => {
}); });
}); });
}); });
describe("vehicle-model.vue", () => { describe("vehicle-model.vue", () => {
test("Page logo image is initailized with api data", async (done) => { test("Page logo image is initailized with api data", async (done) => {
//Arrange //Arrange
const SiteHeaderWidget = { const SiteHeaderWidget = {
LogoImage: LogoImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", "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 //Act
vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm)); vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
//Assert //Assert
apiPromise.finally(() => { apiPromise.finally(() => {
expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget); expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
@ -73,20 +60,16 @@ describe("vehicle-model.vue", () => {
}); });
}); });
}); });
describe("vehicle-model.vue", () => { describe("vehicle-model.vue", () => {
test("Vehicle image is initailized with api data", async (done) => { test("Vehicle image is initailized with api data", async (done) => {
//Arrange //Arrange
const VehicleBannerWidget = { const VehicleBannerWidget = {
GenericVehicleImage: GenericVehicleImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", "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 //Act
vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm)); vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
//Assert //Assert
apiPromise.finally(() => { apiPromise.finally(() => {
expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget); expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
@ -94,10 +77,8 @@ describe("vehicle-model.vue", () => {
}); });
}); });
}); });
describe("vehicle-model.vue", () => { describe("vehicle-model.vue", () => {
test("BackButtonAction triggers a router.navigate change", async (done) => { test("BackButtonAction triggers a router.navigate change", async (done) => {
//Arrange //Arrange
const { wrapper, apiPromise } = setupMocks( { const { wrapper, apiPromise } = setupMocks( {
pageHeaderWidgetHeaderText: "Select a model to get started", pageHeaderWidgetHeaderText: "Select a model to get started",
@ -107,12 +88,10 @@ describe("vehicle-model.vue", () => {
}, },
}, },
}); });
//Act //Act
vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm)); vehicleModel.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-model" } }, undefined, (c) => c(wrapper.vm));
wrapper.vm.backButtonAction(); wrapper.vm.backButtonAction();
await nextTick(); await nextTick();
//Assert //Assert
apiPromise.finally(() => { apiPromise.finally(() => {
expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
@ -120,37 +99,32 @@ describe("vehicle-model.vue", () => {
}); });
}); });
}); });
function setupMocks({ function setupMocks({
radioQuestionCmsContent = {}, buttonQuestionContent = {},
modelQuestionInitialData = {}, modelQuestionInitialData = {},
pageHeaderWidgetHeaderText = {}, pageHeaderWidgetHeaderText = {},
mountOptionsMockData = {}, mountOptionsMockData = {},
}) { }) {
//Mock api responses //Mock api responses
const apiResponses = { const apiResponses = {
cmsContent: { cmsContent: {
FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText], FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
RadioQuestionWidget: [radioQuestionCmsContent], VehicleModelQuestion: buttonQuestionContent,
VehicleBannerWidget: [ VehicleBannerWidget:
{ {
GenericVehicleImage: GenericVehicleImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
}, },
], FunnelHeaderWidget:
FunnelHeaderWidget: [
{ {
LogoImage: LogoImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
}, },
],
}, },
modelQuestionInitialData: modelQuestionInitialData, modelQuestionInitialData: modelQuestionInitialData,
}; };
const apiPromise = Promise.resolve(apiResponses); const apiPromise = Promise.resolve(apiResponses);
settleAllPromises.mockImplementation(() => apiPromise); settleAllPromises.mockImplementation(() => apiPromise);
//Mock model question methods //Mock model question methods
modelQuestion.methods = { modelQuestion.methods = {
loadInitialData: jest.fn(), loadInitialData: jest.fn(),
@ -175,6 +149,5 @@ function setupMocks({
vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent; vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" }); const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader" });
funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent; funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
return { wrapper, apiPromise }; return { wrapper, apiPromise };
} }

8
src/layouts/vehicle-model/vehicle-model.vue
View file

@ -55,10 +55,10 @@ export default {
settleAllPromises(promiseResultMap).then((resultMap) => { settleAllPromises(promiseResultMap).then((resultMap) => {
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]); vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget);
vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]); vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget);
vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]); vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget);
vm.$refs.modelQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.modelQuestionInitialData); vm.$refs.modelQuestion.initializeComponent(resultMap.cmsContent.VehicleModelQuestion, resultMap.modelQuestionInitialData);
}); });
}); });
}, },

18
src/layouts/vehicle-style/vehicle-style.spec.js
View file

@ -17,10 +17,10 @@ describe("vehicle-style.vue", () => {
test("Style question component is initized with api data", async (done) => { test("Style question component is initized with api data", async (done) => {
//Arrange //Arrange
const radioQuestionCmsContent = { QuestionText: "What style is your vehicle?" }; const vehicleStyleQuestionCmsContent = { QuestionText: "What style is your vehicle?" };
const styleQuestionInitialData = ["2 Door", "4 Door"]; const styleQuestionInitialData = ["2 Door", "4 Door"];
const { wrapper, apiPromise } = setupMocks( { const { wrapper, apiPromise } = setupMocks( {
radioQuestionCmsContent: radioQuestionCmsContent, vehicleStyleQuestionCmsContent: vehicleStyleQuestionCmsContent,
styleQuestionInitialData: styleQuestionInitialData, styleQuestionInitialData: styleQuestionInitialData,
} ); } );
@ -29,7 +29,7 @@ describe("vehicle-style.vue", () => {
//Assert //Assert
apiPromise.finally(() => { apiPromise.finally(() => {
expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, styleQuestionInitialData); expect(styleQuestion.methods.initializeComponent).toHaveBeenCalledWith(vehicleStyleQuestionCmsContent, styleQuestionInitialData);
done(); done();
}); });
}); });
@ -122,7 +122,7 @@ describe("vehicle-style.vue", () => {
}); });
function setupMocks({ function setupMocks({
radioQuestionCmsContent = {}, vehicleStyleQuestionCmsContent = {},
styleQuestionInitialData = {}, styleQuestionInitialData = {},
pageHeaderWidgetHeaderText = {}, pageHeaderWidgetHeaderText = {},
mountOptionsMockData = {}, mountOptionsMockData = {},
@ -131,20 +131,18 @@ function setupMocks({
//Mock api responses //Mock api responses
const apiResponses = { const apiResponses = {
cmsContent: { cmsContent: {
FunnelSubHeaderWidget: [pageHeaderWidgetHeaderText], FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
RadioQuestionWidget: [radioQuestionCmsContent], VehicleStyleQuestion: vehicleStyleQuestionCmsContent,
VehicleBannerWidget: [ VehicleBannerWidget:
{ {
GenericVehicleImage: GenericVehicleImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
}, },
], FunnelHeaderWidget:
FunnelHeaderWidget: [
{ {
LogoImage: LogoImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
}, },
],
}, },
styleQuestionInitialData: styleQuestionInitialData, styleQuestionInitialData: styleQuestionInitialData,
}; };

8
src/layouts/vehicle-style/vehicle-style.vue
View file

@ -55,10 +55,10 @@ export default {
settleAllPromises(promiseResultMap).then((resultMap) => { settleAllPromises(promiseResultMap).then((resultMap) => {
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]); vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget);
vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]); vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget);
vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]); vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget);
vm.$refs.styleQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.styleQuestionInitialData); vm.$refs.styleQuestion.initializeComponent(resultMap.cmsContent.VehicleStyleQuestion, resultMap.styleQuestionInitialData);
}); });
}); });
}, },

18
src/layouts/vehicle-year/vehicle-year.spec.js
View file

@ -17,10 +17,10 @@ describe("vehicle-year.vue", () => {
test("Year question component is initized with api data", async (done) => { test("Year question component is initized with api data", async (done) => {
//Arrange //Arrange
const radioQuestionCmsContent = { QuestionText: "What year is your vehicle?" }; const vehicleYearQuestionCmsContent = { QuestionText: "What year is your vehicle?" };
const yearQuestionInitialData = ["2023", "2022", "2021"]; const yearQuestionInitialData = ["2023", "2022", "2021"];
const { wrapper, apiPromise } = setupMocks( { const { wrapper, apiPromise } = setupMocks( {
radioQuestionCmsContent: radioQuestionCmsContent, vehicleYearQuestionCmsContent: vehicleYearQuestionCmsContent,
yearQuestionInitialData: yearQuestionInitialData, yearQuestionInitialData: yearQuestionInitialData,
} ); } );
@ -29,7 +29,7 @@ describe("vehicle-year.vue", () => {
//Assert //Assert
apiPromise.finally(() => { apiPromise.finally(() => {
expect(yearQuestion.methods.initializeComponent).toHaveBeenCalledWith(radioQuestionCmsContent, yearQuestionInitialData); expect(yearQuestion.methods.initializeComponent).toHaveBeenCalledWith(vehicleYearQuestionCmsContent, yearQuestionInitialData);
done(); done();
}); });
}); });
@ -78,7 +78,7 @@ describe("vehicle-year.vue", () => {
}); });
function setupMocks({ function setupMocks({
radioQuestionCmsContent = {}, vehicleYearQuestionCmsContent = {},
yearQuestionInitialData = {}, yearQuestionInitialData = {},
pageHeaderWidgetHeaderText = {}, pageHeaderWidgetHeaderText = {},
mountOptionsMockData = {}, mountOptionsMockData = {},
@ -87,20 +87,18 @@ function setupMocks({
//Mock api responses //Mock api responses
const apiResponses = { const apiResponses = {
cmsContent: { cmsContent: {
FunnelSubHeaderWidget: [{ HeaderText: pageHeaderWidgetHeaderText }], FunnelSubHeaderWidget: { HeaderText: pageHeaderWidgetHeaderText },
RadioQuestionWidget: [radioQuestionCmsContent], VehicleYearQuestion: vehicleYearQuestionCmsContent,
VehicleBannerWidget: [ VehicleBannerWidget:
{ {
GenericVehicleImage: GenericVehicleImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3", "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
}, },
], FunnelHeaderWidget:
FunnelHeaderWidget: [
{ {
LogoImage: LogoImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3", "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
}, },
],
}, },
yearQuestionInitialData: yearQuestionInitialData, yearQuestionInitialData: yearQuestionInitialData,
}; };

8
src/layouts/vehicle-year/vehicle-year.vue
View file

@ -53,10 +53,10 @@ export default {
settleAllPromises(promiseResultMap).then((resultMap) => { settleAllPromises(promiseResultMap).then((resultMap) => {
// Call the "next" function to complete the transition to this page. // Call the "next" function to complete the transition to this page.
next((vm) => { next((vm) => {
vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget[0]); vm.$refs.funnelSubHeader.initializeComponent(resultMap.cmsContent.FunnelSubHeaderWidget);
vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget[0]); vm.$refs.funnelHeader.initializeComponent(resultMap.cmsContent.FunnelHeaderWidget);
vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget[0]); vm.$refs.vehicleBanner.initializeComponent(resultMap.cmsContent.VehicleBannerWidget);
vm.$refs.yearQuestion.initializeComponent(resultMap.cmsContent.RadioQuestionWidget[0], resultMap.yearQuestionInitialData); vm.$refs.yearQuestion.initializeComponent(resultMap.cmsContent.VehicleYearQuestion, resultMap.yearQuestionInitialData);
}); });
}); });
}, },