diff --git a/src/helpers/unit-test-helper.js b/src/helpers/unit-test-helper.js index 52c0b5c6c..1509a4b16 100644 --- a/src/helpers/unit-test-helper.js +++ b/src/helpers/unit-test-helper.js @@ -10,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( diff --git a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js index 92feec9b8..ce12c15ff 100644 --- a/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js +++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js @@ -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 }; - } \ No newline at end of file + const wrapper = shallowMount(damageLocationQuestion, mountOptions); + + //Mock CMS content + const cmsContent = { + groupName: groupName, + QuestionText: cmsQuestionText, + Answers: cmsAnswers, + }; + const damageOptions = dataFromStoreApi; + return { wrapper, cmsContent, damageOptions }; +} \ No newline at end of file diff --git a/src/layouts/vehicle-damage/vehicle-damage.spec.js b/src/layouts/vehicle-damage/vehicle-damage.spec.js index 9145bad7c..50cee4876 100644 --- a/src/layouts/vehicle-damage/vehicle-damage.spec.js +++ b/src/layouts/vehicle-damage/vehicle-damage.spec.js @@ -163,7 +163,7 @@ describe("vehicle-damage.vue", () => { wrapper.vm.resetDependentState(); //Assert - expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_AND_DEPS) + expect(store.dispatch).toBeCalledWith(storeActions.RESET_PARTS_STATE) }); }); diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js new file mode 100644 index 000000000..ec687023c --- /dev/null +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.spec.js @@ -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 }; +} \ No newline at end of file diff --git a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue index 83e12a083..8e159aebe 100644 --- a/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue +++ b/src/layouts/vehicle-parts/glass-part-question/glass-part-question.vue @@ -98,7 +98,7 @@ export default { return arr; }, {}); - + return tintMapByColor; } }, diff --git a/src/store/store.spec.js b/src/store/store.spec.js index b6920b72f..fa75f3255 100644 --- a/src/store/store.spec.js +++ b/src/store/store.spec.js @@ -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);