test(e2e/ui): cover the Budgets page create, edit and delete flows

[yuneng-berri]

TLDR

Problem this solves:

• Budgets page has zero browser coverage
• Budget edits that silently clear limits ship unnoticed
• Only caught by hand at RC time, if at all

How it solves it:

• Three Playwright tests: create, edit, delete
• Each reads the budget back from /budget/list
• Edit test pins limits a spend-cap change must not touch

User Flow

Before: an admin who edits a budget's spend cap in the UI has no automated check that the budget's rate limits survive the edit

1. They open https://litellm-domain/ui/budgets and click Create Budget
2. They enter a budget ID, a TPM of 5000, an RPM of 60, expand Optional Settings and set Max Budget to 25.50
3. The budget appears in the table
4. They reopen it, raise Max Budget to 99 and save
5. Nothing in CI checks that TPM and RPM are still 5000 and 60 afterwards, so a form that stops seeding those fields ships green

After: the same three steps run on every PR, and the read-back catches a cleared limit

1. The suite drives the same Create Budget flow at https://litellm-domain/ui/budgets
2. It reads GET /budget/list back with the master key and asserts max_budget 25.5, tpm_limit 5000, rpm_limit 60 and budget_duration "7d"
3. It raises Max Budget to 99 through the row's Edit budget action and asserts max_budget is 99 while tpm_limit and rpm_limit are unchanged
4. It deletes the budget through the row's Delete budget action and polls GET /budget/list until the budget is gone

Relevant issues

Linear ticket

Pre-Submission checklist

• I have added meaningful tests
• The handful of test files covering my change pass locally
• My PR passes all required CI/CD checks
• My PR's scope is as isolated as possible; it only solves 1 specific problem
• I have received a Greptile Confidence Score of at least 4/5 before requesting a maintainer review

Screenshots / Proof of Fix

Shared setup, from tests/e2e/ui:

./run_e2e.sh            # brings up postgres, the mock LLM, the proxy on :4000 and seeds the DB

Before (3fadcd7, the merge base)

The Budgets page has no browser coverage

1. Command:

$ ls tests/e2e/ui/tests/
auth  internal-user  internal-viewer  login  logs  mcp  migration  modelHub  modelsPage
navigation  playground  proxy-admin  settings  team-admin  usage  users

2. Output: no budgets directory, and no spec anywhere touches /ui/budgets:

$ grep -rl "Page.Budgets\|ui/budgets" tests/e2e/ui/tests/
$

A budget edit that clears the rate limits passes CI

1. Patch edit_budget_modal.tsx so the form stops seeding tpm_limit from the existing budget (a one-line stand-in for the "edit X wipes Y" bug class):

$ sed -i 's/  tpm_limit: budget.tpm_limit,/  tpm_limit: null,/' \
    "ui/litellm-dashboard/src/app/(dashboard)/budgets/_components/edit_budget_modal.tsx"
$ cd ui/litellm-dashboard && npm run build && cd -

2. Run the UI e2e suite. Output: green, because nothing covers the page.

After (7e48bfe)

The three new tests pass against a clean build

1. Command:

$ npx playwright test --config playwright.config.ts --workers=1 tests/budgets

2. Output:

Running 3 tests using 1 worker

  [chromium] › tests/budgets/budgets.spec.ts:43:7 › Budgets › Create a budget with rate limits and a spend cap
  [chromium] › tests/budgets/budgets.spec.ts:81:7 › Budgets › Raising a budget's spend cap leaves its rate limits alone
  [chromium] › tests/budgets/budgets.spec.ts:112:7 › Budgets › Delete a budget
  3 passed (13.1s)

The same edit regression is now caught

1. Re-apply the same one-line patch to edit_budget_modal.tsx and rebuild the UI.
2. Command:

$ npx playwright test --config playwright.config.ts --workers=1 tests/budgets

3. Output:

  1) [chromium] › tests/budgets/budgets.spec.ts:81:7 › Budgets › Raising a budget's spend cap leaves its rate limits alone

    Error: TPM limit untouched by a spend-cap edit

    expect(received).toBe(expected) // Object.is equality

    Expected: 1000
    Received: null

      106 |     const stored = await findBudget(page, budgetId);
      107 |     expect(stored?.max_budget, "spend cap raised").toBe(99);
    > 108 |     expect(stored?.tpm_limit, "TPM limit untouched by a spend-cap edit").toBe(1000);

  1 failed
  2 passed (14.6s)

