From 1fccadd678d929109944f21e57da878425bc3481 Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Fri, 17 Feb 2023 10:22:56 -0500 Subject: [PATCH 1/3] CSR-1012 some unit tests for service-location-modal-question --- .../service-zip-modal-question.spec.js | 80 ++++++++++++++++++- 1 file changed, 79 insertions(+), 1 deletion(-) diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js index a81727c73..4f18fd52a 100644 --- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js +++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js @@ -1,3 +1,81 @@ +import { mount } from "@vue/test-utils"; +import serviceZipModalQuestion from "./service-zip-modal-question"; +import crypto from "crypto"; +global.crypto = crypto; + +jest.mock('@/digital-components/textbox-question/textbox-question', () => ({ + getCmsContent: jest.fn((widgetName, cmsFieldName) => { + return widgetName[cmsFieldName]; + }), +})); + +const linkWidgetName = "linkWidgetName"; +const modalWidgetName = "modalWidgetName"; +const textboxQuestionWidgetName = "textboxQuestionWidgetName"; + +const mockLinkCmsContent = { + BodyText: "Sample link body text here.", +}; + +const mockModalCmsContent = { + FooterText: "Sample modal footer text here.", +}; + +const mockTextboxQuestionCmsContent = { + QuestionText: "Sample question text here." +}; + +const mockMixin = { + methods: { + getCmsContent: jest.fn((widgetName, cmsFieldName) => { + if (widgetName === linkWidgetName) + return mockLinkCmsContent[cmsFieldName]; + + if (widgetName === modalWidgetName) + return mockModalCmsContent[cmsFieldName]; + + if (widgetName === textboxQuestionWidgetName) + return mockTextboxQuestionCmsContent[cmsFieldName]; + + return null; + }), + + getZipCodeData: jest.fn((zip) => { + return { + isValid: true, + state: "OH", + isServiceable: true, + }; + }), + }, +}; + describe("service-zip-modal-question.vue", () => { - test.todo("test this"); + + it("Should display text from textboxQuestionWidget", async () => { + const wrapper = mount(serviceZipModalQuestion, { + mixins: [mockMixin], + props: { + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + textboxQuestionWidgetName: textboxQuestionWidgetName, + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockTextboxQuestionCmsContent["QuestionText"])); + }); + + it("Should display footer text from modalWidget", async () => { + const wrapper = mount(serviceZipModalQuestion, { + mixins: [mockMixin], + props: { + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + textboxQuestionWidgetName: textboxQuestionWidgetName, + }, + attachTo: document.body, + }); + expect(wrapper.html()).toEqual(expect.stringContaining(mockModalCmsContent["FooterText"])); + }); + }); From 66104b1d9e44b1cf0772a5a075f13550dc3c1374 Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Fri, 17 Feb 2023 10:28:21 -0500 Subject: [PATCH 2/3] CSR-1012 formatting --- .../service-zip-modal-question.spec.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js index 4f18fd52a..f0c022ba8 100644 --- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js +++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js @@ -3,7 +3,7 @@ import serviceZipModalQuestion from "./service-zip-modal-question"; import crypto from "crypto"; global.crypto = crypto; -jest.mock('@/digital-components/textbox-question/textbox-question', () => ({ +jest.mock("@/digital-components/textbox-question/textbox-question", () => ({ getCmsContent: jest.fn((widgetName, cmsFieldName) => { return widgetName[cmsFieldName]; }), @@ -22,20 +22,23 @@ const mockModalCmsContent = { }; const mockTextboxQuestionCmsContent = { - QuestionText: "Sample question text here." + QuestionText: "Sample question text here.", }; const mockMixin = { methods: { getCmsContent: jest.fn((widgetName, cmsFieldName) => { - if (widgetName === linkWidgetName) + if (widgetName === linkWidgetName) { return mockLinkCmsContent[cmsFieldName]; + } - if (widgetName === modalWidgetName) + if (widgetName === modalWidgetName) { return mockModalCmsContent[cmsFieldName]; + } - if (widgetName === textboxQuestionWidgetName) + if (widgetName === textboxQuestionWidgetName) { return mockTextboxQuestionCmsContent[cmsFieldName]; + } return null; }), @@ -51,7 +54,6 @@ const mockMixin = { }; describe("service-zip-modal-question.vue", () => { - it("Should display text from textboxQuestionWidget", async () => { const wrapper = mount(serviceZipModalQuestion, { mixins: [mockMixin], @@ -62,7 +64,9 @@ describe("service-zip-modal-question.vue", () => { }, attachTo: document.body, }); - expect(wrapper.html()).toEqual(expect.stringContaining(mockTextboxQuestionCmsContent["QuestionText"])); + expect(wrapper.html()).toEqual( + expect.stringContaining(mockTextboxQuestionCmsContent["QuestionText"]) + ); }); it("Should display footer text from modalWidget", async () => { @@ -77,5 +81,4 @@ describe("service-zip-modal-question.vue", () => { }); expect(wrapper.html()).toEqual(expect.stringContaining(mockModalCmsContent["FooterText"])); }); - }); From 8af938177177fac54a5c9b21d24d5685b65f2553 Mon Sep 17 00:00:00 2001 From: Matt Caimi Date: Wed, 22 Feb 2023 12:49:05 -0500 Subject: [PATCH 3/3] CSR-1012 unit testing for service-zip-modal-question --- .../service-zip-modal-question.spec.js | 272 +++++++++++++++++- .../service-zip-modal-question.vue | 11 +- .../service-zip-question.vue | 0 3 files changed, 270 insertions(+), 13 deletions(-) rename src/layouts/service-location/service-zip-modal-question/{ => service-zip-question}/service-zip-question.vue (100%) diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js index f0c022ba8..4a0dec045 100644 --- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js +++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js @@ -1,4 +1,4 @@ -import { mount } from "@vue/test-utils"; +import { mount, shallowMount } from "@vue/test-utils"; import serviceZipModalQuestion from "./service-zip-modal-question"; import crypto from "crypto"; global.crypto = crypto; @@ -9,6 +9,12 @@ jest.mock("@/digital-components/textbox-question/textbox-question", () => ({ }), })); +jest.mock("@/digital-components/modal/modal", () => ({ + methods: { + closeModal: jest.fn(), + }, +})); + const linkWidgetName = "linkWidgetName"; const modalWidgetName = "modalWidgetName"; const textboxQuestionWidgetName = "textboxQuestionWidgetName"; @@ -44,41 +50,287 @@ const mockMixin = { }), getZipCodeData: jest.fn((zip) => { + if (zip === "43235") { + return { + containsMilitaryBase: false, + isServiceable: true, + isValid: true, + state: "OH", + zipCodeCtu: "01820", + }; + } + + if (zip === "61606") { + return { + containsMilitaryBase: false, + isServiceable: true, + isValid: true, + state: "IL", + zipCodeCtu: "01526", + }; + } + return { - isValid: true, - state: "OH", - isServiceable: true, + containsMilitaryBase: false, + isServiceable: false, + isValid: false, + state: null, + zipCodeCtu: null, }; }), }, }; describe("service-zip-modal-question.vue", () => { - it("Should display text from textboxQuestionWidget", async () => { + it("Initial state on load with no existing location info", async () => { + let serviceZipCodeQuestion = { + state: "", + zipCode: "", + isServiceable: undefined, + }; + + // Arrange const wrapper = mount(serviceZipModalQuestion, { mixins: [mockMixin], props: { + modelValue: serviceZipCodeQuestion, linkWidgetName: linkWidgetName, modalWidgetName: modalWidgetName, textboxQuestionWidgetName: textboxQuestionWidgetName, }, attachTo: document.body, }); - expect(wrapper.html()).toEqual( - expect.stringContaining(mockTextboxQuestionCmsContent["QuestionText"]) - ); + + // Assert + expect(wrapper.html()).toEqual(expect.stringContaining(mockLinkCmsContent["BodyText"])); }); - it("Should display footer text from modalWidget", async () => { + it("Initial state on load with existing location info", async () => { + // Arrange + let serviceZipCodeQuestion = { + state: "OH", + zipCode: "43235", + isServiceable: true, + }; + const wrapper = mount(serviceZipModalQuestion, { mixins: [mockMixin], props: { + modelValue: serviceZipCodeQuestion, linkWidgetName: linkWidgetName, modalWidgetName: modalWidgetName, textboxQuestionWidgetName: textboxQuestionWidgetName, }, attachTo: document.body, }); - expect(wrapper.html()).toEqual(expect.stringContaining(mockModalCmsContent["FooterText"])); + + // Assert + expect(wrapper.html()).not.toEqual(expect.stringContaining(mockLinkCmsContent["BodyText"])); + }); + + it("Should emit update:modelValue on setZipCode for a valid, serviceable zip", async () => { + // Arrange + let serviceZipCodeQuestion = { + state: "IL", + zipCode: "61606", + isServiceable: true, + }; + + const zip = "43235"; + + const wrapper = mount(serviceZipModalQuestion, { + mixins: [mockMixin], + props: { + modelValue: serviceZipCodeQuestion, + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + textboxQuestionWidgetName: textboxQuestionWidgetName, + }, + attachTo: document.body, + }); + + // Act + wrapper.vm.internalModel.zipCode = zip; + await wrapper.vm.setZipCode(); + + let expectedEmit = [[{ isServiceable: true, state: "OH", zipCode: "43235" }]]; + + // Assert + expect(wrapper.emitted("update:modelValue")).toEqual(expectedEmit); + }); + + it("Should not emit update:modelValue on setZipCode for an invalid zip", async () => { + // Arrange + let serviceZipCodeQuestion = { + state: "IL", + zipCode: "61606", + isServiceable: true, + }; + + const zip = ""; + + const wrapper = mount(serviceZipModalQuestion, { + mixins: [mockMixin], + props: { + modelValue: serviceZipCodeQuestion, + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + textboxQuestionWidgetName: textboxQuestionWidgetName, + }, + attachTo: document.body, + }); + + // Act + wrapper.vm.internalModel.zipCode = zip; + await wrapper.vm.setZipCode(); + + // Assert + expect(wrapper.emitted("update:modelValue")).not.toBeTruthy(); + }); + + it("Should emit service-zip-updated on setZipCode for a valid, serviceable zip", async () => { + // Arrange + let serviceZipCodeQuestion = { + state: "IL", + zipCode: "61606", + isServiceable: true, + }; + + const zip = "43235"; + + const wrapper = mount(serviceZipModalQuestion, { + mixins: [mockMixin], + props: { + modelValue: serviceZipCodeQuestion, + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + textboxQuestionWidgetName: textboxQuestionWidgetName, + }, + attachTo: document.body, + }); + + // Act + wrapper.vm.internalModel.zipCode = zip; + await wrapper.vm.setZipCode(); + + // Assert + expect(wrapper.emitted("service-zip-updated")).toBeTruthy(); + }); + + it("Should not emit service-zip-updated on setZipCode for an invalid zip", async () => { + // Arrange + let serviceZipCodeQuestion = { + state: "IL", + zipCode: "61606", + isServiceable: true, + }; + + const zip = ""; + + const wrapper = mount(serviceZipModalQuestion, { + mixins: [mockMixin], + props: { + modelValue: serviceZipCodeQuestion, + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + textboxQuestionWidgetName: textboxQuestionWidgetName, + }, + attachTo: document.body, + }); + + // Act + wrapper.vm.internalModel.zipCode = zip; + await wrapper.vm.setZipCode(); + + // Assert + expect(wrapper.emitted("service-zip-updated")).not.toBeTruthy(); + }); + + it("Should display invalid zip alerts for invalid ip inputs", async () => { + // Arrange + let serviceZipCodeQuestion = { + state: "IL", + zipCode: "61606", + isServiceable: true, + }; + + const zip = "11111"; + + const wrapper = mount(serviceZipModalQuestion, { + mixins: [mockMixin], + props: { + modelValue: serviceZipCodeQuestion, + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + textboxQuestionWidgetName: textboxQuestionWidgetName, + }, + attachTo: document.body, + }); + + // Act + wrapper.vm.internalModel.zipCode = zip; + await wrapper.vm.setZipCode(); + + // Assert + expect(wrapper.vm.displayInvalidZipAlert).toBe(true); + }); + + it("Should reset all alerts on onModalClosed", async () => { + // Arrange + let serviceZipCodeQuestion = { + state: "IL", + zipCode: "61606", + isServiceable: true, + }; + + const zip = ""; + + const wrapper = mount(serviceZipModalQuestion, { + mixins: [mockMixin], + props: { + modelValue: serviceZipCodeQuestion, + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + textboxQuestionWidgetName: textboxQuestionWidgetName, + }, + attachTo: document.body, + }); + + // Act + wrapper.vm.internalModel.zipCode = zip; + await wrapper.vm.setZipCode(); + wrapper.vm.onModalClosed(); + + // Assert + expect(wrapper.vm.displayInvalidZipAlert).toBe(false); + }); + + it("Should prepopulate the zip on onModalOpened", async () => { + // Arrange + let serviceZipCodeQuestion = { + state: "IL", + zipCode: "61606", + isServiceable: true, + }; + + const zip = "123"; + + const wrapper = mount(serviceZipModalQuestion, { + mixins: [mockMixin], + props: { + modelValue: serviceZipCodeQuestion, + linkWidgetName: linkWidgetName, + modalWidgetName: modalWidgetName, + textboxQuestionWidgetName: textboxQuestionWidgetName, + }, + attachTo: document.body, + }); + + // Act + wrapper.vm.internalModel.zipCode = zip; + wrapper.vm.onModalOpened(); + + // Assert + expect(wrapper.vm.internalModel.zipCode).toEqual("61606"); }); }); diff --git a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue index 4ca6990b3..ef8e00c1d 100644 --- a/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue +++ b/src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue @@ -35,7 +35,7 @@