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/components/bottomPanel/tabs/shortcuts/EssentialsPanel.test.ts

@@ -0,0 +1,80 @@
+import { mount } from '@vue/test-utils'
+import { createPinia, setActivePinia } from 'pinia'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import EssentialsPanel from '@/components/bottomPanel/tabs/shortcuts/EssentialsPanel.vue'
+import ShortcutsList from '@/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue'
+import type { ComfyCommandImpl } from '@/stores/commandStore'
+
+// Mock ShortcutsList component
+vi.mock('@/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue', () => ({
+  default: {
+    name: 'ShortcutsList',
+    props: ['commands', 'subcategories', 'columns'],
+    template:
+      '<div class="shortcuts-list-mock">{{ commands.length }} commands</div>'
+  }
+}))
+
+// Mock command store
+const mockCommands: ComfyCommandImpl[] = [
+  {
+    id: 'Workflow.New',
+    label: 'New Workflow',
+    category: 'essentials'
+  } as ComfyCommandImpl,
+  {
+    id: 'Node.Add',
+    label: 'Add Node',
+    category: 'essentials'
+  } as ComfyCommandImpl,
+  {
+    id: 'Queue.Clear',
+    label: 'Clear Queue',
+    category: 'essentials'
+  } as ComfyCommandImpl,
+  {
+    id: 'Other.Command',
+    label: 'Other Command',
+    category: 'view-controls',
+    function: vi.fn(),
+    icon: 'pi pi-test',
+    tooltip: 'Test tooltip',
+    menubarLabel: 'Other Command',
+    keybinding: null
+  } as ComfyCommandImpl
+]
+
+vi.mock('@/stores/commandStore', () => ({
+  useCommandStore: () => ({
+    commands: mockCommands
+  })
+}))
+
+describe('EssentialsPanel', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('should render ShortcutsList with essentials commands', () => {
+    const wrapper = mount(EssentialsPanel)
+
+    const shortcutsList = wrapper.findComponent(ShortcutsList)
+    expect(shortcutsList.exists()).toBe(true)
+  })
+
+  it('should categorize commands into subcategories', () => {
+    const wrapper = mount(EssentialsPanel)
+
+    const shortcutsList = wrapper.findComponent(ShortcutsList)
+    const subcategories = shortcutsList.props('subcategories')
+
+    expect(subcategories).toHaveProperty('workflow')
+    expect(subcategories).toHaveProperty('node')
+    expect(subcategories).toHaveProperty('queue')
+
+    expect(subcategories.workflow).toContain(mockCommands[0])
+    expect(subcategories.node).toContain(mockCommands[1])
+    expect(subcategories.queue).toContain(mockCommands[2])
+  })
+})

src/components/bottomPanel/tabs/shortcuts/ShortcutsList.test.ts

