CSR-1012 | modal loader and improved validation

src/digital-components/modal/modal.spec.js

@@ -1,68 +1,31 @@
 import { shallowMount } from "@vue/test-utils";
 import Modal from "./modal";
 
+const modalId = "modal-one";
+const footerButtonText = "Sample footer text here.";
+const headerText = "Sample header text here.";
+
 describe("modal.vue", () => {
-    it("Should display header text when HeaderText is defined in the CMS", async () => {
+    it("Should display footer button text when footerButtonText is defined", async () => {
-        // Act
         const wrapper = shallowMount(Modal, {
-            mixins: [mockMixin],
             props: {
-                cmsWidgetName: "test",
+                modalId: modalId,
+                footerButtonText: footerButtonText,
             },
             attachTo: document.body,
         });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"]));
+        expect(wrapper.html()).toEqual(expect.stringContaining(footerButtonText));
     });
 
-    it("Should display subheader text when SubheaderText is defined in the CMS", async () => {
+    it("Should display modal header text when headerText is defined", async () => {
-        // Act
         const wrapper = shallowMount(Modal, {
-            mixins: [mockMixin],
             props: {
-                cmsWidgetName: "test",
+                modalId: modalId,
+                footerButtonText: footerButtonText,
+                headerText: headerText,
             },
             attachTo: document.body,
         });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["SubheaderText"]));
+        expect(wrapper.html()).toEqual(expect.stringContaining(headerText));
-    });
+    });   
-
-    it("Should insert image url when Image is defined in the CMS", async () => {
-        // Act
-        const wrapper = shallowMount(Modal, {
-            mixins: [mockMixin],
-            props: {
-                cmsWidgetName: "test",
-            },
-            attachTo: document.body,
-        });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["Image"]));
-    });
-
-    it("Should display body text when BodyText is defined in the CMS", async () => {
-        // Act
-        const wrapper = shallowMount(Modal, {
-            mixins: [mockMixin],
-            props: {
-                cmsWidgetName: "test",
-            },
-            attachTo: document.body,
-        });
-        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"]));
-    });
 });
-
-const mockMixin = {
-    methods: {
-        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
-            return mockCmsContent[cmsFieldName];
-        }),
-    },
-};
-
-const mockCmsContent = {
-    HeaderText: "Sample header text here.",
-    SubheaderText: "Sample subheader text here.",
-    Image: "https://www.sampleImage.sample",
-    BodyText: "Sample body text here.",
-    FooterText: "Sample footer text here.",
-};

src/digital-components/modal/modal.vue

@@ -30,7 +30,7 @@
                         isPrimary
                         class="w-100"
                         ref="buttonMain"
-                        suppressLoader
+                        loaderColor="white"
                         :buttonText="footerButtonText"
                         @click-event="validateAndEmit" />
                 </div>
@@ -58,8 +58,12 @@ export default {
     },
     methods: {
         async validateAndEmit() {
-            const validationResult = await this.modalForm.validate();
+            if (this.modalForm) {
-            if (validationResult.valid) {
+                const validationResult = await this.modalForm.validate();
+                if (validationResult.valid) {
+                    this.$emit("footer-button-event");
+                }
+            } else {
                 this.$emit("footer-button-event");
             }
 

src/fmg-components/content-group-modal/content-group-modal.spec.js

@@ -1,3 +1,64 @@
+import { mount } from "@vue/test-utils";
+import contentGroupModal from "./content-group-modal";
+
 describe("content-group-modal.vue", () => {
-    test.todo("test this");
+    it("Should display header text when HeaderText is defined in the CMS", async () => {
+        const wrapper = mount(contentGroupModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["HeaderText"]));
+    });
+
+    it("Should display subheader text when SubheaderText is defined in the CMS", async () => {
+        const wrapper = mount(contentGroupModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["SubheaderText"]));
+    });
+
+    it("Should insert image url when Image is defined in the CMS", async () => {
+        const wrapper = mount(contentGroupModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["Image"]));
+    });
+
+    it("Should display body text when BodyText is defined in the CMS", async () => {
+        const wrapper = mount(contentGroupModal, {
+            mixins: [mockMixin],
+            props: {
+                cmsWidgetName: "test",
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(mockCmsContent["BodyText"]));
+    });
 });
+
+const mockMixin = {
+    methods: {
+        getCmsContent: jest.fn((widgetName, cmsFieldName) => {
+            return mockCmsContent[cmsFieldName];
+        }),
+    },
+};
+
+const mockCmsContent = {
+    HeaderText: "Sample header text here.",
+    SubheaderText: "Sample subheader text here.",
+    Image: "https://www.sampleImage.sample",
+    BodyText: "Sample body text here.",
+    FooterText: "Sample footer text here.",
+};

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

@@ -22,7 +22,7 @@
         :onModalOpenedCallback="onModalOpened"
         :footerButtonText="footerButtonText"
         :headerText="textboxQuestionPrompt"
-        @footer-button-event="setZip"
+        @footer-button-event="setZipCode"
         :modalForm="modalForm">
         <textboxQuestion
             ref="zipInputTextQuestion"
@@ -128,7 +128,11 @@ export default {
             this.focusOnZipInput();
         },
 
-        async setZip() {
+        closeModal() {
+            this.$refs[this.modalName].closeModal();
+        },
+
+        async setZipCode() {
             this.resetAlerts();
 
             const zipCodeData = await this.getZipCodeData(this.serviceZipCodeInput);
@@ -141,7 +145,7 @@ export default {
                 this.serviceZip = this.serviceZipCodeInput;
                 this.serviceZipState = zipCodeData.state;
 
-                this.$refs[this.modalName].closeModal();
+                this.closeModal();
             }
         },
     },