From 6cba28d4942a24d1de52ad5d3c601d6efd1078ce Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Thu, 6 Jul 2023 14:48:58 -0400 Subject: [PATCH 1/5] Customer Details page tests partially if not completely, finished --- .../customer-details/customer-details.spec.js | 59 ++++++++++++++++++- .../customer-details/customer-details.vue | 4 +- 2 files changed, 60 insertions(+), 3 deletions(-) diff --git a/src/layouts/customer-details/customer-details.spec.js b/src/layouts/customer-details/customer-details.spec.js index 3d0843e10..2014f47d3 100644 --- a/src/layouts/customer-details/customer-details.spec.js +++ b/src/layouts/customer-details/customer-details.spec.js @@ -1 +1,58 @@ -test.todo("some test to be written in the future"); +// Components +import customerDetails from "@/layouts/customer-details/customer-details.vue"; + +// Supporting Files +import { shallowMount } from "@vue/test-utils"; +import { getMountOptions } from "@/helpers/unit-test-helper.js"; +import * as navigateToHeritage from "@/helpers/heritage-integration/navigation-helper"; + +jest.mock("@/helpers/heritage-integration/navigation-helper", () => ({ + navigateToHeritageFunnel: jest.fn(), +})); + +// Mock our module for promises. +jest.mock("@/helpers/layout-helper.js", () => ({ + settleAllPromises: jest.fn(), +})); + +describe("customer-details.vue", () => { + describe("navigation", () => { + test("if the back button is clicked, navigate back", async () => { + // Arrange + const { wrapper } = setupMocks(); + + // Act + await wrapper.vm.backButtonAction(); + + // Assert + expect(wrapper.vm.$router.navigateWithoutSaving).toHaveBeenCalled(); + }); + + test("if the continue button is clicked, navigate forward", async () => { + // Arrange + const { wrapper } = setupMocks(); + + // Act + await wrapper.vm.forwardButtonAction(); + + // Assert + expect(navigateToHeritage.navigateToHeritageFunnel).toHaveBeenCalled(); + }); + }); +}); + +function setupMocks() { + const wrapper = shallowMount( + customerDetails, + getMountOptions({ + router: { + navigate: jest.fn(), + navigate: jest.fn(), + navigateWithSaving: jest.fn(), + navigateWithoutSaving: jest.fn(), + }, + }) + ); + + return { wrapper }; +} \ No newline at end of file diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue index 4377050e2..f3b039ee8 100644 --- a/src/layouts/customer-details/customer-details.vue +++ b/src/layouts/customer-details/customer-details.vue @@ -8,14 +8,14 @@ cmsWidgetName="FirstNameWidget" v-model="firstName" ref="firstName" - inputId="08497a2efd9a4a73a70360ab47b4838d" + customInputId="firstName" validationRules="first-name-required" /> Date: Fri, 7 Jul 2023 08:23:44 -0400 Subject: [PATCH 2/5] phone-number-question unit tests --- .../phone-number-question.spec.js | 62 +++++++++ .../phone-number-question.vue | 95 ++++++++++++++ .../phonenumber-question.spec.js | 1 - .../phonenumber-question.vue | 119 ------------------ .../customer-details/customer-details.spec.js | 2 +- .../customer-details/customer-details.vue | 2 +- src/styles/common-error-styles.scss | 2 +- 7 files changed, 160 insertions(+), 123 deletions(-) create mode 100644 src/digital-components/phone-number-question/phone-number-question.spec.js create mode 100644 src/digital-components/phone-number-question/phone-number-question.vue delete mode 100644 src/digital-components/phonenumber-question/phonenumber-question.spec.js delete mode 100644 src/digital-components/phonenumber-question/phonenumber-question.vue diff --git a/src/digital-components/phone-number-question/phone-number-question.spec.js b/src/digital-components/phone-number-question/phone-number-question.spec.js new file mode 100644 index 000000000..a3b6e9424 --- /dev/null +++ b/src/digital-components/phone-number-question/phone-number-question.spec.js @@ -0,0 +1,62 @@ +// Components +import phoneNumberQuestion from "./phone-number-question"; + +// Supporting Files +import { shallowMount } from "@vue/test-utils"; + +describe("phone-number-question.vue", () => { + it("Should render phoneNumberQuestion sub-component (textbox-question)", async () => { + // Arrange + const wrapper = shallowMount(phoneNumberQuestion, {}); + + wrapper.getCmsContent = jest.fn(); + + // Act + const phoneNumber = wrapper.findComponent({ ref: "phoneNumber" }); + + // Assert + expect(phoneNumber.exists()).toBe(true); + }); + + it("Should emit new value when modelValue is changed", async () => { + // Act + const wrapper = shallowMount(phoneNumberQuestion, { + propsData: { + modelValue: "val", + }, + }); + + const phoneNumber = wrapper.findComponent({ ref: "phoneNumber" }); + await phoneNumber.setValue("val2"); + + // Assert + expect(wrapper.emitted("update:modelValue")).toEqual([["val2"]]); + }); + + it("Should emit new value when modelValue is changed", async () => { + // Act + const wrapper = shallowMount(phoneNumberQuestion, { + propsData: { + modelValue: "val", + }, + }); + + const phoneNumber = wrapper.findComponent({ ref: "phoneNumber" }); + await phoneNumber.setValue("val2"); + + // Assert + expect(wrapper.emitted("update:modelValue")).toEqual([["val2"]]); + }); + + it("Should combine external and internal validation rules to pass to textbox-question", async() => { + // Act + const wrapper = shallowMount(phoneNumberQuestion, { + propsData: { + validationRules: "outsideValidation", + }, + }); + + // Assert + expect(wrapper.vm.validationRulesForTextBoxQuestion).toEqual("outsideValidation|phone-number-format"); + }); +}); diff --git a/src/digital-components/phone-number-question/phone-number-question.vue b/src/digital-components/phone-number-question/phone-number-question.vue new file mode 100644 index 000000000..f3fdc6cd6 --- /dev/null +++ b/src/digital-components/phone-number-question/phone-number-question.vue @@ -0,0 +1,95 @@ + + + + + diff --git a/src/digital-components/phonenumber-question/phonenumber-question.spec.js b/src/digital-components/phonenumber-question/phonenumber-question.spec.js deleted file mode 100644 index 3d0843e10..000000000 --- a/src/digital-components/phonenumber-question/phonenumber-question.spec.js +++ /dev/null @@ -1 +0,0 @@ -test.todo("some test to be written in the future"); diff --git a/src/digital-components/phonenumber-question/phonenumber-question.vue b/src/digital-components/phonenumber-question/phonenumber-question.vue deleted file mode 100644 index 7f2525bcb..000000000 --- a/src/digital-components/phonenumber-question/phonenumber-question.vue +++ /dev/null @@ -1,119 +0,0 @@ - - - - - diff --git a/src/layouts/customer-details/customer-details.spec.js b/src/layouts/customer-details/customer-details.spec.js index 2014f47d3..af43c1930 100644 --- a/src/layouts/customer-details/customer-details.spec.js +++ b/src/layouts/customer-details/customer-details.spec.js @@ -55,4 +55,4 @@ function setupMocks() { ); return { wrapper }; -} \ No newline at end of file +} diff --git a/src/layouts/customer-details/customer-details.vue b/src/layouts/customer-details/customer-details.vue index f3b039ee8..9a0d7e554 100644 --- a/src/layouts/customer-details/customer-details.vue +++ b/src/layouts/customer-details/customer-details.vue @@ -55,7 +55,7 @@ import funnelFooter from "@/fmg-components/funnel-footer/funnel-footer"; import funnelSubHeader from "@/fmg-components/funnel-sub-header/funnel-sub-header"; import textareaQuestion from "@/digital-components/textarea-question/textarea-question"; import textboxQuestion from "@/digital-components/textbox-question/textbox-question"; -import phoneNumberQuestion from "@/digital-components/phonenumber-question/phonenumber-question"; +import phoneNumberQuestion from "@/digital-components/phone-number-question/phone-number-question"; import textBlock from "@/digital-components/text-block/text-block"; import checkboxQuestion from "@/digital-components/checkbox-question/checkbox-question"; //Supporting files diff --git a/src/styles/common-error-styles.scss b/src/styles/common-error-styles.scss index ed2e5acbd..8a8c0bd14 100644 --- a/src/styles/common-error-styles.scss +++ b/src/styles/common-error-styles.scss @@ -103,7 +103,7 @@ html { } &.textbox-question, &.dropdown-question, - &.phonenumber-question { + &.phone-number-question { p { color: $red; } From 71555378d55aab6b623b42d48cb601451f61756e Mon Sep 17 00:00:00 2001 From: Leah Schumann Date: Mon, 10 Jul 2023 10:05:45 -0400 Subject: [PATCH 3/5] Unit tests ready --- .../phone-number-question.spec.js | 6 +- .../textarea-question.spec.js | 66 ++++++++++++++++++- .../textarea-question/textarea-question.vue | 52 ++++++--------- 3 files changed, 88 insertions(+), 36 deletions(-) diff --git a/src/digital-components/phone-number-question/phone-number-question.spec.js b/src/digital-components/phone-number-question/phone-number-question.spec.js index a3b6e9424..78ff60bf7 100644 --- a/src/digital-components/phone-number-question/phone-number-question.spec.js +++ b/src/digital-components/phone-number-question/phone-number-question.spec.js @@ -48,7 +48,7 @@ describe("phone-number-question.vue", () => { expect(wrapper.emitted("update:modelValue")).toEqual([["val2"]]); }); - it("Should combine external and internal validation rules to pass to textbox-question", async() => { + it("Should combine external and internal validation rules to pass to textbox-question", async () => { // Act const wrapper = shallowMount(phoneNumberQuestion, { propsData: { @@ -57,6 +57,8 @@ describe("phone-number-question.vue", () => { }); // Assert - expect(wrapper.vm.validationRulesForTextBoxQuestion).toEqual("outsideValidation|phone-number-format"); + expect(wrapper.vm.validationRulesForTextBoxQuestion).toEqual( + "outsideValidation|phone-number-format" + ); }); }); diff --git a/src/digital-components/textarea-question/textarea-question.spec.js b/src/digital-components/textarea-question/textarea-question.spec.js index 3d0843e10..93b6cad54 100644 --- a/src/digital-components/textarea-question/textarea-question.spec.js +++ b/src/digital-components/textarea-question/textarea-question.spec.js @@ -1 +1,65 @@ -test.todo("some test to be written in the future"); +// Components +import textareaQuestion from "./textarea-question"; + +// Supporting Files +import { shallowMount } from "@vue/test-utils"; + +const questionText = "textareaQuestionText"; +const mockMixin = { + methods: { + getCmsContent: jest.fn().mockImplementation(() => { + return questionText; + }), + }, +}; + +describe("textarea-question.vue", () => { + it("Should render a textarea", async () => { + // Arrange + const wrapper = shallowMount(textareaQuestion, { + propsData: { + modelValue: "", + }, + mixins: [mockMixin], + }); + + wrapper.getCmsContent = jest.fn(); + + // Act + const textarea = wrapper.find("textarea"); + + // Assert + expect(textarea.exists()).toBe(true); + }); + + it("Should emit new value when modelValue is changed", async () => { + // Act + const wrapper = shallowMount(textareaQuestion, { + propsData: { + modelValue: "val", + }, + mixins: [mockMixin], + }); + + await wrapper.find("textarea").setValue("val2"); + + // Assert + expect(wrapper.emitted("update:modelValue")).toEqual([["val2"]]); + }); + + it("Should limit the number of characters entered to the max length value property passed in", async () => { + // Act + const wrapper = shallowMount(textareaQuestion, { + propsData: { + modelValue: "123456789", + maxLength: 10, + }, + mixins: [mockMixin], + }); + + wrapper.vm.value = "12345678910"; + + // Assert + expect(wrapper.vm.value).toEqual("1234567891"); + }); +}); diff --git a/src/digital-components/textarea-question/textarea-question.vue b/src/digital-components/textarea-question/textarea-question.vue index e4e48092d..0ffe5ec0a 100644 --- a/src/digital-components/textarea-question/textarea-question.vue +++ b/src/digital-components/textarea-question/textarea-question.vue @@ -1,14 +1,16 @@