Comfy-Org / Comfy-Org/ComfyUI_frontend

test: simplify useNodeDrag test to use real stores instead of manual mock state

Open
#10,765 1 comment 0 reactions 0 assignees View on GitHub
area:testing developer experience
Dominant language
TypeScript
Stars
2k
Forks
704
Avg merge
1d 8h
Merged PRs (30d)
512

Description

## Problem

`useNodeDrag.test.ts` has a massive `vi.hoisted()` block that manually mocks every dependency (`canvasStore`, `layoutStore`, `layoutMutations`, `useNodeSnap`, etc.) with granular fake state. This makes the test fragile, hard to maintain, and mostly validates the mock plumbing rather than real behavior.

## Proposed Solution

- Use `createTestingPinia({ stubActions: false })` for Pinia stores (`canvasStore`, `settingStore`)
- Use the real `layoutStore` singleton (Yjs-backed, not Pinia) seeded via `createNode()`
- Use real `useLayoutMutations()` (thin wrapper over `layoutStore`)
- Use real `useNodeSnap()` (reads from `settingStore`)
- Keep only edge mocks: `AutoPanController`, `useShiftKeySync`, `useTransformState`, `requestAnimationFrame`

## Notes

- `canvasStore` calls `useAppMode()` at definition time, which needs a mock
- `layoutStore` is a class singleton, not Pinia — reset via creating a fresh instance or clearing state in `beforeEach`
- `useNodeDrag` is wrapped in `createSharedComposable` — keep the existing mock for that or use `effectScope()`
- Estimated effort: M (1-3h)

## Files

- `src/renderer/extensions/vueNodes/layout/useNodeDrag.test.ts`
- `src/renderer/extensions/vueNodes/layout/useNodeDrag.ts`

┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-10765-test-simplify-useNodeDrag-test-to-use-real-stores-instead-of-manual-mock-state-3346d73d365081a68fe2deb4169185f0) by [Unito](https://www.unito.io)

Contributor guide

Open the contributing guide

Research direction

Start with src/renderer/extensions/vueNodes/layout/useNodeDrag.test.ts and compare it with src/renderer/extensions/vueNodes/layout/useNodeDrag.ts. Run the focused useNodeDrag tests, then replace the manual dependency state with the real stores and retain only the listed edge mocks. Done means the tests pass while exercising real store, mutation, and snapping behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, testing
Issue type
Refactor
Difficulty
3/5
Estimated time
1-3 hours
Activity status
Quiet
Clarity
Clearly specified
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.