test: address assets actions review feedback

browser_tests/fixtures/assetScenarioFixture.ts

@@ -0,0 +1,14 @@
+import { jobsApiMockFixture } from '@e2e/fixtures/jobsApiMockFixture'
+import { AssetScenarioHelper } from '@e2e/fixtures/helpers/AssetScenarioHelper'
+
+export const assetScenarioFixture = jobsApiMockFixture.extend<{
+  assetScenario: AssetScenarioHelper
+}>({
+  assetScenario: async ({ page, jobsApi }, use) => {
+    const assetScenario = new AssetScenarioHelper(page, jobsApi)
+
+    await use(assetScenario)
+
+    await assetScenario.clear()
+  }
+})

browser_tests/fixtures/components/SidebarTab.ts

@@ -4,6 +4,10 @@ import { expect } from '@playwright/test'
 import type { WorkspaceStore } from '@e2e/types/globals'
 import { TestIds } from '@e2e/fixtures/selectors'
 
+function escapeRegExp(value: string): string {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
+}
+
 class SidebarTab {
   public readonly tabButton: Locator
   public readonly selectedTabButton: Locator
@@ -271,86 +275,76 @@ function getMediaFilterLabel(
 }
 
 export class AssetsSidebarTab extends SidebarTab {
-  // --- Tab navigation ---
+  public readonly root: Locator
   public readonly generatedTab: Locator
   public readonly importedTab: Locator
-
-  // --- Empty state ---
   public readonly emptyStateMessage: Locator
-
-  // --- Search & filter ---
   public readonly searchInput: Locator
   public readonly settingsButton: Locator
   public readonly filterButton: Locator
-
-  // --- Filter menu checkboxes (cloud-only, shown inside filter popover) ---
   public readonly filterImageCheckbox: Locator
   public readonly filterVideoCheckbox: Locator
   public readonly filterAudioCheckbox: Locator
   public readonly filter3DCheckbox: Locator
-
-  // --- View mode ---
   public readonly listViewOption: Locator
   public readonly gridViewOption: Locator
-
-  // --- Sort options (cloud-only, shown inside settings popover) ---
+  public readonly backToAssetsButton: Locator
+  public readonly copyJobIdButton: Locator
+  public readonly previewDialog: Locator
   public readonly sortNewestFirst: Locator
   public readonly sortOldestFirst: Locator
   public readonly sortLongestFirst: Locator
   public readonly sortFastestFirst: Locator
-
-  // --- Asset cards ---
   public readonly assetCards: Locator
   public readonly selectedCards: Locator
-
-  // --- List view items ---
   public readonly listViewItems: Locator
-
-  // --- Selection footer ---
   public readonly selectionFooter: Locator
   public readonly selectionCountButton: Locator
   public readonly deselectAllButton: Locator
   public readonly deleteSelectedButton: Locator
   public readonly downloadSelectedButton: Locator
-
-  // --- Folder view ---
-  public readonly backToAssetsButton: Locator
-
-  // --- Loading ---
   public readonly skeletonLoaders: Locator
 
   constructor(public override readonly page: Page) {
     super(page, 'assets')
+    this.root = page.locator('.sidebar-content-container')
     this.generatedTab = page.getByRole('tab', { name: 'Generated' })
     this.importedTab = page.getByRole('tab', { name: 'Imported' })
     this.emptyStateMessage = page.getByText(
       'Upload files or generate content to see them here'
     )
-    this.searchInput = page.getByPlaceholder('Search Assets...')
-    this.settingsButton = page.getByRole('button', { name: 'View settings' })
-    this.filterButton = page.getByRole('button', { name: 'Filter by' })
+    this.searchInput = this.root.getByPlaceholder(/Search Assets/i)
+    this.settingsButton = this.root.getByLabel('View settings')
+    this.filterButton = this.root.getByRole('button', { name: 'Filter by' })
     this.filterImageCheckbox = page.getByRole('checkbox', { name: 'Image' })
     this.filterVideoCheckbox = page.getByRole('checkbox', { name: 'Video' })
     this.filterAudioCheckbox = page.getByRole('checkbox', { name: 'Audio' })
     this.filter3DCheckbox = page.getByRole('checkbox', { name: '3D' })
     this.listViewOption = page.getByText('List view')
     this.gridViewOption = page.getByText('Grid view')
+    this.backToAssetsButton = page.getByRole('button', {
+      name: 'Back to all assets'
+    })
+    this.copyJobIdButton = page.getByRole('button', {
+      name: 'Copy job ID'
+    })
+    this.previewDialog = page.getByRole('dialog', { name: 'Gallery' })
     this.sortNewestFirst = page.getByText('Newest first')
     this.sortOldestFirst = page.getByText('Oldest first')
     this.sortLongestFirst = page.getByText('Generation time (longest first)')
     this.sortFastestFirst = page.getByText('Generation time (fastest first)')
-    this.assetCards = page
+    this.assetCards = this.root
       .getByRole('button')
-      .and(page.locator('[data-selected]'))
-    this.selectedCards = page.locator('[data-selected="true"]')
-    this.listViewItems = page.locator(
-      '.sidebar-content-container [role="button"][tabindex="0"]'
-    )
-    this.selectionFooter = page
-      .locator('.sidebar-content-container')
-      .locator('..')
-      .locator('[class*="h-18"]')
-    this.selectionCountButton = page.getByText(/Assets Selected: \d+/)
+      .and(this.root.locator('[data-selected]'))
+    this.selectedCards = this.root.locator('[data-selected="true"]')
+    this.listViewItems = this.root.getByRole('button', { name: /asset$/i })
+    this.selectionFooter = this.root.locator('..').getByRole('toolbar', {
+      name: 'Selected asset actions'
+    })
+    this.selectionCountButton = this.root
+      .getByRole('button', { name: /Assets Selected:/ })
+      .or(page.getByText(/Assets Selected: \d+/))
+      .first()
     this.deselectAllButton = page.getByText('Deselect all')
     this.deleteSelectedButton = page
       .getByTestId('assets-delete-selected')
@@ -360,10 +354,7 @@ export class AssetsSidebarTab extends SidebarTab {
       .getByTestId('assets-download-selected')
       .or(page.locator('button:has(.icon-\\[lucide--download\\])').last())
       .first()
-    this.backToAssetsButton = page.getByText('Back to all assets')
-    this.skeletonLoaders = page.locator(
-      '.sidebar-content-container .animate-pulse'
-    )
+    this.skeletonLoaders = this.root.locator('.animate-pulse')
   }
 
   emptyStateTitle(title: string) {
@@ -376,18 +367,114 @@ export class AssetsSidebarTab extends SidebarTab {
     })
   }
 
+  previewImage(filename: string) {
+    return this.previewDialog.getByRole('img', { name: filename })
+  }
+
+  asset(name: string) {
+    return this.getAssetCardByName(name)
+  }
+
   getAssetCardByName(name: string) {
-    return this.assetCards.filter({ hasText: name })
+    return this.assetCards.and(
+      this.page.getByRole('button', {
+        name: new RegExp(`^${escapeRegExp(name)}\\b`)
+      })
+    )
   }
 
   contextMenuItem(label: string) {
     return this.page.locator('.p-contextmenu').getByText(label)
   }
 
+  contextMenuAction(label: string) {
+    return this.contextMenuItem(label)
+  }
+
+  async showGenerated() {
+    await this.switchToGenerated()
+  }
+
+  async showImported() {
+    await this.switchToImported()
+  }
+
+  async search(query: string) {
+    await this.searchInput.fill(query)
+  }
+
+  async switchToListView() {
+    await this.openSettingsMenu()
+    await this.listViewOption.click()
+  }
+
+  async switchToGridView() {
+    await this.openSettingsMenu()
+    await this.gridViewOption.click()
+  }
+
+  async openContextMenuForAsset(name: string) {
+    await this.asset(name).dispatchEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+      button: 2
+    })
+    await this.page
+      .locator('.p-contextmenu')
+      .waitFor({ state: 'visible', timeout: 3000 })
+  }
+
+  async runContextMenuAction(assetName: string, actionName: string) {
+    await this.openContextMenuForAsset(assetName)
+    await this.contextMenuAction(actionName).click()
+  }
+
+  async openAssetPreview(name: string) {
+    const asset = this.asset(name)
+    await asset.hover()
+
+    const zoomButton = asset.getByLabel('Zoom in')
+    if (await zoomButton.isVisible().catch(() => false)) {
+      await zoomButton.click()
+      return
+    }
+
+    await asset.dblclick()
+  }
+
+  async openOutputFolder(name: string) {
+    await this.asset(name)
+      .getByRole('button', { name: 'See more outputs' })
+      .click()
+
+    await this.backToAssetsButton.waitFor({ state: 'visible' })
+  }
+
+  async toggleStack(name: string) {
+    await this.asset(name)
+      .getByRole('button', { name: 'See more outputs' })
+      .click()
+  }
+
+  async selectAssets(names: string[]) {
+    if (names.length === 0) {
+      return
+    }
+
+    await this.asset(names[0]).click()
+
+    for (const name of names.slice(1)) {
+      await this.asset(name).click({
+        modifiers: ['ControlOrMeta']
+      })
+    }
+  }
+
   override async open() {
     // Remove any toast notifications that may overlay the sidebar button
     await this.dismissToasts()
     await super.open()
+    await this.root.waitFor({ state: 'visible' })
     await this.generatedTab.waitFor({ state: 'visible' })
   }
 

