add vitest tests for ConfirmDialog component and composable

Author: claude

client/src/components/ConfirmDialog.test.ts

@@ -0,0 +1,73 @@
+import { getLocalVue } from "@tests/vitest/helpers";
+import { mount } from "@vue/test-utils";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
+
+import ConfirmDialog from "./ConfirmDialog.vue";
+
+const localVue = getLocalVue();
+
+type ConfirmDialogVM = InstanceType<typeof ConfirmDialog>;
+
+describe("ConfirmDialog", () => {
+    let wrapper: ReturnType<typeof mount>;
+    let vm: ConfirmDialogVM;
+
+    beforeEach(() => {
+        wrapper = mount(ConfirmDialog as object, { localVue, attachTo: document.body });
+        vm = wrapper.vm as unknown as ConfirmDialogVM;
+    });
+
+    afterEach(() => {
+        wrapper.destroy();
+        document.body.innerHTML = "";
+    });
+
+    it("resolves true when OK is clicked", async () => {
+        const promise = vm.confirm("Are you sure?");
+        await localVue.nextTick();
+        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?");
+        await localVue.nextTick();
+        await wrapper.find('[data-description="confirm dialog cancel"]').trigger("click");
+        expect(await promise).toBe(false);
+    });
+
+    it("resolves false when dialog is closed externally", async () => {
+        const promise = vm.confirm("Are you sure?");
+        await localVue.nextTick();
+        wrapper.find("dialog").element.dispatchEvent(new Event("close"));
+        await localVue.nextTick();
+        expect(await promise).toBe(false);
+    });
+
+    it("renders message and respects custom options", async () => {
+        vm.confirm("Delete this item?", { title: "Confirm deletion", okText: "Delete" });
+        await localVue.nextTick();
+        const dialogText = wrapper.find("dialog").text();
+        expect(dialogText).toContain("Delete this item?");
+        expect(dialogText).toContain("Confirm deletion");
+        expect(dialogText).toContain("Delete");
+    });
+
+    it("resolves first pending promise as false on concurrent call", async () => {
+        const first = vm.confirm("First message");
+        await localVue.nextTick();
+        const second = vm.confirm("Second message");
+        expect(await first).toBe(false);
+        // resolve second cleanly
+        await wrapper.find('[data-description="confirm dialog cancel"]').trigger("click");
+        await second;
+    });
+
+    it("resolves false when abort signal fires", async () => {
+        const controller = new AbortController();
+        const promise = vm.confirm("Are you sure?", { signal: controller.signal });
+        await localVue.nextTick();
+        controller.abort();
+        expect(await promise).toBe(false);
+    });
+});

client/src/composables/confirmDialog.test.ts

@@ -0,0 +1,43 @@
+import { createLocalVue, mount } from "@vue/test-utils";
+import { afterEach, describe, expect, it } from "vitest";
+import { defineComponent } from "vue";
+
+import type ConfirmDialogComponent from "@/components/ConfirmDialog.vue";
+
+import { type ConfirmDialogOptions, setConfirmDialogComponentRef, useConfirmDialog } from "./confirmDialog";
+
+type ConfirmDialogInstance = InstanceType<typeof ConfirmDialogComponent>;
+
+const localVue = createLocalVue();
+
+describe("useConfirmDialog", () => {
+    afterEach(() => {
+        setConfirmDialogComponentRef(null);
+    });
+
+    it("cancels pending confirm when caller component unmounts", async () => {
+        setConfirmDialogComponentRef({
+            confirm: (_msg: string, options: ConfirmDialogOptions) =>
+                new Promise<boolean>((resolve) => {
+                    options.signal?.addEventListener("abort", () => resolve(false), { once: true });
+                }),
+        } as ConfirmDialogInstance);
+
+        const CallerComponent = defineComponent({
+            setup() {
+                const { confirm } = useConfirmDialog();
+                return { confirm };
+            },
+            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?");
+
+        wrapper.destroy(); // triggers onUnmounted → controller.abort()
+
+        expect(await promise).toBe(false);
+    });
+});