jason/DigitalConsumer.FixMyGlass
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Updated unit tests for textbox-question and dropdown-question components

Browse source
This commit is contained in:
Leah Schumann 2022-05-24 16:28:43 -04:00
parent e71f7109dd
commit a4d18aa008
4 changed files with 302 additions and 244 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
jest.config.js
View file

@ -25,8 +25,6 @@ module.exports = {
"!src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue",
"!src/layouts/address-vehicles/address-vehicles.vue",
"!src/layouts/address-vehicles/address-vehicles-question/address-vehicles-question.vue",
"!src/common-components/dropdown-question/dropdown-question.vue",
"!src/common-components/textbox-question/textbox-question.vue",
"!src/ux-components/alert\alert.vue",
"!src/helpers/validation-rules.js",
// END

170
src/common-components/dropdown-question/dropdown-question.spec.js Normal file
View file

@ -0,0 +1,170 @@
import { shallowMount } from "@vue/test-utils";
import dropdownQuestion from "./dropdown-question";
// Mock CMS content
const questionText = "Question Text";
const mockMixin = {
methods: {
getCmsContent: jest.fn().mockImplementation(()=> {
return questionText;
})
}
}
// TODO: Remove the following from dropdown-question.vue -> :class="(errors && errors.length) || hasError ? 'has-error' : ''"
// It is not being used.
describe("dropdownQuestion.vue", () => {
it("Should render a select input", async () => {
// Arrange
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
options: {},
},
mixins: [mockMixin]
});
wrapper.getCmsContent = jest.fn();
// Act
const select = wrapper.find("select");
// Assert
expect(select.exists()).toBe(true);
});
it("Should render the 'questionText' data value as the label text.", async () => {
// Arrange
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
options: {},
},
mixins: [mockMixin]
});
// Act
const label = wrapper.find("label");
// Assert
expect(label.text()).toContain(questionText);
});
it("Should render the 'questionText' data value with '⁠' after the first character of each word in the label text when disableAutoFill is true.", async () => {
// Arrange
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
options: {},
disableAutoFill: true,
},
mixins: [mockMixin]
});
// Mock CMS content ...
// Trust me, the below instance of the string "Q⁠uestion Text" actually has the ⁠ in it. You just can't see it
// Don't believe me? Copy and paste it into Google. Then inspect the search field element in Dev Tools,
// you will see "Q⁠uestion T⁠ext"
const expectedQuestionText = "Q⁠uestion T⁠ext";
// Act
const label = wrapper.find("label");
// Assert
expect(label.text()).toContain(expectedQuestionText);
});
it("Should return input id as the id of the select field", async () => {
// Arrange
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
inputId: "input ID",
options: {},
},
mixins: [mockMixin]
});
// Act
const select = wrapper.find("select");
// Assert
expect(select.attributes().id).toEqual("input ID");
});
it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
// Arrange
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
options: {},
},
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(dropdownQuestion, {
propsData: {
options: {},
isDisabled: true,
},
mixins: [mockMixin]
});
// Act
const select = wrapper.find("select");
// Assert
expect(select.attributes("aria-disabled")).toEqual("true");
});
it("Should emit new value when modelValue is changed", async () => {
// Arrange
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
options: {},
modelValue: "val",
},
mixins: [mockMixin]
});
// Act
await wrapper.find("select").setValue("val2");
// Assert
expect(wrapper.emitted()).toHaveProperty('change')
});
it("Should call this.handleChange with new value when selectedOption is changed", async () => {
// Arrange
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
options: {},
modelValue: 0,
},
mixins: [mockMixin]
});
wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
// Act
wrapper.vm.$options.watch.selectedOption.call(wrapper.vm, 1);
// Assert
expect(wrapper.vm.handleChange).toHaveBeenCalled;
});
});

131
src/common-components/dropdown-question/dropdown-question.spec.js1
View file

@ -1,131 +0,0 @@
import { shallowMount } from "@vue/test-utils";
import dropdownQuestion from "./dropdown-question";
import { nextTick } from "vue";
import { maska } from 'maska';
describe("dropdownQuestion.vue", () => {
it("Should return aria-disabled state", async () => {
// Act
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
isDisabled: true,
},
});
// Assert
const input = wrapper.find("select");
// Expect
expect(input.attributes()["aria-disabled"]).toEqual("true");
});
it("Should render a select input", async () => {
// Act
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
name: "test",
label: "unit test label",
},
});
// Assert
const input = wrapper.find("select");
expect(input.exists()).toBe(true);
});
it("Should return input id", async () => {
// Act
const wrapper = shallowMount(dropdownQuestion, {
propsData: {
inputId: "input ID",
},
});
// Assert
const input = wrapper.find("select");
// Expect
expect(input.attributes().id).toEqual("input ID");
});
it("Should render the 'questionText' data value as the label text when disableAutoFill is false.", async () => {
// Arrange
//Mock CMS content
const questionText = "Question Text";
const cmsContent = {
QuestionText: questionText,
};
// Act
const wrapper = shallowMount(dropdownQuestion, {
global: {
directives: {
maska: maska,
}
},
});
await wrapper.setData({
questionText: questionText,
});
wrapper.vm.initializeComponent(cmsContent);
// Assert
expect(wrapper.find("label").text()).toContain(questionText);
wrapper.unmount();
});
it("Should render the 'questionText' data value with '⁠' after the first character as the label text when disableAutoFill is true.", async () => {
// Arrange
//Mock CMS content
const originalQuestionText = "Question Text";
// Trust me, the below instance of the string "Q⁠uestion Text" actually has the ⁠ in it. You just can't see it
// Don't believe me? Copy it and paste it into Google. Then inspect the search field element in Dev Tools,
// you will see "Q&uestion Text"
const expectedQuestionText = "Q⁠uestion Text";
const cmsContent = {
QuestionText: originalQuestionText,
};
// Act
const wrapper = shallowMount(dropdownQuestion, {
global: {
directives: {
maska: maska,
}
},
propsData: {
disableAutoFill: true,
},
});
await wrapper.setData({
questionText: originalQuestionText,
});
wrapper.vm.initializeComponent(cmsContent);
// Assert
expect(wrapper.vm.$el.children[0].innerHTML).toBe(expectedQuestionText);
wrapper.unmount();
});
it("Should emit new value when modelValue is changed", async () => {
// Act
const wrapper = shallowMount(dropdownQuestion, {
global: {
directives: {
maska: maska,
}
},
propsData: {
modelValue: "val",
},
});
await wrapper.find("select").setValue("val2");
// Assert
expect(wrapper.emitted()).toHaveProperty('change')
});
});

