refactor: clean up heavy test case

Author: JYC333

apps/client/src/widgets/dialogs/add_link.spec.tsx

@@ -1,109 +1,22 @@
-import $ from "jquery";
-import type { ComponentChildren } from "preact";
 import { render } from "preact";
 import { act } from "preact/test-utils";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 
-const {
-    triliumEventHandlers,
-    latestModalPropsRef,
-    latestNoteAutocompletePropsRef,
-    addLinkSpy,
-    logErrorSpy,
-    showRecentNotesSpy,
-    setTextSpy
-} = vi.hoisted(() => ({
-    triliumEventHandlers: new Map<string, (payload: any) => void>(),
-    latestModalPropsRef: { current: null as any },
-    latestNoteAutocompletePropsRef: { current: null as any },
-    addLinkSpy: vi.fn(() => Promise.resolve()),
-    logErrorSpy: vi.fn(),
-    showRecentNotesSpy: vi.fn(),
-    setTextSpy: vi.fn()
-}));
-
-vi.mock("../../services/i18n", () => ({
-    t: (key: string) => key
-}));
-
-vi.mock("../../services/tree", () => ({
-    default: {
-        getNoteIdFromUrl: (notePath: string) => notePath.split("/").at(-1),
-        getNoteTitle: vi.fn(async () => "Target note")
-    }
-}));
-
-vi.mock("../../services/ws", () => ({
-    logError: logErrorSpy
-}));
-
-vi.mock("../../services/note_autocomplete", () => ({
-    __esModule: true,
-    default: {
-        showRecentNotes: showRecentNotesSpy,
-        setText: setTextSpy
-    }
-}));
-
-vi.mock("../react/react_utils", () => ({
-    refToJQuerySelector: (ref: { current: HTMLInputElement | null }) => ref.current ? $(ref.current) : $()
-}));
-
-vi.mock("../react/hooks", () => ({
-    useTriliumEvent: (name: string, handler: (payload: any) => void) => {
-        triliumEventHandlers.set(name, handler);
-    }
-}));
-
-vi.mock("../react/Modal", () => ({
-    default: (props: any) => {
-        latestModalPropsRef.current = props;
-
-        if (!props.show) {
-            return null;
-        }
-
-        return (
-            <form onSubmit={(e) => {
-                e.preventDefault();
-                props.onSubmit?.();
-            }}>
-                {props.children}
-                {props.footer}
-            </form>
-        );
-    }
-}));
-
-vi.mock("../react/FormGroup", () => ({
-    default: ({ children }: { children: ComponentChildren }) => <div>{children}</div>
-}));
-
-vi.mock("../react/Button", () => ({
-    default: ({ text }: { text: string }) => <button type="submit">{text}</button>
-}));
-
-vi.mock("../react/FormRadioGroup", () => ({
-    default: () => null
-}));
-
-vi.mock("../react/NoteAutocomplete", () => ({
-    default: (props: any) => {
-        latestNoteAutocompletePropsRef.current = props;
-        return <input ref={props.inputRef} />;
-    }
-}));
-
-import AddLinkDialog from "./add_link";
+import { type AddLinkDialogTestState,createAddLinkDialogTestState, setupAddLinkDialogMocks } from "./add_link.spec_utils";
 
 describe("AddLinkDialog", () => {
     let container: HTMLDivElement;
+    let AddLinkDialog: (props: object) => JSX.Element;
+    let state: AddLinkDialogTestState;
 
-    beforeEach(() => {
+    beforeEach(async () => {
+        vi.resetModules();
+        state = createAddLinkDialogTestState();
         vi.clearAllMocks();
-        latestModalPropsRef.current = null;
-        latestNoteAutocompletePropsRef.current = null;
-        triliumEventHandlers.clear();
+        setupAddLinkDialogMocks(state);
+
+        ({ default: AddLinkDialog } = await import("./add_link"));
+
         container = document.createElement("div");
         document.body.appendChild(container);
     });
@@ -120,41 +33,37 @@ describe("AddLinkDialog", () => {
             render(<AddLinkDialog />, container);
         });
 
-        const showDialog = triliumEventHandlers.get("showAddLinkDialog");
-        expect(showDialog).toBeTypeOf("function");
+        const showDialog = state.triliumEventHandlers.get("showAddLinkDialog");
+        if (!showDialog) {
+            throw new Error("showAddLinkDialog handler was not registered");
+        }
 
         await act(async () => {
-            showDialog?.({
+            showDialog({
                 text: "",
                 hasSelection: false,
-                addLink: addLinkSpy
+                addLink: state.addLinkSpy
             });
         });
 
-        const suggestion = {
-            notePath: "root/target-note",
-            noteTitle: "Target note"
-        };
-
         act(() => {
-            latestNoteAutocompletePropsRef.current.onKeyDownCapture({
+            state.latestNoteAutocompletePropsRef.current.onKeyDownCapture({
                 key: "Enter",
                 ctrlKey: false,
                 metaKey: false,
                 shiftKey: false,
                 altKey: false,
                 isComposing: false
             });
-            latestNoteAutocompletePropsRef.current.onChange(suggestion);
+            state.latestNoteAutocompletePropsRef.current.onChange({
+                notePath: "root/target-note"
+            });
         });
 
-        expect(latestModalPropsRef.current.show).toBe(false);
-        expect(logErrorSpy).not.toHaveBeenCalled();
-
         await act(async () => {
-            latestModalPropsRef.current.onHidden();
+            state.latestModalPropsRef.current.onHidden();
         });
 
-        expect(addLinkSpy).toHaveBeenCalledWith("root/target-note", null);
+        expect(state.addLinkSpy).toHaveBeenCalledWith("root/target-note", null);
     });
 });

apps/client/src/widgets/dialogs/add_link.spec_utils.tsx

@@ -0,0 +1,99 @@
+import $ from "jquery";
+import type { ComponentChildren } from "preact";
+import { vi } from "vitest";
+
+export interface AddLinkDialogTestState {
+    triliumEventHandlers: Map<string, (payload: any) => void>;
+    latestModalPropsRef: { current: any };
+    latestNoteAutocompletePropsRef: { current: any };
+    addLinkSpy: ReturnType<typeof vi.fn>;
+    logErrorSpy: ReturnType<typeof vi.fn>;
+    showRecentNotesSpy: ReturnType<typeof vi.fn>;
+    setTextSpy: ReturnType<typeof vi.fn>;
+}
+
+export function createAddLinkDialogTestState(): AddLinkDialogTestState {
+    return {
+        triliumEventHandlers: new Map<string, (payload: any) => void>(),
+        latestModalPropsRef: { current: null as any },
+        latestNoteAutocompletePropsRef: { current: null as any },
+        addLinkSpy: vi.fn(() => Promise.resolve()),
+        logErrorSpy: vi.fn(),
+        showRecentNotesSpy: vi.fn(),
+        setTextSpy: vi.fn()
+    };
+}
+
+export function setupAddLinkDialogMocks(state: AddLinkDialogTestState) {
+    vi.doMock("../../services/i18n", () => ({
+        t: (key: string) => key
+    }));
+
+    vi.doMock("../../services/tree", () => ({
+        default: {
+            getNoteIdFromUrl: (notePath: string) => notePath.split("/").at(-1),
+            getNoteTitle: vi.fn(async () => "Target note")
+        }
+    }));
+
+    vi.doMock("../../services/ws", () => ({
+        logError: state.logErrorSpy
+    }));
+
+    vi.doMock("../../services/note_autocomplete", () => ({
+        __esModule: true,
+        default: {
+            showRecentNotes: state.showRecentNotesSpy,
+            setText: state.setTextSpy
+        }
+    }));
+
+    vi.doMock("../react/react_utils", () => ({
+        refToJQuerySelector: (ref: { current: HTMLInputElement | null }) => ref.current ? $(ref.current) : $()
+    }));
+
+    vi.doMock("../react/hooks", () => ({
+        useTriliumEvent: (name: string, handler: (payload: any) => void) => {
+            state.triliumEventHandlers.set(name, handler);
+        }
+    }));
+
+    vi.doMock("../react/Modal", () => ({
+        default: (props: any) => {
+            state.latestModalPropsRef.current = props;
+
+            if (!props.show) {
+                return null;
+            }
+
+            return (
+                <form onSubmit={(e) => {
+                    e.preventDefault();
+                    props.onSubmit?.();
+                }}>
+                    {props.children}
+                    {props.footer}
+                </form>
+            );
+        }
+    }));
+
+    vi.doMock("../react/FormGroup", () => ({
+        default: ({ children }: { children: ComponentChildren }) => <div>{children}</div>
+    }));
+
+    vi.doMock("../react/Button", () => ({
+        default: ({ text }: { text: string }) => <button type="submit">{text}</button>
+    }));
+
+    vi.doMock("../react/FormRadioGroup", () => ({
+        default: () => null
+    }));
+
+    vi.doMock("../react/NoteAutocomplete", () => ({
+        default: (props: any) => {
+            state.latestNoteAutocompletePropsRef.current = props;
+            return <input ref={props.inputRef} />;
+        }
+    }));
+}