mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-24 06:35:10 +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>
46 lines
1.2 KiB
TypeScript
46 lines
1.2 KiB
TypeScript
import { render, screen } from '@testing-library/vue'
|
|
import { createPinia, setActivePinia } from 'pinia'
|
|
import PrimeVue from 'primevue/config'
|
|
import { beforeEach, describe, expect, it, vi } from 'vitest'
|
|
import type { ComponentProps } from 'vue-component-type-helpers'
|
|
import { createI18n } from 'vue-i18n'
|
|
|
|
import ConfirmationDialogContent from './ConfirmationDialogContent.vue'
|
|
|
|
type Props = ComponentProps<typeof ConfirmationDialogContent>
|
|
|
|
const i18n = createI18n({
|
|
legacy: false,
|
|
locale: 'en',
|
|
messages: { en: {} },
|
|
missingWarn: false,
|
|
fallbackWarn: false
|
|
})
|
|
|
|
describe('ConfirmationDialogContent', () => {
|
|
beforeEach(() => {
|
|
setActivePinia(createPinia())
|
|
})
|
|
|
|
function renderComponent(props: Partial<Props> = {}) {
|
|
return render(ConfirmationDialogContent, {
|
|
global: {
|
|
plugins: [PrimeVue, i18n]
|
|
},
|
|
props: {
|
|
message: 'Test message',
|
|
type: 'default',
|
|
onConfirm: vi.fn(),
|
|
...props
|
|
} as Props
|
|
})
|
|
}
|
|
|
|
it('renders long messages without breaking layout', () => {
|
|
const longFilename =
|
|
'workflow_checkpoint_' + 'a'.repeat(200) + '.safetensors'
|
|
renderComponent({ message: longFilename })
|
|
expect(screen.getByText(longFilename)).toBeInTheDocument()
|
|
})
|
|
})
|