browser_tests/fixtures/helpers/AssetScenarioHelper.ts

@@ -0,0 +1,275 @@
+import { readFile } from 'node:fs/promises'
+
+import type { Page, Route } from '@playwright/test'
+import type { JobDetailResponse, JobEntry } from '@comfyorg/ingest-types'
+
+import { buildMockJobOutputs } from '@e2e/fixtures/helpers/buildMockJobOutputs'
+import type {
+  GeneratedJobFixture,
+  GeneratedOutputFixture,
+  ImportedAssetFixture
+} from '@e2e/fixtures/helpers/assetScenarioTypes'
+import { JobsApiMock } from '@e2e/fixtures/helpers/JobsApiMock'
+import { getMimeType } from '@e2e/fixtures/utils/mimeTypeUtil'
+import {
+  buildFileRequestKey,
+  buildMockAssetFiles,
+  defaultFileFor
+} from '@e2e/fixtures/helpers/mockAssetFiles'
+import type { MockAssetFile } from '@e2e/fixtures/helpers/mockAssetFiles'
+
+const inputFilesRoutePattern = /\/internal\/files\/input(?:\?.*)?$/
+const viewRoutePattern = /\/api\/view(?:\?.*)?$/
+const DEFAULT_FIXTURE_CREATE_TIME = Date.UTC(2024, 0, 1, 0, 0, 0)
+
+type MockPreviewOutput = NonNullable<JobEntry['preview_output']> & {
+  filename?: string
+  subfolder?: string
+  type?: GeneratedOutputFixture['type']
+  nodeId: string
+  mediaType?: string
+  display_name?: string
+}
+
+function normalizeOutputFixture(
+  output: GeneratedOutputFixture
+): GeneratedOutputFixture {
+  const fallback = defaultFileFor(output.filename)
+
+  return {
+    mediaType: 'images',
+    subfolder: '',
+    type: 'output',
+    ...output,
+    filePath: output.filePath ?? fallback.filePath,
+    contentType: output.contentType ?? fallback.contentType
+  }
+}
+
+function createOutputFilename(baseFilename: string, index: number): string {
+  if (index === 0) {
+    return baseFilename
+  }
+
+  const extensionIndex = baseFilename.lastIndexOf('.')
+  if (extensionIndex === -1) {
+    return `${baseFilename}-${index + 1}`
+  }
+
+  return `${baseFilename.slice(0, extensionIndex)}-${index + 1}${baseFilename.slice(extensionIndex)}`
+}
+
+function getPreviewOutput(
+  previewOutput: JobEntry['preview_output'] | undefined
+): MockPreviewOutput | undefined {
+  return previewOutput as MockPreviewOutput | undefined
+}
+
+function outputsFromJobEntry(
+  job: JobEntry
+): [GeneratedOutputFixture, ...GeneratedOutputFixture[]] {
+  const previewOutput = getPreviewOutput(job.preview_output)
+  const outputCount = Math.max(job.outputs_count ?? 1, 1)
+  const baseFilename = previewOutput?.filename ?? `output_${job.id}.png`
+  const mediaType: GeneratedOutputFixture['mediaType'] =
+    previewOutput?.mediaType === 'video' || previewOutput?.mediaType === 'audio'
+      ? previewOutput.mediaType
+      : 'images'
+  const outputs = Array.from({ length: outputCount }, (_, index) => ({
+    filename: createOutputFilename(baseFilename, index),
+    displayName: index === 0 ? previewOutput?.display_name : undefined,
+    mediaType,
+    subfolder: previewOutput?.subfolder ?? '',
+    type: previewOutput?.type ?? 'output'
+  }))
+
+  return [outputs[0], ...outputs.slice(1)]
+}
+
+function generatedJobFromJobEntry(job: JobEntry): GeneratedJobFixture {
+  return {
+    jobId: job.id,
+    status: job.status,
+    outputs: outputsFromJobEntry(job),
+    createTime: job.create_time,
+    executionStartTime: job.execution_start_time,
+    executionEndTime: job.execution_end_time,
+    workflowId: job.workflow_id
+  }
+}
+
+function buildMockJobRecord(job: GeneratedJobFixture) {
+  const outputs = job.outputs.map(normalizeOutputFixture)
+  const preview = outputs[0]
+  const createTime =
+    job.createTime ??
+    (job.createdAt
+      ? new Date(job.createdAt).getTime()
+      : DEFAULT_FIXTURE_CREATE_TIME)
+  const executionStartTime = job.executionStartTime ?? createTime
+  const executionEndTime = job.executionEndTime ?? createTime + 2_000
+
+  const listItem: JobEntry = {
+    id: job.jobId,
+    status: job.status ?? 'completed',
+    create_time: createTime,
+    execution_start_time: executionStartTime,
+    execution_end_time: executionEndTime,
+    preview_output: {
+      filename: preview.filename,
+      subfolder: preview.subfolder ?? '',
+      type: preview.type ?? 'output',
+      nodeId: job.nodeId ?? '5',
+      mediaType: preview.mediaType ?? 'images',
+      display_name: preview.displayName
+    },
+    outputs_count: outputs.length,
+    ...(job.workflowId ? { workflow_id: job.workflowId } : {})
+  }
+
+  const detail: JobDetailResponse = {
+    ...listItem,
+    workflow: job.workflow,
+    outputs: buildMockJobOutputs(job, outputs),
+    update_time: executionEndTime
+  }
+
+  return { listItem, detail }
+}
+
+export class AssetScenarioHelper {
+  private inputFilesRouteHandler: ((route: Route) => Promise<void>) | null =
+    null
+  private viewRouteHandler: ((route: Route) => Promise<void>) | null = null
+  private generatedJobs: GeneratedJobFixture[] = []
+  private importedFiles: ImportedAssetFixture[] = []
+  private filesByRequestKey = new Map<string, MockAssetFile>()
+
+  constructor(
+    private readonly page: Page,
+    private readonly jobsApi = new JobsApiMock(page)
+  ) {}
+
+  async mockGeneratedHistory(jobs: readonly JobEntry[]): Promise<void> {
+    await this.mockScenario({
+      generated: jobs.map(generatedJobFromJobEntry),
+      imported: this.importedFiles
+    })
+  }
+
+  async mockImportedFiles(files: readonly string[]): Promise<void> {
+    await this.mockScenario({
+      generated: this.generatedJobs,
+      imported: files.map((name) => ({ name }))
+    })
+  }
+
+  async mockEmptyState(): Promise<void> {
+    await this.mockScenario({ generated: [], imported: [] })
+  }
+
+  async clear(): Promise<void> {
+    this.generatedJobs = []
+    this.importedFiles = []
+    this.filesByRequestKey.clear()
+
+    await this.jobsApi.clear()
+
+    if (this.inputFilesRouteHandler) {
+      await this.page.unroute(
+        inputFilesRoutePattern,
+        this.inputFilesRouteHandler
+      )
+      this.inputFilesRouteHandler = null
+    }
+
+    if (this.viewRouteHandler) {
+      await this.page.unroute(viewRoutePattern, this.viewRouteHandler)
+      this.viewRouteHandler = null
+    }
+  }
+
+  private async mockScenario({
+    generated,
+    imported
+  }: {
+    generated: GeneratedJobFixture[]
+    imported: ImportedAssetFixture[]
+  }): Promise<void> {
+    this.generatedJobs = [...generated]
+    this.importedFiles = [...imported]
+    this.filesByRequestKey = buildMockAssetFiles({
+      generated: this.generatedJobs,
+      imported: this.importedFiles
+    })
+
+    await this.jobsApi.mockJobs(this.generatedJobs.map(buildMockJobRecord))
+    await this.ensureInputFilesRoute()
+    await this.ensureViewRoute()
+  }
+
+  private async ensureInputFilesRoute(): Promise<void> {
+    if (this.inputFilesRouteHandler) {
+      return
+    }
+
+    this.inputFilesRouteHandler = async (route: Route) => {
+      await route.fulfill({
+        status: 200,
+        contentType: 'application/json',
+        body: JSON.stringify(this.importedFiles.map((asset) => asset.name))
+      })
+    }
+
+    await this.page.route(inputFilesRoutePattern, this.inputFilesRouteHandler)
+  }
+
+  private async ensureViewRoute(): Promise<void> {
+    if (this.viewRouteHandler) {
+      return
+    }
+
+    this.viewRouteHandler = async (route: Route) => {
+      const url = new URL(route.request().url())
+      const filename = url.searchParams.get('filename')
+      const type = url.searchParams.get('type') ?? 'output'
+      const subfolder = url.searchParams.get('subfolder') ?? ''
+
+      if (!filename) {
+        await route.fulfill({
+          status: 400,
+          contentType: 'application/json',
+          body: JSON.stringify({ error: 'Missing filename' })
+        })
+        return
+      }
+
+      const mockFile =
+        this.filesByRequestKey.get(
+          buildFileRequestKey({
+            filename,
+            type,
+            subfolder
+          })
+        ) ?? defaultFileFor(filename)
+
+      if (mockFile.filePath) {
+        const body = await readFile(mockFile.filePath)
+        await route.fulfill({
+          status: 200,
+          contentType: mockFile.contentType ?? getMimeType(filename),
+          body
+        })
+        return
+      }
+
+      await route.fulfill({
+        status: 200,
+        contentType: mockFile.contentType ?? getMimeType(filename),
+        body: mockFile.textContent ?? ''
+      })
+    }
+
+    await this.page.route(viewRoutePattern, this.viewRouteHandler)
+  }
+}