@@ -0,0 +1,164 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import ShortcutsList from '@/components/bottomPanel/tabs/shortcuts/ShortcutsList.vue'
+import type { ComfyCommandImpl } from '@/stores/commandStore'
+
+// Mock vue-i18n
+const mockT = vi.fn((key: string) => {
+  const translations: Record<string, string> = {
+    'shortcuts.subcategories.workflow': 'Workflow',
+    'shortcuts.subcategories.node': 'Node',
+    'shortcuts.subcategories.queue': 'Queue',
+    'shortcuts.subcategories.view': 'View',
+    'shortcuts.subcategories.panelControls': 'Panel Controls',
+    'commands.Workflow_New.label': 'New Blank Workflow'
+  }
+  return translations[key] || key
+})
+
+vi.mock('vue-i18n', () => ({
+  useI18n: () => ({
+    t: mockT
+  })
+}))
+
+describe('ShortcutsList', () => {
+  const mockCommands: ComfyCommandImpl[] = [
+    {
+      id: 'Workflow.New',
+      label: 'New Workflow',
+      category: 'essentials',
+      keybinding: {
+        combo: {
+          getKeySequences: () => ['Control', 'n']
+        }
+      }
+    } as ComfyCommandImpl,
+    {
+      id: 'Node.Add',
+      label: 'Add Node',
+      category: 'essentials',
+      keybinding: {
+        combo: {
+          getKeySequences: () => ['Shift', 'a']
+        }
+      }
+    } as ComfyCommandImpl,
+    {
+      id: 'Queue.Clear',
+      label: 'Clear Queue',
+      category: 'essentials',
+      keybinding: {
+        combo: {
+          getKeySequences: () => ['Control', 'Shift', 'c']
+        }
+      }
+    } as ComfyCommandImpl
+  ]
+
+  const mockSubcategories = {
+    workflow: [mockCommands[0]],
+    node: [mockCommands[1]],
+    queue: [mockCommands[2]]
+  }
+
+  it('should render shortcuts organized by subcategories', () => {
+    const wrapper = mount(ShortcutsList, {
+      props: {
+        commands: mockCommands,
+        subcategories: mockSubcategories
+      }
+    })
+
+    // Check that subcategories are rendered
+    expect(wrapper.text()).toContain('Workflow')
+    expect(wrapper.text()).toContain('Node')
+    expect(wrapper.text()).toContain('Queue')
+
+    // Check that commands are rendered
+    expect(wrapper.text()).toContain('New Blank Workflow')
+  })
+
+  it('should format keyboard shortcuts correctly', () => {
+    const wrapper = mount(ShortcutsList, {
+      props: {
+        commands: mockCommands,
+        subcategories: mockSubcategories
+      }
+    })
+
+    // Check for formatted keys
+    expect(wrapper.text()).toContain('Ctrl')
+    expect(wrapper.text()).toContain('n')
+    expect(wrapper.text()).toContain('Shift')
+    expect(wrapper.text()).toContain('a')
+    expect(wrapper.text()).toContain('c')
+  })
+
+  it('should filter out commands without keybindings', () => {
+    const commandsWithoutKeybinding: ComfyCommandImpl[] = [
+      ...mockCommands,
+      {
+        id: 'No.Keybinding',
+        label: 'No Keybinding',
+        category: 'essentials',
+        keybinding: null
+      } as ComfyCommandImpl
+    ]
+
+    const wrapper = mount(ShortcutsList, {
+      props: {
+        commands: commandsWithoutKeybinding,
+        subcategories: {
+          ...mockSubcategories,
+          other: [commandsWithoutKeybinding[3]]
+        }
+      }
+    })
+
+    expect(wrapper.text()).not.toContain('No Keybinding')
+  })
+
+  it('should handle special key formatting', () => {
+    const specialKeyCommand: ComfyCommandImpl = {
+      id: 'Special.Keys',
+      label: 'Special Keys',
+      category: 'essentials',
+      keybinding: {
+        combo: {
+          getKeySequences: () => ['Meta', 'ArrowUp', 'Enter', 'Escape', ' ']
+        }
+      }
+    } as ComfyCommandImpl
+
+    const wrapper = mount(ShortcutsList, {
+      props: {
+        commands: [specialKeyCommand],
+        subcategories: {
+          special: [specialKeyCommand]
+        }
+      }
+    })
+
+    const text = wrapper.text()
+    expect(text).toContain('Cmd') // Meta -> Cmd
+    expect(text).toContain('↑') // ArrowUp -> ↑
+    expect(text).toContain('↵') // Enter -> ↵
+    expect(text).toContain('Esc') // Escape -> Esc
+    expect(text).toContain('Space') // ' ' -> Space
+  })
+
+  it('should use fallback subcategory titles', () => {
+    const wrapper = mount(ShortcutsList, {
+      props: {
+        commands: mockCommands,
+        subcategories: {
+          unknown: [mockCommands[0]]
+        }
+      }
+    })
+
+    expect(wrapper.text()).toContain('unknown')
+  })
+})

src/components/bottomPanel/tabs/terminal/BaseTerminal.test.ts

