fix(canvas): add getState to useCanvasStore mock in ContextMenu keyboard test

ContextMenu.tsx reads parent-workspace children via
useCanvasStore.getState().nodes.filter(...) — a direct .getState()
call, not the selector-calling form. The existing vi.mock exposed
only the selector form, so rendering crashed with
"TypeError: useCanvasStore.getState is not a function".

Restructure the vi.mock factory to return Object.assign(fn, {
getState: () => mockStore }) so both call shapes resolve. Factory body
builds the function locally because vi.mock hoists above outer-scope
variable declarations and can't reference `mockStore` via closure.

Verified: all 15 tests in the file pass after the change.

Unblocks the Canvas (Next.js) CI check on PR #1743 (staging→main sync).

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Hongming Wang 2026-04-23 00:03:54 -07:00
parent fa5e62b484
commit 68ee76c6b7

View File

@ -48,11 +48,20 @@ const mockStore = {
nodes: [] as Array<{ id: string; data: { parentId: string | null } }>,
};
vi.mock("@/store/canvas", () => ({
useCanvasStore: vi.fn(
(selector: (s: typeof mockStore) => unknown) => selector(mockStore)
),
}));
// useCanvasStore.getState() is called directly by ContextMenu to read `nodes`
// for parent-filtering (see ContextMenu.tsx childNodes computation). The mock
// must expose both the selector-calling function form AND the .getState()
// form so production code using either pattern doesn't hit "not a function".
// Factory body runs under vi.mock's hoist — cannot reference outer scope,
// so we build the mock function inside and reach `mockStore` via `globalThis`.
vi.mock("@/store/canvas", () => {
const fn = vi.fn((selector: (s: typeof mockStore) => unknown) =>
selector(mockStore),
);
return {
useCanvasStore: Object.assign(fn, { getState: () => mockStore }),
};
});
// ── Component under test — imported AFTER mocks ───────────────────────────────
import { ContextMenu } from "../ContextMenu";