243
src/common-components/textbox-question/textbox-question.spec.js1 → src/common-components/textbox-question/textbox-question.spec.js
View file

@ -1,139 +1,61 @@
import { shallowMount } from "@vue/test-utils";
import textboxQuestion from "./textbox-question";
import { maska } from 'maska';
// 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 return aria-disabled state", async () => {
// Act
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
}
},
propsData: {
isDisabled: true,
},
});
// Assert
const input = wrapper.find("input");
// Expect
expect(input.attributes()["aria-disabled"]).toEqual("true");
});
it("Should render a text input", async () => {
// Act
// Arrange
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
}
},
propsData: {
name: "test",
label: "unit test label",
},
mixins: [mockMixin]
});
// Assert
wrapper.getCmsContent = jest.fn();
// Act
const input = wrapper.find("input");
// Assert
expect(input.exists()).toBe(true);
});
it("Should return input id", async () => {
// Act
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
}
},
propsData: {
inputId: "input ID",
},
});
// Assert
const input = wrapper.find("input");
// Expect
expect(input.attributes().id).toEqual("input ID");
});
it("Should render the 'questionText' data value as the aria-label attribute.", async () => {
// Arrange
//Mock CMS content
const questionText = "Question Text";
const cmsContent = {
QuestionText: questionText,
};
// Act
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
}
},
});
await wrapper.setData({
questionText: questionText,
});
wrapper.vm.initializeComponent(cmsContent);
// Assert
expect(wrapper.find("label").attributes('aria-label')).toBe(questionText);
wrapper.unmount();
});
it("Should render the 'questionText' data value as the label text when disableAutoFill is false.", async () => {
// Arrange
//Mock CMS content
const questionText = "Question Text";
const cmsContent = {
QuestionText: questionText,
};
// Act
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
}
},
mixins: [mockMixin]
});
await wrapper.setData({
questionText: questionText,
});
wrapper.vm.initializeComponent(cmsContent);
// Assert
expect(wrapper.find("label").text()).toContain(questionText);
wrapper.unmount();
});
it("Should render the 'questionText' data value with '⁠' after the first character as the label text when disableAutoFill is true.", async () => {
// Arrange
//Mock CMS content
const originalQuestionText = "Question Text";
// Trust me, the below instance of the string "Q⁠uestion Text" actually has the ⁠ in it. You just can't see it
// Don't believe me? Copy it and paste it into Google. Then inspect the search field element in Dev Tools,
// you will see "Q&uestion Text"
const expectedQuestionText = "Q⁠uestion Text";
const cmsContent = {
QuestionText: originalQuestionText,
};
// Act
const label = wrapper.find("label");
// Assert
expect(label.text()).toContain(questionText);
});
it("Should render the 'questionText' data value with '⁠' after the first character of each word in the label text when disableAutoFill is true.", async () => {
// Arrange
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
@ -143,15 +65,84 @@ describe("textboxQuestion.vue", () => {
propsData: {
disableAutoFill: true,
},
mixins: [mockMixin]
});
await wrapper.setData({
questionText: originalQuestionText,
});
wrapper.vm.initializeComponent(cmsContent);
// Mock CMS content ...
// Trust me, the below instance of the string "Q⁠uestion Text" actually has the ⁠ in it. You just can't see it
// Don't believe me? Copy and paste it into Google. Then inspect the search field element in Dev Tools,
// you will see "Q⁠uestion T⁠ext"
const expectedQuestionText = "Q⁠uestion T⁠ext";
// Act
const label = wrapper.find("label");
// Assert
expect(wrapper.vm.$el.children[0].innerHTML).toBe(expectedQuestionText);
wrapper.unmount();
expect(label.text()).toContain(expectedQuestionText);
});
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");
});
@ -166,6 +157,7 @@ describe("textboxQuestion.vue", () => {
propsData: {
modelValue: "val",
},
mixins: [mockMixin]
});
await wrapper.find("input").setValue("val2");
@ -175,4 +167,33 @@ describe("textboxQuestion.vue", () => {
});
it("Should call this.handleChange with new value when this.semiAggressiveValidation = true, the value is changed, and the new value is valid", async () => {
// Arrange
const wrapper = shallowMount(textboxQuestion, {
global: {
directives: {
maska: maska,
}
},
propsData: {
options: {},
modelValue: "foo",
semiAggressiveValidation: true,
},
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;
});
});