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) => {
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: {}
};

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

@ -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");
});
});

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) => {
//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,
};

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

@ -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);
});
});
},

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 { 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 };
}

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

@ -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);
});
});
},

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) => {
//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,
};

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

@ -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);
});
});
},

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) => {
//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,
};

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

@ -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);
});
});
},