diff --git a/jest.config.js b/jest.config.js index 839db4378..f2c8b5f28 100644 --- a/jest.config.js +++ b/jest.config.js @@ -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 diff --git a/src/common-components/dropdown-question/dropdown-question.spec.js b/src/common-components/dropdown-question/dropdown-question.spec.js new file mode 100644 index 000000000..381f34890 --- /dev/null +++ b/src/common-components/dropdown-question/dropdown-question.spec.js @@ -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; + + }); + +}); diff --git a/src/common-components/dropdown-question/dropdown-question.spec.js1 b/src/common-components/dropdown-question/dropdown-question.spec.js1 deleted file mode 100644 index 81669f714..000000000 --- a/src/common-components/dropdown-question/dropdown-question.spec.js1 +++ /dev/null @@ -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') - - }); -}); diff --git a/src/common-components/textbox-question/textbox-question.spec.js1 b/src/common-components/textbox-question/textbox-question.spec.js similarity index 55% rename from src/common-components/textbox-question/textbox-question.spec.js1 rename to src/common-components/textbox-question/textbox-question.spec.js index 63214c126..09f929490 100644 --- a/src/common-components/textbox-question/textbox-question.spec.js1 +++ b/src/common-components/textbox-question/textbox-question.spec.js @@ -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; + + }); + });