From 7af8d9d26edab200411007e3b85d87c7fef765c2 Mon Sep 17 00:00:00 2001
From: Leah Schumann <leah.schumann@safelite.com>
Date: Wed, 22 Feb 2023 09:20:58 -0500
Subject: [PATCH] CSR-1088 Added unit tests for modal component

---
 src/digital-components/modal/modal.spec.js | 42 +++++++---------------
 src/digital-components/modal/modal.vue     |  4 +--
 2 files changed, 15 insertions(+), 31 deletions(-)

diff --git a/src/digital-components/modal/modal.spec.js b/src/digital-components/modal/modal.spec.js
index 0ce53b761..3d6375094 100644
--- a/src/digital-components/modal/modal.spec.js
+++ b/src/digital-components/modal/modal.spec.js
@@ -1,37 +1,28 @@
-const veeValidate = require("vee-validate");
 jest.mock("vee-validate", () => ({
     useForm: jest.fn(),
     useIsFormTouched: jest.fn(),
     useIsFormDirty: jest.fn(),
-    useIsFormValid: jest.fn()
+    useIsFormValid: jest.fn(),
 }));
 
-
-
-
-
 const mockValidate = (returnValue) => jest.fn(async () => Promise.resolve({ valid: returnValue }));
 
-import { shallowMount } from "@vue/test-utils";
+import { mount, shallowMount } from "@vue/test-utils";
 import Modal from "./modal";
 import crypto from "crypto";
-import { useForm, useIsFormDirty, useIsFormTouched, useIsFormValid } from "vee-validate"
+import { useForm, useIsFormDirty, useIsFormTouched, useIsFormValid } from "vee-validate";
 
-const modalId = "modal-one";
 const footerButtonText = "Sample footer text here.";
 const headerText = "Sample header text here.";
 
 global.crypto = crypto;
 
-
-
 describe("modal.vue", () => {
     it("Should display modal header text when headerText is defined", async () => {
         const wrapper = shallowMount(Modal, {
             props: {
-                modalId: modalId,
-                footerButtonText: footerButtonText,
                 headerText: headerText,
+                footerButtonText: footerButtonText,
             },
             attachTo: document.body,
         });
@@ -41,7 +32,6 @@ 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,
@@ -51,49 +41,43 @@ describe("modal.vue", () => {
 
     it("Should emit 'footer-button-event' if the form is valid", async () => {
         useForm.mockReturnValue({
-            validate: mockValidate(true)
-        })
-        
+            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; 
+        });
+        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 () => {  
+    it("Should not emit 'footer-button-event' if the form is not valid", async () => {
         useForm.mockReturnValue({
-            validate: mockValidate(false)
-        })
+            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();
-
     });
-
 });
-
diff --git a/src/digital-components/modal/modal.vue b/src/digital-components/modal/modal.vue
index 75e6ae665..0034b5155 100644
--- a/src/digital-components/modal/modal.vue
+++ b/src/digital-components/modal/modal.vue
@@ -74,8 +74,8 @@ export default {
         };
     },
     methods: {
-        async validateAndEmit() {         
-            const validationResult = await this.form.validate();          
+        async validateAndEmit() {
+            const validationResult = await this.form.validate();
             if (validationResult.valid) {
                 this.$emit("footer-button-event");
             }