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 new file mode 100644 index 00000000..ceccbed7 --- /dev/null +++ b/src/layouts/vehicle-damage/damage-location-question/damage-location-question.spec.js @@ -0,0 +1,84 @@ +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"; + +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("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, + damageOptions, + "car-group" + ); + + //Assert + expect(wrapper.vm.damageOptions).toStrictEqual({ + backGlassOptions: { availableReplacementOptions: [] }, + driverSideOptions: { availableReplacementOptions: ["Quarter", "Front"] }, + windshieldOptions: { availableReplacementOptions: ["Single"] }, + }); + }); +}); + +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 = [], +}) { + + const mountOptions = getMountOptions({}); + + //Mock props + const mockMixin = { + methods: { + getCmsContent: jest.fn(), + }, + }; + mountOptions.propsData = { + modelValue: modelValueProp, + isMultiSelect: isMultiSelect, + }; + mountOptions.mixins = [mockMixin]; + + const wrapper = shallowMount(damageLocationQuestion, mountOptions); + + //Mock CMS content + const cmsContent = { + groupName: groupName, + QuestionText: cmsQuestionText, + Answers: cmsAnswers, + }; + const damageOptions = dataFromStoreApi; + return { wrapper, cmsContent, damageOptions }; +} 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 00000000..067e764a --- /dev/null +++ b/src/layouts/vehicle-damage/replace-options-question/replace-options-question.spec.js @@ -0,0 +1,131 @@ +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"; + +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"], + filterByVehicleCategory: true, + }); + + //Act + replaceOptionsQuestion.methods.initializeComponent.call( + wrapper.vm, + replaceOptions, + "car-group" + ); + + //Assert + expect(wrapper.vm.replaceOptions).toStrictEqual(["Windshield", "FrontDoor"]); + }); +}); + +describe("replace-options-question.vue", () => { + test("when updateSelectedValues method is called with a single answerToDisplay it will call to update this.selectedReplaceOptions", async () => { + //Arrange + const { wrapper, cmsContent, replaceOptions } = setupMocks({ + modelValueProp: [], + }); + wrapper.setData({ + answersFromCms: [ + { + Name: "Stationary", + }, + { + Name: "Slider", + }, + ], + }); + wrapper.setData({ replaceOptions: ["Stationary"] }); + + //Act + wrapper.vm.$options.methods.updateSelectedValues.call(wrapper.vm); + + expect(wrapper.vm.selectedValues).toEqual([]); + }); +}); + +describe("replace-options-question.vue", () => { + test("when isAvailable is true, will run updateSelectedValues method", async () => { + //Arrange + const { wrapper, cmsContent, replaceOptions } = setupMocks({ + isAvailable: false, + methodsToMock: ["updateSelectedValues"], + }); + + //Act + wrapper.vm.$options.methods.initializeComponent.call( + wrapper.vm, + cmsContent, + replaceOptions, + "car-group" + ); + wrapper.vm.$options.watch.isAvailable.call(wrapper.vm, true); + + //Assert + expect(replaceOptionsQuestion.methods.updateSelectedValues).toHaveBeenCalled(); + wrapper.unmount(); + }); +}); + +function setupMocks({ + modelValueProp = ["Windshield"], + isAvailable = true, + isMultiSelect = false, + filterByVehicleCategory = false, + groupName = "damageQuestion", + cmsQuestionText = "CMS text goes here", + cmsAnswers = [{ Name: "car-Windshield" }, { Name: "car-BackDoor" }, { Name: "car-FrontDoor" }], + dataFromStoreApi = [], + methodsToMock = [], +}) { + + const mountOptions = getMountOptions({ }); + + //Mock props + const mockMixin = { + methods: { + getCmsContent: jest.fn(), + }, + }; + mountOptions.propsData = { + modelValue: modelValueProp, + isAvailable: isAvailable, + isMultiSelect: isMultiSelect, + filterByVehicleCategory: filterByVehicleCategory, + }; + mountOptions.mixins = [mockMixin]; + + //Mock methods + methodsToMock.forEach((methodName) => { + replaceOptionsQuestion.methods[methodName] = jest.fn(); + }); + + const wrapper = shallowMount(replaceOptionsQuestion, mountOptions); + + //Mock CMS content + const cmsContent = { + groupName: groupName, + QuestionText: cmsQuestionText, + Answers: cmsAnswers, + }; + const replaceOptions = dataFromStoreApi; + return { wrapper, cmsContent, replaceOptions }; +} diff --git a/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js b/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js new file mode 100644 index 00000000..8603ce63 --- /dev/null +++ b/src/layouts/vehicle-damage/side-door-options/side-door-options.spec.js @@ -0,0 +1,139 @@ +import { shallowMount } from "@vue/test-utils"; +import sideDoorOptions from "@/layouts/vehicle-damage/side-door-options/side-door-options"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import replaceOptionsQuestion from "@/layouts/vehicle-damage/replace-options-question/replace-options-question"; + + +describe("replace-options-question.vue", () => { + test("Selected side door option is emitted upon selection.", async () => { + //Arrange + const { wrapper } = setupMocks({ modelValueProp: ["Windshield"] }); + const sideDoorOptions = ["Backseat"]; + + //Act + wrapper.setValue({ modelValue: sideDoorOptions }); + await wrapper.vm.$nextTick(); + + //Assert + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: ["Backseat"] }]); + }); +}); + +describe("replace-options-question.vue", () => { + test("Selected door side option is updated when selection made.", async () => { + //Arrange + const { wrapper } = setupMocks({}); + + //Act + wrapper.vm.selectedDoorSidesValues = ["DriverSide"]; + await wrapper.vm.$nextTick(); + + //Assert + expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled; + }); +}); + +describe("replace-options-question.vue", () => { + test("Selected driver side option is updated when selection made.", async () => { + //Arrange + const { wrapper } = setupMocks({}); + + //Act + wrapper.vm.selectedDriverSideReplaceOptionsValues = ["FrontDoor"]; + await wrapper.vm.$nextTick(); + + //Assert + expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled; + }); +}); + +describe("replace-options-question.vue", () => { + test("Selected passenger side option is updated when selection made.", async () => { + //Arrange + const { wrapper } = setupMocks({}); + + //Act + wrapper.vm.selectedPassengerSideReplaceOptionsValues = ["BacktDoor"]; + await wrapper.vm.$nextTick(); + + //Assert + expect(wrapper.vm.getSideDoorReplacementOptions()).toHaveBeenCalled; + }); +}); + +describe("replace-options-question.vue", () => { + test("Answers to display filtered by data from api.", async () => { + //Arrange + const { + wrapper, + cmsContent, + driverSideReplaceOptions, + passengerSideReplaceOptions, + driverSideOptions, + passengerSideOptions, + } = setupMocks({}); + + //Act + sideDoorOptions.methods.initializeComponent.call( + wrapper.vm, + cmsContent, + driverSideReplaceOptions, + passengerSideReplaceOptions, + driverSideOptions, + passengerSideOptions, + "car-group" + ); + + //Assert + expect(wrapper.vm.answersToDisplay).toStrictEqual([]); + }); +}); + +function setupMocks({ + modelValueProp = ["DriverSide"], + groupName = "sideDoorOptions", + cmsQuestionText = "CMS text goes here", + cmsAnswers = [{ Name: "Car-DriverSide" }, { Name: "Car-PassengerSide" }], + driverSideReplaceOptions = ["FrontDoor", "BackDoor"], + passengerSideReplaceOptions = ["FrontDoor", "BackDoor"], + driverSideOptions = ["Car-FrontDoor", "Car-BackDoor"], + passengerSideOptions = ["Car-FrontDoor", "Car-BackDoor"], + selectedDamageLocations = ["SideDoor"], +}) { + + const mountOptions = getMountOptions({ + }); + + //Mock props + const mockMixin = { + methods: { + getCmsContent: jest.fn(), + }, + }; + mountOptions.propsData = { + modelValue: modelValueProp, + groupName: groupName, + selectedDamageLocations: selectedDamageLocations, + }; + mountOptions.mixins = [mockMixin]; + + const wrapper = shallowMount(sideDoorOptions, mountOptions); + + const OptionsWrapper = wrapper.findAllComponents({ name: "replaceOptionsQuestion" }); + OptionsWrapper[0].vm.initializeComponent = replaceOptionsQuestion.methods.initializeComponent; + OptionsWrapper[1].vm.initializeComponent = replaceOptionsQuestion.methods.initializeComponent; + //Mock CMS content + const cmsContent = { + groupName: groupName, + QuestionText: cmsQuestionText, + Answers: cmsAnswers, + }; + return { + wrapper, + cmsContent, + driverSideReplaceOptions, + passengerSideReplaceOptions, + driverSideOptions, + passengerSideOptions, + }; +} diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js new file mode 100644 index 00000000..a206e87a --- /dev/null +++ b/src/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question.spec.js @@ -0,0 +1,58 @@ +import { shallowMount } from "@vue/test-utils"; +import windshieldChipCountQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-chip-count-question/windshield-chip-count-question"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; + +describe("windshield-chip-count-question.vue", () => { + test("Selected chip count is emitted upon selection.", async () => { + //Arrange + const { wrapper } = setupMocks({ modelValueProp: 1 }); + + //Act + wrapper.vm.selectedValue = "2"; + + //Assert + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([2]); + }); + + test("selectedValue matches modelValue", () => { + // Arrange/Act + const { wrapper } = setupMocks({ modelValueProp: 2 }); + + // Assert + expect(wrapper.vm.selectedValue).toBe(2); + }); +}); + +function setupMocks({ + modelValueProp = ["Two"], + groupName = "WindshieldChipCountQuestion", + cmsQuestionText = "How many chips are we repairing?", + cmsAnswers = [{ Name: "One" }, { Name: "Two" }, { Name: "Three" }], + dataFromStoreApi = [], +}) { + + const mountOptions = getMountOptions({ + }); + + //Mock props + const mockMixin = { + methods: { + getCmsContent: jest.fn(), + }, + }; + mountOptions.propsData = { + modelValue: modelValueProp, + }; + mountOptions.mixins = [mockMixin]; + + const wrapper = shallowMount(windshieldChipCountQuestion, mountOptions); + + //Mock CMS content + const cmsContent = { + groupName: groupName, + QuestionText: cmsQuestionText, + Answers: cmsAnswers, + }; + const damageOptions = dataFromStoreApi; + return { wrapper, cmsContent, damageOptions }; +} diff --git a/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js new file mode 100644 index 00000000..4f3d5b6a --- /dev/null +++ b/src/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question.spec.js @@ -0,0 +1,51 @@ +import { shallowMount } from "@vue/test-utils"; +import windshieldDamageTypeQuestion from "@/layouts/vehicle-damage/windshield-options/windshield-damage-type-question/windshield-damage-type-question"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; + +describe("windshield-damage-type-question.vue", () => { + test("Selected windshield damage is emitted upon selection.", async () => { + //Arrange + const { wrapper } = setupMocks({ modelValueProp: "Repair" }); + + //Act + wrapper.setValue({ modelValue: "Replace" }); + await wrapper.vm.$nextTick(); + + //Assert + expect(wrapper.vm.selectedValues).toEqual("Repair"); + expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{ modelValue: "Replace" }]); + }); +}); + +function setupMocks({ + modelValueProp = "", + groupName = "WindshieldDamageTypeQuestion", + cmsQuestionText = "What's your windshield damage?", + cmsAnswers = [{ Name: "Repair" }, { Name: "Replace" }], + dataFromStoreApi = [], +}) { + const mountOptions = getMountOptions({ + }); + + //Mock props + mountOptions.propsData = { + modelValue: modelValueProp, + }; + const mockMixin = { + methods: { + getCmsContent: jest.fn(), + }, + }; + mountOptions.mixins = [mockMixin]; + + const wrapper = shallowMount(windshieldDamageTypeQuestion, mountOptions); + + //Mock CMS content + const cmsContent = { + groupName: groupName, + QuestionText: cmsQuestionText, + Answers: cmsAnswers, + }; + const damageOptions = dataFromStoreApi; + return { wrapper, cmsContent, damageOptions }; +}