170 lines
3.5 KiB
JavaScript
170 lines
3.5 KiB
JavaScript
import { shallowMount } from "@vue/test-utils";
|
|
import textboxQuestion from "./textbox-question";
|
|
|
|
// Mock CMS content
|
|
const questionText = "Question Text";
|
|
const mockMixin = {
|
|
methods: {
|
|
getCmsContent: jest.fn().mockImplementation(()=> {
|
|
return questionText;
|
|
})
|
|
}
|
|
}
|
|
const maska = jest.fn();
|
|
|
|
describe("textboxQuestion.vue", () => {
|
|
|
|
it("Should render a text input", async () => {
|
|
// Arrange
|
|
const wrapper = shallowMount(textboxQuestion, {
|
|
global: {
|
|
directives: {
|
|
maska: maska,
|
|
}
|
|
},
|
|
mixins: [mockMixin]
|
|
});
|
|
|
|
wrapper.getCmsContent = jest.fn();
|
|
|
|
// Act
|
|
const input = wrapper.find("input");
|
|
|
|
// Assert
|
|
expect(input.exists()).toBe(true);
|
|
|
|
});
|
|
|
|
it("Should render the 'questionText' data value as the label text when disableAutoFill is false.", async () => {
|
|
// Arrange
|
|
const wrapper = shallowMount(textboxQuestion, {
|
|
global: {
|
|
directives: {
|
|
maska: maska,
|
|
}
|
|
},
|
|
mixins: [mockMixin]
|
|
});
|
|
|
|
// Act
|
|
const label = wrapper.find("label");
|
|
|
|
// Assert
|
|
expect(label.text()).toContain(questionText);
|
|
|
|
});
|
|
|
|
it("Should return input id as the id of the input field", async () => {
|
|
// Arrange
|
|
const wrapper = shallowMount(textboxQuestion, {
|
|
global: {
|
|
directives: {
|
|
maska: maska,
|
|
}
|
|
},
|
|
propsData: {
|
|
inputId: "input ID",
|
|
},
|
|
mixins: [mockMixin]
|
|
});
|
|
|
|
// Act
|
|
const input = wrapper.find("input");
|
|
|
|
// Assert
|
|
expect(input.attributes().id).toEqual("input ID");
|
|
|
|
});
|
|
|
|
it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
|
|
|
|
// Arrange
|
|
const wrapper = shallowMount(textboxQuestion, {
|
|
global: {
|
|
directives: {
|
|
maska: maska,
|
|
}
|
|
},
|
|
mixins: [mockMixin]
|
|
});
|
|
|
|
// Act
|
|
const label = wrapper.find("label");
|
|
|
|
// Assert
|
|
expect(label.attributes("aria-label")).toContain(questionText);
|
|
|
|
});
|
|
|
|
it("Should return aria-disabled state as disabled", async () => {
|
|
// Arrange
|
|
const wrapper = shallowMount(textboxQuestion, {
|
|
global: {
|
|
directives: {
|
|
maska: maska,
|
|
}
|
|
},
|
|
propsData: {
|
|
isDisabled: true,
|
|
},
|
|
mixins: [mockMixin]
|
|
});
|
|
|
|
// Assert
|
|
const input = wrapper.find("input");
|
|
|
|
// Expect
|
|
expect(input.attributes("aria-disabled")).toEqual("true");
|
|
|
|
});
|
|
|
|
it("Should emit new value when modelValue is changed", async () => {
|
|
// Act
|
|
const wrapper = shallowMount(textboxQuestion, {
|
|
global: {
|
|
directives: {
|
|
maska: maska,
|
|
}
|
|
},
|
|
propsData: {
|
|
modelValue: "val",
|
|
},
|
|
mixins: [mockMixin]
|
|
});
|
|
|
|
await wrapper.find("input").setValue("val2");
|
|
|
|
// Assert
|
|
expect(wrapper.emitted()).toHaveProperty('change')
|
|
|
|
});
|
|
|
|
it("Should call this.handleChange with new value when the value is changed and the new value is valid", async () => {
|
|
// Arrange
|
|
const wrapper = shallowMount(textboxQuestion, {
|
|
global: {
|
|
directives: {
|
|
maska: maska,
|
|
}
|
|
},
|
|
propsData: {
|
|
options: {},
|
|
modelValue: "foo",
|
|
},
|
|
mixins: [mockMixin]
|
|
});
|
|
|
|
wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
|
|
wrapper.vm.validate = jest.fn().mockImplementation(() => {
|
|
return true;
|
|
});
|
|
|
|
// Act
|
|
wrapper.vm.$options.watch.value.call(wrapper.vm, "bar");
|
|
|
|
// Assert
|
|
expect(wrapper.vm.handleChange).toHaveBeenCalled;
|
|
|
|
});
|
|
|
|
});
|