browser_tests/fixtures/helpers/assetScenarioTypes.ts

@@ -0,0 +1,32 @@
+import type { JobDetailResponse, JobEntry } from '@comfyorg/ingest-types'
+
+import type { ResultItemType } from '@/schemas/apiSchema'
+
+export type ImportedAssetFixture = {
+  name: string
+  filePath?: string
+  contentType?: string
+}
+
+export type GeneratedOutputFixture = {
+  filename: string
+  displayName?: string
+  filePath?: string
+  contentType?: string
+  mediaType?: 'images' | 'video' | 'audio'
+  subfolder?: string
+  type?: ResultItemType
+}
+
+export type GeneratedJobFixture = {
+  jobId: string
+  status?: JobEntry['status']
+  outputs: [GeneratedOutputFixture, ...GeneratedOutputFixture[]]
+  createdAt?: string
+  createTime?: number
+  executionStartTime?: number
+  executionEndTime?: number
+  workflowId?: string
+  workflow?: JobDetailResponse['workflow']
+  nodeId?: string
+}

browser_tests/fixtures/helpers/buildMockJobOutputs.ts

@@ -0,0 +1,34 @@
+import type { JobDetailResponse } from '@comfyorg/ingest-types'
+
+import type { TaskOutput } from '@/schemas/apiSchema'
+
+import type {
+  GeneratedJobFixture,
+  GeneratedOutputFixture
+} from '@e2e/fixtures/helpers/assetScenarioTypes'
+
+export function buildMockJobOutputs(
+  job: GeneratedJobFixture,
+  outputs: GeneratedOutputFixture[]
+): NonNullable<JobDetailResponse['outputs']> {
+  const nodeId = job.nodeId ?? '5'
+  const nodeOutputs: Pick<TaskOutput[string], 'audio' | 'images' | 'video'> = {}
+
+  for (const output of outputs) {
+    const mediaType = output.mediaType ?? 'images'
+
+    nodeOutputs[mediaType] = [
+      ...(nodeOutputs[mediaType] ?? []),
+      {
+        filename: output.filename,
+        subfolder: output.subfolder ?? '',
+        type: output.type ?? 'output',
+        display_name: output.displayName
+      }
+    ]
+  }
+
+  const taskOutput = { [nodeId]: nodeOutputs } satisfies TaskOutput
+
+  return taskOutput
+}

