test: add E2E coverage for credit balance and top-up conversions

browser_tests/fixtures/components/TopUpCreditsDialog.ts

@@ -11,6 +11,9 @@ export class TopUpCreditsDialog extends BaseDialog {
   readonly preset50: Locator
   readonly preset100: Locator
   readonly payAmountInput: Locator
+  readonly getAmountInput: Locator
+  readonly incrementPayAmountButton: Locator
+  readonly incrementGetAmountButton: Locator
   readonly pricingLink: Locator
 
   constructor(page: Page) {
@@ -50,6 +53,15 @@ export class TopUpCreditsDialog extends BaseDialog {
     this.payAmountInput = this.root
       .getByTestId('top-up-pay-amount')
       .locator('input')
+    this.getAmountInput = this.root
+      .getByTestId('top-up-get-amount')
+      .locator('input')
+    this.incrementPayAmountButton = this.root
+      .getByTestId('top-up-pay-amount')
+      .getByRole('button', { name: 'Increment' })
+    this.incrementGetAmountButton = this.root
+      .getByTestId('top-up-get-amount')
+      .getByRole('button', { name: 'Increment' })
     this.pricingLink = this.root.getByRole('link', {
       name: 'View pricing details'
     })

browser_tests/tests/dialogs/topUpCreditsDialog.spec.ts

@@ -29,13 +29,34 @@ test.describe('TopUpCredits dialog', { tag: '@ui' }, () => {
     )
   })
 
-  test('selecting a preset amount updates the pay amount', async () => {
+  test('preset amounts update both dollars and credits', async () => {
     await dialog.open()
 
-    // Default preset is $50, click $10 instead
+    await expect(dialog.payAmountInput).toHaveValue('50')
+    await expect(dialog.getAmountInput).toHaveValue('10,550')
+
     await dialog.preset10.click()
 
     await expect(dialog.payAmountInput).toHaveValue('10')
+    await expect(dialog.getAmountInput).toHaveValue('2,110')
+  })
+
+  test('dollar increments update the credit conversion', async () => {
+    await dialog.open()
+
+    await dialog.incrementPayAmountButton.click()
+
+    await expect(dialog.payAmountInput).toHaveValue('55')
+    await expect(dialog.getAmountInput).toHaveValue('11,605')
+  })
+
+  test('credit increments update the dollar conversion', async () => {
+    await dialog.open()
+
+    await dialog.incrementGetAmountButton.click()
+
+    await expect(dialog.getAmountInput).toHaveValue('11,605')
+    await expect(dialog.payAmountInput).toHaveValue('55')
   })
 
   test('close button dismisses dialog', async () => {

browser_tests/tests/dialogs/topUpDeepLink.spec.ts

@@ -2,6 +2,7 @@ import { expect } from '@playwright/test'
 import type { Page } from '@playwright/test'
 
 import { comfyPageFixture as test } from '@e2e/fixtures/ComfyPage'
+import { TopUpCreditsDialog } from '@e2e/fixtures/components/TopUpCreditsDialog'
 import { CLOUD_SELF_EMAIL } from '@e2e/fixtures/helpers/CloudAuthHelper'
 import { APP_URL, setupCloudApp } from '@e2e/fixtures/utils/cloudAppSetup'
 import { jsonRoute } from '@e2e/fixtures/utils/jsonRoute'
@@ -27,7 +28,9 @@ test.describe('Top-up deep link', { tag: '@cloud' }, () => {
     await expect(page).not.toHaveURL(/[?&]topup=/)
   })
 
-  test('opens the top-up dialog for a team owner', async ({ page }) => {
+  test('opens workspace top-up and converts credits bidirectionally', async ({
+    page
+  }) => {
     test.slow()
     await setupCloudApp(page, {
       workspace: workspace('team', 'owner'),
@@ -44,6 +47,15 @@ test.describe('Top-up deep link', { tag: '@cloud' }, () => {
 
     await expect(topUpHeading(page)).toBeVisible({ timeout: 45_000 })
     await expect(page).not.toHaveURL(/[?&]topup=/)
+
+    const dialog = new TopUpCreditsDialog(page)
+    await expect(dialog.payAmountInput).toHaveValue('50')
+    await expect(dialog.getAmountInput).toHaveValue('10,550')
+
+    await dialog.incrementGetAmountButton.click()
+
+    await expect(dialog.getAmountInput).toHaveValue('11,605')
+    await expect(dialog.payAmountInput).toHaveValue('55')
   })
 
   test('routes a lapsed subscriber to the subscription paywall', async ({

src/components/dialog/content/TopUpCreditsDialogContentLegacy.vue

@@ -74,7 +74,7 @@
       </div>
 
       <!-- You Get -->
-      <div class="flex flex-1 flex-col gap-3">
+      <div class="flex flex-1 flex-col gap-3" data-testid="top-up-get-amount">
         <div class="text-sm text-muted-foreground">
           {{ $t('credits.topUp.youGet') }}
         </div>

src/platform/workspace/components/TopUpCreditsDialogContentWorkspace.vue

@@ -135,7 +135,7 @@
       </div>
 
       <!-- You Get -->
-      <div class="flex flex-1 flex-col gap-3">
+      <div class="flex flex-1 flex-col gap-3" data-testid="top-up-get-amount">
         <div class="text-sm text-muted-foreground">
           {{ $t('credits.topUp.youGet') }}
         </div>