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>

src/core/graph/subgraph/proxyWidget.test.ts

@@ -0,0 +1,121 @@
+import { describe, expect, test, vi } from 'vitest'
+
+import { registerProxyWidgets } from '@/core/graph/subgraph/proxyWidget'
+import { parseProxyWidgets } from '@/core/schemas/proxyWidget'
+import { LGraphNode } from '@/lib/litegraph/src/litegraph'
+import type { LGraphCanvas, SubgraphNode } from '@/lib/litegraph/src/litegraph'
+
+import {
+  createTestSubgraph,
+  createTestSubgraphNode
+} from '@/lib/litegraph/src/subgraph/__fixtures__/subgraphHelpers'
+
+const canvasEl: Partial<HTMLCanvasElement> = { addEventListener() {} }
+const canvas: Partial<LGraphCanvas> = { canvas: canvasEl as HTMLCanvasElement }
+registerProxyWidgets(canvas as LGraphCanvas)
+
+vi.mock('@/renderer/core/canvas/canvasStore', () => ({
+  useCanvasStore: () => ({})
+}))
+vi.mock('@/stores/domWidgetStore', () => ({
+  useDomWidgetStore: () => ({ widgetStates: new Map() })
+}))
+vi.mock('@/services/litegraphService', () => ({
+  useLitegraphService: () => ({ updatePreviews: () => ({}) })
+}))
+
+function setupSubgraph(
+  innerNodeCount: number = 0
+): [SubgraphNode, LGraphNode[]] {
+  const subgraph = createTestSubgraph()
+  const subgraphNode = createTestSubgraphNode(subgraph)
+  subgraphNode._internalConfigureAfterSlots()
+  const graph = subgraphNode.graph
+  graph.add(subgraphNode)
+  const innerNodes = []
+  for (let i = 0; i < innerNodeCount; i++) {
+    const innerNode = new LGraphNode(`InnerNode${i}`)
+    subgraph.add(innerNode)
+    innerNodes.push(innerNode)
+  }
+  return [subgraphNode, innerNodes]
+}
+
+describe('Subgraph proxyWidgets', () => {
+  test('Can add simple widget', () => {
+    const [subgraphNode, innerNodes] = setupSubgraph(1)
+    innerNodes[0].addWidget('text', 'stringWidget', 'value', () => {})
+    subgraphNode.properties.proxyWidgets = [['1', 'stringWidget']]
+    expect(subgraphNode.widgets.length).toBe(1)
+    expect(subgraphNode.properties.proxyWidgets).toStrictEqual([
+      ['1', 'stringWidget']
+    ])
+  })
+  test('Can add multiple widgets with same name', () => {
+    const [subgraphNode, innerNodes] = setupSubgraph(2)
+    for (const innerNode of innerNodes)
+      innerNode.addWidget('text', 'stringWidget', 'value', () => {})
+    subgraphNode.properties.proxyWidgets = [
+      ['1', 'stringWidget'],
+      ['2', 'stringWidget']
+    ]
+    expect(subgraphNode.widgets.length).toBe(2)
+    expect(subgraphNode.widgets[0].name).not.toEqual(
+      subgraphNode.widgets[1].name
+    )
+  })
+  test('Will serialize existing widgets', () => {
+    const [subgraphNode, innerNodes] = setupSubgraph(1)
+    innerNodes[0].addWidget('text', 'istringWidget', 'value', () => {})
+    subgraphNode.addWidget('text', 'stringWidget', 'value', () => {})
+
+    const proxyWidgets = parseProxyWidgets(subgraphNode.properties.proxyWidgets)
+    proxyWidgets.push(['1', 'istringWidget'])
+    subgraphNode.properties.proxyWidgets = proxyWidgets
+
+    expect(subgraphNode.widgets.length).toBe(2)
+    expect(subgraphNode.widgets[0].name).toBe('stringWidget')
+    subgraphNode.properties.proxyWidgets = [proxyWidgets[1], proxyWidgets[0]]
+    expect(subgraphNode.widgets[0].name).toBe('1: istringWidget')
+  })
+  test('Will mirror changes to value', () => {
+    const [subgraphNode, innerNodes] = setupSubgraph(1)
+    innerNodes[0].addWidget('text', 'stringWidget', 'value', () => {})
+    subgraphNode.properties.proxyWidgets = [['1', 'stringWidget']]
+    expect(subgraphNode.widgets.length).toBe(1)
+    expect(subgraphNode.widgets[0].value).toBe('value')
+    innerNodes[0].widgets![0].value = 'test'
+    expect(subgraphNode.widgets[0].value).toBe('test')
+    subgraphNode.widgets[0].value = 'test2'
+    expect(innerNodes[0].widgets![0].value).toBe('test2')
+  })
+  test('Will not modify position or sizing of existing widgets', () => {
+    const [subgraphNode, innerNodes] = setupSubgraph(1)
+    innerNodes[0].addWidget('text', 'stringWidget', 'value', () => {})
+    subgraphNode.properties.proxyWidgets = [['1', 'stringWidget']]
+    if (!innerNodes[0].widgets) throw new Error('node has no widgets')
+    innerNodes[0].widgets[0].y = 10
+    innerNodes[0].widgets[0].last_y = 11
+    innerNodes[0].widgets[0].computedHeight = 12
+    subgraphNode.widgets[0].y = 20
+    subgraphNode.widgets[0].last_y = 21
+    subgraphNode.widgets[0].computedHeight = 22
+    expect(innerNodes[0].widgets[0].y).toBe(10)
+    expect(innerNodes[0].widgets[0].last_y).toBe(11)
+    expect(innerNodes[0].widgets[0].computedHeight).toBe(12)
+  })
+  test('Can detach and re-attach widgets', () => {
+    const [subgraphNode, innerNodes] = setupSubgraph(1)
+    innerNodes[0].addWidget('text', 'stringWidget', 'value', () => {})
+    subgraphNode.properties.proxyWidgets = [['1', 'stringWidget']]
+    if (!innerNodes[0].widgets) throw new Error('node has no widgets')
+    expect(subgraphNode.widgets[0].value).toBe('value')
+    const poppedWidget = innerNodes[0].widgets.pop()
+    //simulate new draw frame
+    subgraphNode.widgets[0].computedHeight = 10
+    expect(subgraphNode.widgets[0].value).toBe(undefined)
+    innerNodes[0].widgets.push(poppedWidget!)
+    subgraphNode.widgets[0].computedHeight = 10
+    expect(subgraphNode.widgets[0].value).toBe('value')
+  })
+})

