124 lines
No EOL
3.8 KiB
JavaScript
124 lines
No EOL
3.8 KiB
JavaScript
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 { nextTick } from "vue";
|
|
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"], filterByVehicleCategory: true});
|
|
|
|
//Act
|
|
replaceOptionsQuestion.methods.initializeComponent.call(wrapper.vm, cmsContent, replaceOptions, "car-group");
|
|
|
|
//Assert
|
|
expect(wrapper.vm.answersToDisplay).toStrictEqual([ { Name: 'Windshield' }, { Name: 'FrontDoor' } ])
|
|
});
|
|
});
|
|
|
|
describe("replace-options-question.vue", () => {
|
|
test("when updateSelectedValues method is called with a single answerToDisplay it will call to update this.selectedValues", 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.emitted()["update:modelValue"][0]).toEqual([['Stationary']]);
|
|
});
|
|
});
|
|
|
|
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 = [],
|
|
}) {
|
|
|
|
//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: isAvailable,
|
|
isMultiSelect: isMultiSelect,
|
|
filterByVehicleCategory: filterByVehicleCategory
|
|
};
|
|
|
|
//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 };
|
|
} |