From a6505587bf4a448f5f3de930004a95ee203416b8 Mon Sep 17 00:00:00 2001
From: undergroundwires <git@undergroundwires.dev>
Date: Mon, 22 Jul 2024 15:10:12 +0200
Subject: [PATCH] Fix intermittent `ModalDialog` unit test failures

Refactor `ModalDialog` unit tests to use `shallowMount` consistently.
Previously, tests sometimes failed due to the `UseSvgLoader` hook
attempting icon loads during component teardown, which occasionally led
led to errors when the `window` object became unavailable. By
switching to `shallowMount`, tests no longer deeply render child
components, mitigating the risk of such errors and aligning with
unit testing best practices.

Additionally, this commit sets a default value for the `modelValue`
prop in test setups to address Vue warnings about missing required
props, further stabilizing the test environment.
---
 .../Shared/Modal/ModalDialog.spec.ts          | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/tests/unit/presentation/components/Shared/Modal/ModalDialog.spec.ts b/tests/unit/presentation/components/Shared/Modal/ModalDialog.spec.ts
index 896ebf3f..d88966b8 100644
--- a/tests/unit/presentation/components/Shared/Modal/ModalDialog.spec.ts
+++ b/tests/unit/presentation/components/Shared/Modal/ModalDialog.spec.ts
@@ -1,7 +1,6 @@
 import { describe, it, expect } from 'vitest';
-import { shallowMount, mount } from '@vue/test-utils';
+import { shallowMount } from '@vue/test-utils';
 import ModalDialog from '@/presentation/components/Shared/Modal/ModalDialog.vue';
-import ModalContainer from '@/presentation/components/Shared/Modal/ModalContainer.vue';
 
 const DOM_CLOSE_BUTTON_SELECTOR = '.dialog__close-button';
 const MODAL_CONTAINER_COMPONENT_NAME = 'ModalContainer';
@@ -19,18 +18,19 @@ describe('ModalDialog.vue', () => {
   describe(`binds the visibility flag ${MODAL_CONTAINER_COMPONENT_NAME}`, () => {
     it('given true', () => {
       // arrange & act
-      const wrapper = mountComponent({ modelValue: true, deepMount: true });
+      const wrapper = mountComponent({ modelValue: true });
 
       // assert
-      const modalContainerWrapper = wrapper.findComponent(ModalContainer);
+      const modalContainerWrapper = wrapper.findComponent({ name: MODAL_CONTAINER_COMPONENT_NAME });
+
       expect(modalContainerWrapper.props('modelValue')).to.equal(true);
     });
     it('given false', () => {
       // arrange & act
-      const wrapper = mountComponent({ modelValue: false, deepMount: true });
+      const wrapper = mountComponent({ modelValue: false });
 
       // assert
-      const modalContainerWrapper = wrapper.findComponent(ModalContainer);
+      const modalContainerWrapper = wrapper.findComponent({ name: MODAL_CONTAINER_COMPONENT_NAME });
       expect(modalContainerWrapper.props('modelValue')).to.equal(false);
     });
   });
@@ -65,17 +65,20 @@ describe('ModalDialog.vue', () => {
 function mountComponent(options?: {
   readonly modelValue?: boolean,
   readonly slotHtml?: string,
-  readonly deepMount?: boolean,
 }) {
-  const mountFunction = options?.deepMount === true ? mount : shallowMount;
-  const wrapper = mountFunction(ModalDialog, {
-    props: options?.modelValue !== undefined ? { modelValue: options?.modelValue } : undefined,
+  const wrapper = shallowMount(ModalDialog, {
+    props: {
+      modelValue: options?.modelValue !== undefined
+        ? options?.modelValue
+        : true /* provide default value to required property */,
+    },
     slots: options?.slotHtml !== undefined ? { default: options?.slotHtml } : undefined,
     global: {
-      stubs: options?.deepMount === true ? undefined : {
+      stubs: {
         [MODAL_CONTAINER_COMPONENT_NAME]: {
           name: MODAL_CONTAINER_COMPONENT_NAME,
           template: '<slot />',
+          props: ['modelValue'],
         },
       },
     },