mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-04-20 06:20:11 +00:00
e8b9f8f4bc
## Summary Enforced test file naming conventions with ESLint rules and renamed 26 test files from `.spec.ts` to `.test.ts`. ## Changes - **What**: Added ESLint rules to enforce `.spec.ts` files only in `browser_tests/tests/` and `.test.ts` files only in `src/` - **What**: Renamed 26 component/unit test files from `.spec.ts` to `.test.ts` to comply with new convention ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-5820-enforce-test-file-naming-rule-27b6d73d365081269b32ddcc9d3a5048) by [Unito](https://www.unito.io)
68 lines
2.1 KiB
TypeScript
68 lines
2.1 KiB
TypeScript
import { mount } from '@vue/test-utils'
|
|
import { describe, expect, it, vi } from 'vitest'
|
|
import { nextTick } from 'vue'
|
|
|
|
import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
|
|
|
|
vi.mock('@vueuse/core', () => ({
|
|
useEventListener: vi.fn()
|
|
}))
|
|
|
|
describe('BaseThumbnail', () => {
|
|
const mountThumbnail = (props = {}, slots = {}) => {
|
|
return mount(BaseThumbnail, {
|
|
props,
|
|
slots: {
|
|
default: '<img src="/test.jpg" alt="test" />',
|
|
...slots
|
|
}
|
|
})
|
|
}
|
|
|
|
it('renders slot content', () => {
|
|
const wrapper = mountThumbnail()
|
|
expect(wrapper.find('img').exists()).toBe(true)
|
|
})
|
|
|
|
it('applies hover zoom with correct style', () => {
|
|
const wrapper = mountThumbnail({ isHovered: true })
|
|
const contentDiv = wrapper.find('.transform-gpu')
|
|
expect(contentDiv.attributes('style')).toContain('transform')
|
|
expect(contentDiv.attributes('style')).toContain('scale')
|
|
})
|
|
|
|
it('applies custom hover zoom value', () => {
|
|
const wrapper = mountThumbnail({ hoverZoom: 10, isHovered: true })
|
|
const contentDiv = wrapper.find('.transform-gpu')
|
|
expect(contentDiv.attributes('style')).toContain('scale(1.1)')
|
|
})
|
|
|
|
it('does not apply scale when not hovered', () => {
|
|
const wrapper = mountThumbnail({ isHovered: false })
|
|
const contentDiv = wrapper.find('.transform-gpu')
|
|
expect(contentDiv.attributes('style')).toBeUndefined()
|
|
})
|
|
|
|
it('shows error state when image fails to load', async () => {
|
|
const wrapper = mountThumbnail()
|
|
const vm = wrapper.vm as any
|
|
|
|
// Manually set error since useEventListener is mocked
|
|
vm.error = true
|
|
await nextTick()
|
|
|
|
expect(
|
|
wrapper.find('img[src="/assets/images/default-template.png"]').exists()
|
|
).toBe(true)
|
|
})
|
|
|
|
it('applies transition classes to content', () => {
|
|
const wrapper = mountThumbnail()
|
|
const contentDiv = wrapper.find('.transform-gpu')
|
|
expect(contentDiv.classes()).toContain('transform-gpu')
|
|
expect(contentDiv.classes()).toContain('transition-transform')
|
|
expect(contentDiv.classes()).toContain('duration-1000')
|
|
expect(contentDiv.classes()).toContain('ease-out')
|
|
})
|
|
})
|