test: add E2E tests for CancelSubscription and TopUpCredits dialogs

browser_tests/tests/dialogs/cancelSubscriptionDialog.spec.ts

@@ -0,0 +1,121 @@
+import { expect } from '@playwright/test'
+
+import type { WorkspaceStore } from '@e2e/types/globals'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+test.describe('CancelSubscription dialog', { tag: '@ui' }, () => {
+  test('displays dialog with title and description', async ({ comfyPage }) => {
+    const { page } = comfyPage
+
+    await page.evaluate(() => {
+      void (
+        window.app!.extensionManager as WorkspaceStore
+      ).dialog.showCancelSubscriptionDialog('2025-12-31T00:00:00Z')
+    })
+
+    const dialog = page.locator('.p-dialog')
+    await expect(dialog).toBeVisible()
+
+    await expect(
+      dialog.getByRole('heading', { name: 'Cancel subscription' })
+    ).toBeVisible()
+    await expect(dialog).toContainText('December 31, 2025')
+  })
+
+  test('"Keep subscription" button closes dialog', async ({ comfyPage }) => {
+    const { page } = comfyPage
+
+    await page.evaluate(() => {
+      void (
+        window.app!.extensionManager as WorkspaceStore
+      ).dialog.showCancelSubscriptionDialog()
+    })
+
+    const dialog = page.locator('.p-dialog')
+    await expect(dialog).toBeVisible()
+
+    await dialog.getByRole('button', { name: 'Keep subscription' }).click()
+    await expect(dialog).toBeHidden()
+  })
+
+  test('"Cancel subscription" button calls API and closes dialog on success', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+
+    let cancelCalled = false
+    await page.route('**/billing/subscription/cancel', async (route) => {
+      cancelCalled = true
+      await route.fulfill({
+        status: 200,
+        json: {
+          billing_op_id: 'op-123',
+          cancel_at: '2025-12-31T00:00:00Z'
+        }
+      })
+    })
+
+    await page.route('**/billing/status', async (route) => {
+      await route.fulfill({
+        status: 200,
+        json: {
+          is_active: true,
+          subscription_status: 'canceled',
+          subscription_tier: 'STANDARD',
+          subscription_duration: 'MONTHLY',
+          billing_status: 'paid',
+          has_funds: true,
+          cancel_at: '2025-12-31T00:00:00Z'
+        }
+      })
+    })
+
+    await page.evaluate(() => {
+      void (
+        window.app!.extensionManager as WorkspaceStore
+      ).dialog.showCancelSubscriptionDialog()
+    })
+
+    const dialog = page.locator('.p-dialog')
+    await expect(dialog).toBeVisible()
+
+    await dialog.getByRole('button', { name: 'Cancel subscription' }).click()
+
+    await expect(dialog).toBeHidden()
+    expect(cancelCalled).toBe(true)
+
+    const successToast = page.locator(
+      '.p-toast-message.p-toast-message-success'
+    )
+    await expect(successToast).toBeVisible()
+  })
+
+  test('"Cancel subscription" shows error toast on API failure', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+
+    await page.route('**/billing/subscription/cancel', async (route) => {
+      await route.fulfill({
+        status: 500,
+        json: { message: 'Internal server error' }
+      })
+    })
+
+    await page.evaluate(() => {
+      void (
+        window.app!.extensionManager as WorkspaceStore
+      ).dialog.showCancelSubscriptionDialog()
+    })
+
+    const dialog = page.locator('.p-dialog')
+    await expect(dialog).toBeVisible()
+
+    await dialog.getByRole('button', { name: 'Cancel subscription' }).click()
+
+    const errorToast = page.locator('.p-toast-message.p-toast-message-error')
+    await expect(errorToast).toBeVisible()
+
+    await expect(dialog).toBeVisible()
+  })
+})

browser_tests/tests/dialogs/topUpCreditsDialog.spec.ts

@@ -0,0 +1,109 @@
+import { expect } from '@playwright/test'
+
+import type { WorkspaceStore } from '@e2e/types/globals'
+import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+
+test.describe('TopUpCredits dialog', { tag: '@ui' }, () => {
+  test('displays dialog with preset amounts and purchase button', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+
+    await page.evaluate(() => {
+      void (
+        window.app!.extensionManager as WorkspaceStore
+      ).dialog.showTopUpCreditsDialog()
+    })
+
+    const dialog = page.locator('.p-dialog')
+    await expect(dialog).toBeVisible()
+
+    await expect(
+      dialog.getByRole('heading', { name: 'Add more credits' })
+    ).toBeVisible()
+
+    await expect(dialog.getByRole('button', { name: '$10' })).toBeVisible()
+    await expect(dialog.getByRole('button', { name: '$25' })).toBeVisible()
+    await expect(dialog.getByRole('button', { name: '$50' })).toBeVisible()
+    await expect(dialog.getByRole('button', { name: '$100' })).toBeVisible()
+  })
+
+  test('displays insufficient credits message when opened with flag', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+
+    await page.evaluate(() => {
+      void (
+        window.app!.extensionManager as WorkspaceStore
+      ).dialog.showTopUpCreditsDialog({ isInsufficientCredits: true })
+    })
+
+    const dialog = page.locator('.p-dialog')
+    await expect(dialog).toBeVisible()
+
+    await expect(
+      dialog.getByRole('heading', { name: 'Add more credits to run' })
+    ).toBeVisible()
+    await expect(dialog).toContainText(
+      "You don't have enough credits to run this workflow"
+    )
+  })
+
+  test('selecting a preset amount updates the selection', async ({
+    comfyPage
+  }) => {
+    const { page } = comfyPage
+
+    await page.evaluate(() => {
+      void (
+        window.app!.extensionManager as WorkspaceStore
+      ).dialog.showTopUpCreditsDialog()
+    })
+
+    const dialog = page.locator('.p-dialog')
+    await expect(dialog).toBeVisible()
+
+    await dialog.getByRole('button', { name: '$10' }).click()
+
+    await expect(dialog).toContainText('Amount (USD)')
+    await expect(dialog).toContainText('Credits')
+  })
+
+  test('close button dismisses dialog', async ({ comfyPage }) => {
+    const { page } = comfyPage
+
+    await page.evaluate(() => {
+      void (
+        window.app!.extensionManager as WorkspaceStore
+      ).dialog.showTopUpCreditsDialog()
+    })
+
+    const dialog = page.locator('.p-dialog')
+    await expect(dialog).toBeVisible()
+
+    const closeButton = dialog.locator('button').filter({
+      has: page.locator('.icon-\\[lucide--x\\]')
+    })
+    await closeButton.click()
+
+    await expect(dialog).toBeHidden()
+  })
+
+  test('shows pricing details link', async ({ comfyPage }) => {
+    const { page } = comfyPage
+
+    await page.evaluate(() => {
+      void (
+        window.app!.extensionManager as WorkspaceStore
+      ).dialog.showTopUpCreditsDialog()
+    })
+
+    const dialog = page.locator('.p-dialog')
+    await expect(dialog).toBeVisible()
+
+    await expect(
+      dialog.getByRole('link', { name: 'View pricing details' })
+    ).toBeVisible()
+  })
+})