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/address-poc/address-poc.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.
testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"],
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 -->
<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">
<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 class="w-100 d-flex justify-content-center">
<fieldset class="w-100" :class="getFieldSetClasses" :role="isMultiSelect ? 'group' : 'radiogroup'" :aria-labelledby="groupName ? groupName + '-radio-group' : ''">
@ -153,8 +153,7 @@ export default {
</script>
<style lang="scss" scoped>
.button_question {
color: $black;
.button-question-overflow {
height: calc(100vh - 280px);
.overflow-scroll {
@ -163,4 +162,7 @@ export default {
-webkit-overflow-scrolling: touch;
}
}
.button-question {
color: $black;
}
</style>

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

@ -20,7 +20,6 @@ export default {
isRequired: Boolean,
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
iconURL: String,
hasError: Boolean,
}
};

4
src/global-methods.js
View file

@ -10,10 +10,6 @@ export default {
AppName: "FixMyGlass",
});
if (endpoint.toLowerCase().includes("/parts/")){
apiGatewayUrl = "https://localhost:44335";
}
axios({
method: method,
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 { navigationScenarios } from "@/router/router-constants/navigation-scenarios.js";
import { vehicleCategories } from "@/constants/vehicle-categories.js";
import { fmgPageValues } from "@/router/router-constants/fmgPage-values";
import baseMixin from "@/mixins/base-mixin";
export function getMountOptions(mockData) {
@ -9,19 +10,20 @@ export function getMountOptions(mockData) {
const mocks = {};
//this is mocking if you use the mixin directly(baseMixin.methods.dispatchNonBlockingStoreAction) vs this.dispatchNonBlockingStoreAction
baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation((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 (mockData.actionList !== undefined) {
baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation((actionName) => {
let actionFilterResult = mockData.actionList.filter(
(x) => x.actionName == actionName
);
if (actionFilterResult.length > 0 && actionFilterResult.length === 1) {
return Promise.resolve({
data: actionFilterResult[0].data,
});
}
});
}
mocks.dispatchNonBlockingStoreAction = jest.fn();
mocks.dispatchNonBlockingStoreAction.mockImplementation((actionName) => {
let actionFilterResult = mockData.actionList.filter(
@ -40,10 +42,13 @@ export function getMountOptions(mockData) {
mocks.storeMutations = storeMutations;
mocks.navigationScenarios = navigationScenarios;
mocks.vehicleCategories = vehicleCategories;
mocks.fmgPageValues = fmgPageValues;
// Mock $store and $router when accessing this.$store/$router
mocks.$store = mockData.store;
mocks.$router = mockData.router;
mocks.$route = mockData.route;
const global = {
mocks: mocks,

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

@ -33,7 +33,6 @@
placeholderText="Text Input Label"
inputID="test-text-input"
hasIcon
imgUrl="~@/assets/img/icons/spinner.svg"
/>
</div>
</div>
@ -46,7 +45,6 @@
inputID="test-text-input"
hasIcon
iconRight
imgUrl="~@/assets/img/icons/spinner.svg"
/>
</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
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import {storeMutations} from "@/constants/store-mutations";
import {storeActions} from "@/constants/store-actions";
import store from "@/store";
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
import { fetchCmsContentForPage } from "@/helpers/cms-content-helper";
import { settleAllPromises } from "@/helpers/layout-helper";
import {storeMutations} from "@/constants/store-mutations";
import {storeActions} from "@/constants/store-actions";
import store from "@/store";
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 { getMountOptions } from "@/helpers/unit-test-helper.js";
import store from "@/store";
jest.mock("@/store", () => { return {}; }, {virtual: true});
jest.mock("@/store", () => { return {}; }, { virtual: true });
describe("damage-location-question.vue", () => {
test("Selected location option is emitted upon selection.", async () => {
//Arrange
const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
const locationToSelect = ["Backseat"];
//Act
wrapper.setValue({ modelValue: locationToSelect });
await wrapper.vm.$nextTick();
//Assert
expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
test("Selected location option is emitted upon selection.", async () => {
//Arrange
const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
const locationToSelect = ["Backseat"];
//Act
wrapper.setValue({ modelValue: locationToSelect });
await wrapper.vm.$nextTick();
//Assert
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", () => {
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' } ])
});
});
//Mock props
mountOptions.propsData = {
modelValue: modelValueProp,
isMultiSelect: isMultiSelect,
};
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,
},
});
//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 };
}
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", () => {
// test("Page header is initailized with api data", async (done) => {
// //Arrange
// const pageHeaderWidgetHeaderText = "Select Damage";
// const { wrapper, apiPromise } = setupMocks({
// pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
// });
describe("vehicle-damage.vue", () => {
test("Page header is initailized with api data", async (done) => {
//Arrange
const pageHeaderWidgetHeaderText = "Select Damage";
const { wrapper, apiPromise } = setupMocks({
pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
});
// //Act
// vehicleDamage.beforeRouteEnter.call(
// wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } },
// undefined,
// (c) => c(wrapper.vm)
// );
//Act
vehicleDamage.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-damage" } },
undefined,
(c) => c(wrapper.vm)
);
// //Assert
// apiPromise.finally(() => {
// expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
// pageHeaderWidgetHeaderText
// );
// done();
// });
// });
// });
//Assert
apiPromise.finally(() => {
expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(
pageHeaderWidgetHeaderText
);
done();
});
});
});
// describe("vehicle-damage.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,
// });
describe("vehicle-damage.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
// vehicleDamage.beforeRouteEnter.call(
// wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } },
// undefined,
// (c) => c(wrapper.vm)
// );
//Act
vehicleDamage.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-damage" } },
undefined,
(c) => c(wrapper.vm)
);
// //Assert
// apiPromise.finally(() => {
// expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(
// SiteHeaderWidget
// );
// done();
// });
// });
// });
//Assert
apiPromise.finally(() => {
expect(funnelHeader.methods.initializeComponent).toHaveBeenCalledWith(
SiteHeaderWidget
);
done();
});
});
});
// describe("vehicle-damage.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,
// });
describe("vehicle-damage.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
// vehicleDamage.beforeRouteEnter.call(
// wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } },
// undefined,
// (c) => c(wrapper.vm)
// );
//Act
vehicleDamage.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-damage" } },
undefined,
(c) => c(wrapper.vm)
);
// //Assert
// apiPromise.finally(() => {
// expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(
// VehicleBannerWidget
// );
// done();
// });
// });
// });
//Assert
apiPromise.finally(() => {
expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(
VehicleBannerWidget
);
done();
});
});
});
// describe("vehicle-damage.vue", () => {
// test("CarId set, arePagePrerequisitesValid should be true ", async () => {
// //Arrange
// const { wrapper } = setupMocks({});
describe("vehicle-damage.vue", () => {
test("CarId set, arePagePrerequisitesValid should be true ", async () => {
//Arrange
const { wrapper } = setupMocks({});
// //Act
// vehicleDamage.beforeRouteEnter.call(
// wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } },
// undefined,
// (c) => c(wrapper.vm)
// );
//Act
vehicleDamage.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-damage" } },
undefined,
(c) => c(wrapper.vm)
);
// let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
// await nextTick();
let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
await nextTick();
// //Assert
// expect(arePagePrerequisitesValid).toBe(true);
// });
// });
//Assert
expect(arePagePrerequisitesValid).toBe(true);
});
});
// describe("vehicle-damage.vue", () => {
// test("Call invalidation, ResetPartsAndDeps should be called", async () => {
describe("vehicle-damage.vue", () => {
test("Call invalidation, ResetPartsAndDeps should be called", async () => {
// //Arrange
// const { wrapper } = setupMocks({});
//Arrange
const { wrapper } = setupMocks({});
// //Act
// vehicleDamage.beforeRouteEnter.call(
// wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } },
// undefined,
// (c) => c(wrapper.vm)
// );
//Act
vehicleDamage.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-damage" } },
undefined,
(c) => c(wrapper.vm)
);
// wrapper.vm.resetDependentState();
wrapper.vm.resetDependentState();
// //Assert
// expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_AND_DEPS)
//Assert
expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_STATE)
// });
// });
});
});
// describe("vehicle-damage.vue", () => {
// test("BackButtonAction triggers a router.navigate change", async () => {
describe("vehicle-damage.vue", () => {
test("BackButtonAction triggers a router.navigate change", async () => {
// //Arrange
// const { wrapper } = setupMocks({});
//Arrange
const { wrapper } = setupMocks({});
// //Act
// vehicleDamage.beforeRouteEnter.call(
// wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } },
// undefined,
// (c) => c(wrapper.vm)
// );
//Act
vehicleDamage.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-damage" } },
undefined,
(c) => c(wrapper.vm)
);
// wrapper.vm.backButtonAction();
wrapper.vm.backButtonAction();
// //Assert
// expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
//Assert
expect(wrapper.vm.$router.navigate).toHaveBeenCalled();
// });
// });
});
});
describe("vehicle-damage.vue", () => {
test("ForwardButtonAction triggers a router.navigate change and saves selections to store", async () => {
//Arrange
const partsData = { partsOrQuestions: [{
glassName: "Single",
glassLocation: "Windshield",
parts: null,
partQuestions: [{
const partsData = {
partsOrQuestions: [{
glassName: "Single",
glassLocation: "Windshield",
parts: null,
partQuestions: [{
questionSequence: 1,
questionText: "Is your vehicle equipped with a heated steering wheel?",
answers: [{
answerText: "Yes",
nextQuestionSequence: null,
answerResult: "FW04957"
},
{
answerText: "No",
nextQuestionSequence: 2,
answerResult: ""
}]},
answerText: "Yes",
nextQuestionSequence: null,
answerResult: "FW04957"
},
{
answerText: "No",
nextQuestionSequence: 2,
answerResult: ""
}]
},
{
questionSequence: 2,
questionText: "Is your vehicle equipped with a remote start?",
answers: [{
answerText: "Yes",
nextQuestionSequence: null,
answerResult: "FW04181"
},
{
answerText: "No",
nextQuestionSequence: null,
answerResult: "FW04179"
}]}]}]};
answerText: "Yes",
nextQuestionSequence: null,
answerResult: "FW04181"
},
{
answerText: "No",
nextQuestionSequence: null,
answerResult: "FW04179"
}]
}]
}]
};
const { wrapper } = setupMocks({
pageHeaderWidgetHeaderText: "",
mountOptionsMockData: {
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,
selectedWindshieldReplaceOptions : ["Single"],
// selectedDriverSideReplaceOptions: ["Back"],
// selectedPassengerSideReplaceOptions: ["Quarter"],
wrapper.vm.selectedWindshieldOptions = {
selectedWindshieldChipCount: null,
selectedWindshieldReplaceOptions: ["Single"],
selectedWindshieldDamageType: ["Replace"]
};
//wrapper.vm.selectedDamageLocations = ["Windshield", "SideDoor", "RearWindow"];
wrapper.vm.selectedDamageLocations = ["Windshield"];
//wrapper.vm.selectedRearReplaceOptions = ["Stationary"];
// const expectedGlassToReplace = [{location: "Windshield", name: "Single"}, {location: "Driver", name: "Back"},
// {location: "Passenger", name: "Quarter"}, {location: "Rear", name: "Stationary"}];
const expectedGlassToReplace = [{location: "Windshield", name: "Single"}];
const expectedGlassToReplace = [{ location: "Windshield", name: "Single" }];
//Act
vehicleDamage.beforeRouteEnter.call(
@ -259,7 +259,7 @@ describe("vehicle-damage.vue", () => {
);
await wrapper.vm.forwardButtonAction();
//Assert
expect(wrapper.vm.$router.navigateAfterSave).toHaveBeenCalled();
expect(wrapper.vm.selectedGlassToReplace()).toEqual(expectedGlassToReplace);
@ -268,135 +268,135 @@ describe("vehicle-damage.vue", () => {
});
});
// describe("vehicle-damage.vue", () => {
// test("isWindshieldDamageLocation is true when windshield is selected", async () => {
describe("vehicle-damage.vue", () => {
test("isWindshieldDamageLocation is true when windshield is selected", async () => {
// //Arrange
// const { wrapper } = setupMocks({});
//Arrange
const { wrapper } = setupMocks({});
// //Act
// vehicleDamage.beforeRouteEnter.call(
// wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } },
// undefined,
// (c) => c(wrapper.vm)
// );
//Act
vehicleDamage.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-damage" } },
undefined,
(c) => c(wrapper.vm)
);
// wrapper.vm.selectedDamageLocations = ["Windshield"];
wrapper.vm.selectedDamageLocations = ["Windshield"];
// //Assert
// expect(wrapper.vm.isWindshieldDamageLocation).toEqual(true);
// });
// });
//Assert
expect(wrapper.vm.isWindshieldDamageLocation).toEqual(true);
});
});
// describe("vehicle-damage.vue", () => {
// test("isSideDoorDamageLocation is true Side door is selected", async () => {
describe("vehicle-damage.vue", () => {
test("isSideDoorDamageLocation is true Side door is selected", async () => {
// //Arrange
// const { wrapper } = setupMocks({});
//Arrange
const { wrapper } = setupMocks({});
// //Act
// vehicleDamage.beforeRouteEnter.call(
// wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } },
// undefined,
// (c) => c(wrapper.vm)
// );
//Act
vehicleDamage.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-damage" } },
undefined,
(c) => c(wrapper.vm)
);
// wrapper.vm.selectedDamageLocations = ["Sidedoor"];
wrapper.vm.selectedDamageLocations = ["Sidedoor"];
// //Assert
// expect(wrapper.vm.isSideDoorDamageLocation).toEqual(true);
// });
// });
//Assert
expect(wrapper.vm.isSideDoorDamageLocation).toEqual(true);
});
});
// describe("vehicle-damage.vue", () => {
// test("isRearWindowDamageLocation is true if Rear Window damage is selected", async () => {
describe("vehicle-damage.vue", () => {
test("isRearWindowDamageLocation is true if Rear Window damage is selected", async () => {
// //Arrange
// const { wrapper } = setupMocks({});
//Arrange
const { wrapper } = setupMocks({});
// //Act
// vehicleDamage.beforeRouteEnter.call(
// wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } },
// undefined,
// (c) => c(wrapper.vm)
// );
//Act
vehicleDamage.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-damage" } },
undefined,
(c) => c(wrapper.vm)
);
// wrapper.vm.selectedDamageLocations = ["RearWindow"];
wrapper.vm.selectedDamageLocations = ["RearWindow"];
// //Assert
// expect(wrapper.vm.isRearWindowDamageLocation).toEqual(true);
// });
// });
//Assert
expect(wrapper.vm.isRearWindowDamageLocation).toEqual(true);
});
});
// describe("vehicle-damage.vue", () => {
// test("isWindshieldRepair is true if windshield repair is selected", async () => {
describe("vehicle-damage.vue", () => {
test("isWindshieldRepair is true if windshield repair is selected", async () => {
// //Arrange
// const { wrapper } = setupMocks({});
//Arrange
const { wrapper } = setupMocks({});
// //Act
// vehicleDamage.beforeRouteEnter.call(
// wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } },
// undefined,
// (c) => c(wrapper.vm)
// );
//Act
vehicleDamage.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-damage" } },
undefined,
(c) => c(wrapper.vm)
);
// wrapper.vm.selectedDamageLocations = ["Windshield"];
// wrapper.vm.selectedWindshieldOptions = { selectedWindshieldDamageType: ["Repair"]};
wrapper.vm.selectedDamageLocations = ["Windshield"];
wrapper.vm.selectedWindshieldOptions = { selectedWindshieldDamageType: ["Repair"] };
// //Assert
// expect(wrapper.vm.isWindshieldRepair).toEqual(true);
// });
// });
//Assert
expect(wrapper.vm.isWindshieldRepair).toEqual(true);
});
});
// describe("vehicle-damage.vue", () => {
// test("isDriverSideReplace is true if side door driver is selected", async () => {
describe("vehicle-damage.vue", () => {
test("isDriverSideReplace is true if side door driver is selected", async () => {
// //Arrange
// const { wrapper } = setupMocks({});
//Arrange
const { wrapper } = setupMocks({});
// //Act
// vehicleDamage.beforeRouteEnter.call(
// wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } },
// undefined,
// (c) => c(wrapper.vm)
// );
//Act
vehicleDamage.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-damage" } },
undefined,
(c) => c(wrapper.vm)
);
// wrapper.vm.selectedDamageLocations = ["Sidedoor"];
// wrapper.vm.sideDoorOptionsData = { selectedDoorSides: ["DriverSide"]};
wrapper.vm.selectedDamageLocations = ["Sidedoor"];
wrapper.vm.sideDoorOptionsData = { selectedDoorSides: ["DriverSide"] };
// //Assert
// expect(wrapper.vm.isDriverSideReplace).toEqual(true);
// });
// });
//Assert
expect(wrapper.vm.isDriverSideReplace).toEqual(true);
});
});
// describe("vehicle-damage.vue", () => {
// test("isPassengerSideReplace is true if side door passenger selected", async () => {
describe("vehicle-damage.vue", () => {
test("isPassengerSideReplace is true if side door passenger selected", async () => {
// //Arrange
// const { wrapper } = setupMocks({});
//Arrange
const { wrapper } = setupMocks({});
// //Act
// vehicleDamage.beforeRouteEnter.call(
// wrapper.vm,
// { query: { fmgPage: "vehicle-damage" } },
// undefined,
// (c) => c(wrapper.vm)
// );
//Act
vehicleDamage.beforeRouteEnter.call(
wrapper.vm,
{ query: { fmgPage: "vehicle-damage" } },
undefined,
(c) => c(wrapper.vm)
);
// wrapper.vm.selectedDamageLocations = ["Sidedoor"];
// wrapper.vm.sideDoorOptionsData = { selectedDoorSides: ["PassengerSide"]};
wrapper.vm.selectedDamageLocations = ["Sidedoor"];
wrapper.vm.sideDoorOptionsData = { selectedDoorSides: ["PassengerSide"] };
// //Assert
// expect(wrapper.vm.isPassengerSideReplace).toEqual(true);
// });
// });
//Assert
expect(wrapper.vm.isPassengerSideReplace).toEqual(true);
});
});
describe("vehicle-damage.vue", () => {
test("Call invalidation, ResetPartsAndDeps should be called", async () => {
@ -509,14 +509,14 @@ function setupMocks({
const sideDoorOptionsWrapper = wrapper.findComponent({ name: "sideDoorOptions" });
sideDoorOptionsWrapper.vm.initializeComponent =
sideDoorOptions.methods.initializeComponent;
sideDoorOptions.methods.initializeComponent;
const windshieldOptionsWrapper = wrapper.findComponent({
name: "windshieldOptions",
});
windshieldOptionsWrapper.vm.initializeComponent =
windshieldOptions.methods.initializeComponent;
windshieldOptions.methods.initializeComponent;
const funnelSubHeaderWrapper = wrapper.findComponent({
name: "funnelSubHeader",
@ -528,13 +528,13 @@ function setupMocks({
name: "replaceOptionsQuestion",
});
backGlassOptionsWrapper.vm.initializeComponent =
replaceOptionsQuestion.methods.initializeComponent;
replaceOptionsQuestion.methods.initializeComponent;
const damageLocationQuestionWrapper = wrapper.findComponent({
name: "damageLocationQuestion",
});
damageLocationQuestionWrapper.vm.initializeComponent =
damageLocationQuestion.methods.initializeComponent;
damageLocationQuestion.methods.initializeComponent;
const funnelFooterWrapper = wrapper.findComponent({
name: "funnelFooter",

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

@ -120,7 +120,6 @@ export default {
return store.getters.vehicle.carId !== null;
},
resetDependentState() {
// Invokes
store.dispatch(storeActions.RESET_PARTS_STATE);
},
backButtonAction() {
@ -143,10 +142,8 @@ export default {
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,
{ carId: store.getters.vehicle.carId, glassArray: this.selectedGlassToReplace()}, false);
console.log(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 tintMapByColor;
}
},
methods: {
initializeComponent(cmsContent, initialData) {
initializeComponent(cmsContent) {
this.glassColorQuestion = cmsContent.ColorQuestionWidget.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 alert from "@/ux-components/alert/alert";
// Supporting Files
import {fetchCmsContentForPage} from "@/helpers/cms-content-helper";
import {settleAllPromises} from "@/helpers/layout-helper";
import {fmgPageValues} from "@/router/router-constants/fmgPage-values";
import {storeMutations} from "@/constants/store-mutations";
import {
fetchCmsContentForPage
} from "@/helpers/cms-content-helper";
import {
settleAllPromises
} from "@/helpers/layout-helper";
import {
fmgPageValues
} from "@/router/router-constants/fmgPage-values";
import {
storeMutations
} from "@/constants/store-mutations";
import store from "@/store";
export default {
name: "vehicle-parts",
async beforeRouteEnter(to, from, next) {
@ -66,6 +73,7 @@ export default {
);
// Glass Part Question dynamic component
Object.keys(vm.$refs)
.filter((r) => r.includes(vm.refPrefix) && vm.$refs[r][0] !== undefined)
.forEach((c) =>
@ -74,12 +82,14 @@ export default {
FeatureQuestionWidget: resultMap.cmsContent.FeatureQuestionWidget,
})
);
// Set alertData for the page alert. These use props so we don't call
// initializeComponent here.
vm.alertWidgetData = {
copy: resultMap.cmsContent.AlertWidget.BodyText,
headline: resultMap.cmsContent.AlertWidget.HeadlineText
};
});
},
data() {
@ -99,7 +109,7 @@ export default {
},
computed: {
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
const mappedData = partsData.partsOrQuestions.map(g => {
@ -142,7 +152,6 @@ export default {
this.$route
);
},
forwardButtonAction() {
const selectedGlassPartNumbers = [];
const matchedParts = [];
@ -167,7 +176,7 @@ export default {
}
// 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");
}
@ -175,9 +184,9 @@ export default {
store.commit(storeMutations.UPDATE_PARTS, matchedParts);
// 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);
});
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", () => {
// Arrange
const mixIn = getMixInInstance({});
@ -91,9 +99,11 @@ function getMixInInstance({ isDispatchSuccess = true }) {
// Attach mocks to mixin
const baseMixIn = baseMixin;
baseMixIn.methods.$route = route;
store.dispatch = storeDispatch;
baseMixIn.methods.storeActions = storeActions;
baseMixIn.methods.widgetNames = widgetNames;
store.dispatch = storeDispatch;
store.commit = jest.fn();
return baseMixIn;
}

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

@ -4,6 +4,7 @@ const navigationScenarios = {
SELECTED_MAKE: "SELECTED_MAKE",
SELECTED_STYLE: "SELECTED_STYLE",
CLICKED_BACK: "CLICKED_BACK",
SELECTED_PARTS: "SELECTED_PARTS",
SELECTED_DAMAGE_WITH_SINGLE_PART: "SELECTED_DAMAGE_WITH_SINGLE_PART",
SELECTED_DAMAGE_WITH_MULTIPLE_PARTS: "SELECTED_DAMAGE_WITH_MULTIPLE_PARTS",
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" }]);
});
it("resetVehicleAndDependencies, should set fields to null", () => {
it("resetVehicleState, should set fields to null", () => {
// Arrange
const storeState = state;
@ -120,7 +120,7 @@ describe("Mutations", () => {
expect(storeState.order.vehicle.category).toEqual("CAR");
// Act
mutations.resetVehicleAndDependencies(storeState);
mutations.resetVehicleState(storeState);
// Expect
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
const storeState = state;
@ -154,7 +154,7 @@ describe("Mutations", () => {
expect(storeState.order.damage.rearGlassToReplace).toEqual("Slider");
// Act
mutations.resetDamageAndDependencies(storeState);
mutations.resetDamageState(storeState);
// Expect
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", () => {
@ -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%;
color: $gray-600;
&:hover {
box-shadow: 0 0 0 4px $blue-300;
cursor: pointer;
z-index: 4 !important;
@include media-breakpoint-up(sm) {
box-shadow: 0 0 0 4px $blue-300;
cursor: pointer;
z-index: 4 !important;
}
}
+ p {
display: none;

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

@ -188,7 +188,7 @@ describe("list-card.vue", () => {
// Assert
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 () => {
@ -204,11 +204,12 @@ describe("list-card.vue", () => {
isRequired: true,
isWide: false,
modelValue: ["List Card Checkbox"],
buttonID: 'list-card-id'
},
});
wrapper.vm.handleCheckChange();
// 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 () => {

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

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