@@ -0,0 +1,219 @@
+import { createTestingPinia } from '@pinia/testing'
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+import { createI18n } from 'vue-i18n'
+
+import BaseTerminal from '@/components/bottomPanel/tabs/terminal/BaseTerminal.vue'
+
+// Mock xterm and related modules
+vi.mock('@xterm/xterm', () => ({
+  Terminal: vi.fn().mockImplementation(() => ({
+    open: vi.fn(),
+    dispose: vi.fn(),
+    onSelectionChange: vi.fn(() => {
+      // Return a disposable
+      return {
+        dispose: vi.fn()
+      }
+    }),
+    hasSelection: vi.fn(() => false),
+    getSelection: vi.fn(() => ''),
+    selectAll: vi.fn(),
+    clearSelection: vi.fn(),
+    loadAddon: vi.fn()
+  })),
+  IDisposable: vi.fn()
+}))
+
+vi.mock('@xterm/addon-fit', () => ({
+  FitAddon: vi.fn().mockImplementation(() => ({
+    fit: vi.fn(),
+    proposeDimensions: vi.fn(() => ({ rows: 24, cols: 80 }))
+  }))
+}))
+
+const mockTerminal = {
+  open: vi.fn(),
+  dispose: vi.fn(),
+  onSelectionChange: vi.fn(() => ({
+    dispose: vi.fn()
+  })),
+  hasSelection: vi.fn(() => false),
+  getSelection: vi.fn(() => ''),
+  selectAll: vi.fn(),
+  clearSelection: vi.fn()
+}
+
+vi.mock('@/composables/bottomPanelTabs/useTerminal', () => ({
+  useTerminal: vi.fn(() => ({
+    terminal: mockTerminal,
+    useAutoSize: vi.fn(() => ({ resize: vi.fn() }))
+  }))
+}))
+
+vi.mock('@/utils/envUtil', () => ({
+  isElectron: vi.fn(() => false),
+  electronAPI: vi.fn(() => null)
+}))
+
+// Mock clipboard API
+Object.defineProperty(navigator, 'clipboard', {
+  value: {
+    writeText: vi.fn().mockResolvedValue(undefined)
+  },
+  configurable: true
+})
+
+const i18n = createI18n({
+  legacy: false,
+  locale: 'en',
+  messages: {
+    en: {
+      serverStart: {
+        copySelectionTooltip: 'Copy selection',
+        copyAllTooltip: 'Copy all'
+      }
+    }
+  }
+})
+
+const mountBaseTerminal = () => {
+  return mount(BaseTerminal, {
+    global: {
+      plugins: [
+        createTestingPinia({
+          createSpy: vi.fn
+        }),
+        i18n
+      ],
+      stubs: {
+        Button: {
+          template: '<button v-bind="$attrs"><slot /></button>',
+          props: ['icon', 'severity', 'size']
+        }
+      }
+    }
+  })
+}
+
+describe('BaseTerminal', () => {
+  let wrapper: VueWrapper<InstanceType<typeof BaseTerminal>> | undefined
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+  })
+
+  afterEach(() => {
+    wrapper?.unmount()
+  })
+
+  it('emits created event on mount', () => {
+    wrapper = mountBaseTerminal()
+
+    expect(wrapper.emitted('created')).toBeTruthy()
+    expect(wrapper.emitted('created')![0]).toHaveLength(2)
+  })
+
+  it('emits unmounted event on unmount', () => {
+    wrapper = mountBaseTerminal()
+    wrapper.unmount()
+
+    expect(wrapper.emitted('unmounted')).toBeTruthy()
+  })
+
+  it('button exists and has correct initial state', async () => {
+    wrapper = mountBaseTerminal()
+
+    const button = wrapper.find('button[aria-label]')
+    expect(button.exists()).toBe(true)
+
+    expect(button.classes()).toContain('opacity-0')
+    expect(button.classes()).toContain('pointer-events-none')
+  })
+
+  it('shows correct tooltip when no selection', async () => {
+    mockTerminal.hasSelection.mockReturnValue(false)
+    wrapper = mountBaseTerminal()
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    const button = wrapper.find('button[aria-label]')
+    expect(button.attributes('aria-label')).toBe('Copy all')
+  })
+
+  it('shows correct tooltip when selection exists', async () => {
+    mockTerminal.hasSelection.mockReturnValue(true)
+    wrapper = mountBaseTerminal()
+
+    // Trigger the selection change callback that was registered during mount
+    expect(mockTerminal.onSelectionChange).toHaveBeenCalled()
+    // Access the mock calls - TypeScript can't infer the mock structure dynamically
+    const selectionCallback = (mockTerminal.onSelectionChange as any).mock
+      .calls[0][0]
+    selectionCallback()
+    await nextTick()
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    const button = wrapper.find('button[aria-label]')
+    expect(button.attributes('aria-label')).toBe('Copy selection')
+  })
+
+  it('copies selected text when selection exists', async () => {
+    const selectedText = 'selected text'
+    mockTerminal.hasSelection.mockReturnValue(true)
+    mockTerminal.getSelection.mockReturnValue(selectedText)
+
+    wrapper = mountBaseTerminal()
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    const button = wrapper.find('button[aria-label]')
+    await button.trigger('click')
+
+    expect(mockTerminal.selectAll).not.toHaveBeenCalled()
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(selectedText)
+    expect(mockTerminal.clearSelection).not.toHaveBeenCalled()
+  })
+
+  it('copies all text when no selection exists', async () => {
+    const allText = 'all terminal content'
+    mockTerminal.hasSelection.mockReturnValue(false)
+    mockTerminal.getSelection
+      .mockReturnValueOnce('') // First call returns empty (no selection)
+      .mockReturnValueOnce(allText) // Second call after selectAll returns all text
+
+    wrapper = mountBaseTerminal()
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    const button = wrapper.find('button[aria-label]')
+    await button.trigger('click')
+
+    expect(mockTerminal.selectAll).toHaveBeenCalled()
+    expect(navigator.clipboard.writeText).toHaveBeenCalledWith(allText)
+    expect(mockTerminal.clearSelection).toHaveBeenCalled()
+  })
+
+  it('does not copy when no text available', async () => {
+    mockTerminal.hasSelection.mockReturnValue(false)
+    mockTerminal.getSelection.mockReturnValue('')
+
+    wrapper = mountBaseTerminal()
+
+    await wrapper.trigger('mouseenter')
+    await nextTick()
+
+    const button = wrapper.find('button[aria-label]')
+    await button.trigger('click')
+
+    expect(mockTerminal.selectAll).toHaveBeenCalled()
+    expect(navigator.clipboard.writeText).not.toHaveBeenCalled()
+  })
+})