browser_tests/fixtures/helpers/mockAssetFiles.ts

@@ -0,0 +1,140 @@
+import { fileURLToPath } from 'node:url'
+import path from 'node:path'
+
+import type {
+  GeneratedJobFixture,
+  GeneratedOutputFixture,
+  ImportedAssetFixture
+} from '@e2e/fixtures/helpers/assetScenarioTypes'
+import { getMimeType } from '@e2e/fixtures/utils/mimeTypeUtil'
+
+const helperDir = path.dirname(fileURLToPath(import.meta.url))
+
+export type MockAssetFile = {
+  filePath?: string
+  contentType?: string
+  textContent?: string
+}
+
+export type MockFileLocation = {
+  filename: string
+  type: string
+  subfolder: string
+}
+
+function getFixturePath(relativePath: string): string {
+  return path.resolve(helperDir, '../../assets', relativePath)
+}
+
+export function buildFileRequestKey({
+  filename,
+  type,
+  subfolder
+}: MockFileLocation): string {
+  return new URLSearchParams({
+    filename,
+    type,
+    subfolder
+  }).toString()
+}
+
+export function defaultFileFor(filename: string): MockAssetFile {
+  const normalized = filename.toLowerCase()
+
+  if (normalized.endsWith('.png')) {
+    return {
+      filePath: getFixturePath('workflowInMedia/workflow_itxt.png'),
+      contentType: 'image/png'
+    }
+  }
+
+  if (normalized.endsWith('.webp')) {
+    return {
+      filePath: getFixturePath('example.webp'),
+      contentType: 'image/webp'
+    }
+  }
+
+  if (normalized.endsWith('.webm')) {
+    return {
+      filePath: getFixturePath('workflowInMedia/workflow.webm'),
+      contentType: 'video/webm'
+    }
+  }
+
+  if (normalized.endsWith('.mp4')) {
+    return {
+      filePath: getFixturePath('workflowInMedia/workflow.mp4'),
+      contentType: 'video/mp4'
+    }
+  }
+
+  if (normalized.endsWith('.glb')) {
+    return {
+      filePath: getFixturePath('workflowInMedia/workflow.glb'),
+      contentType: 'model/gltf-binary'
+    }
+  }
+
+  if (normalized.endsWith('.json')) {
+    return {
+      textContent: JSON.stringify({ mocked: true }, null, 2),
+      contentType: 'application/json'
+    }
+  }
+
+  return {
+    textContent: 'mocked asset content',
+    contentType: getMimeType(filename)
+  }
+}
+
+function outputLocation(output: GeneratedOutputFixture): MockFileLocation {
+  return {
+    filename: output.filename,
+    type: output.type ?? 'output',
+    subfolder: output.subfolder ?? ''
+  }
+}
+
+function importedAssetLocation(asset: ImportedAssetFixture): MockFileLocation {
+  return {
+    filename: asset.name,
+    type: 'input',
+    subfolder: ''
+  }
+}
+
+export function buildMockAssetFiles({
+  generated,
+  imported
+}: {
+  generated: readonly GeneratedJobFixture[]
+  imported: readonly ImportedAssetFixture[]
+}): Map<string, MockAssetFile> {
+  const mockFiles = new Map<string, MockAssetFile>()
+
+  for (const job of generated) {
+    for (const output of job.outputs) {
+      const fallback = defaultFileFor(output.filename)
+
+      mockFiles.set(buildFileRequestKey(outputLocation(output)), {
+        filePath: output.filePath ?? fallback.filePath,
+        contentType: output.contentType ?? fallback.contentType,
+        textContent: fallback.textContent
+      })
+    }
+  }
+
+  for (const asset of imported) {
+    const fallback = defaultFileFor(asset.name)
+
+    mockFiles.set(buildFileRequestKey(importedAssetLocation(asset)), {
+      filePath: asset.filePath ?? fallback.filePath,
+      contentType: asset.contentType ?? fallback.contentType,
+      textContent: fallback.textContent
+    })
+  }
+
+  return mockFiles
+}

