refactor confirm dialog tests to avoid vm access for Vue 3 compatibility

Author: ahmedhamidawan

client/src/components/ConfirmDialog.test.ts

@@ -2,44 +2,44 @@ import { mount } from "@vue/test-utils";
 import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import { nextTick } from "vue";
 
-import ConfirmDialog from "./ConfirmDialog.vue";
+import { ConfirmDialog as confirmService, setConfirmDialogComponentRef } from "@/composables/confirmDialog";
 
-type ConfirmDialogVM = InstanceType<typeof ConfirmDialog>;
+import ConfirmDialogComponent from "./ConfirmDialog.vue";
 
 describe("ConfirmDialog", () => {
     let wrapper: ReturnType<typeof mount>;
-    let vm: ConfirmDialogVM;
 
     beforeEach(() => {
-        wrapper = mount(ConfirmDialog as object, { attachTo: document.body });
-        vm = wrapper.vm as unknown as ConfirmDialogVM;
+        wrapper = mount(ConfirmDialogComponent as object, { attachTo: document.body });
+        setConfirmDialogComponentRef(wrapper.vm as unknown as InstanceType<typeof ConfirmDialogComponent>);
     });
 
     afterEach(() => {
+        setConfirmDialogComponentRef(null);
         wrapper.destroy();
         document.body.innerHTML = "";
     });
 
     it("resolves true when OK is clicked", async () => {
-        const promise = vm.confirm("Are you sure?");
+        const promise = confirmService.confirm("Are you sure?");
         await wrapper.find('[data-description="confirm dialog ok"]').trigger("click");
         expect(await promise).toBe(true);
     });
 
     it("resolves false when Cancel is clicked", async () => {
-        const promise = vm.confirm("Are you sure?");
+        const promise = confirmService.confirm("Are you sure?");
         await wrapper.find('[data-description="confirm dialog cancel"]').trigger("click");
         expect(await promise).toBe(false);
     });
 
     it("resolves null when dialog is dismissed (closed without choosing)", async () => {
-        const promise = vm.confirm("Are you sure?");
+        const promise = confirmService.confirm("Are you sure?");
         wrapper.find("dialog").element.dispatchEvent(new Event("close"));
         expect(await promise).toBe(null);
     });
 
     it("renders message and respects custom options", async () => {
-        vm.confirm("Delete this item?", { title: "Confirm deletion", okText: "Delete" });
+        confirmService.confirm("Delete this item?", { title: "Confirm deletion", okText: "Delete" });
         await nextTick();
         const dialogText = wrapper.find("dialog").text();
         expect(dialogText).toContain("Delete this item?");
@@ -48,8 +48,8 @@ describe("ConfirmDialog", () => {
     });
 
     it("resolves first pending promise as false on concurrent call", async () => {
-        const first = vm.confirm("First message");
-        const second = vm.confirm("Second message");
+        const first = confirmService.confirm("First message");
+        const second = confirmService.confirm("Second message");
         expect(await first).toBe(false);
         // resolve second cleanly
         await wrapper.find('[data-description="confirm dialog cancel"]').trigger("click");
@@ -58,7 +58,7 @@ describe("ConfirmDialog", () => {
 
     it("resolves false when abort signal fires", async () => {
         const controller = new AbortController();
-        const promise = vm.confirm("Are you sure?", { signal: controller.signal });
+        const promise = confirmService.confirm("Are you sure?", { signal: controller.signal });
         controller.abort();
         expect(await promise).toBe(false);
     });

client/src/composables/confirmDialog.test.ts

@@ -23,18 +23,19 @@ describe("useConfirmDialog", () => {
                 }),
         } as ConfirmDialogInstance);
 
+        let confirm: ReturnType<typeof useConfirmDialog>["confirm"] = () => Promise.resolve(null);
+
         const CallerComponent = defineComponent({
             setup() {
-                const { confirm } = useConfirmDialog();
-                return { confirm };
+                ({ confirm } = useConfirmDialog());
+                return {};
             },
             template: "<div />",
         });
 
         const wrapper = mount(CallerComponent as object, { localVue });
-        const vm = wrapper.vm as typeof wrapper.vm & ReturnType<typeof useConfirmDialog>;
 
-        const promise = vm.confirm("Are you sure?");
+        const promise = confirm("Are you sure?");
 
         wrapper.destroy(); // triggers onUnmounted → controller.abort()