test: migrate 11 interactive component tests from VTU to VTL (Phase 2) (#10490)

## 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>

src/components/common/TreeExplorerTreeNode.test.ts

@@ -1,5 +1,5 @@
 import { createTestingPinia } from '@pinia/testing'
-import { mount } from '@vue/test-utils'
+import { fireEvent, render, screen } from '@testing-library/vue'
 import Badge from 'primevue/badge'
 import PrimeVue from 'primevue/config'
 import InputText from 'primevue/inputtext'
@@ -12,7 +12,6 @@ import TreeExplorerTreeNode from '@/components/common/TreeExplorerTreeNode.vue'
 import type { RenderedTreeExplorerNode } from '@/types/treeExplorerTypes'
 import { InjectKeyHandleEditLabelFunction } from '@/types/treeExplorerTypes'
 
-// Create a mock i18n instance
 const i18n = createI18n({
   legacy: false,
   locale: 'en',
@@ -33,7 +32,6 @@ describe('TreeExplorerTreeNode', () => {
   const mockHandleEditLabel = vi.fn()
 
   beforeAll(() => {
-    // Create a Vue app instance for PrimeVuePrimeVue
     const app = createApp({})
     app.use(PrimeVue)
     vi.useFakeTimers()
@@ -44,7 +42,7 @@ describe('TreeExplorerTreeNode', () => {
   })
 
   it('renders correctly', () => {
-    const wrapper = mount(TreeExplorerTreeNode, {
+    render(TreeExplorerTreeNode, {
       props: { node: mockNode },
       global: {
         components: { EditableText, Badge },
@@ -55,18 +53,16 @@ describe('TreeExplorerTreeNode', () => {
       }
     })
 
-    expect(wrapper.find('.tree-node').exists()).toBe(true)
-    expect(wrapper.find('.tree-folder').exists()).toBe(true)
-    expect(wrapper.find('.tree-leaf').exists()).toBe(false)
-    expect(wrapper.findComponent(EditableText).props('modelValue')).toBe(
-      'Test Node'
-    )
-    // @ts-expect-error fixme ts strict error
-    expect(wrapper.findComponent(Badge).props()['value'].toString()).toBe('3')
+    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 renamingEditingNode matches', async () => {
-    const wrapper = mount(TreeExplorerTreeNode, {
+  it('makes node label editable when isEditingLabel is true', () => {
+    render(TreeExplorerTreeNode, {
       props: {
         node: {
           ...mockNode,
@@ -82,14 +78,13 @@ describe('TreeExplorerTreeNode', () => {
       }
     })
 
-    const editableText = wrapper.findComponent(EditableText)
-    expect(editableText.props('isEditing')).toBe(true)
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
   })
 
   it('triggers handleEditLabel callback when editing is finished', async () => {
     const handleEditLabelMock = vi.fn()
 
-    const wrapper = mount(TreeExplorerTreeNode, {
+    render(TreeExplorerTreeNode, {
       props: {
         node: {
           ...mockNode,
@@ -103,8 +98,9 @@ describe('TreeExplorerTreeNode', () => {
       }
     })
 
-    const editableText = wrapper.findComponent(EditableText)
-    editableText.vm.$emit('edit', 'New Node Name')
+    // Trigger blur on the input to finish editing (fires the 'edit' event)
+    await fireEvent.blur(screen.getByRole('textbox'))
+
     expect(handleEditLabelMock).toHaveBeenCalledOnce()
   })
 })