browser_tests/tests/sidebar/assetsActions.spec.ts

@@ -0,0 +1,152 @@
+import { expect, mergeTests } from '@playwright/test'
+import type { JobEntry } from '@comfyorg/ingest-types'
+
+import { assetScenarioFixture } from '@e2e/fixtures/assetScenarioFixture'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { createMockJob } from '@e2e/fixtures/utils/jobFixtures'
+
+const test = mergeTests(comfyPageFixture, assetScenarioFixture)
+
+const GENERATED_JOBS: JobEntry[] = [
+  createMockJob({
+    id: 'job-alpha',
+    create_time: 1_000_000,
+    execution_start_time: 1_000_000,
+    execution_end_time: 1_010_000,
+    preview_output: {
+      filename: 'landscape.png',
+      subfolder: '',
+      type: 'output',
+      nodeId: '1',
+      mediaType: 'images'
+    },
+    outputs_count: 1
+  }),
+  createMockJob({
+    id: 'job-beta',
+    create_time: 2_000_000,
+    execution_start_time: 2_000_000,
+    execution_end_time: 2_008_000,
+    preview_output: {
+      filename: 'portrait.webp',
+      subfolder: '',
+      type: 'output',
+      nodeId: '2',
+      mediaType: 'images'
+    },
+    outputs_count: 1
+  }),
+  createMockJob({
+    id: 'job-gamma',
+    create_time: 3_000_000,
+    execution_start_time: 3_000_000,
+    execution_end_time: 3_015_000,
+    preview_output: {
+      filename: 'gallery.png',
+      subfolder: '',
+      type: 'output',
+      nodeId: '3',
+      mediaType: 'images'
+    },
+    outputs_count: 2
+  })
+]
+
+test.describe('Assets sidebar actions', () => {
+  test.beforeEach(async ({ comfyPage, assetScenario }) => {
+    await assetScenario.mockGeneratedHistory(GENERATED_JOBS)
+    await assetScenario.mockImportedFiles([])
+    await comfyPage.setup()
+  })
+
+  test('shows selection footer actions after selecting a multi-output asset', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.asset('gallery.png').click()
+
+    await expect(tab.selectionFooter).toBeVisible()
+    await expect(tab.selectionCountButton).toHaveText(/Assets Selected:\s*2\b/)
+    await expect(tab.downloadSelectedButton).toBeVisible()
+    await expect(tab.deleteSelectedButton).toBeVisible()
+  })
+
+  test('supports multi-select and deselect all', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.selectAssets(['landscape.png', 'portrait.webp'])
+
+    await expect(tab.selectedCards).toHaveCount(2)
+    await expect(tab.selectionCountButton).toHaveText(/Assets Selected:\s*2\b/)
+
+    await tab.selectionCountButton.hover()
+    await expect(tab.deselectAllButton).toBeVisible()
+
+    await tab.deselectAllButton.click()
+    await expect(tab.selectedCards).toHaveCount(0)
+  })
+
+  test('shows the output asset context menu actions', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.openContextMenuForAsset('landscape.png')
+
+    await expect(tab.contextMenuAction('Download')).toBeVisible()
+    await expect(tab.contextMenuAction('Inspect asset')).toBeVisible()
+    await expect(tab.contextMenuAction('Delete')).toBeVisible()
+    await expect(tab.contextMenuAction('Copy job ID')).toBeVisible()
+  })
+
+  test('shows the bulk context menu for multi-selection', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.selectAssets(['landscape.png', 'portrait.webp'])
+    await expect(tab.selectionFooter).toBeVisible()
+
+    await tab.asset('landscape.png').dispatchEvent('contextmenu', {
+      bubbles: true,
+      cancelable: true,
+      button: 2
+    })
+
+    await expect(tab.contextMenuAction('Download all')).toBeVisible()
+  })
+
+  test('confirms delete and removes the selected asset', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    const initialCount = await tab.assetCards.count()
+
+    await tab.runContextMenuAction('gallery.png', 'Delete')
+
+    await expect(comfyPage.confirmDialog.root).toBeVisible()
+    await expect(
+      comfyPage.confirmDialog.root.getByText('Delete this asset?')
+    ).toBeVisible()
+
+    await comfyPage.confirmDialog.click('delete')
+
+    await expect(comfyPage.confirmDialog.root).toBeHidden()
+    await expect(tab.assetCards).toHaveCount(initialCount - 1)
+    await expect(
+      comfyPage.page
+        .getByRole('alert')
+        .filter({ hasText: 'Asset deleted successfully' })
+    ).toBeVisible()
+  })
+})

