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

Unit tests for vehicle-parts

Browse source
This commit is contained in:
FrankRua 2022-02-28 14:36:56 -05:00
parent ac492e3203
commit c1df7db2a4
6 changed files with 673 additions and 276 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
src/helpers/unit-test-helper.js
View file

@ -2,6 +2,7 @@ import { storeActions } from "@/constants/store-actions";
import { storeMutations } from "@/constants/store-mutations.js"; import { storeMutations } from "@/constants/store-mutations.js";
import { navigationScenarios } from "@/router/router-constants/navigation-scenarios.js"; import { navigationScenarios } from "@/router/router-constants/navigation-scenarios.js";
import { vehicleCategories } from "@/constants/vehicle-categories.js"; import { vehicleCategories } from "@/constants/vehicle-categories.js";
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
import baseMixin from "@/mixins/base-mixin"; import baseMixin from "@/mixins/base-mixin";
export function getMountOptions(mockData) { export function getMountOptions(mockData) {
@ -40,10 +41,13 @@ export function getMountOptions(mockData) {
mocks.storeMutations = storeMutations; mocks.storeMutations = storeMutations;
mocks.navigationScenarios = navigationScenarios; mocks.navigationScenarios = navigationScenarios;
mocks.vehicleCategories = vehicleCategories; mocks.vehicleCategories = vehicleCategories;
mocks.fmgPageValues = fmgPageValues;
// Mock $store and $router when accessing this.$store/$router // Mock $store and $router when accessing this.$store/$router
mocks.$store = mockData.store; mocks.$store = mockData.store;
mocks.$router = mockData.router; mocks.$router = mockData.router;
mocks.$route = mockData.route;
const global = { const global = {
mocks: mocks, mocks: mocks,

530
src/layouts/vehicle-damage/vehicle-damage.spec.js
View file

@ -41,214 +41,214 @@ jest.mock("@/store", () => ({
}, },
})); }));
// describe("vehicle-damage.vue", () => { describe("vehicle-damage.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 Damage"; const pageHeaderWidgetHeaderText = "Select Damage";
// const { wrapper, apiPromise } = setupMocks({ const { wrapper, apiPromise } = setupMocks({
// pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText, pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
// }); });
// //Act //Act
// vehicleDamage.beforeRouteEnter.call( vehicleDamage.beforeRouteEnter.call(
// wrapper.vm, wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } }, { query: { fmgPage: "vehicle-damage" } },
// undefined, undefined,
// (c) => c(wrapper.vm) (c) => c(wrapper.vm)
// ); );
// //Assert //Assert
// apiPromise.finally(() => { apiPromise.finally(() => {
// expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith( expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
// pageHeaderWidgetHeaderText pageHeaderWidgetHeaderText
// ); );
// done(); done();
// }); });
// }); });
// }); });
// describe("vehicle-damage.vue", () => { describe("vehicle-damage.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({ const { wrapper, apiPromise } = setupMocks({
// SiteHeaderWidget: SiteHeaderWidget, SiteHeaderWidget: SiteHeaderWidget,
// }); });
// //Act //Act
// vehicleDamage.beforeRouteEnter.call( vehicleDamage.beforeRouteEnter.call(
// wrapper.vm, wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } }, { query: { fmgPage: "vehicle-damage" } },
// undefined, undefined,
// (c) => c(wrapper.vm) (c) => c(wrapper.vm)
// ); );
// //Assert //Assert
// apiPromise.finally(() => { apiPromise.finally(() => {
// expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith( expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(
// SiteHeaderWidget SiteHeaderWidget
// ); );
// done(); done();
// }); });
// }); });
// }); });
// describe("vehicle-damage.vue", () => { describe("vehicle-damage.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({ const { wrapper, apiPromise } = setupMocks({
// VehicleBannerWidget: VehicleBannerWidget, VehicleBannerWidget: VehicleBannerWidget,
// }); });
// //Act //Act
// vehicleDamage.beforeRouteEnter.call( vehicleDamage.beforeRouteEnter.call(
// wrapper.vm, wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } }, { query: { fmgPage: "vehicle-damage" } },
// undefined, undefined,
// (c) => c(wrapper.vm) (c) => c(wrapper.vm)
// ); );
// //Assert //Assert
// apiPromise.finally(() => { apiPromise.finally(() => {
// expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith( expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(
// VehicleBannerWidget VehicleBannerWidget
// ); );
// done(); done();
// }); });
// }); });
// }); });
// describe("vehicle-damage.vue", () => { describe("vehicle-damage.vue", () => {
// test("CarId set, arePagePrerequisitesValid should be true ", async () => { test("CarId set, arePagePrerequisitesValid should be true ", async () => {
// //Arrange //Arrange
// const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
// //Act //Act
// vehicleDamage.beforeRouteEnter.call( vehicleDamage.beforeRouteEnter.call(
// wrapper.vm, wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } }, { query: { fmgPage: "vehicle-damage" } },
// undefined, undefined,
// (c) => c(wrapper.vm) (c) => c(wrapper.vm)
// ); );
// let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid(); let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
// await nextTick(); await nextTick();
// //Assert //Assert
// expect(arePagePrerequisitesValid).toBe(true); expect(arePagePrerequisitesValid).toBe(true);
// }); });
// }); });
// describe("vehicle-damage.vue", () => { describe("vehicle-damage.vue", () => {
// test("Call invalidation, ResetPartsAndDeps should be called", async () => { test("Call invalidation, ResetPartsAndDeps should be called", async () => {
// //Arrange //Arrange
// const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
// //Act //Act
// vehicleDamage.beforeRouteEnter.call( vehicleDamage.beforeRouteEnter.call(
// wrapper.vm, wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } }, { query: { fmgPage: "vehicle-damage" } },
// undefined, undefined,
// (c) => c(wrapper.vm) (c) => c(wrapper.vm)
// ); );
// wrapper.vm.resetDependentState(); wrapper.vm.resetDependentState();
// //Assert //Assert
// expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_AND_DEPS) expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_AND_DEPS)
// }); });
// }); });
// describe("vehicle-damage.vue", () => { describe("vehicle-damage.vue", () => {
// test("BackButtonAction triggers a router.navigate change", async () => { test("BackButtonAction triggers a router.navigate change", async () => {
// //Arrange //Arrange
// const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
// //Act //Act
// vehicleDamage.beforeRouteEnter.call( vehicleDamage.beforeRouteEnter.call(
// wrapper.vm, wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } }, { query: { fmgPage: "vehicle-damage" } },
// undefined, undefined,
// (c) => c(wrapper.vm) (c) => c(wrapper.vm)
// ); );
// wrapper.vm.backButtonAction(); wrapper.vm.backButtonAction();
// //Assert //Assert
// expect(wrapper.vm.$router.navigate).toHaveBeenCalled(); expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
// }); });
// }); });
describe("vehicle-damage.vue", () => { describe("vehicle-damage.vue", () => {
test("ForwardButtonAction triggers a router.navigate change and saves selections to store", async () => { test("ForwardButtonAction triggers a router.navigate change and saves selections to store", async () => {
//Arrange //Arrange
const partsData = { partsOrQuestions: [{ const partsData = {
glassName: "Single", partsOrQuestions: [{
glassLocation: "Windshield", glassName: "Single",
parts: null, glassLocation: "Windshield",
partQuestions: [{ parts: null,
partQuestions: [{
questionSequence: 1, questionSequence: 1,
questionText: "Is your vehicle equipped with a heated steering wheel?", questionText: "Is your vehicle equipped with a heated steering wheel?",
answers: [{ answers: [{
answerText: "Yes", answerText: "Yes",
nextQuestionSequence: null, nextQuestionSequence: null,
answerResult: "FW04957" answerResult: "FW04957"
}, },
{ {
answerText: "No", answerText: "No",
nextQuestionSequence: 2, nextQuestionSequence: 2,
answerResult: "" answerResult: ""
}]}, }]
},
{ {
questionSequence: 2, questionSequence: 2,
questionText: "Is your vehicle equipped with a remote start?", questionText: "Is your vehicle equipped with a remote start?",
answers: [{ answers: [{
answerText: "Yes", answerText: "Yes",
nextQuestionSequence: null, nextQuestionSequence: null,
answerResult: "FW04181" answerResult: "FW04181"
}, },
{ {
answerText: "No", answerText: "No",
nextQuestionSequence: null, nextQuestionSequence: null,
answerResult: "FW04179" answerResult: "FW04179"
}]}]}]}; }]
}]
}]
};
const { wrapper } = setupMocks({ const { wrapper } = setupMocks({
pageHeaderWidgetHeaderText: "", pageHeaderWidgetHeaderText: "",
mountOptionsMockData: { mountOptionsMockData: {
router: { navigateAfterSave: jest.fn(), }, router: { navigateAfterSave: jest.fn(), },
actionList: [{ actionName: storeActions.GET_PARTS_OR_QUESTIONS, data: partsData, },],}, actionList: [{ actionName: storeActions.GET_PARTS_OR_QUESTIONS, data: partsData, },],
},
}); });
//jest.mock(storeActions.GET_PARTS_OR_QUESTIONS)
wrapper.vm.selectedWindshieldOptions = {
selectedWindshieldChipCount : null, wrapper.vm.selectedWindshieldOptions = {
selectedWindshieldReplaceOptions : ["Single"], selectedWindshieldChipCount: null,
// selectedDriverSideReplaceOptions: ["Back"], selectedWindshieldReplaceOptions: ["Single"],
// selectedPassengerSideReplaceOptions: ["Quarter"],
selectedWindshieldDamageType: ["Replace"] selectedWindshieldDamageType: ["Replace"]
}; };
//wrapper.vm.selectedDamageLocations = ["Windshield", "SideDoor", "RearWindow"];
wrapper.vm.selectedDamageLocations = ["Windshield"]; wrapper.vm.selectedDamageLocations = ["Windshield"];
//wrapper.vm.selectedRearReplaceOptions = ["Stationary"];
// const expectedGlassToReplace = [{location: "Windshield", name: "Single"}, {location: "Driver", name: "Back"}, const expectedGlassToReplace = [{ location: "Windshield", name: "Single" }];
// {location: "Passenger", name: "Quarter"}, {location: "Rear", name: "Stationary"}];
const expectedGlassToReplace = [{location: "Windshield", name: "Single"}];
//Act //Act
vehicleDamage.beforeRouteEnter.call( vehicleDamage.beforeRouteEnter.call(
@ -259,7 +259,7 @@ describe("vehicle-damage.vue", () => {
); );
await wrapper.vm.forwardButtonAction(); await wrapper.vm.forwardButtonAction();
//Assert //Assert
expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalled(); expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalled();
expect(wrapper.vm.selectedGlassToReplace()).toEqual(expectedGlassToReplace); expect(wrapper.vm.selectedGlassToReplace()).toEqual(expectedGlassToReplace);
@ -268,135 +268,135 @@ describe("vehicle-damage.vue", () => {
}); });
}); });
// describe("vehicle-damage.vue", () => { describe("vehicle-damage.vue", () => {
// test("isWindshieldDamageLocation is true when windshield is selected", async () => { test("isWindshieldDamageLocation is true when windshield is selected", async () => {
// //Arrange //Arrange
// const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
// //Act //Act
// vehicleDamage.beforeRouteEnter.call( vehicleDamage.beforeRouteEnter.call(
// wrapper.vm, wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } }, { query: { fmgPage: "vehicle-damage" } },
// undefined, undefined,
// (c) => c(wrapper.vm) (c) => c(wrapper.vm)
// ); );
// wrapper.vm.selectedDamageLocations = ["Windshield"]; wrapper.vm.selectedDamageLocations = ["Windshield"];
// //Assert //Assert
// expect(wrapper.vm.isWindshieldDamageLocation).toEqual(true); expect(wrapper.vm.isWindshieldDamageLocation).toEqual(true);
// }); });
// }); });
// describe("vehicle-damage.vue", () => { describe("vehicle-damage.vue", () => {
// test("isSideDoorDamageLocation is true Side door is selected", async () => { test("isSideDoorDamageLocation is true Side door is selected", async () => {
// //Arrange //Arrange
// const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
// //Act //Act
// vehicleDamage.beforeRouteEnter.call( vehicleDamage.beforeRouteEnter.call(
// wrapper.vm, wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } }, { query: { fmgPage: "vehicle-damage" } },
// undefined, undefined,
// (c) => c(wrapper.vm) (c) => c(wrapper.vm)
// ); );
// wrapper.vm.selectedDamageLocations = ["Sidedoor"]; wrapper.vm.selectedDamageLocations = ["Sidedoor"];
// //Assert //Assert
// expect(wrapper.vm.isSideDoorDamageLocation).toEqual(true); expect(wrapper.vm.isSideDoorDamageLocation).toEqual(true);
// }); });
// }); });
// describe("vehicle-damage.vue", () => { describe("vehicle-damage.vue", () => {
// test("isRearWindowDamageLocation is true if Rear Window damage is selected", async () => { test("isRearWindowDamageLocation is true if Rear Window damage is selected", async () => {
// //Arrange //Arrange
// const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
// //Act //Act
// vehicleDamage.beforeRouteEnter.call( vehicleDamage.beforeRouteEnter.call(
// wrapper.vm, wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } }, { query: { fmgPage: "vehicle-damage" } },
// undefined, undefined,
// (c) => c(wrapper.vm) (c) => c(wrapper.vm)
// ); );
// wrapper.vm.selectedDamageLocations = ["RearWindow"]; wrapper.vm.selectedDamageLocations = ["RearWindow"];
// //Assert //Assert
// expect(wrapper.vm.isRearWindowDamageLocation).toEqual(true); expect(wrapper.vm.isRearWindowDamageLocation).toEqual(true);
// }); });
// }); });
// describe("vehicle-damage.vue", () => { describe("vehicle-damage.vue", () => {
// test("isWindshieldRepair is true if windshield repair is selected", async () => { test("isWindshieldRepair is true if windshield repair is selected", async () => {
// //Arrange //Arrange
// const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
// //Act //Act
// vehicleDamage.beforeRouteEnter.call( vehicleDamage.beforeRouteEnter.call(
// wrapper.vm, wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } }, { query: { fmgPage: "vehicle-damage" } },
// undefined, undefined,
// (c) => c(wrapper.vm) (c) => c(wrapper.vm)
// ); );
// wrapper.vm.selectedDamageLocations = ["Windshield"]; wrapper.vm.selectedDamageLocations = ["Windshield"];
// wrapper.vm.selectedWindshieldOptions = { selectedWindshieldDamageType: ["Repair"]}; wrapper.vm.selectedWindshieldOptions = { selectedWindshieldDamageType: ["Repair"] };
// //Assert //Assert
// expect(wrapper.vm.isWindshieldRepair).toEqual(true); expect(wrapper.vm.isWindshieldRepair).toEqual(true);
// }); });
// }); });
// describe("vehicle-damage.vue", () => { describe("vehicle-damage.vue", () => {
// test("isDriverSideReplace is true if side door driver is selected", async () => { test("isDriverSideReplace is true if side door driver is selected", async () => {
// //Arrange //Arrange
// const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
// //Act //Act
// vehicleDamage.beforeRouteEnter.call( vehicleDamage.beforeRouteEnter.call(
// wrapper.vm, wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } }, { query: { fmgPage: "vehicle-damage" } },
// undefined, undefined,
// (c) => c(wrapper.vm) (c) => c(wrapper.vm)
// ); );
// wrapper.vm.selectedDamageLocations = ["Sidedoor"]; wrapper.vm.selectedDamageLocations = ["Sidedoor"];
// wrapper.vm.sideDoorOptionsData = { selectedDoorSides: ["DriverSide"]}; wrapper.vm.sideDoorOptionsData = { selectedDoorSides: ["DriverSide"] };
// //Assert //Assert
// expect(wrapper.vm.isDriverSideReplace).toEqual(true); expect(wrapper.vm.isDriverSideReplace).toEqual(true);
// }); });
// }); });
// describe("vehicle-damage.vue", () => { describe("vehicle-damage.vue", () => {
// test("isPassengerSideReplace is true if side door passenger selected", async () => { test("isPassengerSideReplace is true if side door passenger selected", async () => {
// //Arrange //Arrange
// const { wrapper } = setupMocks({}); const { wrapper } = setupMocks({});
// //Act //Act
// vehicleDamage.beforeRouteEnter.call( vehicleDamage.beforeRouteEnter.call(
// wrapper.vm, wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } }, { query: { fmgPage: "vehicle-damage" } },
// undefined, undefined,
// (c) => c(wrapper.vm) (c) => c(wrapper.vm)
// ); );
// wrapper.vm.selectedDamageLocations = ["Sidedoor"]; wrapper.vm.selectedDamageLocations = ["Sidedoor"];
// wrapper.vm.sideDoorOptionsData = { selectedDoorSides: ["PassengerSide"]}; wrapper.vm.sideDoorOptionsData = { selectedDoorSides: ["PassengerSide"] };
// //Assert //Assert
// expect(wrapper.vm.isPassengerSideReplace).toEqual(true); expect(wrapper.vm.isPassengerSideReplace).toEqual(true);
// }); });
// }); });
describe("vehicle-damage.vue", () => { describe("vehicle-damage.vue", () => {
test("Call invalidation, ResetPartsAndDeps should be called", async () => { test("Call invalidation, ResetPartsAndDeps should be called", async () => {
@ -509,14 +509,14 @@ function setupMocks({
const sideDoorOptionsWrapper = wrapper.findComponent({ name: "sideDoorOptions" }); const sideDoorOptionsWrapper = wrapper.findComponent({ name: "sideDoorOptions" });
sideDoorOptionsWrapper.vm.initializeComponent = sideDoorOptionsWrapper.vm.initializeComponent =
sideDoorOptions.methods.initializeComponent; sideDoorOptions.methods.initializeComponent;
const windshieldOptionsWrapper = wrapper.findComponent({ const windshieldOptionsWrapper = wrapper.findComponent({
name: "windshieldOptions", name: "windshieldOptions",
}); });
windshieldOptionsWrapper.vm.initializeComponent = windshieldOptionsWrapper.vm.initializeComponent =
windshieldOptions.methods.initializeComponent; windshieldOptions.methods.initializeComponent;
const funnelSubHeaderWrapper = wrapper.findComponent({ const funnelSubHeaderWrapper = wrapper.findComponent({
name: "funnelSubHeader", name: "funnelSubHeader",
@ -528,13 +528,13 @@ function setupMocks({
name: "replaceOptionsQuestion", name: "replaceOptionsQuestion",
}); });
backGlassOptionsWrapper.vm.initializeComponent = backGlassOptionsWrapper.vm.initializeComponent =
replaceOptionsQuestion.methods.initializeComponent; replaceOptionsQuestion.methods.initializeComponent;
const damageLocationQuestionWrapper = wrapper.findComponent({ const damageLocationQuestionWrapper = wrapper.findComponent({
name: "damageLocationQuestion", name: "damageLocationQuestion",
}); });
damageLocationQuestionWrapper.vm.initializeComponent = damageLocationQuestionWrapper.vm.initializeComponent =
damageLocationQuestion.methods.initializeComponent; damageLocationQuestion.methods.initializeComponent;
const funnelFooterWrapper = wrapper.findComponent({ const funnelFooterWrapper = wrapper.findComponent({
name: "funnelFooter", name: "funnelFooter",

1
src/layouts/vehicle-damage/vehicle-damage.vue
View file

@ -120,7 +120,6 @@ export default {
return store.getters.vehicle.carId !== null; return store.getters.vehicle.carId !== null;
}, },
resetDependentState() { resetDependentState() {
// Invokes
store.dispatch(storeActions.RESET_PARTS_STATE); store.dispatch(storeActions.RESET_PARTS_STATE);
}, },
backButtonAction() { backButtonAction() {

2
src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue
View file

@ -103,7 +103,7 @@ export default {
} }
}, },
methods: { methods: {
initializeComponent(cmsContent, initialData) { initializeComponent(cmsContent) {
this.glassColorQuestion = cmsContent.ColorQuestionWidget.QuestionText; this.glassColorQuestion = cmsContent.ColorQuestionWidget.QuestionText;
this.glassFeatureQuestion = cmsContent.FeatureQuestionWidget.QuestionText; this.glassFeatureQuestion = cmsContent.FeatureQuestionWidget.QuestionText;
}, },

385
src/layouts/vehicle-parts/vehicle-parts.spec.js Normal file
View file

@ -0,0 +1,385 @@
// Components
import vehicleParts from "@/layouts/vehicle-parts/vehicle-parts.vue";
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question";
// Supporting Files
import { settleAllPromises } from "@/helpers/layout-helper.js";
import baseMixin from "@/mixins/base-mixin";
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import { nextTick } from "vue";
import { storeActions } from "@/constants/store-actions";
import { storeMutations } from "@/constants/store-mutations";
import store from "@/store";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
settleAllPromises: jest.fn(),
}));
// Mock fetchCmsContentForPage
jest.mock("@/helpers/cms-content-helper", () => ({
fetchCmsContentForPage: jest.fn(),
}));
// Mock store
jest.mock("@/store", () => { return {}; }, { virtual: true });
store.getters = {
pageData: jest.fn(),
damage: {
isRepair: false
}
};
const basePartResponse = {
partsOrQuestions: [
{
glassName: "Stationary",
glassLocation: "Rear",
parts: [
{
partNumber: "DB12209GTYN",
description: "heated glass, solar, 1 hole",
color: "Green Tint",
requiresRecalibration: false,
requiresCapabilityQuestions: false,
childParts: null
},
{
partNumber: "DB12209YPYNOEM",
description: "heated glass, solar, 1 hole",
color: "Gray Tint Privacy",
requiresRecalibration: false,
requiresCapabilityQuestions: false,
childParts: null
}
],
partQuestions: null
}
]
}
describe("vehicle-damage.vue", () => {
test("Page header is initialized with api data", async (done) => {
//Arrange
store.getters.pageData.mockReturnValueOnce({
partsOrQuestions: [
{
glassName: "Stationary",
glassLocation: "Rear",
parts: [
{
partNumber: "DB12209GTYN",
description: "heated glass, solar, 1 hole",
color: "Green Tint",
requiresRecalibration: false,
requiresCapabilityQuestions: false,
childParts: null
},
{
partNumber: "DB12209YPYNOEM",
description: "heated glass, solar, 1 hole",
color: "Gray Tint Privacy",
requiresRecalibration: false,
requiresCapabilityQuestions: false,
childParts: null
}
],
partQuestions: null
}
]
});
const pageHeaderWidgetHeaderText = "Select Parts";
const { wrapper, apiPromise } = setupMocks(
{
pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
mountOptionsMockData: {
router: {
navigateAfterSave: jest.fn()
},
route: {
query: {
fmgPage: 'vehicle-parts',
}
},
store: {
getters: store.getters
},
}
});
//Act
vehicleParts.beforeRouteEnter.call(wrapper.vm,
{ query: { fmgPage: "vehicle-parts" } },
undefined,
(c) => c(wrapper.vm)
);
//Assert
apiPromise.finally(() => {
expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
done();
});
});
test("Page logo image is initialized 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",
};
store.getters.pageData.mockReturnValueOnce(basePartResponse);
const { wrapper, apiPromise } = setupMocks(
{
SiteHeaderWidget: SiteHeaderWidget,
mountOptionsMockData: {
router: {
navigateAfterSave: jest.fn()
},
route: {
query: {
fmgPage: 'vehicle-parts',
}
},
store: {
getters: store.getters
},
}
});
//Act
vehicleParts.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-parts" } },
undefined,
(c) => c(wrapper.vm)
);
//Assert
apiPromise.finally(() => {
expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(SiteHeaderWidget);
done();
});
});
test("Vehicle image is initialized 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",
};
store.getters.pageData.mockReturnValue(basePartResponse);
const { wrapper, apiPromise } = setupMocks(
{
VehicleBannerWidget: VehicleBannerWidget,
mountOptionsMockData: {
router: {
navigateAfterSave: jest.fn()
},
route: {
query: {
fmgPage: 'vehicle-parts',
}
},
store: {
getters: store.getters
},
}
});
//Act
vehicleParts.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-parts" } },
undefined,
(c) => c(wrapper.vm)
);
//Assert
apiPromise.finally(() => {
expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
done();
});
});
test("PageData / isRepair populated in Vuex. arePagePrerequisitesValid should be true ", async () => {
//Arrange
store.getters.pageData.mockReturnValueOnce(basePartResponse);
const { wrapper } = setupMocks({
mountOptionsMockData: {
router: {
navigateAfterSave: jest.fn()
},
route: {
query: {
fmgPage: 'vehicle-parts',
}
},
store: {
getters: store.getters
},
}
});
//Act
vehicleParts.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-parts" } },
undefined,
(c) => c(wrapper.vm)
);
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
await nextTick();
//Assert
expect(arePagePrerequisitesValid).toBe(true);
});
test("BackButtonAction triggers a router.navigate change", async () => {
//Arrange
store.getters.pageData.mockReturnValueOnce(basePartResponse);
const { wrapper } = setupMocks({
mountOptionsMockData: {
router: {
navigateAfterSave: jest.fn(),
navigate: jest.fn()
},
route: {
query: {
fmgPage: 'vehicle-parts',
}
},
store: {
getters: store.getters
},
}
});
//Act
vehicleParts.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-parts" } },
undefined,
(c) => c(wrapper.vm)
);
wrapper.vm.backButtonAction();
//Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
});
test("ForwardButtonAction triggers a router.navigate change and saves selected parts to store", async () => {
//Arrange
store.getters.pageData.mockReturnValueOnce(basePartResponse);
store.commit = jest.fn();
const { wrapper } = setupMocks({
mountOptionsMockData: {
router: {
navigateAfterSave: jest.fn(),
navigate: jest.fn()
},
route: {
query: {
fmgPage: 'vehicle-parts',
}
},
store: {
getters: store.getters,
commit: store.commit
},
}
});
wrapper.setData({ glassParts: { "Rear-Stationary": { "Rear": ['DB12209YPYNOEM'] } } });
//Act
vehicleParts.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-parts" } },
undefined,
(c) => c(wrapper.vm)
);
await wrapper.vm.forwardButtonAction();
//Assert
expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalled();
// expect(wrapper.vm.selectedGlassToReplace()).toEqual(expectedGlassToReplace);
// expect(store.commit).toBeCalledWith(storeMutations.UPDATE_IS_REPAIR, false);
// expect(store.commit).toBeCalledWith(storeMutations.UPDATE_GLASS_TO_REPLACE, expectedGlassToReplace);
});
});
function setupMocks({ pageHeaderWidgetHeaderText = {}, mountOptionsMockData = {} }) {
//Mock api responses
const apiResponses = {
cmsContent: {
FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
VehicleBannerWidget: {
GenericVehicleImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
},
FunnelHeaderWidget: {
LogoImage:
"https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
},
ColorQuestionWidget: 'Please choose your rear window tint color',
FeatureQuestionWidget: 'Ok no choose features',
AlertWidget: {
BodyText: 'Please choose your tint color',
HeadlineText: 'Just a few more steps to go',
}
}
};
const apiPromise = Promise.resolve(apiResponses);
settleAllPromises.mockImplementation(() => apiPromise);
fetchCmsContentForPage.mockImplementation(() => Promise.resolve());
//Mock damage initialize methods
funnelHeader.methods = { initializeComponent: jest.fn() };
vehicleBanner.methods = { initializeComponent: jest.fn() };
funnelSubHeader.methods = { initializeComponent: jest.fn() };
funnelFooter.methods = { initializeComponent: jest.fn() }
const mountOptions = getMountOptions(mountOptionsMockData,);
const wrapper = shallowMount(vehicleParts, mountOptions);
const funnelHeaderWrapper = wrapper.findComponent({ name: "funnelHeader" });
funnelHeaderWrapper.vm.initializeComponent = funnelHeader.methods.initializeComponent;
const vehicleBannerWrapper = wrapper.findComponent({ name: "vehicleBanner" });
vehicleBannerWrapper.vm.initializeComponent = vehicleBanner.methods.initializeComponent;
const funnelSubHeaderWrapper = wrapper.findComponent({ name: "funnelSubHeader", });
funnelSubHeaderWrapper.vm.initializeComponent = funnelSubHeader.methods.initializeComponent;
const funnelFooterWrapper = wrapper.findComponent({ name: "funnelFooter", });
funnelFooterWrapper.vm.initializeComponent = funnelFooter.methods.initializeComponent;
const partQuestionRearWrapper = wrapper.findComponent({ name: "glassPartQuestion", });
partQuestionRearWrapper.vm.initializeComponent = glassPartQuestion.methods.initializeComponent;
return { wrapper, apiPromise };
}

27
src/layouts/vehicle-parts/vehicle-parts.vue
View file

@ -32,13 +32,20 @@ import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-he
import funnelFooter from "@/common-components/funnel-footer/funnel-footer"; import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
import alert from "@/ux-components/alert/alert"; import alert from "@/ux-components/alert/alert";
// Supporting Files // Supporting Files
import {fetchCmsContentForPage} from "@/helpers/cms-content-helper"; import {
import {settleAllPromises} from "@/helpers/layout-helper"; fetchCmsContentForPage
import {fmgPageValues} from "@/router/router-constants/fmgPage-values"; } from "@/helpers/cms-content-helper";
import {storeMutations} from "@/constants/store-mutations"; import {
settleAllPromises
} from "@/helpers/layout-helper";
import {
fmgPageValues
} from "@/router/router-constants/fmgPage-values";
import {
storeMutations
} from "@/constants/store-mutations";
import store from "@/store"; import store from "@/store";
export default { export default {
name: "vehicle-parts", name: "vehicle-parts",
async beforeRouteEnter(to, from, next) { async beforeRouteEnter(to, from, next) {
@ -66,6 +73,7 @@ export default {
); );
// Glass Part Question dynamic component // Glass Part Question dynamic component
Object.keys(vm.$refs) Object.keys(vm.$refs)
.filter((r) => r.includes(vm.refPrefix) && vm.$refs[r][0] !== undefined) .filter((r) => r.includes(vm.refPrefix) && vm.$refs[r][0] !== undefined)
.forEach((c) => .forEach((c) =>
@ -74,12 +82,14 @@ export default {
FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget, FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
}) })
); );
// Set alertData for the page alert. These use props so we don't call // Set alertData for the page alert. These use props so we don't call
// initializeComponent here. // initializeComponent here.
vm.alertWidgetData = { vm.alertWidgetData = {
copy: resultMap.cmsContent.AlertWidget.BodyText, copy: resultMap.cmsContent.AlertWidget.BodyText,
headline: resultMap.cmsContent.AlertWidget.HeadlineText headline: resultMap.cmsContent.AlertWidget.HeadlineText
}; };
}); });
}, },
data() { data() {
@ -99,7 +109,7 @@ export default {
}, },
computed: { computed: {
PartsForQuestions() { PartsForQuestions() {
const partsData = store.getters.pageData(this.$route.query.fmgPage); const partsData = this.$store.getters.pageData(this.$route.query.fmgPage);
// Map API result data, to vehicle-parts data structure // Map API result data, to vehicle-parts data structure
const mappedData = partsData.partsOrQuestions.map(g => { const mappedData = partsData.partsOrQuestions.map(g => {
@ -142,7 +152,6 @@ export default {
this.$route this.$route
); );
}, },
forwardButtonAction() { forwardButtonAction() {
const selectedGlassPartNumbers = []; const selectedGlassPartNumbers = [];
const matchedParts = []; const matchedParts = [];
@ -167,7 +176,7 @@ export default {
} }
// If no parts could be matched, throw an error. // If no parts could be matched, throw an error.
if(matchedParts.length === 0) { if (matchedParts.length === 0) {
throw new Error("Could not match any parts to the selected parts"); throw new Error("Could not match any parts to the selected parts");
} }
@ -180,4 +189,4 @@ export default {
}, },
}; };
</script> </script>