From 0b3e78ecd035e193d1238cd65d06e616f9e44d5c Mon Sep 17 00:00:00 2001
From: Eli Bosley <ekbosley@gmail.com>
Date: Mon, 13 Oct 2025 21:07:32 -0400
Subject: [PATCH] test(activation): enhance ActivationCodeModal tests with Vue
 app integration

- Updated the `activationCodeModal.test.ts` file to integrate Vue app setup for testing the activation code modal store.
- Refactored test initialization to use a defined component and mount the app, improving the test structure and ensuring proper store usage.
- Added cleanup logic to unmount the app after each test, enhancing test isolation and reliability.

This update improves the testing framework for the activation code modal, ensuring better integration with Vue's reactivity system.
---
 .../store/activationCodeModal.test.ts         | 28 +++++++++++++++++--
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/web/__test__/store/activationCodeModal.test.ts b/web/__test__/store/activationCodeModal.test.ts
index 31e43500f..79e4cbcfc 100644
--- a/web/__test__/store/activationCodeModal.test.ts
+++ b/web/__test__/store/activationCodeModal.test.ts
@@ -1,10 +1,12 @@
-import { ref } from 'vue';
+import { createApp, defineComponent, ref } from 'vue';
 import { createPinia, setActivePinia } from 'pinia';
 import { useSessionStorage } from '@vueuse/core';
 
 import { ACTIVATION_CODE_MODAL_HIDDEN_STORAGE_KEY } from '~/consts';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 
+import type { App } from 'vue';
+
 import { useActivationCodeDataStore } from '~/components/Activation/store/activationCodeData';
 import { useActivationCodeModalStore } from '~/components/Activation/store/activationCodeModal';
 import { useCallbackActionsStore } from '~/store/callbackActions';
@@ -27,6 +29,8 @@ describe('ActivationCodeModal Store', () => {
   let mockIsFreshInstall: ReturnType<typeof ref>;
   let mockActivationCode: ReturnType<typeof ref>;
   let mockCallbackData: ReturnType<typeof ref>;
+  let app: App<Element> | null = null;
+  let mountTarget: HTMLElement | null = null;
 
   beforeEach(() => {
     vi.clearAllMocks();
@@ -51,11 +55,29 @@ describe('ActivationCodeModal Store', () => {
       callbackData: mockCallbackData,
     } as unknown as ReturnType<typeof useCallbackActionsStore>);
 
-    setActivePinia(createPinia());
-    store = useActivationCodeModalStore();
+    const pinia = createPinia();
+    setActivePinia(pinia);
+
+    const TestHost = defineComponent({
+      setup() {
+        store = useActivationCodeModalStore();
+        return () => null;
+      },
+    });
+
+    mountTarget = document.createElement('div');
+    app = createApp(TestHost);
+    app.use(pinia);
+    app.mount(mountTarget);
   });
 
   afterEach(() => {
+    if (app) {
+      app.unmount();
+      app = null;
+    }
+    mountTarget = null;
+
     vi.resetAllMocks();
     mockIsHidden.value = null;
     mockIsFreshInstall.value = false;