unit tests for vehicle damage components
This commit is contained in:
Kulbhushan Kaushik
parent
0a94fed471
commit
6a0582b363
5 changed files with 463 additions and 0 deletions
|
|
@ -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 };
|
||||
}
|
||||
|
|
@ -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 };
|
||||
}
|
||||
|
|
@ -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,
|
||||
};
|
||||
}
|
||||
|
|
@ -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 };
|
||||
}
|
||||
|
|
@ -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 };
|
||||
}
|
||||
Loading…
Reference in a new issue