browser_tests/tests/sidebar/assetsBrowsing.spec.ts

@@ -0,0 +1,143 @@
+import { expect, mergeTests } from '@playwright/test'
+import type { JobEntry } from '@comfyorg/ingest-types'
+
+import { assetScenarioFixture } from '@e2e/fixtures/assetScenarioFixture'
+import { comfyPageFixture } from '@e2e/fixtures/ComfyPage'
+import { createMockJob } from '@e2e/fixtures/utils/jobFixtures'
+
+const test = mergeTests(comfyPageFixture, assetScenarioFixture)
+
+const GENERATED_JOBS: JobEntry[] = [
+  createMockJob({
+    id: 'job-landscape',
+    create_time: 1_000_000,
+    execution_start_time: 1_000_000,
+    execution_end_time: 1_010_000,
+    preview_output: {
+      filename: 'landscape.png',
+      subfolder: '',
+      type: 'output',
+      nodeId: '1',
+      mediaType: 'images'
+    },
+    outputs_count: 1
+  }),
+  createMockJob({
+    id: 'job-portrait',
+    create_time: 2_000_000,
+    execution_start_time: 2_000_000,
+    execution_end_time: 2_008_000,
+    preview_output: {
+      filename: 'portrait.webp',
+      subfolder: '',
+      type: 'output',
+      nodeId: '2',
+      mediaType: 'images'
+    },
+    outputs_count: 1
+  }),
+  createMockJob({
+    id: 'job-gallery',
+    create_time: 3_000_000,
+    execution_start_time: 3_000_000,
+    execution_end_time: 3_015_000,
+    preview_output: {
+      filename: 'gallery.png',
+      subfolder: '',
+      type: 'output',
+      nodeId: '3',
+      mediaType: 'images'
+    },
+    outputs_count: 3
+  })
+]
+
+const IMPORTED_FILES = ['reference_photo.png', 'background.jpg', 'notes.txt']
+
+test.describe('Assets sidebar browsing', () => {
+  test.beforeEach(async ({ comfyPage, assetScenario }) => {
+    await assetScenario.mockGeneratedHistory(GENERATED_JOBS)
+    await assetScenario.mockImportedFiles(IMPORTED_FILES)
+    await comfyPage.setup()
+  })
+
+  test('shows mocked generated and imported assets', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await expect(tab.getAssetCardByName('gallery.png')).toBeVisible()
+
+    await tab.switchToImported()
+    await expect(tab.getAssetCardByName('reference_photo.png')).toBeVisible()
+  })
+
+  test('clears search when switching tabs', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    await tab.searchInput.fill('landscape')
+    await expect(tab.searchInput).toHaveValue('landscape')
+
+    await tab.switchToImported()
+    await expect(tab.searchInput).toHaveValue('')
+  })
+
+  test('opens folder view for multi-output jobs and returns to all assets', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab
+      .getAssetCardByName('gallery.png')
+      .getByRole('button', { name: 'See more outputs' })
+      .click()
+
+    await expect(tab.backToAssetsButton).toBeVisible()
+    await expect(
+      comfyPage.page.getByRole('button', { name: 'Copy job ID' })
+    ).toBeVisible()
+    await expect(tab.getAssetCardByName('gallery-2.png')).toBeVisible()
+
+    await tab.backToAssetsButton.click()
+    await expect(tab.getAssetCardByName('gallery.png')).toBeVisible()
+  })
+
+  test('opens the preview lightbox for generated assets', async ({
+    comfyPage
+  }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.waitForAssets()
+
+    await tab.getAssetCardByName('landscape.png').dblclick()
+
+    await expect(comfyPage.mediaLightbox.root).toBeVisible()
+  })
+})
+
+test.describe('Assets sidebar empty states', () => {
+  test.beforeEach(async ({ comfyPage, assetScenario }) => {
+    await assetScenario.mockEmptyState()
+    await comfyPage.setup()
+  })
+
+  test('shows empty generated state', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+
+    await expect(tab.emptyStateTitle('No generated files found')).toBeVisible()
+    await expect(tab.emptyStateMessage).toBeVisible()
+  })
+
+  test('shows empty imported state', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.assetsTab
+    await tab.open()
+    await tab.switchToImported()
+
+    await expect(tab.emptyStateTitle('No imported files found')).toBeVisible()
+    await expect(tab.emptyStateMessage).toBeVisible()
+  })
+})

