mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-02 12:11:58 +00:00
3de387429a
## Summary Phase 2 of the VTL migration: migrate 11 interactive component tests from @vue/test-utils to @testing-library/vue (69 tests). Stacked on #10471. ## Changes - **What**: Migrate BatchCountEdit, BypassButton, BuilderFooterToolbar, ComfyActionbar, SidebarIcon, EditableText, UrlInput, SearchInput, TagsInput, TreeExplorerTreeNode, ColorCustomizationSelector from VTU to VTL - **Pattern transforms**: `trigger('click')` → `userEvent.click()`, `setValue()` → `userEvent.type()`, `findComponent().props()` → `getByRole/getByText/getByTestId`, `emitted()` → callback props - **Removed**: 4 `@ts-expect-error` annotations, 1 change-detector test (SearchInput `vm.focus`) - **PrimeVue**: `data-pc-name` selectors + `aria-pressed` for SelectButton, container queries for ColorPicker/InputIcon ## Review Focus - PrimeVue escape hatches in ColorCustomizationSelector (SelectButton/ColorPicker lack standard ARIA roles) - Teleport test in ComfyActionbar uses `container.querySelector` intentionally (scoped to teleport target) - SearchInput debounce tests use `fireEvent.update` instead of `userEvent.type` due to fake timer interaction - EditableText escape-then-blur test simplified: `userEvent.keyboard('{Escape}')` already triggers blur internally ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-10490-test-migrate-11-interactive-component-tests-from-VTU-to-VTL-Phase-2-32e6d73d3650817ca40fd61395499e3f) by [Unito](https://www.unito.io) --------- Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
107 lines
2.9 KiB
TypeScript
107 lines
2.9 KiB
TypeScript
import { createTestingPinia } from '@pinia/testing'
|
|
import { fireEvent, render, screen } from '@testing-library/vue'
|
|
import Badge from 'primevue/badge'
|
|
import PrimeVue from 'primevue/config'
|
|
import InputText from 'primevue/inputtext'
|
|
import { afterAll, beforeAll, describe, expect, it, vi } from 'vitest'
|
|
import { createApp } from 'vue'
|
|
import { createI18n } from 'vue-i18n'
|
|
|
|
import EditableText from '@/components/common/EditableText.vue'
|
|
import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
|
|
import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
|
|
import { InjectKeyHandleEditLabelFunction } from '@/types/treeExplorerTypes'
|
|
|
|
const i18n = createI18n({
|
|
legacy: false,
|
|
locale: 'en',
|
|
messages: {}
|
|
})
|
|
|
|
describe('TreeExplorerTreeNode', () => {
|
|
const mockNode = {
|
|
key: '1',
|
|
label: 'Test Node',
|
|
leaf: false,
|
|
totalLeaves: 3,
|
|
icon: 'pi pi-folder',
|
|
type: 'folder',
|
|
handleRename: () => {}
|
|
} as RenderedTreeExplorerNode
|
|
|
|
const mockHandleEditLabel = vi.fn()
|
|
|
|
beforeAll(() => {
|
|
const app = createApp({})
|
|
app.use(PrimeVue)
|
|
vi.useFakeTimers()
|
|
})
|
|
|
|
afterAll(() => {
|
|
vi.useRealTimers()
|
|
})
|
|
|
|
it('renders correctly', () => {
|
|
render(TreeExplorerTreeNode, {
|
|
props: { node: mockNode },
|
|
global: {
|
|
components: { EditableText, Badge },
|
|
plugins: [createTestingPinia(), i18n],
|
|
provide: {
|
|
[InjectKeyHandleEditLabelFunction]: mockHandleEditLabel
|
|
}
|
|
}
|
|
})
|
|
|
|
const treeNode = screen.getByTestId('tree-node-1')
|
|
expect(treeNode).toBeInTheDocument()
|
|
expect(treeNode).toHaveClass('tree-folder')
|
|
expect(treeNode).not.toHaveClass('tree-leaf')
|
|
expect(screen.getByText('Test Node')).toBeInTheDocument()
|
|
expect(screen.getByText('3')).toBeInTheDocument()
|
|
})
|
|
|
|
it('makes node label editable when isEditingLabel is true', () => {
|
|
render(TreeExplorerTreeNode, {
|
|
props: {
|
|
node: {
|
|
...mockNode,
|
|
isEditingLabel: true
|
|
}
|
|
},
|
|
global: {
|
|
components: { EditableText, Badge, InputText },
|
|
plugins: [createTestingPinia(), i18n, PrimeVue],
|
|
provide: {
|
|
[InjectKeyHandleEditLabelFunction]: mockHandleEditLabel
|
|
}
|
|
}
|
|
})
|
|
|
|
expect(screen.getByRole('textbox')).toBeInTheDocument()
|
|
})
|
|
|
|
it('triggers handleEditLabel callback when editing is finished', async () => {
|
|
const handleEditLabelMock = vi.fn()
|
|
|
|
render(TreeExplorerTreeNode, {
|
|
props: {
|
|
node: {
|
|
...mockNode,
|
|
isEditingLabel: true
|
|
}
|
|
},
|
|
global: {
|
|
components: { EditableText, Badge, InputText },
|
|
provide: { [InjectKeyHandleEditLabelFunction]: handleEditLabelMock },
|
|
plugins: [createTestingPinia(), i18n, PrimeVue]
|
|
}
|
|
})
|
|
|
|
// Trigger blur on the input to finish editing (fires the 'edit' event)
|
|
await fireEvent.blur(screen.getByRole('textbox'))
|
|
|
|
expect(handleEditLabelMock).toHaveBeenCalledOnce()
|
|
})
|
|
})
|