test: add QueueClearHistoryDialog E2E tests (DLG-02)

browser_tests/tests/dialogs/queueClearHistory.spec.ts

@@ -0,0 +1,170 @@
+import type { Locator, Page } from '@playwright/test'
+
+import {
+  comfyPageFixture as test,
+  comfyExpect as expect
+} from '../../fixtures/ComfyPage'
+
+test.describe('QueueClearHistoryDialog', { tag: '@ui' }, () => {
+  test.beforeEach(async ({ comfyPage }) => {
+    await comfyPage.settings.setSetting('Comfy.UseNewMenu', 'Top')
+    await comfyPage.setup()
+
+    // Expand the queue overlay so the JobHistoryActionsMenu is visible
+    await comfyPage.page.getByTestId('queue-overlay-toggle').click()
+  })
+
+  async function openClearHistoryDialog(page: Page) {
+    // Open the more options popover
+    const moreButton = page.getByLabel(/More options/i).first()
+    await moreButton.click()
+
+    // Click "Clear history" action
+    const clearHistoryAction = page.locator(
+      '[data-testid="clear-history-action"]'
+    )
+    await expect(clearHistoryAction).toBeVisible()
+    await clearHistoryAction.click()
+  }
+
+  function getDialog(page: Page): Locator {
+    return page.getByRole('dialog')
+  }
+
+  test('Dialog opens from queue panel history actions menu', async ({
+    comfyPage
+  }) => {
+    await openClearHistoryDialog(comfyPage.page)
+
+    const dialog = getDialog(comfyPage.page)
+    await expect(dialog).toBeVisible()
+  })
+
+  test('Dialog shows confirmation message with title, description, and assets note', async ({
+    comfyPage
+  }) => {
+    await openClearHistoryDialog(comfyPage.page)
+
+    const dialog = getDialog(comfyPage.page)
+    await expect(dialog).toBeVisible()
+
+    // Verify title
+    await expect(
+      dialog.getByText('Clear your job queue history?')
+    ).toBeVisible()
+
+    // Verify description
+    await expect(
+      dialog.getByText(
+        'All the finished or failed jobs below will be removed from this Job queue panel.'
+      )
+    ).toBeVisible()
+
+    // Verify assets note
+    await expect(
+      dialog.getByText(
+        "Assets generated by these jobs won't be deleted and can always be viewed from the assets panel."
+      )
+    ).toBeVisible()
+  })
+
+  test('Cancel button closes dialog without clearing history', async ({
+    comfyPage
+  }) => {
+    await openClearHistoryDialog(comfyPage.page)
+
+    const dialog = getDialog(comfyPage.page)
+    await expect(dialog).toBeVisible()
+
+    // Intercept the clear API call — it should NOT be called
+    let clearCalled = false
+    await comfyPage.page.route('**/api/history', (route) => {
+      if (route.request().method() === 'POST') {
+        clearCalled = true
+      }
+      return route.continue()
+    })
+
+    // Click Cancel
+    await dialog.getByRole('button', { name: 'Cancel' }).click()
+
+    // Dialog should disappear
+    await expect(dialog).not.toBeVisible()
+
+    // Verify clear was not called
+    expect(clearCalled).toBe(false)
+
+    await comfyPage.page.unroute('**/api/history')
+  })
+
+  test('Close (X) button closes dialog without clearing history', async ({
+    comfyPage
+  }) => {
+    await openClearHistoryDialog(comfyPage.page)
+
+    const dialog = getDialog(comfyPage.page)
+    await expect(dialog).toBeVisible()
+
+    // Intercept the clear API call — it should NOT be called
+    let clearCalled = false
+    await comfyPage.page.route('**/api/history', (route) => {
+      if (route.request().method() === 'POST') {
+        clearCalled = true
+      }
+      return route.continue()
+    })
+
+    // Click the X close button
+    await dialog.getByLabel('Close').click()
+
+    // Dialog should disappear
+    await expect(dialog).not.toBeVisible()
+
+    // Verify clear was not called
+    expect(clearCalled).toBe(false)
+
+    await comfyPage.page.unroute('**/api/history')
+  })
+
+  test('Confirm clears queue history and closes dialog', async ({
+    comfyPage
+  }) => {
+    await openClearHistoryDialog(comfyPage.page)
+
+    const dialog = getDialog(comfyPage.page)
+    await expect(dialog).toBeVisible()
+
+    // Intercept the clear API call to verify it is made
+    const clearPromise = comfyPage.page.waitForRequest(
+      (req) =>
+        req.url().includes('/api/history') && req.method() === 'POST'
+    )
+
+    // Click Clear
+    await dialog.getByRole('button', { name: 'Clear' }).click()
+
+    // Verify the API call was made
+    const request = await clearPromise
+    expect(request.postDataJSON()).toEqual({ clear: true })
+
+    // Dialog should close after clearing
+    await expect(dialog).not.toBeVisible()
+  })
+
+  test('Dialog state resets after close and reopen', async ({ comfyPage }) => {
+    // Open and cancel
+    await openClearHistoryDialog(comfyPage.page)
+    const dialog = getDialog(comfyPage.page)
+    await expect(dialog).toBeVisible()
+    await dialog.getByRole('button', { name: 'Cancel' }).click()
+    await expect(dialog).not.toBeVisible()
+
+    // Reopen — dialog should be fresh (Clear button enabled, not stuck)
+    await openClearHistoryDialog(comfyPage.page)
+    await expect(dialog).toBeVisible()
+
+    const clearButton = dialog.getByRole('button', { name: 'Clear' })
+    await expect(clearButton).toBeVisible()
+    await expect(clearButton).toBeEnabled()
+  })
+})