fix: correct Codecov action SHA pin (was truncated)

- Run pnpm test:coverage instead of pnpm test:unit
- Upload lcov.info to Codecov after test run
- fail_ci_if_error: false so CI won't break if upload fails
- Codecov handles PR commenting via their GitHub App

.github/workflows/ci-tests-unit.yaml

@@ -1,4 +1,4 @@
-# Description: Unit and component testing with Vitest
+# Description: Unit and component testing with Vitest + coverage reporting
 name: 'CI: Tests Unit'
 
 on:
@@ -23,5 +23,12 @@ jobs:
       - name: Setup frontend
         uses: ./.github/actions/setup-frontend
 
-      - name: Run Vitest tests
-        run: pnpm test:unit
+      - name: Run Vitest tests with coverage
+        run: pnpm test:coverage
+
+      - name: Upload coverage to Codecov
+        if: always()
+        uses: codecov/codecov-action@1af58845a975a7985b0beb0cbe6fbbb71a41dbad # v5.5.3
+        with:
+          files: coverage/lcov.info
+          fail_ci_if_error: false

browser_tests/assets/widgets/painter_widget.json

@@ -1,48 +0,0 @@
-{
-  "last_node_id": 1,
-  "last_link_id": 0,
-  "nodes": [
-    {
-      "id": 1,
-      "type": "Painter",
-      "pos": [50, 50],
-      "size": [450, 550],
-      "flags": {},
-      "order": 0,
-      "mode": 0,
-      "inputs": [
-        {
-          "name": "image",
-          "type": "IMAGE",
-          "link": null
-        }
-      ],
-      "outputs": [
-        {
-          "name": "IMAGE",
-          "type": "IMAGE",
-          "links": null
-        },
-        {
-          "name": "MASK",
-          "type": "MASK",
-          "links": null
-        }
-      ],
-      "properties": {
-        "Node name for S&R": "Painter"
-      },
-      "widgets_values": ["", 512, 512, "#000000"]
-    }
-  ],
-  "links": [],
-  "groups": [],
-  "config": {},
-  "extra": {
-    "ds": {
-      "offset": [0, 0],
-      "scale": 1
-    }
-  },
-  "version": 0.4
-}

browser_tests/fixtures/ComfyPage.ts

@@ -19,12 +19,10 @@ import { ContextMenu } from './components/ContextMenu'
 import { SettingDialog } from './components/SettingDialog'
 import { BottomPanel } from './components/BottomPanel'
 import {
-  AssetsSidebarTab,
   NodeLibrarySidebarTab,
   WorkflowsSidebarTab
 } from './components/SidebarTab'
 import { Topbar } from './components/Topbar'
-import { AssetsHelper } from './helpers/AssetsHelper'
 import { CanvasHelper } from './helpers/CanvasHelper'
 import { PerformanceHelper } from './helpers/PerformanceHelper'
 import { QueueHelper } from './helpers/QueueHelper'
