mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
f90d6cf607
## 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>
87 lines
2.5 KiB
TypeScript
87 lines
2.5 KiB
TypeScript
import { describe, expect, it } from 'vitest'
|
|
|
|
import { render, screen } from '@testing-library/vue'
|
|
|
|
import type { ColorStop } from '@/lib/litegraph/src/interfaces'
|
|
|
|
import GradientSlider from './GradientSlider.vue'
|
|
import { interpolateStops, stopsToGradient } from './gradients'
|
|
|
|
const TEST_STOPS: ColorStop[] = [
|
|
{ offset: 0, color: [0, 0, 0] },
|
|
{ offset: 1, color: [255, 255, 255] }
|
|
]
|
|
|
|
function renderSlider(props: {
|
|
stops?: ColorStop[]
|
|
modelValue: number
|
|
min?: number
|
|
max?: number
|
|
step?: number
|
|
}) {
|
|
return render(GradientSlider, {
|
|
props: { stops: TEST_STOPS, ...props }
|
|
})
|
|
}
|
|
|
|
describe('GradientSlider', () => {
|
|
it('passes min and max to SliderRoot', () => {
|
|
renderSlider({
|
|
modelValue: 50,
|
|
min: -100,
|
|
max: 100,
|
|
step: 5
|
|
})
|
|
const thumb = screen.getByRole('slider', { hidden: true })
|
|
expect(thumb).toBeInTheDocument()
|
|
expect(thumb).toHaveAttribute('aria-valuemin', '-100')
|
|
expect(thumb).toHaveAttribute('aria-valuemax', '100')
|
|
})
|
|
|
|
it('renders slider root with track and thumb', () => {
|
|
const { container } = renderSlider({ modelValue: 0 })
|
|
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
|
|
expect(container.querySelector('[data-slider-impl]')).toBeInTheDocument()
|
|
expect(screen.getByRole('slider', { hidden: true })).toBeInTheDocument()
|
|
})
|
|
|
|
it('does not render SliderRange', () => {
|
|
const { container } = renderSlider({ modelValue: 50 })
|
|
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
|
|
const range = container.querySelector('[data-slot="slider-range"]')
|
|
expect(range).not.toBeInTheDocument()
|
|
})
|
|
})
|
|
|
|
describe('stopsToGradient', () => {
|
|
it('returns transparent for empty stops', () => {
|
|
expect(stopsToGradient([])).toBe('transparent')
|
|
})
|
|
})
|
|
|
|
describe('interpolateStops', () => {
|
|
it('returns transparent for empty stops', () => {
|
|
expect(interpolateStops([], 0.5)).toBe('transparent')
|
|
})
|
|
|
|
it('returns start color at t=0', () => {
|
|
expect(interpolateStops(TEST_STOPS, 0)).toBe('rgb(0,0,0)')
|
|
})
|
|
|
|
it('returns end color at t=1', () => {
|
|
expect(interpolateStops(TEST_STOPS, 1)).toBe('rgb(255,255,255)')
|
|
})
|
|
|
|
it('returns midpoint color at t=0.5', () => {
|
|
expect(interpolateStops(TEST_STOPS, 0.5)).toBe('rgb(128,128,128)')
|
|
})
|
|
|
|
it('clamps values below 0', () => {
|
|
expect(interpolateStops(TEST_STOPS, -1)).toBe('rgb(0,0,0)')
|
|
})
|
|
|
|
it('clamps values above 1', () => {
|
|
expect(interpolateStops(TEST_STOPS, 2)).toBe('rgb(255,255,255)')
|
|
})
|
|
})
|