4. Revert the patch, rebuild, and the suite is green again.

Flake check: 5 repeats at 4 workers

1. Command:

$ npx playwright test --config playwright.config.ts --workers=4 --repeat-each=5 --retries=0 tests/budgets

2. Output:

Running 15 tests using 4 workers
  15 passed (26.3s)

Type

✅ Test

Caveats (if any)

Low

• Budget IDs carry a timestamp, so runs leave rows behind
• Each test filters the table to its own budget ID

QA runbook

• tests/e2e/ui/tests/budgets/budgets.spec.ts › Budgets › Create a budget with rate limits and a spend cap - a budget created through the UI persists every field the form collected

  • Open http://localhost:4000/ui/budgets and click Create Budget
  • Enter a budget ID, TPM 5000, RPM 60, then expand Optional Settings and set Max Budget 25.50 and Reset Budget weekly
  • Expect the new row in the table showing $25.50
  • curl -s http://localhost:4000/budget/list -H "Authorization: Bearer sk-1234" | jq '.[] | select(.budget_id=="<your id>")' and expect max_budget 25.5, tpm_limit 5000, rpm_limit 60, budget_duration "7d"
  • Sanity check: this test makes sense to add and is not hand-wavey or potentially flaky

• tests/e2e/ui/tests/budgets/budgets.spec.ts › Budgets › Raising a budget's spend cap leaves its rate limits alone - editing one field through the UI does not clear the others

  • curl -X POST http://localhost:4000/budget/new -H "Authorization: Bearer sk-1234" -H 'Content-Type: application/json' -d '{"budget_id":"qa-budget","max_budget":10,"tpm_limit":1000,"rpm_limit":20}'
  • Open http://localhost:4000/ui/budgets, search for qa-budget, open its row actions and pick Edit budget
  • Expand Optional Settings, set Max Budget to 99 and click Save
  • Expect the row to show $99.00
  • curl -s http://localhost:4000/budget/list -H "Authorization: Bearer sk-1234" | jq '.[] | select(.budget_id=="qa-budget")' and expect max_budget 99 with tpm_limit still 1000 and rpm_limit still 20
  • Sanity check: this test makes sense to add and is not hand-wavey or potentially flaky

• tests/e2e/ui/tests/budgets/budgets.spec.ts › Budgets › Delete a budget - a deleted budget stops being served, not just hidden

  • curl -X POST http://localhost:4000/budget/new -H "Authorization: Bearer sk-1234" -H 'Content-Type: application/json' -d '{"budget_id":"qa-budget-delete","max_budget":5}'
  • Open http://localhost:4000/ui/budgets, search for qa-budget-delete, open its row actions, pick Delete budget and confirm
  • Expect the row to disappear from the table
  • curl -s http://localhost:4000/budget/list -H "Authorization: Bearer sk-1234" | jq '[.[] | select(.budget_id=="qa-budget-delete")] | length' and expect 0
  • Sanity check: this test makes sense to add and is not hand-wavey or potentially flaky

Final Attestation

• The tests check the right things, including the edge cases, and regressions in the respective real-world customer use-cases are not possible after this PR

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ yuneng-berri
❌ claude
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[greptile-apps]

Greptile Summary

The PR adds Playwright coverage for creating, editing, and deleting budgets through the dashboard.

• Verifies persisted create-form values through /budget/list.
• Checks that spend-cap edits preserve existing rate limits.
• Polls the management API to confirm deletion is persisted.

Confidence Score: 5/5

The PR appears safe to merge.

No blocking failure remains.

Important Files Changed

Filename	Overview
tests/e2e/ui/tests/budgets/budgets.spec.ts	Adds end-to-end coverage for the Budgets page’s create, edit, and delete workflows with API read-back assertions.

_{Reviews (3): Last reviewed commit: "Merge remote-tracking branch 'origin/lit..." | Re-trigger Greptile}

[yuneng-berri]

@greptileai

Trimmed the comments that restated the test steps, keeping the two that explain why an assertion exists.

---

Generated by Claude Code

[yuneng-berri]

@greptileai please re-review. Head now includes a merge of litellm_internal_staging, so the last review predates the current diff.