mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-26 10:59:53 +00:00
941cd2b4a5
## Summary Improves type safety in test files by replacing unsafe type patterns with proper TypeScript idioms. ## Changes - Define typed `TestWindow` interface extending `Window` for Playwright tests with custom properties - Use `Partial<HTMLElement>` with single type assertion for DOM element mocks - Remove redundant type imports - Fix `console.log` → `console.warn` in test fixture ## Files Changed 16 test files across browser_tests, packages, and src/components ## Test Plan - ✅ `pnpm typecheck` passes - ✅ No new `any` types introduced - ✅ All pre-commit hooks pass ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-8253-refactor-improve-TypeScript-patterns-in-test-files-Group-1-8-2f16d73d365081548f9ece7bcf0525ee) by [Unito](https://www.unito.io) --------- Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
109 lines
2.8 KiB
TypeScript
109 lines
2.8 KiB
TypeScript
import type { ComponentProps } from 'vue-component-type-helpers'
|
|
|
|
import { mount } from '@vue/test-utils'
|
|
import Avatar from 'primevue/avatar'
|
|
import PrimeVue from 'primevue/config'
|
|
import { beforeEach, describe, expect, it } from 'vitest'
|
|
import { createApp, 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', () => {
|
|
beforeEach(() => {
|
|
const app = createApp({})
|
|
app.use(PrimeVue)
|
|
})
|
|
|
|
const mountComponent = (props: ComponentProps<typeof UserAvatar> = {}) => {
|
|
return mount(UserAvatar, {
|
|
global: {
|
|
plugins: [PrimeVue, i18n],
|
|
components: { Avatar }
|
|
},
|
|
props
|
|
})
|
|
}
|
|
|
|
it('renders correctly with photo Url', async () => {
|
|
const wrapper = mountComponent({
|
|
photoUrl: 'https://example.com/avatar.jpg'
|
|
})
|
|
|
|
const avatar = wrapper.findComponent(Avatar)
|
|
expect(avatar.exists()).toBe(true)
|
|
expect(avatar.props('image')).toBe('https://example.com/avatar.jpg')
|
|
expect(avatar.props('icon')).toBeNull()
|
|
})
|
|
|
|
it('renders with default icon when no photo Url is provided', () => {
|
|
const wrapper = mountComponent({
|
|
photoUrl: undefined
|
|
})
|
|
|
|
const avatar = wrapper.findComponent(Avatar)
|
|
expect(avatar.exists()).toBe(true)
|
|
expect(avatar.props('image')).toBeNull()
|
|
expect(avatar.props('icon')).toBe('icon-[lucide--user]')
|
|
})
|
|
|
|
it('renders with default icon when provided photo Url is null', () => {
|
|
const wrapper = mountComponent({
|
|
photoUrl: null
|
|
})
|
|
|
|
const avatar = wrapper.findComponent(Avatar)
|
|
expect(avatar.exists()).toBe(true)
|
|
expect(avatar.props('image')).toBeNull()
|
|
expect(avatar.props('icon')).toBe('icon-[lucide--user]')
|
|
})
|
|
|
|
it('falls back to icon when image fails to load', async () => {
|
|
const wrapper = mountComponent({
|
|
photoUrl: 'https://example.com/broken-image.jpg'
|
|
})
|
|
|
|
const avatar = wrapper.findComponent(Avatar)
|
|
expect(avatar.props('icon')).toBeNull()
|
|
|
|
// Simulate image load error
|
|
avatar.vm.$emit('error')
|
|
await nextTick()
|
|
|
|
expect(avatar.props('icon')).toBe('icon-[lucide--user]')
|
|
})
|
|
|
|
it('uses provided ariaLabel', () => {
|
|
const wrapper = mountComponent({
|
|
photoUrl: 'https://example.com/avatar.jpg',
|
|
ariaLabel: 'Custom Label'
|
|
})
|
|
|
|
const avatar = wrapper.findComponent(Avatar)
|
|
expect(avatar.attributes('aria-label')).toBe('Custom Label')
|
|
})
|
|
|
|
it('falls back to i18n translation when no ariaLabel is provided', () => {
|
|
const wrapper = mountComponent({
|
|
photoUrl: 'https://example.com/avatar.jpg'
|
|
})
|
|
|
|
const avatar = wrapper.findComponent(Avatar)
|
|
expect(avatar.attributes('aria-label')).toBe('User Avatar')
|
|
})
|
|
})
|