Merge branch 'feature/CSR-1012' into feature/CSR-1088

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.spec.js

@@ -1,3 +1,336 @@
+import { mount, shallowMount } 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];
+    }),
+}));
+
+jest.mock("@/digital-components/modal/modal", () => ({
+    methods: {
+        closeModal: jest.fn(),
+    },
+}));
+
+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) => {
+            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 {
+                containsMilitaryBase: false,
+                isServiceable: false,
+                isValid: false,
+                state: null,
+                zipCodeCtu: null,
+            };
+        }),
+    },
+};
+
 describe("service-zip-modal-question.vue", () => {
-    test.todo("test this");
+    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,
+        });
+
+        // Assert
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockLinkCmsContent["BodyText"]));
+    });
+
+    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,
+        });
+
+        // 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");
+    });
 });

src/layouts/service-location/service-zip-modal-question/service-zip-modal-question.vue

@@ -35,7 +35,7 @@
 <script>
 // Components
 import textLink from "@/ux-components/text-link/text-link";
-import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question";
+import serviceZipQuestion from "@/layouts/service-location/service-zip-modal-question/service-zip-question/service-zip-question";
 import modal from "@/digital-components/modal/modal";
 import alert from "@/ux-components/alert/alert";
 
@@ -86,12 +86,11 @@ export default {
 
         resetsOnZipInput() {
             this.resetAlerts();
-            this.$refs[this.modalName].resetButtonStyle();
         },
 
         focusOnZipInput() {
             const input = document.getElementById(this.serviceZipCodeTextInputId);
-            input.focus();
+            input?.focus();
         },
 
         copyModel(modelToCopy) {
@@ -118,9 +117,15 @@ export default {
         },
 
         onModalOpened() {
+            this.internalModel.zipCode = this.modelValue.zipCode;
             this.focusOnZipInput();
         },
 
+        onModalClosed() {
+            this.internalModel.zipCode = this.modelValue.zipCode;
+            this.resetsOnZipInput();
+        },
+
         async setZipCode() {
             this.resetAlerts();