src/components/sidebar/tabs/AssetsSidebarTab.vue

@@ -14,6 +14,7 @@
           <button
             class="m-0 cursor-pointer border-0 bg-transparent p-0 outline-0"
             role="button"
+            :aria-label="$t('mediaAsset.actions.copyJobId')"
             @click="copyJobId"
           >
             <i class="icon-[lucide--copy] text-sm"></i>
@@ -118,6 +119,8 @@
       <div
         v-if="hasSelection"
         ref="footerRef"
+        role="toolbar"
+        :aria-label="$t('mediaAsset.selection.actions')"
         class="flex h-18 w-full items-center justify-between gap-1"
       >
         <div class="flex-1 pl-4">
@@ -143,6 +146,7 @@
             <Button
               v-if="shouldShowDeleteButton"
               size="icon"
+              :aria-label="$t('mediaAsset.selection.deleteSelected')"
               data-testid="assets-delete-selected"
               @click="handleDeleteSelected"
             >
@@ -150,6 +154,7 @@
             </Button>
             <Button
               size="icon"
+              :aria-label="$t('mediaAsset.selection.downloadSelected')"
               data-testid="assets-download-selected"
               @click="handleDownloadSelected"
             >

src/locales/en/main.json

@@ -3122,6 +3122,7 @@
     "selection": {
       "selectedCount": "Assets Selected: {count}",
       "multipleSelectedAssets": "Multiple assets selected",
+      "actions": "Selected asset actions",
       "deselectAll": "Deselect all",
       "downloadSelected": "Download",
       "downloadSelectedAll": "Download all",