+
I AM DAMAGE LOCATION QUESTION
groupName is: {{groupName}}
@@ -26,45 +26,24 @@ export default ({
return {
questionText: String,
answersFromCms: Array,
- answersToDisplay: Array,
- answersToDisplayTemp: [
- {
- Name: 'windshield-damage',
- Text: 'Windshield',
- AnswerImageUrl: 'windshield-damage.svg',
- ImageId: 'windshield-damage',
- },
- {
- Name: 'side-window-damage-left-all',
- Text: 'Side Door',
- AnswerImageUrl: 'side-window-damage-left-all.svg',
- ImageId: 'side-window-damage-left-all',
- },
- {
- Name: 'back-glass-damage',
- Text: 'Rear Window',
- AnswerImageUrl: 'back-glass-damage.svg',
- ImageId: 'back-glass-damage',
- }
- ],
- damageOptions: Array,
+ damageOptions: Object,
groupName: String,
}
},
props: {
isMultiSelect: Boolean,
+ modelValue: Array,
isAvailable: Boolean,
filterByVehicleCategory: Boolean,
- modelValue: String,
validationRules: Array,
name: String,
},
methods: {
- initializeComponent(cmsContent, damageOptions){
+ initializeComponent(cmsContent, damageOptions, groupName){
console.log('cmsContent: ', cmsContent)
console.log('damageOptions: ', damageOptions)
- this.groupName = cmsContent.Name;
+ this.groupName = groupName;
this.questionText = cmsContent.QuestionText;
this.answersFromCms = cmsContent.Answers;
this.damageOptions = damageOptions;
@@ -89,18 +68,31 @@ export default ({
return rulesArray;
},
},
- mounted(){
- // console.log('this.answersFromCms: ', this.answersFromCms)
- // this.answersToDisplay = this.answersFromCms.filter(ans => {
- // const name = ans.Name.split('-');
- // return this.filterByVehicleCategory ? name[0].toUpperCase() === store.getters.vehicle.category : name[0].toUpperCase() === store.getters.vehicle.category && this.damageOptions.includes(name[1]);
- // });
- // console.log('this.answersToDisplay: ', this.answersToDisplay)
- },
- watch: {
- modelValue(val) {
- this.$emit("update:modelValue", val);
- }
+ computed: {
+ selectedValues: {
+ get: function() {
+ return this.modelValue;
+ },
+ set: function(newValue) {
+ this.$emit("update:modelValue", newValue);
+ }
+ },
+ damageOptionsMap(){
+ return {
+ Windshield: true,
+ SideDoor: this.damageOptions.driverSideOptions.availableReplacementOptions || this.damageOptions.passengerSideOptions.availableReplacementOption ? true : false,
+ RearWindow: this.damageOptions.backGlassOptions.availableReplacementOption ? true : false,
+ }
+ },
+ answersToDisplay(){
+ return Array.isArray(this.answersFromCms)
+ ? this.answersFromCms.filter(ans =>
+ {
+ const name = ans.Name.split('-');
+ return name[0].toUpperCase() === store.getters.vehicle.category && this.damageOptionsMap[name[1]];
+ })
+ : [];
+ },
},
components: {
buttonQuestion,
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
new file mode 100644
index 000000000..103aecd4c
--- /dev/null
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js
@@ -0,0 +1,76 @@
+import { shallowMount } from "@vue/test-utils";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import { getMountOptions } from "@/helpers/unit-test-helper.js";
+import store from "@/store";
+jest.mock("@/store", () => { return {}; }, {virtual: true});
+
+describe("replace-options-question.vue", () => {
+ test("Selected damage option is emitted upon selection.", async () => {
+
+ //Arrange
+ const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] });
+ const damageToSelect = ["Backseat"];
+
+ //Act
+ wrapper.setValue({ modelValue: damageToSelect });
+ await wrapper.vm.$nextTick();
+
+ //Assert
+ expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{modelValue: ["Backseat"]}]);
+ });
+ });
+
+ describe("replace-options-question.vue", () => {
+ test("Answers to display filtered by data from api.", async () => {
+
+ //Arrange
+ const { wrapper, cmsContent, replaceOptions } = setupMocks({ dataFromStoreApi: ["Windshield", "FrontDoor"]});
+
+ //Act
+ replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
+
+ //Assert
+ expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'car-Windshield' }, { Name: 'car-FrontDoor' } ])
+ });
+ });
+
+ function setupMocks({
+ modelValueProp = ["Windshield"],
+ isAvailale = true,
+ isMultiSelect = false,
+ filterByVehicleCategory = false,
+ groupName = "damageQuestion",
+ cmsQuestionText = "CMS text goes here",
+ cmsAnswers = [{Name: "car-Windshield"}, {Name: "car-BackDoor"}, {Name: "car-FrontDoor"}],
+ 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,
+ isAvailable: isAvailale,
+ isMultiSelect: isMultiSelect,
+ filterByVehicleCategory: filterByVehicleCategory
+ };
+
+ const wrapper = shallowMount(replaceOptionsQuestion, mountOptions);
+
+ //Mock CMS content
+ const cmsContent = {
+ groupName: groupName,
+ QuestionText: cmsQuestionText,
+ Answers: cmsAnswers,
+ };
+ const replaceOptions = dataFromStoreApi;
+ return { wrapper, cmsContent, replaceOptions };
+ }
\ No newline at end of file
diff --git a/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
new file mode 100644
index 000000000..2c46d96fd
--- /dev/null
+++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.vue
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js
index a6688a9af..49df756c2 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.spec.js
+++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js
@@ -1,125 +1,256 @@
-import { shallowMount, flushPromises } from "@vue/test-utils";
-import { getMountOptions } from "@/helpers/unit-test-helper.js";
+// Components
import vehicleDamage from "@/layouts/vehicle-damage/vehicle-damage.vue";
import funnelHeader from "@/common-components/funnel-header/funnel-header";
import vehicleBanner from "@/common-components/vehicle-banner/vehicle-banner";
import funnelSubHeader from "@/common-components/funnel-sub-header/funnel-sub-header";
+import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question";
+import damageLocationQuestion from "@/layouts/vehicle-damage/damage-location-question/damage-location-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 store from "@/store";
// Mock our module for promises.
jest.mock("@/helpers/layout-helper.js", () => ({
- settleAllPromises: jest.fn(),
+ settleAllPromises: jest.fn(),
+}));
+
+// Mock fetchCmsContentForPage
+jest.mock("@/helpers/cms-content-helper", () => ({
+ fetchCmsContentForPage: jest.fn(),
+}));
+
+// Mock Store
+jest.mock("@/store", () => ({
+ commit: jest.fn(),
+ dispatch: jest.fn(),
+ getters: {
+ vehicle: {
+ carId: "C00000000",
+ },
+ },
}));
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 });
+ const { wrapper, apiPromise } = setupMocks({
+ pageHeaderWidgetHeaderText: pageHeaderWidgetHeaderText,
+ });
//Act
- vehicleDamage.beforeRouteEnter.call(wrapper.vm, { query: { fmgPage: "vehicle-damage" } }, undefined, (c) => c(wrapper.vm));
+ vehicleDamage.beforeRouteEnter.call(
+ wrapper.vm,
+ { query: { fmgPage: "vehicle-damage" } },
+ undefined,
+ (c) => c(wrapper.vm)
+ );
//Assert
apiPromise.finally(() => {
- expect(funnelSubHeader.methods.initializeComponent).toHaveBeenCalledWith(pageHeaderWidgetHeaderText);
+ 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});
-
- //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();
- });
+ 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("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));
-
- //Assert
- apiPromise.finally(() => {
- expect(vehicleBanner.methods.initializeComponent).toHaveBeenCalledWith(VehicleBannerWidget);
- done();
- });
+ //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();
});
});
+});
+
+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)
+ );
+
+ //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({});
+
+ //Act
+ vehicleDamage.beforeRouteEnter.call(
+ wrapper.vm,
+ { query: { fmgPage: "vehicle-damage" } },
+ undefined,
+ (c) => c(wrapper.vm)
+ );
+
+ let arePagePrerequisitesValid = wrapper.vm.arePagePrerequisitesValid();
+ await nextTick();
+
+ //Assert
+ expect(arePagePrerequisitesValid).toBe(true);
+ });
+});
+
+describe("vehicle-damage.vue", () => {
+ test("Call invalidation, ResetPartsAndDeps should be called", async () => {
+
+ //Arrange
+ const { wrapper } = setupMocks({});
+
+ //Act
+ vehicleDamage.beforeRouteEnter.call(
+ wrapper.vm,
+ { query: { fmgPage: "vehicle-damage" } },
+ undefined,
+ (c) => c(wrapper.vm)
+ );
+
+ wrapper.vm.resetDependentState();
+
+ //Assert
+ expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_AND_DEPS)
+
+ });
+});
function setupMocks({
- pageHeaderWidgetHeaderText = {},
- mountOptionsMockData = {},
- }) {
-
- //Mock api responses
- baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
- baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation(() => {
- return Promise.resolve({ data: ['Front Window', 'Back Window', 'Side Window'] });
+ pageHeaderWidgetHeaderText = {},
+ mountOptionsMockData = {},
+}) {
+ //Mock api responses
+ baseMixin.methods.dispatchNonBlockingStoreAction = jest.fn();
+ baseMixin.methods.dispatchNonBlockingStoreAction.mockImplementation(() => {
+ return Promise.resolve({
+ driverSideOptions: {
+ availableReplacementOptions: ["Front", "Back", "Side"],
+ }
});
- 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",
- },
+ });
+ const apiResponses = {
+ cmsContent: {
+ FunnelSubHeaderWidget: pageHeaderWidgetHeaderText,
+ VehicleBannerWidget: {
+ GenericVehicleImage:
+ "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/blurred-image.jpg?sfvrsn=a6ce3034_3",
},
- damageOptions: ['Front Window', 'Back Window', 'Side Window'],
- };
- const apiPromise = Promise.resolve(apiResponses);
- settleAllPromises.mockImplementation(() => apiPromise);
-
- //Mock damage initialize methods
- funnelHeader.methods = {
- initializeComponent: jest.fn(),
- };
- vehicleBanner.methods = {
- initializeComponent: jest.fn(),
- };
- funnelSubHeader.methods = {
- initializeComponent: jest.fn(),
- };
- const mountOptions = getMountOptions(mountOptionsMockData);
- const wrapper = shallowMount(vehicleDamage, 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;
-
- return { wrapper, apiPromise };
- }
\ No newline at end of file
+ FunnelHeaderWidget: {
+ LogoImage:
+ "https://digitalconsumercms-dev.safelite.com/images/default-source/default-album/safelite-logo.svg?sfvrsn=45e7ed06_3",
+ },
+ },
+ damageOptions: {
+ driverSideOptions: {
+ availableReplacementOptions: ["Front", "Back", "Side"],
+ }
+ },
+ };
+
+ 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(),
+ };
+
+ const driverSideOptions = replaceOptionsQuestion
+ driverSideOptions.methods = {
+ initializeComponent: jest.fn(),
+ };
+
+ damageLocationQuestion.methods = {
+ initializeComponent: jest.fn(),
+ }
+
+ const mountOptions = getMountOptions(mountOptionsMockData);
+ const wrapper = shallowMount(vehicleDamage, 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 driverSideOptionsWrapper = wrapper.findComponent({
+ name: "replaceOptionsQuestion",
+ });
+ driverSideOptionsWrapper.vm.initializeComponent =
+ replaceOptionsQuestion.methods.initializeComponent;
+
+ const damageLocationQuestionWrapper = wrapper.findComponent({
+ name: "damageLocationQuestion",
+ });
+ damageLocationQuestionWrapper.vm.initializeComponent =
+ damageLocationQuestion.methods.initializeComponent;
+
+ return { wrapper, apiPromise };
+}
diff --git a/src/layouts/vehicle-damage/vehicle-damage.vue b/src/layouts/vehicle-damage/vehicle-damage.vue
index ffeb5c3d7..5afce1aec 100644
--- a/src/layouts/vehicle-damage/vehicle-damage.vue
+++ b/src/layouts/vehicle-damage/vehicle-damage.vue
@@ -1,10 +1,11 @@
-