Files
ComfyUI_frontend/docs/guidance/vitest.md
Alexander Brown 3043b181d7 refactor: extract composables from VTU holdout components, complete VTL migration (#10966)
## Summary

Extract internal logic from the 2 remaining VTU holdout components into
composables, enabling full VTL migration.

## Changes

- **What**: Extract `useProcessedWidgets` from `NodeWidgets.vue`
(486→135 LOC) and `useWidgetSelectItems`/`useWidgetSelectActions` from
`WidgetSelectDropdown.vue` (563→170 LOC). Rewrite both component test
files as composable unit tests + slim behavioral VTL tests. Remove
`@vue/test-utils` devDependency.
- **Dependencies**: Removes `@vue/test-utils`

## Review Focus

- Composable extraction is mechanical — no logic changes, just moving
code into testable units
- `useProcessedWidgets` handles widget deduplication, promotion border
styling, error detection, and identity resolution (~290 LOC)
- `useWidgetSelectItems` handles the full computed chain from widget
values → dropdown items including cloud asset mode and multi-output job
resolution (~350 LOC)
- `useWidgetSelectActions` handles selection resolution and file upload
(~120 LOC)
- 40 new composable-level unit tests replace 13 `wrapper.vm.*` accesses
across the 2 holdout files

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10966-refactor-extract-composables-from-VTU-holdout-components-complete-VTL-migration-33c6d73d36508148a3a4ccf346722d6d)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Amp <amp@ampcode.com>
2026-04-10 19:04:16 -07:00

1.0 KiB

globs
globs
**/*.test.ts

Vitest Unit Test Conventions

See docs/testing/*.md for detailed patterns.

Test Quality

  • Do not write change detector tests (tests that just assert defaults)
  • Do not write tests dependent on non-behavioral features (styles, classes)
  • Do not write tests that just test mocks - ensure real code is exercised
  • Be parsimonious; avoid redundant tests

Mocking

  • Use Vitest's mocking utilities (vi.mock, vi.spyOn)
  • Keep module mocks contained - no global mutable state
  • Use vi.hoisted() for per-test mock manipulation
  • Don't mock what you don't own

Component Testing

  • Use @testing-library/vue with @testing-library/user-event for component tests (an ESLint rule bans @vue/test-utils in new tests)
  • Follow advice about making components easy to test
  • Wait for reactivity with await nextTick() after state changes

Running Tests

pnpm test:unit                    # Run all unit tests
pnpm test:unit -- path/to/file    # Run specific test
pnpm test:unit -- --watch         # Watch mode