@@ -57,7 +55,6 @@ class ComfyPropertiesPanel {
 }
 
 class ComfyMenu {
-  private _assetsTab: AssetsSidebarTab | null = null
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
   private _workflowsTab: WorkflowsSidebarTab | null = null
   private _topbar: Topbar | null = null
@@ -81,11 +78,6 @@ class ComfyMenu {
     return this._nodeLibraryTab
   }
 
-  get assetsTab() {
-    this._assetsTab ??= new AssetsSidebarTab(this.page)
-    return this._assetsTab
-  }
-
   get workflowsTab() {
     this._workflowsTab ??= new WorkflowsSidebarTab(this.page)
     return this._workflowsTab
@@ -200,7 +192,6 @@ export class ComfyPage {
   public readonly command: CommandHelper
   public readonly bottomPanel: BottomPanel
   public readonly perf: PerformanceHelper
-  public readonly assets: AssetsHelper
   public readonly queue: QueueHelper
 
   /** Worker index to test user ID */
@@ -247,7 +238,6 @@ export class ComfyPage {
     this.command = new CommandHelper(page)
     this.bottomPanel = new BottomPanel(page)
     this.perf = new PerformanceHelper(page)
-    this.assets = new AssetsHelper(page)
     this.queue = new QueueHelper(page)
   }
 

browser_tests/fixtures/components/SidebarTab.ts

@@ -168,32 +168,3 @@ export class WorkflowsSidebarTab extends SidebarTab {
       .click()
   }
 }
-
-export class AssetsSidebarTab extends SidebarTab {
-  constructor(public override readonly page: Page) {
-    super(page, 'assets')
-  }
-
-  get generatedTab() {
-    return this.page.getByRole('tab', { name: 'Generated' })
-  }
-
-  get importedTab() {
-    return this.page.getByRole('tab', { name: 'Imported' })
-  }
-
-  get emptyStateMessage() {
-    return this.page.getByText(
-      'Upload files or generate content to see them here'
-    )
-  }
-
-  emptyStateTitle(title: string) {
-    return this.page.getByText(title)
-  }
-
-  override async open() {
-    await super.open()
-    await this.generatedTab.waitFor({ state: 'visible' })
-  }
-}

browser_tests/fixtures/helpers/AssetsHelper.ts

@@ -1,147 +0,0 @@
-import type { Page, Route } from '@playwright/test'
-
-import type { RawJobListItem } from '../../../src/platform/remote/comfyui/jobs/jobTypes'
-
-const jobsListRoutePattern = /\/api\/jobs(?:\?.*)?$/
-const inputFilesRoutePattern = /\/internal\/files\/input(?:\?.*)?$/
-
-function parseLimit(url: URL, total: number): number {
-  const value = Number(url.searchParams.get('limit'))
-  if (!Number.isInteger(value) || value <= 0) {
-    return total
-  }
-  return value
-}
-
-function parseOffset(url: URL): number {
-  const value = Number(url.searchParams.get('offset'))
-  if (!Number.isInteger(value) || value < 0) {
-    return 0
-  }
-  return value
-}
-
-function getExecutionDuration(job: RawJobListItem): number {
-  const start = job.execution_start_time ?? 0
-  const end = job.execution_end_time ?? 0
-  return end - start
-}
-
-export class AssetsHelper {
-  private jobsRouteHandler: ((route: Route) => Promise<void>) | null = null
-  private inputFilesRouteHandler: ((route: Route) => Promise<void>) | null =
-    null
-  private generatedJobs: RawJobListItem[] = []
-  private importedFiles: string[] = []
-
-  constructor(private readonly page: Page) {}
-
-  async mockOutputHistory(jobs: RawJobListItem[]): Promise<void> {
-    this.generatedJobs = [...jobs]
-
-    if (this.jobsRouteHandler) {
-      return
-    }
-
-    this.jobsRouteHandler = async (route: Route) => {
-      const url = new URL(route.request().url())
-      const statuses = url.searchParams
-        .get('status')
-        ?.split(',')
-        .map((status) => status.trim())
-        .filter(Boolean)
-      const workflowId = url.searchParams.get('workflow_id')
-      const sortBy = url.searchParams.get('sort_by')
-      const sortOrder = url.searchParams.get('sort_order') === 'asc' ? 1 : -1
-
-      let filteredJobs = [...this.generatedJobs]
-
-      if (statuses?.length) {
-        filteredJobs = filteredJobs.filter((job) =>
-          statuses.includes(job.status)
-        )
-      }
-
-      if (workflowId) {
-        filteredJobs = filteredJobs.filter(
-          (job) => job.workflow_id === workflowId
-        )
-      }
-
-      filteredJobs.sort((left, right) => {
-        const leftValue =
-          sortBy === 'execution_duration'
-            ? getExecutionDuration(left)
-            : left.create_time
-        const rightValue =
-          sortBy === 'execution_duration'
-            ? getExecutionDuration(right)
-            : right.create_time
-
-        return (leftValue - rightValue) * sortOrder
-      })
-
-      const offset = parseOffset(url)
-      const total = filteredJobs.length
-      const limit = parseLimit(url, total)
-      const visibleJobs = filteredJobs.slice(offset, offset + limit)
-
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify({
-          jobs: visibleJobs,
-          pagination: {
-            offset,
-            limit,
-            total,
-            has_more: offset + visibleJobs.length < total
-          }
-        })
-      })
-    }
-
-    await this.page.route(jobsListRoutePattern, this.jobsRouteHandler)
-  }
-
-  async mockInputFiles(files: string[]): Promise<void> {
-    this.importedFiles = [...files]
-
-    if (this.inputFilesRouteHandler) {
-      return
-    }
-
-    this.inputFilesRouteHandler = async (route: Route) => {
-      await route.fulfill({
-        status: 200,
-        contentType: 'application/json',
-        body: JSON.stringify(this.importedFiles)
-      })
-    }
-
-    await this.page.route(inputFilesRoutePattern, this.inputFilesRouteHandler)
-  }
-
-  async mockEmptyState(): Promise<void> {
-    await this.mockOutputHistory([])
-    await this.mockInputFiles([])
-  }
-
-  async clearMocks(): Promise<void> {
-    this.generatedJobs = []
-    this.importedFiles = []
-
-    if (this.jobsRouteHandler) {
-      await this.page.unroute(jobsListRoutePattern, this.jobsRouteHandler)
-      this.jobsRouteHandler = null
-    }
-
-    if (this.inputFilesRouteHandler) {
-      await this.page.unroute(
-        inputFilesRoutePattern,
-        this.inputFilesRouteHandler
-      )
-      this.inputFilesRouteHandler = null
-    }
-  }
-}

browser_tests/fixtures/selectors.ts

