mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-19 22:09:37 +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>
96 lines
2.4 KiB
TypeScript
96 lines
2.4 KiB
TypeScript
import type { ComponentProps } from 'vue-component-type-helpers'
|
|
|
|
import { fireEvent, render, screen } from '@testing-library/vue'
|
|
import PrimeVue from 'primevue/config'
|
|
import { describe, expect, it } from 'vitest'
|
|
import { nextTick } from 'vue'
|
|
import { createI18n } from 'vue-i18n'
|
|
|
|
import UserAvatar from './UserAvatar.vue'
|
|
|
|
const i18n = createI18n({
|
|
legacy: false,
|
|
locale: 'en',
|
|
messages: {
|
|
en: {
|
|
auth: {
|
|
login: {
|
|
userAvatar: 'User Avatar'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
})
|
|
|
|
describe('UserAvatar', () => {
|
|
function renderComponent(props: ComponentProps<typeof UserAvatar> = {}) {
|
|
return render(UserAvatar, {
|
|
global: {
|
|
plugins: [PrimeVue, i18n]
|
|
},
|
|
props
|
|
})
|
|
}
|
|
|
|
it('renders correctly with photo Url', () => {
|
|
renderComponent({
|
|
photoUrl: 'https://example.com/avatar.jpg'
|
|
})
|
|
|
|
expect(screen.getByRole('img')).toHaveAttribute(
|
|
'src',
|
|
'https://example.com/avatar.jpg'
|
|
)
|
|
expect(screen.queryByTestId('avatar-icon')).not.toBeInTheDocument()
|
|
})
|
|
|
|
it('renders with default icon when no photo Url is provided', () => {
|
|
renderComponent({
|
|
photoUrl: undefined
|
|
})
|
|
|
|
expect(screen.queryByRole('img')).not.toBeInTheDocument()
|
|
expect(screen.getByTestId('avatar-icon')).toBeInTheDocument()
|
|
})
|
|
|
|
it('renders with default icon when provided photo Url is null', () => {
|
|
renderComponent({
|
|
photoUrl: null
|
|
})
|
|
|
|
expect(screen.queryByRole('img')).not.toBeInTheDocument()
|
|
expect(screen.getByTestId('avatar-icon')).toBeInTheDocument()
|
|
})
|
|
|
|
it('falls back to icon when image fails to load', async () => {
|
|
renderComponent({
|
|
photoUrl: 'https://example.com/broken-image.jpg'
|
|
})
|
|
|
|
const img = screen.getByRole('img')
|
|
expect(screen.queryByTestId('avatar-icon')).not.toBeInTheDocument()
|
|
|
|
await fireEvent.error(img)
|
|
await nextTick()
|
|
|
|
expect(screen.getByTestId('avatar-icon')).toBeInTheDocument()
|
|
})
|
|
|
|
it('uses provided ariaLabel', () => {
|
|
renderComponent({
|
|
photoUrl: 'https://example.com/avatar.jpg',
|
|
ariaLabel: 'Custom Label'
|
|
})
|
|
|
|
expect(screen.getByLabelText('Custom Label')).toBeInTheDocument()
|
|
})
|
|
|
|
it('falls back to i18n translation when no ariaLabel is provided', () => {
|
|
renderComponent({
|
|
photoUrl: 'https://example.com/avatar.jpg'
|
|
})
|
|
|
|
expect(screen.getByLabelText('User Avatar')).toBeInTheDocument()
|
|
})
|
|
})
|