Updated unit tests

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

@@ -1,16 +1,14 @@
 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 }));
+const mockMeta = (returnValue) => jest.fn(async () => Promise.resolve(returnValue));
 
 import { shallowMount } from "@vue/test-utils";
 import modal from "./modal";
 import crypto from "crypto";
-import { useForm, useIsFormDirty, useIsFormTouched, useIsFormValid } from "vee-validate";
+import { useForm } from "vee-validate";
 import { Modal } from "bootstrap";
 
 const footerButtonText = "Sample footer text here.";
@@ -21,6 +19,18 @@ global.crypto = crypto;
 describe("modal.vue", () => {
     it("Should display modal header text when headerText is defined", async () => {
         // Arrange / Act
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        }
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
+        
         const wrapper = shallowMount(modal, {
             props: {
                 headerText: headerText,
@@ -35,6 +45,17 @@ describe("modal.vue", () => {
 
     it("Should display footer button text when footerButtonText is defined", async () => {
         // Arrange / Act
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        }
+
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
         const wrapper = shallowMount(modal, {
             props: {
                 footerButtonText: footerButtonText,
@@ -48,7 +69,15 @@ describe("modal.vue", () => {
 
     it("Should emit 'footer-button-event' if the form is valid", async () => {
         // Arrange
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        }
+
         useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
             validate: mockValidate(true),
         });
 
@@ -72,7 +101,15 @@ describe("modal.vue", () => {
 
     it("Should not emit 'footer-button-event' if the form is invalid", async () => {
         // Arrange
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: false,
+            validated: true,
+        }
+
         useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
             validate: mockValidate(false),
         });
 
@@ -96,11 +133,17 @@ describe("modal.vue", () => {
 
     it("Should have a disabled footer button when the form has not been touched", async () => {
         // Arrange / Act
-        useForm.mockReturnValue({
+        const fakeMeta = {
-            validate: mockValidate(false),
+            touched: true,
-        });
+            dirty: true,
+            valid: true,
+            validated: true,
+        }
 
-        useIsFormTouched.mockReturnValue(false);
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
 
         const resetButtonStyle = jest.fn();
         const wrapper = shallowMount(modal, {
@@ -118,13 +161,17 @@ describe("modal.vue", () => {
 
     it("Should have a disabled footer button when the form is invalid", async () => {
         // Arrange / Act
-        useForm.mockReturnValue({
+        const fakeMeta = {
-            validate: mockValidate(false),
+            touched: true,
-        });
+            dirty: true,
+            valid: true,
+            validated: true,
+        }
 
-        useIsFormTouched.mockReturnValue(true);
+        useForm.mockReturnValue({
-        useIsFormDirty.mockReturnValue(true);
+            meta: mockMeta(fakeMeta),
-        useIsFormValid.mockReturnValue(false);
+            validate: mockValidate(true),
+        });
 
         const resetButtonStyle = jest.fn();
         const wrapper = shallowMount(modal, {
@@ -142,12 +189,17 @@ describe("modal.vue", () => {
 
     it("Should call bootstrap Modal method 'show' when calling 'openModal'", async () => {
         // Arrange
-        useForm.mockReturnValue({
+        const fakeMeta = {
-            validate: mockValidate(false),
+            touched: true,
-        });
+            dirty: true,
+            valid: true,
+            validated: true,
+        }
 
-        useIsFormDirty.mockReturnValue(true);
+        useForm.mockReturnValue({
-        useIsFormValid.mockReturnValue(true);
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
+        });
 
         const showMock = jest.spyOn(Modal.prototype, "show");
 
@@ -170,13 +222,17 @@ describe("modal.vue", () => {
 
     it("Should call bootstrap Modal method 'hide' when calling 'closeModal'", async () => {
         // Arrange
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        }
+
         useForm.mockReturnValue({
-            validate: mockValidate(false),
+            meta: mockMeta(fakeMeta),
+            validate: mockValidate(true),
         });
-
-        useIsFormDirty.mockReturnValue(true);
-        useIsFormValid.mockReturnValue(true);
-
         const hideMock = jest.spyOn(Modal.prototype, "hide");
 
         const resetButtonStyle = jest.fn();