From cfc5cbd467f33e54b546d995f8b864a5aad2bd0b Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Fri, 25 Mar 2022 09:11:39 -0400 Subject: [PATCH] Unit tests for feature/CSR-350, textbox-question and dropdown-question components --- jest.config.js | 3 - .../dropdown-question.spec.js | 131 +++++++++++++ .../dropdown-question.spec.js1 | 81 -------- .../dropdown-question/dropdown-question.vue | 10 +- .../funnel-sub-header.spec.js | 2 +- .../textbox-question/textbox-question.spec.js | 178 ++++++++++++++++++ .../textbox-question.spec.js1 | 81 -------- .../textbox-question/textbox-question.vue | 10 +- src/helpers/validation-rules.spec.js | 67 +++++-- 9 files changed, 379 insertions(+), 184 deletions(-) create mode 100644 src/common-components/dropdown-question/dropdown-question.spec.js delete mode 100644 src/common-components/dropdown-question/dropdown-question.spec.js1 create mode 100644 src/common-components/textbox-question/textbox-question.spec.js delete mode 100644 src/common-components/textbox-question/textbox-question.spec.js1 diff --git a/jest.config.js b/jest.config.js index ed4f38dc7..a98f62b03 100644 --- a/jest.config.js +++ b/jest.config.js @@ -24,9 +24,6 @@ module.exports = { "!src/layouts/address-lookup/address-lookup.vue", "!src/layouts/address-lookup/customer-questions/customer-questions.vue", "!src/layouts/address-lookup/customer-questions/address-questions/address-questions.vue", - "!src/common-components/dropdown-question/dropdown-question.vue", - "!src/common-components/textbox-question/textbox-question.vue", - "!src/helpers/validation-rules.js", // END ], //! means exclude from coverage. testMatch: ["**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)"], 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..81669f714 --- /dev/null +++ b/src/common-components/dropdown-question/dropdown-question.spec.js @@ -0,0 +1,131 @@ +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/dropdown-question/dropdown-question.spec.js1 b/src/common-components/dropdown-question/dropdown-question.spec.js1 deleted file mode 100644 index 3eeb3662b..000000000 --- a/src/common-components/dropdown-question/dropdown-question.spec.js1 +++ /dev/null @@ -1,81 +0,0 @@ -import { shallowMount } from "@vue/test-utils"; -import dropdownQuestion from "./dropdown-question"; -import { nextTick } from "vue"; - -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 text 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 return label text", async () => { - // Act - const wrapper = shallowMount(dropdownQuestion, { - propsData: { - labelText: "label text", - }, - }); - - // Assert - const label = wrapper.find("label"); - - expect(label.text()).toEqual("label text"); - }); */ - - 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"); - }); - -}); diff --git a/src/common-components/dropdown-question/dropdown-question.vue b/src/common-components/dropdown-question/dropdown-question.vue index 08ed368cf..bc03039ef 100644 --- a/src/common-components/dropdown-question/dropdown-question.vue +++ b/src/common-components/dropdown-question/dropdown-question.vue @@ -79,14 +79,18 @@ export default { }, labelText: { get: function () { - let labelText = this.questionText; + var thisQuestionText = ""; if (this.disableAutoFill) { + const noBreakChar = "⁠"; const position = 1; - labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join(''); + thisQuestionText = [this.questionText.toString().slice(0, position), noBreakChar, this.questionText.toString().slice(position)].join(''); + + } else { + thisQuestionText = this.questionText.toString(); } - return labelText; + return thisQuestionText; } } }, diff --git a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js index 08561ce67..5a48d126d 100644 --- a/src/common-components/funnel-sub-header/funnel-sub-header.spec.js +++ b/src/common-components/funnel-sub-header/funnel-sub-header.spec.js @@ -8,7 +8,7 @@ describe("FunnelSubHeader.vue", () => { await wrapper.setData({ text: "FunnelSubHeader Content", }); - wrapper.vm.initializeComponent(cmsContent); + //wrapper.vm.initializeComponent(cmsContent); // Assert expect(wrapper.find("h5").text()).toContain("FunnelSubHeader Content"); diff --git a/src/common-components/textbox-question/textbox-question.spec.js b/src/common-components/textbox-question/textbox-question.spec.js new file mode 100644 index 000000000..63214c126 --- /dev/null +++ b/src/common-components/textbox-question/textbox-question.spec.js @@ -0,0 +1,178 @@ +import { shallowMount } from "@vue/test-utils"; +import textboxQuestion from "./textbox-question"; +import { maska } from 'maska'; + +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 + const wrapper = shallowMount(textboxQuestion, { + global: { + directives: { + maska: maska, + } + }, + propsData: { + name: "test", + label: "unit test label", + }, + }); + + // Assert + const input = wrapper.find("input"); + + 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, + } + }, + }); + 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(textboxQuestion, { + 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(textboxQuestion, { + global: { + directives: { + maska: maska, + } + }, + propsData: { + modelValue: "val", + }, + }); + + await wrapper.find("input").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.js1 deleted file mode 100644 index 721fba9d5..000000000 --- a/src/common-components/textbox-question/textbox-question.spec.js1 +++ /dev/null @@ -1,81 +0,0 @@ -import { shallowMount } from "@vue/test-utils"; -import textboxQuestion from "./textbox-question"; -import { nextTick } from "vue"; - -describe("textboxQuestion.vue", () => { - - it("Should return aria-disabled state", async () => { - // Act - const wrapper = shallowMount(textboxQuestion, { - 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 - const wrapper = shallowMount(textboxQuestion, { - propsData: { - name: "test", - label: "unit test label", - }, - }); - - // Assert - const input = wrapper.find("input"); - - expect(input.exists()).toBe(true); - }); - - it("Should return input id", async () => { - // Act - const wrapper = shallowMount(textboxQuestion, { - propsData: { - inputId: "input ID", - }, - }); - - // Assert - const input = wrapper.find("input"); - - // Expect - expect(input.attributes().id).toEqual("input ID"); - }); - - it("Should return label text", async () => { - // Act - const wrapper = shallowMount(textboxQuestion, { - propsData: { - labelText: "label text", - }, - }); - - // Assert - const label = wrapper.find("label"); - - expect(label.text()).toEqual("label text"); - }); - - it("Should return input id", async () => { - // Act - const wrapper = shallowMount(textboxQuestion, { - propsData: { - inputId: "input ID", - }, - }); - - // Assert - const input = wrapper.find("input"); - - // Expect - expect(input.attributes().id).toEqual("input ID"); - }); - -}); diff --git a/src/common-components/textbox-question/textbox-question.vue b/src/common-components/textbox-question/textbox-question.vue index 461e5a3c9..1e97d6f45 100644 --- a/src/common-components/textbox-question/textbox-question.vue +++ b/src/common-components/textbox-question/textbox-question.vue @@ -95,14 +95,18 @@ export default { }, labelText: { get: function () { - let labelText = this.questionText; + var thisQuestionText = ""; if (this.disableAutoFill) { + const noBreakChar = "⁠"; const position = 1; - labelText = [labelText.slice(0, position), noBreakChar, labelText.slice(position)].join(''); + thisQuestionText = [this.questionText.toString().slice(0, position), noBreakChar, this.questionText.toString().slice(position)].join(''); + + } else { + thisQuestionText = this.questionText.toString(); } - return labelText; + return thisQuestionText; } } }, diff --git a/src/helpers/validation-rules.spec.js b/src/helpers/validation-rules.spec.js index 323e05ff1..7e0c6304e 100644 --- a/src/helpers/validation-rules.spec.js +++ b/src/helpers/validation-rules.spec.js @@ -1,4 +1,5 @@ import { required } from "@/helpers/validation-rules"; +import { regex } from "@/helpers/validation-rules"; describe("validation-rules.vue", () => { test("required rules should return error if value missing", () => { @@ -15,15 +16,57 @@ describe("validation-rules.vue", () => { }); describe("validation-rules.vue", () => { - test("required rules should return true if value present", () => { - - //Arrange - const testFn = required("an error"); - - //Act - const testResponse = testFn('some value'); - - //Assert - expect(testResponse).toBe(true); - }); - }); \ No newline at end of file + test("required rules should return true if value present", () => { + + //Arrange + const testFn = required("an error"); + + //Act + const testResponse = testFn('some value'); + + //Assert + expect(testResponse).toBe(true); + }); +}); + +describe("validation-rules.vue", () => { + test("regex rules should return true if value is not present", () => { + + //Arrange + const testFn = regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, "an error"); // Using Zip regex + + //Act + const testResponse = testFn(); + + //Assert + expect(testResponse).toBe(true); + }); +}); + +describe("validation-rules.vue", () => { + test("regex rules should return false if value is present but does not match regular expression", () => { + + //Arrange + const testFn = regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, "an error"); // Using Zip regex + + //Act + const testResponse = testFn('4321'); // needs to be 5 numbers + + //Assert + expect(testResponse).toBe("an error"); + }); +}); + +describe("validation-rules.vue", () => { + test("regex rules should return true if value is present and does match regular expression", () => { + + //Arrange + const testFn = regex(/(^\d{5}$)|(^\d{5}-\d{4}$)/, "an error"); // Using Zip regex + + //Act + const testResponse = testFn('43213'); // needs to be 5 numbers + + //Assert + expect(testResponse).toBe(true); + }); +}); \ No newline at end of file