@@ -20,12 +20,7 @@ export const TestIds = {
     main: 'graph-canvas',
     contextMenu: 'canvas-context-menu',
     toggleMinimapButton: 'toggle-minimap-button',
-    toggleLinkVisibilityButton: 'toggle-link-visibility-button',
-    zoomControlsButton: 'zoom-controls-button',
-    zoomInAction: 'zoom-in-action',
-    zoomOutAction: 'zoom-out-action',
-    zoomToFitAction: 'zoom-to-fit-action',
-    zoomPercentageInput: 'zoom-percentage-input'
+    toggleLinkVisibilityButton: 'toggle-link-visibility-button'
   },
   dialogs: {
     settings: 'settings-dialog',
@@ -74,9 +69,7 @@ export const TestIds = {
     decrement: 'decrement',
     increment: 'increment',
     domWidgetTextarea: 'dom-widget-textarea',
-    subgraphEnterButton: 'subgraph-enter-button',
-    formDropdownMenu: 'form-dropdown-menu',
-    formDropdownTrigger: 'form-dropdown-trigger'
+    subgraphEnterButton: 'subgraph-enter-button'
   },
   builder: {
     ioItem: 'builder-io-item',

browser_tests/tests/appModeDropdownClipping.spec.ts

@@ -4,7 +4,6 @@ import {
   comfyPageFixture as test,
   comfyExpect as expect
 } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
 
 /**
  * Default workflow widget inputs as [nodeId, widgetName] tuples.
@@ -144,12 +143,15 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
     const dropdownButton = imageRow.locator('button:has(> span)').first()
     await dropdownButton.click()
 
-    const menu = comfyPage.page
-      .getByTestId(TestIds.widgets.formDropdownMenu)
+    // The unstyled PrimeVue Popover renders with role="dialog".
+    // Locate the one containing the image grid (filter buttons like "All", "Inputs").
+    const popover = comfyPage.page
+      .getByRole('dialog')
+      .filter({ has: comfyPage.page.getByRole('button', { name: 'All' }) })
       .first()
-    await expect(menu).toBeVisible({ timeout: 5000 })
+    await expect(popover).toBeVisible({ timeout: 5000 })
 
-    const isInViewport = await menu.evaluate((el) => {
+    const isInViewport = await popover.evaluate((el) => {
       const rect = el.getBoundingClientRect()
       return (
         rect.top >= 0 &&
@@ -160,7 +162,7 @@ test.describe('App mode dropdown clipping', { tag: '@ui' }, () => {
     })
     expect(isInViewport).toBe(true)
 
-    const isClipped = await menu.evaluate(isClippedByAnyAncestor)
+    const isClipped = await popover.evaluate(isClippedByAnyAncestor)
     expect(isClipped).toBe(false)
   })
 })

browser_tests/tests/painter.spec.ts

@@ -1,92 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-
-test.describe('Painter', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-    await comfyPage.workflow.loadWorkflow('widgets/painter_widget')
-    await comfyPage.vueNodes.waitForNodes()
-  })
-
-  test(
-    'Renders canvas and controls',
-    { tag: ['@smoke', '@screenshot'] },
-    async ({ comfyPage }) => {
-      const node = comfyPage.vueNodes.getNodeLocator('1')
-      await expect(node).toBeVisible()
-
-      const painterWidget = node.locator('.widget-expands')
-      await expect(painterWidget).toBeVisible()
-
-      await expect(painterWidget.locator('canvas')).toBeVisible()
-      await expect(painterWidget.getByText('Brush')).toBeVisible()
-      await expect(painterWidget.getByText('Eraser')).toBeVisible()
-      await expect(painterWidget.getByText('Clear')).toBeVisible()
-      await expect(
-        painterWidget.locator('input[type="color"]').first()
-      ).toBeVisible()
-
-      await expect(node).toHaveScreenshot('painter-default-state.png')
-    }
-  )
-
-  test(
-    'Drawing a stroke changes the canvas',
-    { tag: ['@smoke', '@screenshot'] },
-    async ({ comfyPage }) => {
-      const node = comfyPage.vueNodes.getNodeLocator('1')
-      const canvas = node.locator('.widget-expands canvas')
-      await expect(canvas).toBeVisible()
-
-      const isEmptyBefore = await canvas.evaluate((el) => {
-        const ctx = (el as HTMLCanvasElement).getContext('2d')
-        if (!ctx) return true
-        const data = ctx.getImageData(
-          0,
-          0,
-          (el as HTMLCanvasElement).width,
-          (el as HTMLCanvasElement).height
-        )
-        return data.data.every((v, i) => (i % 4 === 3 ? v === 0 : true))
-      })
-      expect(isEmptyBefore).toBe(true)
-
-      const box = await canvas.boundingBox()
-      if (!box) throw new Error('Canvas bounding box not found')
-
-      await comfyPage.page.mouse.move(
-        box.x + box.width * 0.3,
-        box.y + box.height * 0.5
-      )
-      await comfyPage.page.mouse.down()
-      await comfyPage.page.mouse.move(
-        box.x + box.width * 0.7,
-        box.y + box.height * 0.5,
-        { steps: 10 }
-      )
-      await comfyPage.page.mouse.up()
-      await comfyPage.nextFrame()
-
-      await expect(async () => {
-        const hasContent = await canvas.evaluate((el) => {
-          const ctx = (el as HTMLCanvasElement).getContext('2d')
-          if (!ctx) return false
-          const data = ctx.getImageData(
-            0,
-            0,
-            (el as HTMLCanvasElement).width,
-            (el as HTMLCanvasElement).height
-          )
-          for (let i = 3; i < data.data.length; i += 4) {
-            if (data.data[i] > 0) return true
-          }
-          return false
-        })
-        expect(hasContent).toBe(true)
-      }).toPass()
-
-      await expect(node).toHaveScreenshot('painter-after-stroke.png')
-    }
-  )
-})

browser_tests/tests/sidebar/assets.spec.ts

@@ -1,30 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
-
-test.describe('Assets sidebar', () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.assets.mockEmptyState()
-    await comfyPage.setup()
-  })
-
-  test.afterEach(async ({ comfyPage }) => {
-    await comfyPage.assets.clearMocks()
-  })
-
-  test('Shows empty-state copy for generated and imported tabs', async ({
-    comfyPage
-  }) => {
-    const tab = comfyPage.menu.assetsTab
-
-    await tab.open()
-
-    await expect(tab.emptyStateTitle('No generated files found')).toBeVisible()
-    await expect(tab.emptyStateMessage).toBeVisible()
-
-    await tab.importedTab.click()
-
-    await expect(tab.emptyStateTitle('No imported files found')).toBeVisible()
-    await expect(tab.emptyStateMessage).toBeVisible()
-  })
-})

browser_tests/tests/vueNodes/widgets/load/formDropdownPosition.spec.ts

@@ -1,116 +0,0 @@
-import {
-  comfyExpect as expect,
-  comfyPageFixture as test
-} from '../../../../fixtures/ComfyPage'
-import { TestIds } from '../../../../fixtures/selectors'
-
-test.describe(
-  'FormDropdown positioning in Vue nodes',
-  { tag: ['@widget', '@node'] },
-  () => {
-    test.beforeEach(async ({ comfyPage }) => {
-      await comfyPage.settings.setSetting('Comfy.VueNodes.Enabled', true)
-      await comfyPage.workflow.loadWorkflow('widgets/load_image_widget')
-      await comfyPage.vueNodes.waitForNodes()
-    })
-
-    test('dropdown menu appears directly below the trigger', async ({
-      comfyPage
-    }) => {
-      const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
-      await expect(node).toBeVisible()
-
-      const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
-      await trigger.first().click()
-
-      const menu = comfyPage.page.getByTestId(TestIds.widgets.formDropdownMenu)
-      await expect(menu).toBeVisible({ timeout: 5000 })
-
-      const triggerBox = await trigger.first().boundingBox()
-      const menuBox = await menu.boundingBox()
-
-      expect(triggerBox).toBeTruthy()
-      expect(menuBox).toBeTruthy()
-
-      // Menu top should be near the trigger bottom (within 20px tolerance for padding)
-      expect(menuBox!.y).toBeGreaterThanOrEqual(
-        triggerBox!.y + triggerBox!.height - 5
-      )
-      expect(menuBox!.y).toBeLessThanOrEqual(
-        triggerBox!.y + triggerBox!.height + 20
-      )
-
-      // Menu left should be near the trigger left (within 10px tolerance)
-      expect(menuBox!.x).toBeGreaterThanOrEqual(triggerBox!.x - 10)
-      expect(menuBox!.x).toBeLessThanOrEqual(triggerBox!.x + 10)
-    })
-
-    test('dropdown menu appears correctly at different zoom levels', async ({
-      comfyPage
-    }) => {
-      for (const zoom of [0.75, 1.5]) {
-        // Set zoom via canvas
-        await comfyPage.page.evaluate((scale) => {
-          const canvas = window.app!.canvas
-          canvas.ds.scale = scale
-          canvas.setDirty(true, true)
-        }, zoom)
-        await comfyPage.nextFrame()
-
-        const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
-        await expect(node).toBeVisible()
-
-        const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
-        await trigger.first().click()
-
-        const menu = comfyPage.page.getByTestId(
-          TestIds.widgets.formDropdownMenu
-        )
-        await expect(menu).toBeVisible({ timeout: 5000 })
-
-        const triggerBox = await trigger.first().boundingBox()
-        const menuBox = await menu.boundingBox()
-
-        expect(triggerBox).toBeTruthy()
-        expect(menuBox).toBeTruthy()
-
-        // Menu top should still be near trigger bottom regardless of zoom
-        expect(menuBox!.y).toBeGreaterThanOrEqual(
-          triggerBox!.y + triggerBox!.height - 5
-        )
-        expect(menuBox!.y).toBeLessThanOrEqual(
-          triggerBox!.y + triggerBox!.height + 20 * zoom
-        )
-
-        // Close dropdown before next iteration
-        await comfyPage.page.keyboard.press('Escape')
-        await expect(menu).not.toBeVisible()
-      }
-    })
-
-    test('dropdown closes on outside click', async ({ comfyPage }) => {
-      const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
-      const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
-      await trigger.first().click()
-
-      const menu = comfyPage.page.getByTestId(TestIds.widgets.formDropdownMenu)
-      await expect(menu).toBeVisible({ timeout: 5000 })
-
-      // Click outside the node
-      await comfyPage.page.mouse.click(10, 10)
-      await expect(menu).not.toBeVisible()
-    })
-
-    test('dropdown closes on Escape key', async ({ comfyPage }) => {
-      const node = comfyPage.vueNodes.getNodeByTitle('Load Image')
-      const trigger = node.getByTestId(TestIds.widgets.formDropdownTrigger)
-      await trigger.first().click()
-
-      const menu = comfyPage.page.getByTestId(TestIds.widgets.formDropdownMenu)
-      await expect(menu).toBeVisible({ timeout: 5000 })
-
-      await comfyPage.page.keyboard.press('Escape')
-      await expect(menu).not.toBeVisible()
-    })
-  }
-)

browser_tests/tests/zoomControls.spec.ts

@@ -1,138 +0,0 @@
-import { expect } from '@playwright/test'
-
-import { comfyPageFixture as test } from '../fixtures/ComfyPage'
-import { TestIds } from '../fixtures/selectors'
-
-test.describe('Zoom Controls', { tag: '@canvas' }, () => {
-  test.beforeEach(async ({ comfyPage }) => {
-    await comfyPage.settings.setSetting('Comfy.Graph.CanvasMenu', true)
-    await comfyPage.workflow.loadWorkflow('default')
-    await comfyPage.page.waitForFunction(() => window.app && window.app.canvas)
-  })
-
-  test('Default zoom is 100% and node has a size', async ({ comfyPage }) => {
-    const nodeSize = await comfyPage.page.evaluate(
-      () => window.app!.graph.nodes[0].size
-    )
-    expect(nodeSize[0]).toBeGreaterThan(0)
-    expect(nodeSize[1]).toBeGreaterThan(0)
-
-    const zoomButton = comfyPage.page.getByTestId(
-      TestIds.canvas.zoomControlsButton
-    )
-    await expect(zoomButton).toContainText('100%')
-
-    const scale = await comfyPage.canvasOps.getScale()
-    expect(scale).toBeCloseTo(1.0, 1)
-  })
-
-  test('Zoom to fit reduces percentage', async ({ comfyPage }) => {
-    const zoomButton = comfyPage.page.getByTestId(
-      TestIds.canvas.zoomControlsButton
-    )
-    await zoomButton.click()
-    await comfyPage.nextFrame()
-
-    const zoomToFit = comfyPage.page.getByTestId(TestIds.canvas.zoomToFitAction)
-    await expect(zoomToFit).toBeVisible()
-    await zoomToFit.click()
-
-    await expect
-      .poll(() => comfyPage.canvasOps.getScale(), { timeout: 2000 })
-      .toBeLessThan(1.0)
-
-    await expect(zoomButton).not.toContainText('100%')
-  })
-
-  test('Zoom out reduces percentage', async ({ comfyPage }) => {
-    const initialScale = await comfyPage.canvasOps.getScale()
-
-    const zoomButton = comfyPage.page.getByTestId(
-      TestIds.canvas.zoomControlsButton
-    )
-    await zoomButton.click()
-    await comfyPage.nextFrame()
-
-    const zoomOut = comfyPage.page.getByTestId(TestIds.canvas.zoomOutAction)
-    await zoomOut.click()
-    await comfyPage.nextFrame()
-
-    const newScale = await comfyPage.canvasOps.getScale()
-    expect(newScale).toBeLessThan(initialScale)
-  })
-
-  test('Zoom out clamps at 10% minimum', async ({ comfyPage }) => {
-    const zoomButton = comfyPage.page.getByTestId(
-      TestIds.canvas.zoomControlsButton
-    )
-    await zoomButton.click()
-    await comfyPage.nextFrame()
-
-    const zoomOut = comfyPage.page.getByTestId(TestIds.canvas.zoomOutAction)
-    for (let i = 0; i < 30; i++) {
-      await zoomOut.click()
-    }
-    await comfyPage.nextFrame()
-
-    await expect
-      .poll(() => comfyPage.canvasOps.getScale(), { timeout: 2000 })
-      .toBeCloseTo(0.1, 1)
-
-    await expect(zoomButton).toContainText('10%')
-  })
-
-  test('Manual percentage entry allows zoom in and zoom out', async ({
-    comfyPage
-  }) => {
-    const zoomButton = comfyPage.page.getByTestId(
-      TestIds.canvas.zoomControlsButton
-    )
-    await zoomButton.click()
-    await comfyPage.nextFrame()
-
-    const input = comfyPage.page
-      .getByTestId(TestIds.canvas.zoomPercentageInput)
-      .locator('input')
-    await input.focus()
-    await comfyPage.page.keyboard.press('Control+a')
-    await input.pressSequentially('100')
-    await input.press('Enter')
-    await comfyPage.nextFrame()
-
-    await expect
-      .poll(() => comfyPage.canvasOps.getScale(), { timeout: 2000 })
-      .toBeCloseTo(1.0, 1)
-
-    const zoomIn = comfyPage.page.getByTestId(TestIds.canvas.zoomInAction)
-    await zoomIn.click()
-    await comfyPage.nextFrame()
-
-    const scaleAfterZoomIn = await comfyPage.canvasOps.getScale()
-    expect(scaleAfterZoomIn).toBeGreaterThan(1.0)
-
-    const zoomOut = comfyPage.page.getByTestId(TestIds.canvas.zoomOutAction)
-    await zoomOut.click()
-    await comfyPage.nextFrame()
-
-    const scaleAfterZoomOut = await comfyPage.canvasOps.getScale()
-    expect(scaleAfterZoomOut).toBeLessThan(scaleAfterZoomIn)
-  })
-
-  test('Clicking zoom button toggles zoom controls visibility', async ({
-    comfyPage
-  }) => {
-    const zoomButton = comfyPage.page.getByTestId(
-      TestIds.canvas.zoomControlsButton
-    )
-    await zoomButton.click()
-    await comfyPage.nextFrame()
-
-    const zoomToFit = comfyPage.page.getByTestId(TestIds.canvas.zoomToFitAction)
-    await expect(zoomToFit).toBeVisible()
-
-    await zoomButton.click()
-    await comfyPage.nextFrame()
-
-    await expect(zoomToFit).not.toBeVisible()
-  })
-})

package.json

@@ -45,6 +45,7 @@
     "stylelint": "stylelint --cache '{apps,packages,src}/**/*.{css,vue}'",
     "test:browser": "pnpm exec nx e2e",
     "test:browser:local": "cross-env PLAYWRIGHT_LOCAL=1 PLAYWRIGHT_TEST_URL=http://localhost:5173 pnpm test:browser",
+    "test:coverage": "vitest run --coverage",
     "test:unit": "nx run test",
     "typecheck": "vue-tsc --noEmit",
     "typecheck:browser": "vue-tsc --project browser_tests/tsconfig.json",

src/components/graph/modals/ZoomControlsModal.vue

@@ -11,7 +11,6 @@
       <div class="flex flex-col gap-1">
         <div
           class="flex cursor-pointer items-center justify-between rounded-sm px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
-          data-testid="zoom-in-action"
           @mousedown="startRepeat('Comfy.Canvas.ZoomIn')"
           @mouseup="stopRepeat"
           @mouseleave="stopRepeat"
@@ -24,7 +23,6 @@
 
         <div
           class="flex cursor-pointer items-center justify-between rounded-sm px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
-          data-testid="zoom-out-action"
           @mousedown="startRepeat('Comfy.Canvas.ZoomOut')"
           @mouseup="stopRepeat"
           @mouseleave="stopRepeat"
@@ -37,7 +35,6 @@
 
         <div
           class="flex cursor-pointer items-center justify-between rounded-sm px-3 py-2 text-sm hover:bg-node-component-surface-hovered"
-          data-testid="zoom-to-fit-action"
           @click="executeCommand('Comfy.Canvas.FitView')"
         >
           <span class="font-medium">{{ $t('zoomControls.zoomToFit') }}</span>
@@ -49,7 +46,6 @@
         <div
           ref="zoomInputContainer"
           class="zoomInputContainer flex items-center gap-1 rounded-sm bg-input-surface p-2"
-          data-testid="zoom-percentage-input"
         >
           <InputNumber
             :default-value="canvasStore.appScalePercentage"

src/platform/assets/components/MediaAssetCard.vue

@@ -141,7 +141,6 @@ import { computed, defineAsyncComponent, provide, ref, toRef } from 'vue'
 import IconGroup from '@/components/button/IconGroup.vue'
 import LoadingOverlay from '@/components/common/LoadingOverlay.vue'
 import Button from '@/components/ui/button/Button.vue'
-import { isCloud } from '@/platform/distribution/types'
 import { useAssetsStore } from '@/stores/assetsStore'
 import {
   formatDuration,
@@ -280,8 +279,7 @@ const formattedDuration = computed(() => {
 // Get metadata info based on file kind
 const metaInfo = computed(() => {
   if (!asset) return ''
-  // TODO(assets): Re-enable once /assets API returns original image dimensions in metadata (#10590)
-  if (fileKind.value === 'image' && imageDimensions.value && !isCloud) {
+  if (fileKind.value === 'image' && imageDimensions.value) {
     return `${imageDimensions.value.width}x${imageDimensions.value.height}`
   }
   if (asset.size && ['video', 'audio', '3D'].includes(fileKind.value)) {

src/platform/workspace/components/dialogs/TeamWorkspacesDialogContent.test.ts

@@ -300,25 +300,6 @@ describe('TeamWorkspacesDialogContent', () => {
 
       expect(mockCreateWorkspace).not.toHaveBeenCalled()
     })
-
-    it('resets loading state after createWorkspace fails', async () => {
-      mockCreateWorkspace.mockRejectedValue(new Error('Limit reached'))
-      const wrapper = mountComponent()
-
-      await typeAndCreate(wrapper, 'New Team')
-
-      expect(findCreateButton(wrapper).props('loading')).toBe(false)
-    })
-
-    it('resets loading state after onConfirm fails', async () => {
-      mockCreateWorkspace.mockResolvedValue({ id: 'new-ws' })
-      const onConfirm = vi.fn().mockRejectedValue(new Error('Setup failed'))
-      const wrapper = mountComponent({ onConfirm })
-
-      await typeAndCreate(wrapper, 'New Team')
-
-      expect(findCreateButton(wrapper).props('loading')).toBe(false)
-    })
   })
 
   describe('close button', () => {

src/platform/workspace/components/dialogs/TeamWorkspacesDialogContent.vue

@@ -201,30 +201,28 @@ async function handleSwitch(workspaceId: string) {
 async function onCreate() {
   if (!isValidName.value || loading.value) return
   loading.value = true
+  const name = workspaceName.value.trim()
   try {
-    const name = workspaceName.value.trim()
-    try {
-      await workspaceStore.createWorkspace(name)
-    } catch (error) {
-      toast.add({
-        severity: 'error',
-        summary: t('workspacePanel.toast.failedToCreateWorkspace'),
-        detail: error instanceof Error ? error.message : t('g.unknownError')
-      })
-      return
-    }
-    try {
-      await onConfirm?.(name)
-    } catch (error) {
-      toast.add({
-        severity: 'error',
-        summary: t('teamWorkspacesDialog.confirmCallbackFailed'),
-        detail: error instanceof Error ? error.message : t('g.unknownError')
-      })
-    }
-    dialogStore.closeDialog({ key: DIALOG_KEY })
-  } finally {
+    await workspaceStore.createWorkspace(name)
+  } catch (error) {
+    toast.add({
+      severity: 'error',
+      summary: t('workspacePanel.toast.failedToCreateWorkspace'),
+      detail: error instanceof Error ? error.message : t('g.unknownError')
+    })
     loading.value = false
+    return
   }
+  try {
+    await onConfirm?.(name)
+  } catch (error) {
+    toast.add({
+      severity: 'error',
+      summary: t('teamWorkspacesDialog.confirmCallbackFailed'),
+      detail: error instanceof Error ? error.message : t('g.unknownError')
+    })
+  }
+  dialogStore.closeDialog({ key: DIALOG_KEY })
+  loading.value = false
 }
 </script>

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.test.ts

@@ -41,6 +41,11 @@ const MockFormDropdownInput = {
     '<button class="mock-dropdown-trigger" @click="$emit(\'select-click\', $event)">Open</button>'
 }
 
+const MockPopover = {
+  name: 'Popover',
+  template: '<div><slot /></div>'
+}
+
 interface MountDropdownOptions {
   searcher?: (
     query: string,
@@ -60,17 +65,13 @@ function mountDropdown(
       plugins: [PrimeVue, i18n],
       stubs: {
         FormDropdownInput: MockFormDropdownInput,
+        Popover: MockPopover,
         FormDropdownMenu: MockFormDropdownMenu
       }
     }
   })
 }
 
-async function openDropdown(wrapper: ReturnType<typeof mountDropdown>) {
-  await wrapper.find('.mock-dropdown-trigger').trigger('click')
-  await flushPromises()
-}
-
 function getMenuItems(
   wrapper: ReturnType<typeof mountDropdown>
 ): FormDropdownItem[] {
@@ -86,7 +87,7 @@ describe('FormDropdown', () => {
         createItem('input-0', 'video1.mp4'),
         createItem('input-1', 'video2.mp4')
       ])
-      await openDropdown(wrapper)
+      await flushPromises()
 
       expect(getMenuItems(wrapper)).toHaveLength(2)
 
@@ -105,7 +106,7 @@ describe('FormDropdown', () => {
 
     it('updates when items change but IDs stay the same', async () => {
       const wrapper = mountDropdown([createItem('1', 'alpha')])
-      await openDropdown(wrapper)
+      await flushPromises()
 
       await wrapper.setProps({ items: [createItem('1', 'beta')] })
       await flushPromises()
@@ -115,7 +116,7 @@ describe('FormDropdown', () => {
 
     it('updates when switching between empty and non-empty items', async () => {
       const wrapper = mountDropdown([])
-      await openDropdown(wrapper)
+      await flushPromises()
 
       expect(getMenuItems(wrapper)).toHaveLength(0)
 
@@ -153,10 +154,7 @@ describe('FormDropdown', () => {
     await flushPromises()
 
     expect(searcher).not.toHaveBeenCalled()
-
-    await openDropdown(wrapper)
-
-    expect(searcher).toHaveBeenCalled()
+    expect(getMenuItems(wrapper).map((item) => item.id)).toEqual(['3', '4'])
   })
 
   it('runs filtering when dropdown opens', async () => {
@@ -171,7 +169,8 @@ describe('FormDropdown', () => {
     )
     await flushPromises()
 
-    await openDropdown(wrapper)
+    await wrapper.find('.mock-dropdown-trigger').trigger('click')
+    await flushPromises()
 
     expect(searcher).toHaveBeenCalled()
     expect(getMenuItems(wrapper).map((item) => item.id)).toEqual(['keep'])

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdown.vue

@@ -1,12 +1,11 @@
 <script setup lang="ts">
-import { computedAsync, onClickOutside, refDebounced } from '@vueuse/core'
-import type { CSSProperties } from 'vue'
-import { computed, inject, ref, useTemplateRef } from 'vue'
+import { computedAsync, refDebounced } from '@vueuse/core'
+import Popover from 'primevue/popover'
+import { computed, ref, useTemplateRef } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import { OverlayAppendToKey } from '@/composables/useTransformCompatOverlayProps'
+import { useTransformCompatOverlayProps } from '@/composables/useTransformCompatOverlayProps'
 import { useToastStore } from '@/platform/updates/common/toastStore'
-import { cn } from '@/utils/tailwindUtil'
 
 import type {
   FilterOption,
@@ -17,7 +16,6 @@ import type {
 import FormDropdownInput from './FormDropdownInput.vue'
 import FormDropdownMenu from './FormDropdownMenu.vue'
 import { defaultSearcher, getDefaultSortOptions } from './shared'
-import { MENU_HEIGHT, MENU_WIDTH } from './types'
 import type { FormDropdownItem, LayoutMode, SortOption } from './types'
 
 interface Props {
@@ -53,6 +51,7 @@ interface Props {
 }
 
 const { t } = useI18n()
+const overlayProps = useTransformCompatOverlayProps()
 
 const {
   placeholder,
@@ -96,10 +95,8 @@ const baseModelSelected = defineModel<Set<string>>('baseModelSelected', {
 const isOpen = defineModel<boolean>('isOpen', { default: false })
 
 const toastStore = useToastStore()
+const popoverRef = ref<InstanceType<typeof Popover>>()
 const triggerRef = useTemplateRef('triggerRef')
-const dropdownRef = useTemplateRef('dropdownRef')
-
-const shouldTeleport = inject(OverlayAppendToKey, undefined) === 'body'
 
 const maxSelectable = computed(() => {
   if (multiple === true) return Infinity
@@ -145,59 +142,18 @@ function internalIsSelected(item: FormDropdownItem, index: number): boolean {
   return isSelected(selected.value, item, index)
 }
 
-const MENU_HEIGHT_WITH_GAP = MENU_HEIGHT + 8
-const openUpward = ref(false)
-const fixedPosition = ref({ top: 0, left: 0 })
-
-const teleportStyle = computed<CSSProperties | undefined>(() => {
-  if (!shouldTeleport) return undefined
-  const pos = fixedPosition.value
-  return openUpward.value
-    ? {
-        position: 'fixed',
-        left: `${pos.left}px`,
-        bottom: `${window.innerHeight - pos.top}px`,
-        paddingBottom: '0.5rem'
-      }
-    : {
-        position: 'fixed',
-        left: `${pos.left}px`,
-        top: `${pos.top}px`,
-        paddingTop: '0.5rem'
-      }
-})
-
-function toggleDropdown() {
+const toggleDropdown = (event: Event) => {
   if (disabled) return
-  if (!isOpen.value && triggerRef.value) {
-    const rect = triggerRef.value.getBoundingClientRect()
-
-    const spaceBelow = window.innerHeight - rect.bottom
-    const spaceAbove = rect.top
-    openUpward.value =
-      spaceBelow < MENU_HEIGHT_WITH_GAP && spaceAbove > spaceBelow
-
-    if (shouldTeleport) {
-      fixedPosition.value = {
-        top: openUpward.value
-          ? Math.max(MENU_HEIGHT_WITH_GAP, rect.top)
-          : Math.min(rect.bottom, window.innerHeight - MENU_HEIGHT_WITH_GAP),
-        left: Math.min(rect.right, window.innerWidth - MENU_WIDTH)
-      }
-    }
+  if (popoverRef.value && triggerRef.value) {
+    popoverRef.value.toggle?.(event, triggerRef.value)
+    isOpen.value = !isOpen.value
   }
-  isOpen.value = !isOpen.value
 }
 
-function closeDropdown() {
-  isOpen.value = false
-}
-
-onClickOutside(triggerRef, closeDropdown, { ignore: [dropdownRef] })
-
-function handleEscape(event: KeyboardEvent) {
-  if (event.key === 'Escape') {
-    closeDropdown()
+const closeDropdown = () => {
+  if (popoverRef.value) {
+    popoverRef.value.hide?.()
+    isOpen.value = false
   }
 }
 
@@ -236,7 +192,7 @@ function handleSelection(item: FormDropdownItem, index: number) {
 </script>
 
 <template>
-  <div ref="triggerRef" class="relative" @keydown="handleEscape">
+  <div ref="triggerRef">
     <FormDropdownInput
       :files
       :is-open
@@ -251,41 +207,42 @@ function handleSelection(item: FormDropdownItem, index: number) {
       @select-click="toggleDropdown"
       @file-change="handleFileChange"
     />
-    <Teleport to="body" :disabled="!shouldTeleport">
-      <div
-        v-if="isOpen"
-        ref="dropdownRef"
-        :class="
-          cn(
-            'z-50 rounded-lg border-none bg-transparent p-0 shadow-lg',
-            !shouldTeleport && 'absolute left-0',
-            !shouldTeleport &&
-              (openUpward ? 'bottom-full pb-2' : 'top-full pt-2')
-          )
-        "
-        :style="teleportStyle"
-      >
-        <FormDropdownMenu
-          v-model:filter-selected="filterSelected"
-          v-model:layout-mode="layoutMode"
-          v-model:sort-selected="sortSelected"
-          v-model:search-query="searchQuery"
-          v-model:ownership-selected="ownershipSelected"
-          v-model:base-model-selected="baseModelSelected"
-          :filter-options
-          :sort-options
-          :show-ownership-filter
-          :ownership-options
-          :show-base-model-filter
-          :base-model-options
-          :disabled
-          :items="sortedItems"
-          :is-selected="internalIsSelected"
-          :max-selectable
-          @close="closeDropdown"
-          @item-click="handleSelection"
-        />
-      </div>
-    </Teleport>
+    <Popover
+      ref="popoverRef"
+      :dismissable="true"
+      :close-on-escape="true"
+      :append-to="overlayProps.appendTo"
+      unstyled
+      :pt="{
+        root: {
+          class: 'absolute z-50'
+        },
+        content: {
+          class: ['bg-transparent border-none p-0 pt-2 rounded-lg shadow-lg']
+        }
+      }"
+      @hide="isOpen = false"
+    >
+      <FormDropdownMenu
+        v-model:filter-selected="filterSelected"
+        v-model:layout-mode="layoutMode"
+        v-model:sort-selected="sortSelected"
+        v-model:search-query="searchQuery"
+        v-model:ownership-selected="ownershipSelected"
+        v-model:base-model-selected="baseModelSelected"
+        :filter-options
+        :sort-options
+        :show-ownership-filter
+        :ownership-options
+        :show-base-model-filter
+        :base-model-options
+        :disabled
+        :items="sortedItems"
+        :is-selected="internalIsSelected"
+        :max-selectable
+        @close="closeDropdown"
+        @item-click="handleSelection"
+      />
+    </Popover>
   </div>
 </template>

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownInput.vue

@@ -61,7 +61,6 @@ const theButtonStyle = computed(() =>
     "
   >
     <button
-      data-testid="form-dropdown-trigger"
       :class="
         cn(
           theButtonStyle,

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue

@@ -97,7 +97,6 @@ const virtualItems = computed<VirtualDropdownItem[]>(() =>
 
 <template>
   <div
-    data-testid="form-dropdown-menu"
     class="flex h-[640px] w-103 flex-col rounded-lg bg-component-node-background pt-4 outline -outline-offset-1 outline-node-component-border"
   >
     <FormDropdownMenuFilter

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/types.ts

@@ -28,10 +28,5 @@ export interface SortOption<TId extends string = string> {
 
 export type LayoutMode = 'list' | 'grid' | 'list-small'
 
-/** Height of FormDropdownMenu in pixels (matches h-[640px] in template). */
-export const MENU_HEIGHT = 640
-/** Width of FormDropdownMenu in pixels (matches w-103 = 26rem = 416px in template). */
-export const MENU_WIDTH = 412
-
 export const AssetKindKey: InjectionKey<ComputedRef<AssetKind | undefined>> =
   Symbol('assetKind')

vite.config.mts

@@ -653,7 +653,18 @@ export default defineConfig({
       'scripts/**/*.{test,spec}.{js,mjs,cjs,ts,mts,cts,jsx,tsx}'
     ],
     coverage: {
-      reporter: ['text', 'json', 'html']
+      provider: 'v8',
+      reporter: ['text', 'json', 'html', 'lcov'],
+      include: ['src/**/*.{ts,vue}'],
+      exclude: [
+        'src/**/*.test.ts',
+        'src/**/*.spec.ts',
+        'src/**/*.stories.ts',
+        'src/**/*.d.ts',
+        'src/locales/**',
+        'src/lib/litegraph/**',
+        'src/assets/**'
+      ]
     },
     exclude: [
       '**/node_modules/**',