mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 13:59:28 +00:00
08b1199265
## Summary Migrate 13 component test files from @vue/test-utils to @testing-library/vue as Phase 1 of incremental VTL adoption. ## Changes - **What**: Rewrite 13 test files (88 tests) to use `render`/`screen` queries, `userEvent` interactions, and `jest-dom` assertions. Add `data-testid` attributes to 6 components for lint-clean icon/element queries. Delete unused `src/utils/test-utils.ts`. - **Dependencies**: `@testing-library/vue`, `@testing-library/user-event`, `@testing-library/jest-dom` (installed in Phase 0) ## Review Focus - `data-testid` additions to component templates are minimal and non-behavioral - PrimeVue passthrough (`pt`) usage in UserAvatar.vue for icon testid - 2 targeted `eslint-disable` in FormRadioGroup.test.ts where PrimeVue places `aria-describedby` on wrapper div, not input ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10471-test-migrate-13-component-tests-from-VTU-to-VTL-Phase-1-32d6d73d36508159a33ffa285afb4c38) by [Unito](https://www.unito.io) --------- Co-authored-by: Amp <amp@ampcode.com>
83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
import { render, screen } from '@testing-library/vue'
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
|
import { nextTick, ref } from 'vue'
|
|
import type { Ref } from 'vue'
|
|
|
|
import QueueInlineProgress from '@/components/queue/QueueInlineProgress.vue'
|
|
|
|
const mockProgress = vi.hoisted(() => ({
|
|
totalPercent: null! as Ref<number>,
|
|
currentNodePercent: null! as Ref<number>
|
|
}))
|
|
|
|
vi.mock('@/composables/queue/useQueueProgress', () => ({
|
|
useQueueProgress: () => ({
|
|
totalPercent: mockProgress.totalPercent,
|
|
currentNodePercent: mockProgress.currentNodePercent
|
|
})
|
|
}))
|
|
|
|
function renderComponent(props: { hidden?: boolean } = {}) {
|
|
return render(QueueInlineProgress, { props })
|
|
}
|
|
|
|
describe('QueueInlineProgress', () => {
|
|
beforeEach(() => {
|
|
mockProgress.totalPercent = ref(0)
|
|
mockProgress.currentNodePercent = ref(0)
|
|
})
|
|
|
|
it('renders when total progress is non-zero', () => {
|
|
mockProgress.totalPercent.value = 12
|
|
|
|
renderComponent()
|
|
|
|
expect(screen.getByTestId('queue-inline-progress')).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders when current node progress is non-zero', () => {
|
|
mockProgress.currentNodePercent.value = 33
|
|
|
|
renderComponent()
|
|
|
|
expect(screen.getByTestId('queue-inline-progress')).toBeInTheDocument()
|
|
})
|
|
|
|
it('does not render when hidden', () => {
|
|
mockProgress.totalPercent.value = 45
|
|
|
|
renderComponent({ hidden: true })
|
|
|
|
expect(
|
|
screen.queryByTestId('queue-inline-progress')
|
|
).not.toBeInTheDocument()
|
|
})
|
|
|
|
it('shows when progress becomes non-zero', async () => {
|
|
renderComponent()
|
|
|
|
expect(
|
|
screen.queryByTestId('queue-inline-progress')
|
|
).not.toBeInTheDocument()
|
|
|
|
mockProgress.totalPercent.value = 10
|
|
await nextTick()
|
|
expect(screen.getByTestId('queue-inline-progress')).toBeInTheDocument()
|
|
})
|
|
|
|
it('hides when progress returns to zero', async () => {
|
|
mockProgress.totalPercent.value = 10
|
|
|
|
renderComponent()
|
|
|
|
expect(screen.getByTestId('queue-inline-progress')).toBeInTheDocument()
|
|
|
|
mockProgress.totalPercent.value = 0
|
|
mockProgress.currentNodePercent.value = 0
|
|
await nextTick()
|
|
expect(
|
|
screen.queryByTestId('queue-inline-progress')
|
|
).not.toBeInTheDocument()
|
|
})
|
|
})
|