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

Merge branch 'feature/CSR-335' into feature/CSR-297

Browse source
This commit is contained in:
CarlNation 2022-03-01 11:20:24 -05:00
commit 32d81e1a10
21 changed files with 1007 additions and 389 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
jest.config.js
View file

@ -17,6 +17,9 @@ module.exports = {
"!src/layouts/vehicle-damage/windshield-options/windshield-options.vue", "!src/layouts/vehicle-damage/windshield-options/windshield-options.vue",
"!src/layouts/address-poc/address-poc.vue", "!src/layouts/address-poc/address-poc.vue",
"!src/layouts/nested-radio-poc/nested-radio.vue", "!src/layouts/nested-radio-poc/nested-radio.vue",
"!src/layouts/button-question-examples/**/*.vue",
"!src/layouts/part-questions/**/*.vue",
"!src/layouts/reveal/**/*.vue",
], //! means exclude from coverage. ], //! means exclude from coverage.
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
coverageThreshold: { coverageThreshold: {

10
src/common-components/button-question/button-question.vue
View file

@ -1,8 +1,8 @@
<!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component --> <!-- Documented in confluence https://safelite.atlassian.net/wiki/spaces/DC/pages/76644418/Button+Question+Component -->
<template> <template>
<div :class="isOverflowScrollable ? 'button_question' : ''"> <div :class="isOverflowScrollable ? 'button-question button-question-overflow' : 'button-question'">
<div v-if="questionText" class="mt-5 mb-4 d-flex"> <div v-if="questionText" class="mt-5 mb-4 d-flex">
<span class="text-center fs-5 fw-bold w-100">{{ questionText }}</span> <span class="fs-5 fw-bold w-100" :class="this.buttonType === 'radio' ? 'text-start' : 'text-center'">{{ questionText }}</span>
</div> </div>
<div class="w-100 d-flex justify-content-center"> <div class="w-100 d-flex justify-content-center">
<fieldset class="w-100" :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''"> <fieldset class="w-100" :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
@ -153,8 +153,7 @@ export default {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.button_question { .button-question-overflow {
color: $black;
height: calc(100vh - 280px); height: calc(100vh - 280px);
.overflow-scroll { .overflow-scroll {
@ -163,4 +162,7 @@ export default {
-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling: touch;
} }
} }
.button-question {
color: $black;
}
</style> </style>

1
src/common-components/textbox-question/textbox-question.vue
View file

@ -20,7 +20,6 @@ export default {
isRequired: Boolean, isRequired: Boolean,
hasIcon: Boolean,// If input has an icon hasIcon: Boolean,// If input has an icon
iconRight: Boolean,// Place icon on right side of text input, otherwise default is left if hasIcon prop is used iconRight: Boolean,// Place icon on right side of text input, otherwise default is left if hasIcon prop is used
iconURL: String,
hasError: Boolean, hasError: Boolean,
} }
}; };

4
src/global-methods.js
View file

@ -10,10 +10,6 @@ export default {
AppName: "FixMyGlass", AppName: "FixMyGlass",
}); });
if (endpoint.toLowerCase().includes("/parts/")){
apiGatewayUrl = "https://localhost:44335";
}
axios({ axios({
method: method, method: method,
url: apiGatewayUrl + endpoint, url: apiGatewayUrl + endpoint,

29
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) {
@ -9,19 +10,20 @@ export function getMountOptions(mockData) {
const mocks = {}; const mocks = {};
//this is mocking if you use the mixin directly(baseMixin.methods.dispatchNonBlockingStoreAction) vs this.dispatchNonBlockingStoreAction //this is mocking if you use the mixin directly(baseMixin.methods.dispatchNonBlockingStoreAction) vs this.dispatchNonBlockingStoreAction
baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn(); if (mockData.actionList !== undefined) {
baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation((actionName) => { baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
let actionFilterResult = mockData.actionList.filter( baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation((actionName) => {
(x) => x.actionName == actionName let actionFilterResult = mockData.actionList.filter(
); (x) => x.actionName == actionName
);
if (actionFilterResult.length > 0 && actionFilterResult.length === 1) {
return Promise.resolve({
data: actionFilterResult[0].data,
});
}
});
if (actionFilterResult.length > 0 && actionFilterResult.length === 1) {
return Promise.resolve({
data: actionFilterResult[0].data,
});
}
});
}
mocks.dispatchNonBlockingStoreAction = jest.fn(); mocks.dispatchNonBlockingStoreAction = jest.fn();
mocks.dispatchNonBlockingStoreAction.mockImplementation((actionName) => { mocks.dispatchNonBlockingStoreAction.mockImplementation((actionName) => {
let actionFilterResult = mockData.actionList.filter( let actionFilterResult = mockData.actionList.filter(
@ -40,10 +42,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,

2
src/layouts/component-test/component-test.vue
View file

@ -33,7 +33,6 @@
placeholderText="Text Input Label" placeholderText="Text Input Label"
inputID="test-text-input" inputID="test-text-input"
hasIcon hasIcon
imgUrl="~@/assets/img/icons/spinner.svg"
/> />
</div> </div>
</div> </div>
@ -46,7 +45,6 @@
inputID="test-text-input" inputID="test-text-input"
hasIcon hasIcon
iconRight iconRight
imgUrl="~@/assets/img/icons/spinner.svg"
/> />
</div> </div>
</div> </div>

2
src/layouts/part-questions/part-questions.vue
View file

@ -18,6 +18,8 @@ import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
// Supporting Files // Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper"; import { settleAllPromises } from "@/helpers/layout-helper";
import {storeMutations} from "@/constants/store-mutations";
import {storeActions} from "@/constants/store-actions";
import store from "@/store"; import store from "@/store";
export default { export default {

2
src/layouts/reveal/reveal.vue
View file

@ -14,6 +14,8 @@ import funnelFooter from "@/common-components/funnel-footer/funnel-footer";
// Supporting Files // Supporting Files
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper"; import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper"; import { settleAllPromises } from "@/helpers/layout-helper";
import {storeMutations} from "@/constants/store-mutations";
import {storeActions} from "@/constants/store-actions";
import store from "@/store"; import store from "@/store";
export default { export default {

147
src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js
View file

@ -2,82 +2,83 @@ import { shallowMount } from "@vue/test-utils";
import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question"; import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-question";
import { getMountOptions } from "@/helpers/unit-test-helper.js"; import { getMountOptions } from "@/helpers/unit-test-helper.js";
import store from "@/store"; import store from "@/store";
jest.mock("@/store", () => { return {}; }, {virtual: true}); jest.mock("@/store", () => { return {}; }, { virtual: true });
describe("damage-location-question.vue", () => { describe("damage-location-question.vue", () => {
test("Selected location option is emitted upon selection.", async () => { test("Selected location option is emitted upon selection.", async () => {
//Arrange //Arrange
const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] }); const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
const locationToSelect = ["Backseat"]; const locationToSelect = ["Backseat"];
//Act //Act
wrapper.setValue({ modelValue: locationToSelect }); wrapper.setValue({ modelValue: locationToSelect });
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
//Assert //Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]); expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Backseat"] }]);
});
});
describe("damage-location-question.vue", () => {
test("Answers to display filtered by data from api.", async () => {
//Arrange
const { wrapper, cmsContent, damageOptions } = setupMocks({
dataFromStoreApi: {
driverSideOptions: {
availableReplacementOptions: ['Quarter', 'Front']
},
windshieldOptions: {
availableReplacementOptions: ['Single']
},
backGlassOptions: {
availableReplacementOptions: []
}
}
}); });
//Act
damageLocationQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, damageOptions, "car-group");
//Assert
expect(wrapper.vm.answersToDisplay).toStrictEqual([{ Name: 'Windshield' }, { Name: 'SideDoor' }])
});
});
function setupMocks({
modelValueProp = ["Windshield", "SideDoor"],
isMultiSelect = false,
groupName = "damageQuestion",
cmsQuestionText = "CMS text goes here",
cmsAnswers = [{ Name: "car-Windshield" }, { Name: "car-SideDoor" }, { Name: "car-RearWindow" }],
dataFromStoreApi = [],
}) {
//Mock store
store.dispatch = jest.fn(() => dataFromStoreApi);
store.getters = { vehicle: { year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR' } };
const mountOptions = getMountOptions({
store: {
dispatch: store.dispatch,
getters: store.getters,
},
}); });
describe("damage-location-question.vue", () => { //Mock props
test("Answers to display filtered by data from api.", async () => { mountOptions.propsData = {
modelValue: modelValueProp,
//Arrange isMultiSelect: isMultiSelect,
const { wrapper, cmsContent, damageOptions } = setupMocks({ dataFromStoreApi: { };
driverSideOptions: {
availableReplacementOptions: ['Quarter', 'Front']
},
windshieldOptions: {
availableReplacementOptions: ['Single']
},
backGlassOptions: {
availableReplacementOptions: []
}
}
});
//Act
damageLocationQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, damageOptions, "car-group");
//Assert
expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'Windshield' }, { Name: 'SideDoor' } ])
});
});
function setupMocks({ const wrapper = shallowMount(damageLocationQuestion, mountOptions);
modelValueProp = ["Windshield", "SideDoor"],
isMultiSelect = false, //Mock CMS content
groupName = "damageQuestion", const cmsContent = {
cmsQuestionText = "CMS text goes here", groupName: groupName,
cmsAnswers = [{Name: "car-Windshield"}, {Name: "car-SideDoor"}, {Name: "car-RearWindow"}], QuestionText: cmsQuestionText,
dataFromStoreApi = [], Answers: cmsAnswers,
}) { };
const damageOptions = dataFromStoreApi;
//Mock store return { wrapper, cmsContent, damageOptions };
store.dispatch = jest.fn(() => dataFromStoreApi); }
store.getters = { vehicle: {year: 2019, make: 'honda', model: 'civc', style: '2 Door', category: 'CAR'} };
const mountOptions = getMountOptions({
store: {
dispatch: store.dispatch,
getters: store.getters,
},
});
//Mock props
mountOptions.propsData = {
modelValue: modelValueProp,
isMultiSelect: isMultiSelect,
};
const wrapper = shallowMount(damageLocationQuestion, mountOptions);
//Mock CMS content
const cmsContent = {
groupName: groupName,
QuestionText: cmsQuestionText,
Answers: cmsAnswers,
};
const damageOptions = dataFromStoreApi;
return { wrapper, cmsContent, damageOptions };
}

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_STATE)
// }); });
// }); });
// 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",

3
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() {
@ -143,10 +142,8 @@ export default {
store.commit(this.storeMutations.UPDATE_GLASS_TO_REPLACE, this.selectedGlassToReplace()); store.commit(this.storeMutations.UPDATE_GLASS_TO_REPLACE, this.selectedGlassToReplace());
console.log("calling parts");
var partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(this.storeActions.GET_PARTS_OR_QUESTIONS, var partsData = await baseMixin.methods.dispatchNonBlockingStoreAction(this.storeActions.GET_PARTS_OR_QUESTIONS,
{ carId: store.getters.vehicle.carId, glassArray: this.selectedGlassToReplace()}, false); { carId: store.getters.vehicle.carId, glassArray: this.selectedGlassToReplace()}, false);
console.log(partsData);
this.navigateForward(partsData); this.navigateForward(partsData);
}, },

122
src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js Normal file
View file

@ -0,0 +1,122 @@
import { shallowMount } from "@vue/test-utils";
import { getMountOptions } from "@/helpers/unit-test-helper.js";
import glassPartQuestion from "@/layouts/vehicle-parts/glass-part-question/glass-part-question.vue";
import store from "@/store";
jest.mock("@/store", () => { return {}; }, { virtual: true });
const featureListData = {
colorAnswersProp: [
{ ColorAnswerText: 'Green Tint', FeatureAnswers: [{ FeatureAnswerText: "heated glass, solar, 1 hole", PartNumber: "DB12209GTYN" }] },
{ ColorAnswerText: 'Gray Tint Privacy', FeatureAnswers: [{ FeatureAnswerText: "heated glass, solar, 1 hole", PartNumber: "DB12209YPYN" }] }
],
glassLocationProp: "Rear",
glassNameProp: "Stationary",
modelValueProp: {}
}
describe("glass-part-question.vue", () => {
test("Part data passed in, should map data for ButtonQuestion (radio type)", async () => {
//Arrange
const { wrapper } = setupMocks(featureListData);
//Act
await wrapper.vm.$nextTick();
//Assert
expect(Object.keys(wrapper.vm.featureListData).length).toBe(2);
expect(wrapper.vm.featureListData['Green Tint'][0].Text).toBe("heated glass, solar, 1 hole");
expect(wrapper.vm.featureListData['Green Tint'][0].Name).toBe("DB12209GTYN");
expect(wrapper.vm.featureListData['Gray Tint Privacy'][0].Text).toBe("heated glass, solar, 1 hole");
expect(wrapper.vm.featureListData['Gray Tint Privacy'][0].Name).toBe("DB12209YPYN");
});
test("Tint mapper, should get tint image by glassLocation and tintColor", async () => {
//Arrange
const { wrapper } = setupMocks(featureListData);
//Act
await wrapper.vm.$nextTick();
const tintSourceImage = wrapper.vm.getTintSourceImage("Rear", "Green Tint");
//Assert
expect(tintSourceImage).toBe("Glass-NoShade-GreenTint.svg");
});
test("Tint mapper, should return empty string if no tint map found", async () => {
//Arrange
const { wrapper } = setupMocks(featureListData);
//Act
await wrapper.vm.$nextTick();
const tintSourceImage = wrapper.vm.getTintSourceImage("Rear", "Crazy Rainbow Tint");
//Assert
expect(tintSourceImage).toBe("");
});
test("Should emit updateModelValue, and have correct attributes", async () => {
//Arrange
const { wrapper } = setupMocks(featureListData);
//Act
await wrapper.vm.$nextTick();
const listCard = await wrapper.findComponent({
name: "listCard",
});
wrapper.setValue({ selectedTint: 'Green Tint' });
//Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ selectedTint: 'Green Tint' }]);
expect(listCard.attributes("buttonid")).toBe("Rear-Stationary-Green Tint");
expect(listCard.attributes("groupname")).toBe("Rear-Stationary");
expect(listCard.attributes("isradio")).toBe("true");
});
test("ResetTintAndPartSelections, should reset data elements ", async () => {
//Arrange
const { wrapper } = setupMocks(featureListData);
//Act
await wrapper.vm.$nextTick();
wrapper.setData({selectedTint: {"Rear-Stationary" : 'Green Tint' } });
expect(wrapper.vm.selectedTint).toStrictEqual({"Rear-Stationary": 'Green Tint'});
await wrapper.vm.ResetTintAndPartSelections();
expect(wrapper.vm.selectedTint).toStrictEqual({});
});
});
function setupMocks({ glassNameProp, glassLocationProp, colorAnswersProp, modelValueProp }) {
//Mock store
const mountOptions = getMountOptions({});
mountOptions.propsData = {
glassName: glassNameProp,
glassLocation: glassLocationProp,
colorAnswers: colorAnswersProp,
modelValue: modelValueProp
};
const wrapper = shallowMount(glassPartQuestion, mountOptions);
return { wrapper };
}

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

@ -98,12 +98,12 @@ export default {
return arr; return arr;
}, {}); }, {});
return tintMapByColor; return tintMapByColor;
} }
}, },
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 };
}

