test: migrate 132 test files from @vue/test-utils to @testing-library/vue (#10965)

## Summary

Migrate 132 test files from `@vue/test-utils` (VTU) to
`@testing-library/vue` (VTL) with `@testing-library/user-event`,
adopting user-centric behavioral testing patterns across the codebase.

## Changes

- **What**: Systematic migration of component/unit tests from VTU's
`mount`/`wrapper` API to VTL's `render`/`screen`/`userEvent` API across
132 files in `src/`
- **Breaking**: None — test-only changes, no production code affected

### Migration breakdown

| Batch | Files | Description |
|-------|-------|-------------|
| 1 | 19 | Simple render/assert tests |
| 2A | 16 | Interactive tests with user events |
| 2B-1 | 14 | Interactive tests (continued) |
| 2B-2 | 32 | Interactive tests (continued) |
| 3A–3E | 51 | Complex tests (stores, composables, heavy mocking) |
| Lint fix | 7 | `await` on `fireEvent` calls for `no-floating-promises`
|
| Review fixes | 15 | Address CodeRabbit feedback (3 rounds) |

### Review feedback addressed

- Removed class-based assertions (`text-ellipsis`, `pr-3`, `.pi-save`,
`.skeleton`, `.bg-black\/15`, Tailwind utilities) in favor of
behavioral/accessible queries
- Added null guards before `querySelector` casts
- Added `expect(roots).toHaveLength(N)` guards before indexed NodeList
access
- Wrapped fake timer tests in `try/finally` for guaranteed cleanup
- Split double-render tests into focused single-render tests
- Replaced CSS class selectors with
`screen.getByText`/`screen.getByRole` queries
- Updated stubs to use semantic `role`/`aria-label` instead of CSS
classes
- Consolidated redundant edge-case tests
- Removed manual `document.body.appendChild` in favor of VTL container
management
- Used distinct mock return values to verify command wiring

### VTU holdouts (2 files)

These files intentionally retain `@vue/test-utils` because their
components use `<script setup>` without `defineExpose`, making internal
computed properties and methods inaccessible via VTL:

1. **`NodeWidgets.test.ts`** — partial VTU for `vm.processedWidgets`
2. **`WidgetSelectDropdown.test.ts`** — full VTU for heavy
`wrapper.vm.*` access

## Follow-up

Deferred items (`ComponentProps` typing, camelCase listener props)
tracked in #10966.

## Review Focus

- Test correctness: all migrated tests preserve original behavioral
coverage
- VTL idioms: proper use of `screen` queries, `userEvent`, and
accessibility-based selectors
- The 2 VTU holdout files are intentional, not oversights

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-10965-test-migrate-132-test-files-from-vue-test-utils-to-testing-library-vue-33c6d73d36508199a6a7e513cf5d8296)
by [Unito](https://www.unito.io)

---------

Co-authored-by: Amp <amp@ampcode.com>
Co-authored-by: Christian Byrne <cbyrne@comfy.org>

src/components/searchbox/v2/NodeSearchInput.test.ts

@@ -1,4 +1,5 @@
-import { mount } from '@vue/test-utils'
+import { render, screen } from '@testing-library/vue'
+import userEvent from '@testing-library/user-event'
 import { beforeEach, describe, expect, it, vi } from 'vitest'
 
 import type { FilterChip } from '@/components/searchbox/v2/NodeSearchFilterBar.vue'
@@ -59,7 +60,7 @@ describe('NodeSearchInput', () => {
     vi.restoreAllMocks()
   })
 
-  function createWrapper(
+  function createRender(
     props: Partial<{
       filters: FuseFilterWithValue<ComfyNodeDefImpl, string>[]
       activeFilter: FilterChip | null
@@ -67,101 +68,128 @@ describe('NodeSearchInput', () => {
       filterQuery: string
     }> = {}
   ) {
-    return mount(NodeSearchInput, {
+    const user = userEvent.setup()
+    const onUpdateSearchQuery = vi.fn()
+    const onUpdateFilterQuery = vi.fn()
+    const onCancelFilter = vi.fn()
+    const onSelectCurrent = vi.fn()
+    const onNavigateDown = vi.fn()
+    const onNavigateUp = vi.fn()
+    render(NodeSearchInput, {
       props: {
         filters: [],
         activeFilter: null,
         searchQuery: '',
         filterQuery: '',
+        'onUpdate:searchQuery': onUpdateSearchQuery,
+        'onUpdate:filterQuery': onUpdateFilterQuery,
+        onCancelFilter,
+        onSelectCurrent,
+        onNavigateDown,
+        onNavigateUp,
         ...props
       },
       global: { plugins: [testI18n] }
     })
+    return {
+      user,
+      onUpdateSearchQuery,
+      onUpdateFilterQuery,
+      onCancelFilter,
+      onSelectCurrent,
+      onNavigateDown,
+      onNavigateUp
+    }
   }
 
   it('should route input to searchQuery when no active filter', async () => {
-    const wrapper = createWrapper()
-    await wrapper.find('input').setValue('test search')
+    const { user, onUpdateSearchQuery } = createRender()
+    await user.type(screen.getByRole('combobox'), 'test search')
 
-    expect(wrapper.emitted('update:searchQuery')![0]).toEqual(['test search'])
+    expect(onUpdateSearchQuery).toHaveBeenLastCalledWith('test search')
   })
 
   it('should route input to filterQuery when active filter is set', async () => {
-    const wrapper = createWrapper({
+    const { user, onUpdateFilterQuery, onUpdateSearchQuery } = createRender({
       activeFilter: createActiveFilter('Input')
     })
-    await wrapper.find('input').setValue('IMAGE')
+    await user.type(screen.getByRole('combobox'), 'IMAGE')
 
-    expect(wrapper.emitted('update:filterQuery')![0]).toEqual(['IMAGE'])
-    expect(wrapper.emitted('update:searchQuery')).toBeUndefined()
+    expect(onUpdateFilterQuery).toHaveBeenLastCalledWith('IMAGE')
+    expect(onUpdateSearchQuery).not.toHaveBeenCalled()
   })
 
   it('should show filter label placeholder when active filter is set', () => {
-    const wrapper = createWrapper({
+    createRender({
       activeFilter: createActiveFilter('Input')
     })
 
-    expect(
-      (wrapper.find('input').element as HTMLInputElement).placeholder
-    ).toContain('input')
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'placeholder',
+      expect.stringContaining('input')
+    )
   })
 
   it('should show add node placeholder when no active filter', () => {
-    const wrapper = createWrapper()
+    createRender()
 
-    expect(
-      (wrapper.find('input').element as HTMLInputElement).placeholder
-    ).toContain('Add a node')
+    expect(screen.getByRole('combobox')).toHaveAttribute(
+      'placeholder',
+      expect.stringContaining('Add a node')
+    )
   })
 
   it('should hide filter chips when active filter is set', () => {
-    const wrapper = createWrapper({
+    createRender({
       filters: [createFilter('input', 'IMAGE')],
       activeFilter: createActiveFilter('Input')
     })
 
-    expect(wrapper.findAll('[data-testid="filter-chip"]')).toHaveLength(0)
+    expect(screen.queryAllByTestId('filter-chip')).toHaveLength(0)
   })
 
   it('should show filter chips when no active filter', () => {
-    const wrapper = createWrapper({
+    createRender({
       filters: [createFilter('input', 'IMAGE')]
     })
 
-    expect(wrapper.findAll('[data-testid="filter-chip"]')).toHaveLength(1)
+    expect(screen.getAllByTestId('filter-chip')).toHaveLength(1)
   })
 
   it('should emit cancelFilter when cancel button is clicked', async () => {
-    const wrapper = createWrapper({
+    const { user, onCancelFilter } = createRender({
       activeFilter: createActiveFilter('Input')
     })
 
-    await wrapper.find('[data-testid="cancel-filter"]').trigger('click')
+    await user.click(screen.getByTestId('cancel-filter'))
 
-    expect(wrapper.emitted('cancelFilter')).toHaveLength(1)
+    expect(onCancelFilter).toHaveBeenCalledOnce()
   })
 
   it('should emit selectCurrent on Enter', async () => {
-    const wrapper = createWrapper()
+    const { user, onSelectCurrent } = createRender()
 
-    await wrapper.find('input').trigger('keydown', { key: 'Enter' })
+    await user.click(screen.getByRole('combobox'))
+    await user.keyboard('{Enter}')
 
-    expect(wrapper.emitted('selectCurrent')).toHaveLength(1)
+    expect(onSelectCurrent).toHaveBeenCalledOnce()
   })
 
   it('should emit navigateDown on ArrowDown', async () => {
-    const wrapper = createWrapper()
+    const { user, onNavigateDown } = createRender()
 
-    await wrapper.find('input').trigger('keydown', { key: 'ArrowDown' })
+    await user.click(screen.getByRole('combobox'))
+    await user.keyboard('{ArrowDown}')
 
-    expect(wrapper.emitted('navigateDown')).toHaveLength(1)
+    expect(onNavigateDown).toHaveBeenCalledOnce()
   })
 
   it('should emit navigateUp on ArrowUp', async () => {
-    const wrapper = createWrapper()
+    const { user, onNavigateUp } = createRender()
 
-    await wrapper.find('input').trigger('keydown', { key: 'ArrowUp' })
+    await user.click(screen.getByRole('combobox'))
+    await user.keyboard('{ArrowUp}')
 
-    expect(wrapper.emitted('navigateUp')).toHaveLength(1)
+    expect(onNavigateUp).toHaveBeenCalledOnce()
   })
 })