test: cover job history virtualization in browser

browser_tests/fixtures/ComfyPage.ts

@@ -20,6 +20,7 @@ import { SettingDialog } from './components/SettingDialog'
 import { BottomPanel } from './components/BottomPanel'
 import {
   AssetsSidebarTab,
+  JobHistorySidebarTab,
   NodeLibrarySidebarTab,
   WorkflowsSidebarTab
 } from './components/SidebarTab'
@@ -58,6 +59,7 @@ class ComfyPropertiesPanel {
 
 class ComfyMenu {
   private _assetsTab: AssetsSidebarTab | null = null
+  private _jobHistoryTab: JobHistorySidebarTab | null = null
   private _nodeLibraryTab: NodeLibrarySidebarTab | null = null
   private _workflowsTab: WorkflowsSidebarTab | null = null
   private _topbar: Topbar | null = null
@@ -86,6 +88,11 @@ class ComfyMenu {
     return this._assetsTab
   }
 
+  get jobHistoryTab() {
+    this._jobHistoryTab ??= new JobHistorySidebarTab(this.page)
+    return this._jobHistoryTab
+  }
+
   get workflowsTab() {
     this._workflowsTab ??= new WorkflowsSidebarTab(this.page)
     return this._workflowsTab

browser_tests/fixtures/components/SidebarTab.ts

@@ -197,3 +197,35 @@ export class AssetsSidebarTab extends SidebarTab {
     await this.generatedTab.waitFor({ state: 'visible' })
   }
 }
+
+export class JobHistorySidebarTab extends SidebarTab {
+  constructor(public override readonly page: Page) {
+    super(page, 'job-history')
+  }
+
+  get root() {
+    return this.page.locator('.sidebar-content-container')
+  }
+
+  get list() {
+    return this.page.getByTestId('job-assets-list')
+  }
+
+  get jobRows() {
+    return this.root.locator('[data-job-id]')
+  }
+
+  jobRow(jobId: string) {
+    return this.root.locator(`[data-job-id="${jobId}"]`)
+  }
+
+  override async open() {
+    await super.open()
+    await this.list.waitFor({ state: 'visible' })
+  }
+
+  override async close() {
+    await super.close()
+    await this.list.waitFor({ state: 'hidden' })
+  }
+}

browser_tests/tests/sidebar/jobHistory.spec.ts

@@ -0,0 +1,71 @@
+import { expect } from '@playwright/test'
+
+import type { RawJobListItem } from '../../../src/platform/remote/comfyui/jobs/jobTypes'
+import type { ComfyPage } from '../../fixtures/ComfyPage'
+import { comfyPageFixture as test } from '../../fixtures/ComfyPage'
+
+const VIRTUALIZED_ROW_LIMIT = 48
+
+function buildCompletedJobs(count: number): RawJobListItem[] {
+  const now = Date.now()
+
+  return Array.from({ length: count }, (_, index) => ({
+    id: `job-${index}`,
+    status: 'completed',
+    create_time: now - index * 60_000,
+    execution_start_time: now - index * 60_000 - 10_000,
+    execution_end_time: now - index * 60_000,
+    workflow_id: 'workflow-1'
+  }))
+}
+
+async function dismissBlockingDialogIfPresent(comfyPage: ComfyPage) {
+  const closeButton = comfyPage.page
+    .getByRole('dialog')
+    .getByRole('button', { name: 'Close' })
+    .first()
+
+  if (await closeButton.isVisible()) {
+    await closeButton.click()
+  }
+}
+
+test.describe('Job history sidebar', () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.setupSettings({
+      'Comfy.userId': comfyPage.id,
+      'Comfy.Queue.QPOV2': true,
+      'Comfy.UseNewMenu': 'Top'
+    })
+    await comfyPage.assets.mockOutputHistory(buildCompletedJobs(64))
+    await comfyPage.setup()
+    await dismissBlockingDialogIfPresent(comfyPage)
+  })
+
+  test.afterEach(async ({ comfyPage }) => {
+    await comfyPage.assets.clearMocks()
+  })
+
+  test('virtualizes large job history lists', async ({ comfyPage }) => {
+    const tab = comfyPage.menu.jobHistoryTab
+
+    await tab.open()
+
+    await expect(tab.jobRow('job-0')).toBeVisible()
+    await expect(tab.jobRow('job-63')).toHaveCount(0)
+
+    const initialRenderedRows = await tab.jobRows.count()
+    expect(initialRenderedRows).toBeLessThan(VIRTUALIZED_ROW_LIMIT)
+
+    await tab.list.evaluate((element) => {
+      element.scrollTop = element.scrollHeight
+    })
+    await comfyPage.nextFrame()
+
+    await expect(tab.jobRow('job-63')).toBeVisible()
+    await expect(tab.jobRow('job-0')).toHaveCount(0)
+
+    const renderedRowsAfterScroll = await tab.jobRows.count()
+    expect(renderedRowsAfterScroll).toBeLessThan(VIRTUALIZED_ROW_LIMIT)
+  })
+})

src/components/queue/job/JobAssetsList.vue

@@ -2,6 +2,7 @@
   <div
     :ref="containerProps.ref"
     :style="containerProps.style"
+    data-testid="job-assets-list"
     class="h-full overflow-y-auto"
     @scroll="onListScroll"
   >