From 3606e7a1c77dcc4510fa233fca0d8414101d6f57 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Fri, 24 Mar 2023 14:31:34 -0400
Subject: [PATCH] Updated unit tests

---
 src/digital-components/modal/modal.spec.js | 104 ++++++++++++++++-----
 1 file changed, 80 insertions(+), 24 deletions(-)

diff --git a/src/digital-components/modal/modal.spec.js b/src/digital-components/modal/modal.spec.js
index b738ac6ae..4f8da5c86 100644
--- a/src/digital-components/modal/modal.spec.js
+++ b/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({
-            validate: mockValidate(false),
-        });
+        const fakeMeta = {
+            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({
-            validate: mockValidate(false),
-        });
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        }
 
-        useIsFormTouched.mockReturnValue(true);
-        useIsFormDirty.mockReturnValue(true);
-        useIsFormValid.mockReturnValue(false);
+        useForm.mockReturnValue({
+            meta: mockMeta(fakeMeta),
+            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({
-            validate: mockValidate(false),
-        });
+        const fakeMeta = {
+            touched: true,
+            dirty: true,
+            valid: true,
+            validated: true,
+        }
 
-        useIsFormDirty.mockReturnValue(true);
-        useIsFormValid.mockReturnValue(true);
+        useForm.mockReturnValue({
+            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();