src/core/graph/widgets/dynamicWidgets.test.ts

@@ -0,0 +1,178 @@
+import { setActivePinia } from 'pinia'
+import { createTestingPinia } from '@pinia/testing'
+import { describe, expect, test } from 'vitest'
+import { LGraph, LGraphNode } from '@/lib/litegraph/src/litegraph'
+import { transformInputSpecV1ToV2 } from '@/schemas/nodeDef/migration'
+import type { InputSpec } from '@/schemas/nodeDefSchema'
+import { useLitegraphService } from '@/services/litegraphService'
+import type { HasInitialMinSize } from '@/services/litegraphService'
+
+setActivePinia(createTestingPinia())
+type DynamicInputs = ('INT' | 'STRING' | 'IMAGE' | DynamicInputs)[][]
+
+const { addNodeInput } = useLitegraphService()
+
+function nextTick() {
+  return new Promise<void>((r) => requestAnimationFrame(() => r()))
+}
+
+function addDynamicCombo(node: LGraphNode, inputs: DynamicInputs) {
+  const namePrefix = `${node.widgets?.length ?? 0}`
+  function getSpec(
+    inputs: DynamicInputs,
+    depth: number = 0
+  ): { key: string; inputs: object }[] {
+    return inputs.map((group, groupIndex) => {
+      const inputs = group.map((input, inputIndex) => [
+        `${namePrefix}.${depth}.${inputIndex}`,
+        Array.isArray(input)
+          ? ['COMFY_DYNAMICCOMBO_V3', { options: getSpec(input, depth + 1) }]
+          : [input, {}]
+      ])
+      return {
+        key: `${groupIndex}`,
+        inputs: { required: Object.fromEntries(inputs) }
+      }
+    })
+  }
+  const inputSpec: Required<InputSpec> = [
+    'COMFY_DYNAMICCOMBO_V3',
+    { options: getSpec(inputs) }
+  ]
+  addNodeInput(
+    node,
+    transformInputSpecV1ToV2(inputSpec, { name: namePrefix, isOptional: false })
+  )
+}
+function addAutogrow(node: LGraphNode, template: unknown) {
+  addNodeInput(
+    node,
+    transformInputSpecV1ToV2(['COMFY_AUTOGROW_V3', { template }], {
+      name: `${node.inputs.length}`,
+      isOptional: false
+    })
+  )
+}
+function connectInput(node: LGraphNode, inputIndex: number, graph: LGraph) {
+  const node2 = testNode()
+  node2.addOutput('out', '*')
+  graph.add(node2)
+  node2.connect(0, node, inputIndex)
+}
+function testNode() {
+  const node: LGraphNode & Partial<HasInitialMinSize> = new LGraphNode('test')
+  node.widgets = []
+  node._initialMinSize = { width: 1, height: 1 }
+  node.constructor.nodeData = {
+    name: 'testnode'
+  } as typeof node.constructor.nodeData
+  return node as LGraphNode & Required<Pick<LGraphNode, 'widgets'>>
+}
+
+describe('Dynamic Combos', () => {
+  test('Can add widget on selection', () => {
+    const node = testNode()
+    addDynamicCombo(node, [['INT'], ['INT', 'STRING']])
+    expect(node.widgets.length).toBe(2)
+    node.widgets[0].value = '1'
+    expect(node.widgets.length).toBe(3)
+  })
+  test('Can add nested widgets', () => {
+    const node = testNode()
+    addDynamicCombo(node, [['INT'], [[[], ['STRING']]]])
+    expect(node.widgets.length).toBe(2)
+    node.widgets[0].value = '1'
+    expect(node.widgets.length).toBe(2)
+    node.widgets[1].value = '1'
+    expect(node.widgets.length).toBe(3)
+  })
+  test('Can add input', () => {
+    const node = testNode()
+    addDynamicCombo(node, [['INT'], ['IMAGE']])
+    expect(node.widgets.length).toBe(2)
+    node.widgets[0].value = '1'
+    expect(node.widgets.length).toBe(1)
+    expect(node.inputs.length).toBe(2)
+    expect(node.inputs[1].type).toBe('IMAGE')
+  })
+  test('Dynamically added inputs are well ordered', () => {
+    const node = testNode()
+    addDynamicCombo(node, [['INT'], ['IMAGE']])
+    addDynamicCombo(node, [['INT'], ['IMAGE']])
+    node.widgets[2].value = '1'
+    node.widgets[0].value = '1'
+    expect(node.widgets.length).toBe(2)
+    expect(node.inputs.length).toBe(4)
+    expect(node.inputs[1].name).toBe('0.0.0.0')
+    expect(node.inputs[3].name).toBe('2.2.0.0')
+  })
+})
+describe('Autogrow', () => {
+  const inputsSpec = { required: { image: ['IMAGE', {}] } }
+  test('Can name by prefix', () => {
+    const graph = new LGraph()
+    const node = testNode()
+    graph.add(node)
+    addAutogrow(node, { input: inputsSpec, prefix: 'test' })
+    connectInput(node, 0, graph)
+    connectInput(node, 1, graph)
+    connectInput(node, 2, graph)
+    expect(node.inputs.length).toBe(4)
+    expect(node.inputs[0].name).toBe('0.test0')
+    expect(node.inputs[2].name).toBe('0.test2')
+  })
+  test('Can name by list of names', () => {
+    const graph = new LGraph()
+    const node = testNode()
+    graph.add(node)
+    addAutogrow(node, { input: inputsSpec, names: ['a', 'b', 'c'] })
+    connectInput(node, 0, graph)
+    connectInput(node, 1, graph)
+    connectInput(node, 2, graph)
+    expect(node.inputs.length).toBe(3)
+    expect(node.inputs[0].name).toBe('0.a')
+    expect(node.inputs[2].name).toBe('0.c')
+  })
+  test('Can add autogrow with min input count', () => {
+    const node = testNode()
+    addAutogrow(node, { min: 4, input: inputsSpec })
+    expect(node.inputs.length).toBe(4)
+  })
+  test('Adding connections will cause growth up to max', () => {
+    const graph = new LGraph()
+    const node = testNode()
+    graph.add(node)
+    addAutogrow(node, { min: 1, input: inputsSpec, prefix: 'test', max: 3 })
+    expect(node.inputs.length).toBe(1)
+
+    connectInput(node, 0, graph)
+    expect(node.inputs.length).toBe(2)
+    connectInput(node, 1, graph)
+    expect(node.inputs.length).toBe(3)
+    connectInput(node, 2, graph)
+    expect(node.inputs.length).toBe(3)
+  })
+  test('Removing connections decreases to min', async () => {
+    const graph = new LGraph()
+    const node = testNode()
+    graph.add(node)
+    addAutogrow(node, { min: 4, input: inputsSpec, prefix: 'test' })
+    connectInput(node, 3, graph)
+    connectInput(node, 4, graph)
+    connectInput(node, 5, graph)
+    expect(node.inputs.length).toBe(7)
+
+    node.disconnectInput(4)
+    await nextTick()
+    expect(node.inputs.length).toBe(6)
+    node.disconnectInput(3)
+    await nextTick()
+    expect(node.inputs.length).toBe(5)
+
+    connectInput(node, 0, graph)
+    expect(node.inputs.length).toBe(5)
+    node.disconnectInput(0)
+    await nextTick()
+    expect(node.inputs.length).toBe(5)
+  })
+})