Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-05-04 05:02:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
## 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>
This commit is contained in:
Alexander Brown
2026-04-08 19:21:42 -07:00
committed by GitHub
parent 2c34d955cb
commit f90d6cf607
135 changed files with 7252 additions and 6549 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
src/components/sidebar/tabs/nodeLibrary/EssentialNodesPanel.test.ts
View File

@@ -1,5 +1,5 @@
import { flushPromises, mount } from '@vue/test-utils'
import { nextTick, ref } from 'vue'
import { render, waitFor } from '@testing-library/vue'
import { ref } from 'vue'
import { describe, expect, it, vi } from 'vitest'
import type { ComfyNodeDefImpl } from '@/stores/nodeDefStore'
@@ -80,7 +80,7 @@ describe('EssentialNodesPanel', () => {
}
}
function mountComponent(
function renderComponent(
root = createMockRoot(),
expandedKeys: string[] = [],
flatNodes: RenderedTreeExplorerNode<ComfyNodeDefImpl>[] = []
@@ -93,7 +93,7 @@ describe('EssentialNodesPanel', () => {
return { root, flatNodes, keys }
}
}
return mount(WrapperComponent, {
return render(WrapperComponent, {
global: {
stubs: {
Teleport: true,
@@ -112,6 +112,9 @@ describe('EssentialNodesPanel', () => {
},
CollapsibleContent: {
template: '<div class="collapsible-content"><slot /></div>'
},
EssentialNodeCard: {
template: '<div data-testid="essential-node-card" />'
}
}
}
@@ -120,54 +123,61 @@ describe('EssentialNodesPanel', () => {
describe('folder rendering', () => {
it('should render all top-level folders', () => {
const wrapper = mountComponent()
const triggers = wrapper.findAll('.collapsible-trigger')
expect(triggers).toHaveLength(3)
const { container } = renderComponent()
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
expect(container.querySelectorAll('.collapsible-trigger')).toHaveLength(3)
})
it('should display folder labels', () => {
const wrapper = mountComponent()
expect(wrapper.text()).toContain('images')
expect(wrapper.text()).toContain('video')
expect(wrapper.text()).toContain('audio')
const { container } = renderComponent()
expect(container.textContent).toContain('images')
expect(container.textContent).toContain('video')
expect(container.textContent).toContain('audio')
})
})
describe('default expansion', () => {
it('should expand all folders by default when expandedKeys is empty', async () => {
const wrapper = mountComponent(createMockRoot(), [])
await nextTick()
await flushPromises()
await nextTick()
const { container } = renderComponent(createMockRoot(), [])
const roots = wrapper.findAll('.collapsible-root')
expect(roots[0].attributes('data-state')).toBe('open')
expect(roots[1].attributes('data-state')).toBe('open')
expect(roots[2].attributes('data-state')).toBe('open')
await waitFor(() => {
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
const roots = container.querySelectorAll('.collapsible-root')
expect(roots).toHaveLength(3)
expect(roots[0].getAttribute('data-state')).toBe('open')
expect(roots[1].getAttribute('data-state')).toBe('open')
expect(roots[2].getAttribute('data-state')).toBe('open')
})
})
it('should respect provided expandedKeys', async () => {
const wrapper = mountComponent(createMockRoot(), ['folder-audio'])
await nextTick()
const { container } = renderComponent(createMockRoot(), ['folder-audio'])
const roots = wrapper.findAll('.collapsible-root')
expect(roots[0].attributes('data-state')).toBe('closed')
expect(roots[1].attributes('data-state')).toBe('closed')
expect(roots[2].attributes('data-state')).toBe('open')
await waitFor(() => {
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
const roots = container.querySelectorAll('.collapsible-root')
expect(roots).toHaveLength(3)
expect(roots[0].getAttribute('data-state')).toBe('closed')
expect(roots[1].getAttribute('data-state')).toBe('closed')
expect(roots[2].getAttribute('data-state')).toBe('open')
})
})
it('should expand all provided keys', async () => {
const wrapper = mountComponent(createMockRoot(), [
const { container } = renderComponent(createMockRoot(), [
'folder-images',
'folder-video',
'folder-audio'
])
await nextTick()
const roots = wrapper.findAll('.collapsible-root')
expect(roots[0].attributes('data-state')).toBe('open')
expect(roots[1].attributes('data-state')).toBe('open')
expect(roots[2].attributes('data-state')).toBe('open')
await waitFor(() => {
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
const roots = container.querySelectorAll('.collapsible-root')
expect(roots).toHaveLength(3)
expect(roots[0].getAttribute('data-state')).toBe('open')
expect(roots[1].getAttribute('data-state')).toBe('open')
expect(roots[2].getAttribute('data-state')).toBe('open')
})
})
})
@@ -187,21 +197,24 @@ describe('EssentialNodesPanel', () => {
]
}
const wrapper = mountComponent(root, [])
await nextTick()
await flushPromises()
await nextTick()
const { container } = renderComponent(root, [])
const roots = wrapper.findAll('.collapsible-root')
expect(roots).toHaveLength(1)
expect(roots[0].attributes('data-state')).toBe('open')
await waitFor(() => {
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
const roots = container.querySelectorAll('.collapsible-root')
expect(roots).toHaveLength(1)
expect(roots[0].getAttribute('data-state')).toBe('open')
})
})
})
describe('node cards', () => {
it('should render node cards for each node in expanded folders', () => {
const wrapper = mountComponent(createMockRoot(), ['folder-images'])
const cards = wrapper.findAllComponents({ name: 'EssentialNodeCard' })
const { container } = renderComponent(createMockRoot(), ['folder-images'])
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
const cards = container.querySelectorAll(
'[data-testid="essential-node-card"]'
)
expect(cards.length).toBeGreaterThanOrEqual(2)
})
})
@@ -213,11 +226,15 @@ describe('EssentialNodesPanel', () => {
createMockNode('LoadImage'),
createMockNode('SaveImage')
]
const wrapper = mountComponent(createMockRoot(), [], flatNodes)
const { container } = renderComponent(createMockRoot(), [], flatNodes)
expect(wrapper.findAll('.collapsible-root')).toHaveLength(0)
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
expect(container.querySelectorAll('.collapsible-root')).toHaveLength(0)
const cards = wrapper.findAllComponents({ name: 'EssentialNodeCard' })
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
const cards = container.querySelectorAll(
'[data-testid="essential-node-card"]'
)
expect(cards).toHaveLength(3)
})
})