mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-05-05 13:41:59 +00:00
chore: migrate tests from tests-ui/ to colocate with source files (#7811)
## Summary Migrates all unit tests from `tests-ui/` to colocate with their source files in `src/`, improving discoverability and maintainability. ## Changes - **What**: Relocated all unit tests to be adjacent to the code they test, following the `<source>.test.ts` naming convention - **Config**: Updated `vitest.config.ts` to remove `tests-ui` include pattern and `@tests-ui` alias - **Docs**: Moved testing documentation to `docs/testing/` with updated paths and patterns ## Review Focus - Migration patterns documented in `temp/plans/migrate-tests-ui-to-src.md` - Tests use `@/` path aliases instead of relative imports - Shared fixtures placed in `__fixtures__/` directories ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7811-chore-migrate-tests-from-tests-ui-to-colocate-with-source-files-2da6d73d36508147a4cce85365dee614) by [Unito](https://www.unito.io) --------- Co-authored-by: Amp <amp@ampcode.com> Co-authored-by: GitHub Action <action@github.com>
This commit is contained in:
123
src/renderer/extensions/vueNodes/components/NodeWidgets.test.ts
Normal file
123
src/renderer/extensions/vueNodes/components/NodeWidgets.test.ts
Normal file
@@ -0,0 +1,123 @@
|
||||
import { createTestingPinia } from '@pinia/testing'
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { describe, expect, it } from 'vitest'
|
||||
|
||||
import type {
|
||||
SafeWidgetData,
|
||||
VueNodeData
|
||||
} from '@/composables/graph/useGraphNodeManager'
|
||||
|
||||
import NodeWidgets from '@/renderer/extensions/vueNodes/components/NodeWidgets.vue'
|
||||
|
||||
describe('NodeWidgets', () => {
|
||||
const createMockWidget = (
|
||||
overrides: Partial<SafeWidgetData> = {}
|
||||
): SafeWidgetData => ({
|
||||
name: 'test_widget',
|
||||
type: 'combo',
|
||||
value: 'test_value',
|
||||
options: {
|
||||
values: ['option1', 'option2']
|
||||
},
|
||||
callback: undefined,
|
||||
spec: undefined,
|
||||
label: undefined,
|
||||
isDOMWidget: false,
|
||||
slotMetadata: undefined,
|
||||
...overrides
|
||||
})
|
||||
|
||||
const createMockNodeData = (
|
||||
nodeType: string = 'TestNode',
|
||||
widgets: SafeWidgetData[] = []
|
||||
): VueNodeData => ({
|
||||
id: '1',
|
||||
type: nodeType,
|
||||
widgets,
|
||||
title: 'Test Node',
|
||||
mode: 0,
|
||||
selected: false,
|
||||
executing: false,
|
||||
inputs: [],
|
||||
outputs: []
|
||||
})
|
||||
|
||||
const mountComponent = (nodeData?: VueNodeData) => {
|
||||
return mount(NodeWidgets, {
|
||||
props: {
|
||||
nodeData
|
||||
},
|
||||
global: {
|
||||
plugins: [createTestingPinia()],
|
||||
stubs: {
|
||||
// Stub InputSlot to avoid complex slot registration dependencies
|
||||
InputSlot: true
|
||||
},
|
||||
mocks: {
|
||||
$t: (key: string) => key
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
describe('node-type prop passing', () => {
|
||||
it('passes node type to widget components', () => {
|
||||
const widget = createMockWidget()
|
||||
const nodeData = createMockNodeData('CheckpointLoaderSimple', [widget])
|
||||
const wrapper = mountComponent(nodeData)
|
||||
|
||||
// Find the dynamically rendered widget component
|
||||
const widgetComponent = wrapper.find('.lg-node-widget')
|
||||
expect(widgetComponent.exists()).toBe(true)
|
||||
|
||||
// Verify node-type prop is passed
|
||||
const component = widgetComponent.findComponent({ name: 'WidgetSelect' })
|
||||
if (component.exists()) {
|
||||
expect(component.props('nodeType')).toBe('CheckpointLoaderSimple')
|
||||
}
|
||||
})
|
||||
|
||||
it('passes empty string when nodeData is undefined', () => {
|
||||
const wrapper = mountComponent(undefined)
|
||||
|
||||
// No widgets should be rendered
|
||||
const widgetComponents = wrapper.findAll('.lg-node-widget')
|
||||
expect(widgetComponents).toHaveLength(0)
|
||||
})
|
||||
|
||||
it('passes empty string when nodeData.type is undefined', () => {
|
||||
const widget = createMockWidget()
|
||||
const nodeData = createMockNodeData('', [widget])
|
||||
const wrapper = mountComponent(nodeData)
|
||||
|
||||
const widgetComponent = wrapper.find('.lg-node-widget')
|
||||
if (widgetComponent.exists()) {
|
||||
const component = widgetComponent.findComponent({
|
||||
name: 'WidgetSelect'
|
||||
})
|
||||
if (component.exists()) {
|
||||
expect(component.props('nodeType')).toBe('')
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
it.for(['CheckpointLoaderSimple', 'LoraLoader', 'VAELoader', 'KSampler'])(
|
||||
'passes correct node type: %s',
|
||||
(nodeType) => {
|
||||
const widget = createMockWidget()
|
||||
const nodeData = createMockNodeData(nodeType, [widget])
|
||||
const wrapper = mountComponent(nodeData)
|
||||
|
||||
const widgetComponent = wrapper.find('.lg-node-widget')
|
||||
expect(widgetComponent.exists()).toBe(true)
|
||||
|
||||
const component = widgetComponent.findComponent({
|
||||
name: 'WidgetSelect'
|
||||
})
|
||||
if (component.exists()) {
|
||||
expect(component.props('nodeType')).toBe(nodeType)
|
||||
}
|
||||
}
|
||||
)
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user