29
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");
} }
@ -175,9 +184,9 @@ export default {
store.commit(storeMutations.UPDATE_PARTS, matchedParts); store.commit(storeMutations.UPDATE_PARTS, matchedParts);
// Navigate to the next page. // Navigate to the next page.
this.$router.navigateAfterSave(this.navigationScenarios.SELECTED_PARTS, this.$route);
} }
}, },
}; };
</script> </script>

12
src/mixins/base-mixin.spec.js
View file

@ -26,6 +26,14 @@ describe("baseMixin.js", () => {
expect(store.dispatch).toBeCalledWith(type, payload); expect(store.dispatch).toBeCalledWith(type, payload);
}); });
test("savePageDataToStore, should call store commit", () => {
const mixIn = getMixInInstance({});
mixIn.methods.savePageDataToStore('vehicle-year', {});
expect(store.commit).toBeCalledWith(storeMutations.UPDATE_PAGE_DATA, { page: 'vehicle-year', data: {}});
});
test("computed: storeActions should be equal to import object", () => { test("computed: storeActions should be equal to import object", () => {
// Arrange // Arrange
const mixIn = getMixInInstance({}); const mixIn = getMixInInstance({});
@ -91,9 +99,11 @@ function getMixInInstance({ isDispatchSuccess = true }) {
// Attach mocks to mixin // Attach mocks to mixin
const baseMixIn = baseMixin; const baseMixIn = baseMixin;
baseMixIn.methods.$route = route; baseMixIn.methods.$route = route;
store.dispatch = storeDispatch;
baseMixIn.methods.storeActions = storeActions; baseMixIn.methods.storeActions = storeActions;
baseMixIn.methods.widgetNames = widgetNames; baseMixIn.methods.widgetNames = widgetNames;
store.dispatch = storeDispatch;
store.commit = jest.fn();
return baseMixIn; return baseMixIn;
} }

1
src/router/router-constants/navigation-scenarios.js
View file

@ -4,6 +4,7 @@ const navigationScenarios = {
SELECTED_MAKE: "SELECTED_MAKE", SELECTED_MAKE: "SELECTED_MAKE",
SELECTED_STYLE: "SELECTED_STYLE", SELECTED_STYLE: "SELECTED_STYLE",
CLICKED_BACK: "CLICKED_BACK", CLICKED_BACK: "CLICKED_BACK",
SELECTED_PARTS: "SELECTED_PARTS",
SELECTED_DAMAGE_WITH_SINGLE_PART: "SELECTED_DAMAGE_WITH_SINGLE_PART", SELECTED_DAMAGE_WITH_SINGLE_PART: "SELECTED_DAMAGE_WITH_SINGLE_PART",
SELECTED_DAMAGE_WITH_MULTIPLE_PARTS: "SELECTED_DAMAGE_WITH_MULTIPLE_PARTS", SELECTED_DAMAGE_WITH_MULTIPLE_PARTS: "SELECTED_DAMAGE_WITH_MULTIPLE_PARTS",
SELECTED_DAMAGE_WITH_PART_QUESTIONS: "SELECTED_DAMAGE_WITH_PART_QUESTIONS" SELECTED_DAMAGE_WITH_PART_QUESTIONS: "SELECTED_DAMAGE_WITH_PART_QUESTIONS"

89
src/store/store.spec.js
View file

@ -100,7 +100,7 @@ describe("Mutations", () => {
expect(storeState.applicationUser.eventBus).toEqual([{ EventOne: "ValueOne" }]); expect(storeState.applicationUser.eventBus).toEqual([{ EventOne: "ValueOne" }]);
}); });
it("resetVehicleAndDependencies, should set fields to null", () => { it("resetVehicleState, should set fields to null", () => {
// Arrange // Arrange
const storeState = state; const storeState = state;
@ -120,7 +120,7 @@ describe("Mutations", () => {
expect(storeState.order.vehicle.category).toEqual("CAR"); expect(storeState.order.vehicle.category).toEqual("CAR");
// Act // Act
mutations.resetVehicleAndDependencies(storeState); mutations.resetVehicleState(storeState);
// Expect // Expect
expect(storeState.order.vehicle.year).toEqual(null); expect(storeState.order.vehicle.year).toEqual(null);
@ -132,7 +132,7 @@ describe("Mutations", () => {
}); });
it("resetDamageAndDependencies, should set fields to null", () => { it("resetDamageState, should set fields to null", () => {
// Arrange // Arrange
const storeState = state; const storeState = state;
@ -154,7 +154,7 @@ describe("Mutations", () => {
expect(storeState.order.damage.rearGlassToReplace).toEqual("Slider"); expect(storeState.order.damage.rearGlassToReplace).toEqual("Slider");
// Act // Act
mutations.resetDamageAndDependencies(storeState); mutations.resetDamageState(storeState);
// Expect // Expect
expect(storeState.order.damage.isRepair).toEqual(null); expect(storeState.order.damage.isRepair).toEqual(null);
@ -166,6 +166,50 @@ describe("Mutations", () => {
}); });
it("Updates number of chips in state", () => {
// Arrange
const storeState = state;
// Act
mutations.updateNumberOfChips(storeState, "1");
// Assert
expect(storeState.order.damage.numberOfChips).toEqual("1");
});
it("Updates glass to replace in state", () => {
// Arrange
const storeState = state;
// Act
mutations.updateGlassToReplace(storeState, ["Windshield"]);
// Assert
expect(storeState.order.damage.glassToReplace).toEqual(["Windshield"]);
});
it("Updates Parts in state", () => {
// Arrange
const storeState = state;
// Act
mutations.updateParts(storeState, { 'Windshield-Single': 'PARTNUM101'});
// Assert
expect(storeState.order.lineItems.glassParts).toEqual({ 'Windshield-Single': 'PARTNUM101'});
});
it("Updates page data in state", () => {
// Arrange
const storeState = state;
// Act
mutations.updatePageData(storeState, { page: 'vehicle-year', data: {} });
// Assert
expect(storeState.applicationUser.pageData['vehicle-year']).toEqual({});
});
}); });
describe("Actions", () => { describe("Actions", () => {
@ -480,4 +524,41 @@ describe("Getters", () => {
}); });
it("Damage getter, should return damage data", () => {
// Arrange
const storeState = state;
// Act
mutations.updateGlassToReplace(storeState, ["Rear"]);
// Assert
expect(getters.damage(storeState).glassToReplace).toEqual(["Rear"]);
});
it("lineItems getter, should return lineItem data", () => {
// Arrange
const storeState = state;
// Act
mutations.updateParts(storeState, {"Rear-Stationary": 'PART101'});
// Assert
expect(getters.lineItems(storeState).glassParts).toEqual({"Rear-Stationary": 'PART101'});
});
it("PageData getter, should return page data for specific page", () => {
// Arrange
const storeState = state;
// Act
mutations.updatePageData(storeState, { page: 'vehicle-year', data: {} });
// Assert
expect(getters.pageData(storeState)('vehicle-year')).toEqual({});
});
}); });

8
src/ux-components/list-button-horizontal/list-button-horizontal.vue
View file

@ -157,9 +157,11 @@ export default {
width: 100%; width: 100%;
color: $gray-600; color: $gray-600;
&:hover { &:hover {
box-shadow: 0 0 0 4px $blue-300; @include media-breakpoint-up(sm) {
cursor: pointer; box-shadow: 0 0 0 4px $blue-300;
z-index: 4 !important; cursor: pointer;
z-index: 4 !important;
}
} }
+ p { + p {
display: none; display: none;

5
src/ux-components/list-card/list-card.spec.js
View file

@ -188,7 +188,7 @@ describe("list-card.vue", () => {
// Assert // Assert
const label = wrapper.find("label"); const label = wrapper.find("label");
expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-2"]); expect(label.classes()).toEqual(["d-flex", "w-100", "align-items-center", "px-2", "h-100", "flex-column", "pt-4", "pb-3"]);
}); });
it("Should emit button value on click", async () => { it("Should emit button value on click", async () => {
@ -204,11 +204,12 @@ describe("list-card.vue", () => {
isRequired: true, isRequired: true,
isWide: false, isWide: false,
modelValue: ["List Card Checkbox"], modelValue: ["List Card Checkbox"],
buttonID: 'list-card-id'
}, },
}); });
wrapper.vm.handleCheckChange(); wrapper.vm.handleCheckChange();
// Assert // Assert
expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean}]); expect(wrapper.emitted()["isCheckedChanged"][0]).toEqual([{value: "List Card Checkbox", checkValue: Boolean, buttonId: 'list-card-id'}]);
}); });
it("Should set checkValue data if selectedButtonIDs has value(s)", async () => { it("Should set checkValue data if selectedButtonIDs has value(s)", async () => {

8
src/ux-components/list-card/list-card.vue
View file

@ -91,7 +91,7 @@ export default {
} }
return classes; return classes;
} else { } else {
return "flex-column pt-4 pb-2"; return "flex-column pt-4 pb-3";
} }
}, },
}, },
@ -139,8 +139,10 @@ export default {
max-width: 100%; max-width: 100%;
} }
&:hover { &:hover {
box-shadow: 0px 0px 0px 4px $blue-300; @include media-breakpoint-up(sm) {
border: 1px solid transparent; box-shadow: 0px 0px 0px 4px $blue-300;
border: 1px solid transparent;
}
} }
input[type="checkbox"], input[type="checkbox"],
input[type="radio"] { input[type="radio"] {