Added tests to verify that the footer-button-event emit is only fired when the form is valid

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

@@ -1,6 +1,21 @@
+const veeValidate = require("vee-validate");
+jest.mock("vee-validate", () => ({
+    useForm: jest.fn(),
+    useIsFormTouched: jest.fn(),
+    useIsFormDirty: jest.fn(),
+    useIsFormValid: jest.fn()
+}));
+
+
+
+
+
+const mockValidate = (returnValue) => jest.fn(async () => Promise.resolve({ valid: returnValue }));
+
 import { shallowMount } from "@vue/test-utils";
 import Modal from "./modal";
 import crypto from "crypto";
+import { useForm, useIsFormDirty, useIsFormTouched, useIsFormValid } from "vee-validate"
 
 const modalId = "modal-one";
 const footerButtonText = "Sample footer text here.";
@@ -8,18 +23,9 @@ const headerText = "Sample header text here.";
 
 global.crypto = crypto;
 
-describe("modal.vue", () => {
-    it("Should display footer button text when footerButtonText is defined", async () => {
-        const wrapper = shallowMount(Modal, {
-            props: {
-                modalId: modalId,
-                footerButtonText: footerButtonText,
-            },
-            attachTo: document.body,
-        });
-        expect(wrapper.html()).toEqual(expect.stringContaining(footerButtonText));
-    });
 
+
+describe("modal.vue", () => {
     it("Should display modal header text when headerText is defined", async () => {
         const wrapper = shallowMount(Modal, {
             props: {
@@ -31,4 +37,63 @@ describe("modal.vue", () => {
         });
         expect(wrapper.html()).toEqual(expect.stringContaining(headerText));
     });
+
+    it("Should display footer button text when footerButtonText is defined", async () => {
+        const wrapper = shallowMount(Modal, {
+            props: {
+                modalId: modalId,
+                footerButtonText: footerButtonText,
+            },
+            attachTo: document.body,
+        });
+        expect(wrapper.html()).toEqual(expect.stringContaining(footerButtonText));
+    });
+
+    it("Should emit 'footer-button-event' if the form is valid", async () => {
+        useForm.mockReturnValue({
+            validate: mockValidate(true)
+        })
+        
+        const resetButtonStyle = jest.fn();
+        const wrapper = shallowMount(Modal, {
+            props: {
+                modalId: modalId,
+                footerButtonText: footerButtonText,
+                headerText: headerText,
+            },
+            attachTo: document.body,
+        });       
+        wrapper.vm.resetButtonStyle = resetButtonStyle; 
+
+        const buttonMain = wrapper.findComponent({ ref: "buttonMain" });
+        await buttonMain.trigger("click-event");
+
+        expect(wrapper.emitted("footer-button-event")).toBeTruthy();
+
+    });
+
+    it("Should not emit 'footer-button-event' if the form is not valid", async () => {  
+        useForm.mockReturnValue({
+            validate: mockValidate(false)
+        })
+
+        const resetButtonStyle = jest.fn();
+        const wrapper = shallowMount(Modal, {
+            props: {
+                modalId: modalId,
+                footerButtonText: footerButtonText,
+                headerText: headerText,
+            },
+            attachTo: document.body,
+        });      
+        wrapper.vm.resetButtonStyle = resetButtonStyle;
+
+        const buttonMain = wrapper.findComponent({ ref: "buttonMain" });
+        await buttonMain.trigger("click-event");
+
+        expect(wrapper.emitted("footer-button-event")).toBeFalsy();
+
+    });
+
 });
+

src/digital-components/modal/modal.vue

@@ -74,8 +74,8 @@ export default {
         };
     },
     methods: {
-        async validateAndEmit() {
+        async validateAndEmit() {         
-            const validationResult = await this.form.validate();
+            const validationResult = await this.form.validate();          
             if (validationResult.valid) {
                 this.$emit("footer-button-event");
             }