From c34adb4ab2bd1b6579cc3eb9a3922cf9703aae58 Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Thu, 17 Sep 2026 22:44:03 -0700 Subject: [PATCH 01/10] test(ui): cover narrowed dashboard form journeys --- tests/e2e/ui/tests/prompts/addPrompt.spec.ts | 55 ++++++++++++++ .../tests/tagManagement/tagManagement.spec.ts | 76 +++++++++++++++++++ ...PaginatedSearchSelect.integration.test.tsx | 45 +++++++++++ .../shared/SearchSelect.integration.test.tsx | 33 ++++++++ .../view_logs/RequestLogsFilters.test.tsx | 11 +++ 5 files changed, 220 insertions(+) create mode 100644 tests/e2e/ui/tests/prompts/addPrompt.spec.ts create mode 100644 tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts diff --git a/tests/e2e/ui/tests/prompts/addPrompt.spec.ts b/tests/e2e/ui/tests/prompts/addPrompt.spec.ts new file mode 100644 index 00000000000..cd87e4d3b56 --- /dev/null +++ b/tests/e2e/ui/tests/prompts/addPrompt.spec.ts @@ -0,0 +1,55 @@ +import { test, expect } from "@playwright/test"; + +import { ADMIN_STORAGE_PATH } from "../../constants"; +import { Page as DashboardPage } from "../../fixtures/pages"; +import { navigateToPage } from "../../helpers/navigation"; +import { readBack } from "../../helpers/roundTrip"; +import { masterKey, uniqueSuffix } from "../../helpers/traffic"; + +test.use({ storageState: ADMIN_STORAGE_PATH }); + +test.describe("Prompt upload form", () => { + test("uploads a prompt file and reads the created prompt back", async ({ + page, + }) => { + const promptId = `e2e-prompt-${uniqueSuffix()}`; + await navigateToPage(page, DashboardPage.Prompts); + await page.getByRole("button", { name: "Upload .prompt File" }).click(); + + try { + await expect( + page.getByRole("dialog", { name: "Add New Prompt" }), + ).toBeVisible(); + await page.getByLabel("Prompt ID").fill(promptId); + await page.locator('input[type="file"]').setInputFiles({ + name: "e2e.prompt", + mimeType: "text/plain", + buffer: Buffer.from( + 'model: fake-openai-gpt-4\ntemplate: "Hello {{name}}"\n', + ), + }); + await expect(page.getByText("Selected: e2e.prompt")).toBeVisible(); + await page.getByRole("button", { name: "Create Prompt" }).click(); + + await expect + .poll(async () => { + const response = await page.request.get( + `/prompts/${encodeURIComponent(promptId)}/info?environment=development`, + { + headers: { Authorization: `Bearer ${masterKey()}` }, + }, + ); + return response.ok(); + }) + .toBe(true); + await expect(page.getByText(promptId, { exact: true })).toBeVisible(); + } finally { + await page.request.delete( + `/prompts/${encodeURIComponent(promptId)}?environment=development`, + { + headers: { Authorization: `Bearer ${masterKey()}` }, + }, + ); + } + }); +}); diff --git a/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts b/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts new file mode 100644 index 00000000000..785211463dd --- /dev/null +++ b/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts @@ -0,0 +1,76 @@ +import { test, expect } from "@playwright/test"; + +import { ADMIN_STORAGE_PATH } from "../../constants"; +import { Page as DashboardPage } from "../../fixtures/pages"; +import { navigateToPage } from "../../helpers/navigation"; +import { captureRequestBody, readBack } from "../../helpers/roundTrip"; +import { masterKey, uniqueSuffix } from "../../helpers/traffic"; + +test.use({ storageState: ADMIN_STORAGE_PATH }); + +test.describe("Tag management", () => { + test("creates, edits, reopens, and reads back a tag", async ({ page }) => { + const tagName = `e2e-tag-${uniqueSuffix()}`; + const description = "synthetic tag description"; + const updatedDescription = `${description} updated`; + + await navigateToPage(page, DashboardPage.TagManagement); + await page.getByRole("button", { name: "+ Create New Tag" }).click(); + + try { + await expect( + page.getByRole("dialog", { name: "Create New Tag" }), + ).toBeVisible(); + await page.getByLabel("Tag Name").fill(tagName); + await page.getByLabel("Description").fill(description); + await page.getByRole("button", { name: "Create Tag" }).click(); + + await expect + .poll(async () => { + const response = await readBack< + Record> + >(page, "/tag/list"); + return Object.values(response).some((tag) => tag.name === tagName); + }) + .toBe(true); + await expect(page.getByText(tagName, { exact: true })).toBeVisible(); + + await page.getByText(tagName, { exact: true }).click(); + await expect(page.getByText("Tag Name:")).toBeVisible(); + await page.getByRole("button", { name: "Edit Tag" }).click(); + await page.getByLabel("Description").fill(updatedDescription); + const updateBody = await captureRequestBody( + page, + { method: "POST", urlIncludes: "/tag/update" }, + () => page.getByRole("button", { name: "Save Changes" }).click(), + ); + expect(updateBody).toMatchObject({ + name: tagName, + description: updatedDescription, + }); + + await expect + .poll(async () => { + const infoResponse = await page.request.post("/tag/info", { + headers: { Authorization: `Bearer ${masterKey()}` }, + data: { names: [tagName] }, + }); + expect(infoResponse.ok()).toBe(true); + const info = (await infoResponse.json()) as Record< + string, + { description?: string } + >; + return info[tagName]?.description; + }) + .toBe(updatedDescription); + } finally { + await page.request.post("/tag/delete", { + headers: { + Authorization: `Bearer ${masterKey()}`, + "Content-Type": "application/json", + }, + data: { name: tagName }, + }); + } + }); +}); diff --git a/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.integration.test.tsx b/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.integration.test.tsx index 2b948ca8420..6d30f1513ef 100644 --- a/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.integration.test.tsx +++ b/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.integration.test.tsx @@ -1,5 +1,6 @@ import { fireEvent, renderWithProviders as render, screen, waitFor } from "../../../tests/test-utils"; import userEvent from "@testing-library/user-event"; +import { useQuery } from "@tanstack/react-query"; import { useState } from "react"; import { describe, expect, it, vi } from "vitest"; @@ -406,4 +407,48 @@ describe("PaginatedSearchSelect", () => { expect(input).toHaveValue("aliasalpha"); await waitFor(() => expect(onSearchChange).toHaveBeenLastCalledWith("aliasalpha")); }); + + it("keeps the latest query results when an earlier response resolves last", async () => { + const pending = new Map void>(); + + function QueryBackedSelect() { + const [query, setQuery] = useState(""); + const result = useQuery({ + queryKey: ["paginated-select-race", query], + queryFn: () => + new Promise((resolve) => { + pending.set(query, resolve); + }), + enabled: query.length > 0, + }); + return ( + <> + + + + + ); + } + + const user = userEvent.setup(); + render(); + await user.click(screen.getByRole("button", { name: "Search A" })); + await user.click(screen.getByRole("button", { name: "Search B" })); + await waitFor(() => { + expect(pending.has("A")).toBe(true); + expect(pending.has("B")).toBe(true); + }); + + pending.get("B")?.([{ label: "B result", value: "b" }]); + await user.click(screen.getByRole("combobox")); + expect(await screen.findByText("B result")).toBeInTheDocument(); + + pending.get("A")?.([{ label: "A result", value: "a" }]); + await waitFor(() => expect(screen.queryByText("A result")).not.toBeInTheDocument()); + expect(screen.getByText("B result")).toBeInTheDocument(); + }); }); diff --git a/ui/litellm-dashboard/src/components/shared/SearchSelect.integration.test.tsx b/ui/litellm-dashboard/src/components/shared/SearchSelect.integration.test.tsx index c981010dff9..ed83acef14a 100644 --- a/ui/litellm-dashboard/src/components/shared/SearchSelect.integration.test.tsx +++ b/ui/litellm-dashboard/src/components/shared/SearchSelect.integration.test.tsx @@ -111,4 +111,37 @@ describe("SearchSelect", () => { expect(screen.queryByText("Growth")).not.toBeInTheDocument(); expect(onValueChange).not.toHaveBeenCalled(); }); + + it("supports keyboard select, clear, escape, blur, and reopen", async () => { + const onValueChange = vi.fn(); + const user = userEvent.setup(); + function Controlled() { + const [value, setValue] = useState(null); + return ( + { + setValue(next); + onValueChange(next); + }} + /> + ); + } + + render(); + const input = screen.getByRole("combobox"); + await user.tab(); + await user.keyboard("{Enter}"); + await user.keyboard("{ArrowDown}{Enter}"); + expect(onValueChange).toHaveBeenLastCalledWith("team-1"); + const clear = screen.getByRole("button", { name: "Clear" }); + clear.focus(); + await user.keyboard("{Enter}"); + expect(onValueChange).toHaveBeenLastCalledWith(null); + await user.keyboard("{Escape}"); + await user.tab(); + await user.tab({ shift: true }); + expect(input).toHaveFocus(); + }); }); diff --git a/ui/litellm-dashboard/src/components/view_logs/RequestLogsFilters.test.tsx b/ui/litellm-dashboard/src/components/view_logs/RequestLogsFilters.test.tsx index 5a35c7ae16b..8d1847e0121 100644 --- a/ui/litellm-dashboard/src/components/view_logs/RequestLogsFilters.test.tsx +++ b/ui/litellm-dashboard/src/components/view_logs/RequestLogsFilters.test.tsx @@ -344,4 +344,15 @@ describe("RequestLogsFilters", () => { expect(set).toHaveBeenCalledWith(LOG_FILTER_IDS.CACHE_STATUS, undefined); }); + + it("clears the raw Error Code combobox through the undefined filter contract", async () => { + const user = userEvent.setup(); + const { set } = renderFilters({ [LOG_FILTER_IDS.ERROR_CODE]: "429" }); + const input = await screen.findByPlaceholderText("Select or type an error code"); + + await user.click(input); + await user.click(screen.getByRole("button", { name: "Clear", hidden: true })); + + expect(set).toHaveBeenCalledWith(LOG_FILTER_IDS.ERROR_CODE, undefined); + }); }); From 8d1ca16652056512999a61c87e96ae3aaf9c236d Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Thu, 17 Sep 2026 23:06:17 -0700 Subject: [PATCH 02/10] test(ui): strengthen dashboard journey assertions --- tests/e2e/ui/tests/prompts/addPrompt.spec.ts | 14 ++++++++--- .../tests/tagManagement/tagManagement.spec.ts | 3 ++- ...PaginatedSearchSelect.integration.test.tsx | 25 ++++++------------- .../shared/SearchSelect.integration.test.tsx | 9 +++---- 4 files changed, 24 insertions(+), 27 deletions(-) diff --git a/tests/e2e/ui/tests/prompts/addPrompt.spec.ts b/tests/e2e/ui/tests/prompts/addPrompt.spec.ts index cd87e4d3b56..f9868f7b04b 100644 --- a/tests/e2e/ui/tests/prompts/addPrompt.spec.ts +++ b/tests/e2e/ui/tests/prompts/addPrompt.spec.ts @@ -13,6 +13,7 @@ test.describe("Prompt upload form", () => { page, }) => { const promptId = `e2e-prompt-${uniqueSuffix()}`; + const promptContent = "Hello {{name}}"; await navigateToPage(page, DashboardPage.Prompts); await page.getByRole("button", { name: "Upload .prompt File" }).click(); @@ -25,7 +26,7 @@ test.describe("Prompt upload form", () => { name: "e2e.prompt", mimeType: "text/plain", buffer: Buffer.from( - 'model: fake-openai-gpt-4\ntemplate: "Hello {{name}}"\n', + `model: fake-openai-gpt-4\ntemplate: "${promptContent}"\n`, ), }); await expect(page.getByText("Selected: e2e.prompt")).toBeVisible(); @@ -39,17 +40,22 @@ test.describe("Prompt upload form", () => { headers: { Authorization: `Bearer ${masterKey()}` }, }, ); - return response.ok(); + if (!response.ok()) return undefined; + const promptInfo = (await response.json()) as { + raw_prompt_template?: { content?: string }; + }; + return promptInfo.raw_prompt_template?.content; }) - .toBe(true); + .toContain(promptContent); await expect(page.getByText(promptId, { exact: true })).toBeVisible(); } finally { - await page.request.delete( + const deleteResponse = await page.request.delete( `/prompts/${encodeURIComponent(promptId)}?environment=development`, { headers: { Authorization: `Bearer ${masterKey()}` }, }, ); + expect(deleteResponse.ok()).toBe(true); } }); }); diff --git a/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts b/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts index 785211463dd..e1d5138ea90 100644 --- a/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts +++ b/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts @@ -64,13 +64,14 @@ test.describe("Tag management", () => { }) .toBe(updatedDescription); } finally { - await page.request.post("/tag/delete", { + const deleteResponse = await page.request.post("/tag/delete", { headers: { Authorization: `Bearer ${masterKey()}`, "Content-Type": "application/json", }, data: { name: tagName }, }); + expect(deleteResponse.ok()).toBe(true); } }); }); diff --git a/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.integration.test.tsx b/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.integration.test.tsx index 6d30f1513ef..905610a77e6 100644 --- a/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.integration.test.tsx +++ b/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.integration.test.tsx @@ -421,27 +421,18 @@ describe("PaginatedSearchSelect", () => { }), enabled: query.length > 0, }); - return ( - <> - - - - - ); + return ; } const user = userEvent.setup(); render(); - await user.click(screen.getByRole("button", { name: "Search A" })); - await user.click(screen.getByRole("button", { name: "Search B" })); - await waitFor(() => { - expect(pending.has("A")).toBe(true); - expect(pending.has("B")).toBe(true); - }); + const input = screen.getByRole("combobox"); + await user.click(input); + await user.type(input, "A"); + await waitFor(() => expect(pending.has("A")).toBe(true)); + await user.clear(input); + await user.type(input, "B"); + await waitFor(() => expect(pending.has("B")).toBe(true)); pending.get("B")?.([{ label: "B result", value: "b" }]); await user.click(screen.getByRole("combobox")); diff --git a/ui/litellm-dashboard/src/components/shared/SearchSelect.integration.test.tsx b/ui/litellm-dashboard/src/components/shared/SearchSelect.integration.test.tsx index ed83acef14a..9f320049b09 100644 --- a/ui/litellm-dashboard/src/components/shared/SearchSelect.integration.test.tsx +++ b/ui/litellm-dashboard/src/components/shared/SearchSelect.integration.test.tsx @@ -112,7 +112,7 @@ describe("SearchSelect", () => { expect(onValueChange).not.toHaveBeenCalled(); }); - it("supports keyboard select, clear, escape, blur, and reopen", async () => { + it("supports keyboard select, clear, and reselect", async () => { const onValueChange = vi.fn(); const user = userEvent.setup(); function Controlled() { @@ -139,9 +139,8 @@ describe("SearchSelect", () => { clear.focus(); await user.keyboard("{Enter}"); expect(onValueChange).toHaveBeenLastCalledWith(null); - await user.keyboard("{Escape}"); - await user.tab(); - await user.tab({ shift: true }); - expect(input).toHaveFocus(); + input.focus(); + await user.keyboard("{Enter}{ArrowDown}{Enter}"); + expect(onValueChange).toHaveBeenLastCalledWith("team-1"); }); }); From b4c3adc37d1be33550803bce9c88bc190c8f4ec6 Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Thu, 17 Sep 2026 23:12:33 -0700 Subject: [PATCH 03/10] test(ui): assert dashboard form cleanup --- tests/e2e/ui/tests/prompts/addPrompt.spec.ts | 39 ++++++++++++------- .../tests/tagManagement/tagManagement.spec.ts | 30 +++++++------- 2 files changed, 40 insertions(+), 29 deletions(-) diff --git a/tests/e2e/ui/tests/prompts/addPrompt.spec.ts b/tests/e2e/ui/tests/prompts/addPrompt.spec.ts index f9868f7b04b..a4a6cf62b7e 100644 --- a/tests/e2e/ui/tests/prompts/addPrompt.spec.ts +++ b/tests/e2e/ui/tests/prompts/addPrompt.spec.ts @@ -17,21 +17,32 @@ test.describe("Prompt upload form", () => { await navigateToPage(page, DashboardPage.Prompts); await page.getByRole("button", { name: "Upload .prompt File" }).click(); - try { - await expect( - page.getByRole("dialog", { name: "Add New Prompt" }), - ).toBeVisible(); - await page.getByLabel("Prompt ID").fill(promptId); - await page.locator('input[type="file"]').setInputFiles({ - name: "e2e.prompt", - mimeType: "text/plain", - buffer: Buffer.from( - `model: fake-openai-gpt-4\ntemplate: "${promptContent}"\n`, - ), - }); - await expect(page.getByText("Selected: e2e.prompt")).toBeVisible(); - await page.getByRole("button", { name: "Create Prompt" }).click(); + await expect( + page.getByRole("dialog", { name: "Add New Prompt" }), + ).toBeVisible(); + await page.getByLabel("Prompt ID").fill(promptId); + await page.locator('input[type="file"]').setInputFiles({ + name: "e2e.prompt", + mimeType: "text/plain", + buffer: Buffer.from( + `model: fake-openai-gpt-4\ntemplate: "${promptContent}"\n`, + ), + }); + await expect(page.getByText("Selected: e2e.prompt")).toBeVisible(); + await page.getByRole("button", { name: "Create Prompt" }).click(); + await expect + .poll(async () => { + const response = await page.request.get( + `/prompts/${encodeURIComponent(promptId)}/info?environment=development`, + { + headers: { Authorization: `Bearer ${masterKey()}` }, + }, + ); + return response.ok(); + }) + .toBe(true); + try { await expect .poll(async () => { const response = await page.request.get( diff --git a/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts b/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts index e1d5138ea90..1104031263e 100644 --- a/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts +++ b/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts @@ -17,22 +17,22 @@ test.describe("Tag management", () => { await navigateToPage(page, DashboardPage.TagManagement); await page.getByRole("button", { name: "+ Create New Tag" }).click(); - try { - await expect( - page.getByRole("dialog", { name: "Create New Tag" }), - ).toBeVisible(); - await page.getByLabel("Tag Name").fill(tagName); - await page.getByLabel("Description").fill(description); - await page.getByRole("button", { name: "Create Tag" }).click(); + await expect( + page.getByRole("dialog", { name: "Create New Tag" }), + ).toBeVisible(); + await page.getByLabel("Tag Name").fill(tagName); + await page.getByLabel("Description").fill(description); + await page.getByRole("button", { name: "Create Tag" }).click(); - await expect - .poll(async () => { - const response = await readBack< - Record> - >(page, "/tag/list"); - return Object.values(response).some((tag) => tag.name === tagName); - }) - .toBe(true); + await expect + .poll(async () => { + const response = await readBack< + Record> + >(page, "/tag/list"); + return Object.values(response).some((tag) => tag.name === tagName); + }) + .toBe(true); + try { await expect(page.getByText(tagName, { exact: true })).toBeVisible(); await page.getByText(tagName, { exact: true }).click(); From 035271b510d5f4f4053685cf156410775d8e5d46 Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Thu, 17 Sep 2026 23:15:31 -0700 Subject: [PATCH 04/10] test(ui): preserve cleanup on failed readback --- tests/e2e/ui/tests/prompts/addPrompt.spec.ts | 53 +++++++++---------- .../tests/tagManagement/tagManagement.spec.ts | 33 ++++++------ 2 files changed, 42 insertions(+), 44 deletions(-) diff --git a/tests/e2e/ui/tests/prompts/addPrompt.spec.ts b/tests/e2e/ui/tests/prompts/addPrompt.spec.ts index a4a6cf62b7e..2b254c78b10 100644 --- a/tests/e2e/ui/tests/prompts/addPrompt.spec.ts +++ b/tests/e2e/ui/tests/prompts/addPrompt.spec.ts @@ -17,32 +17,32 @@ test.describe("Prompt upload form", () => { await navigateToPage(page, DashboardPage.Prompts); await page.getByRole("button", { name: "Upload .prompt File" }).click(); - await expect( - page.getByRole("dialog", { name: "Add New Prompt" }), - ).toBeVisible(); - await page.getByLabel("Prompt ID").fill(promptId); - await page.locator('input[type="file"]').setInputFiles({ - name: "e2e.prompt", - mimeType: "text/plain", - buffer: Buffer.from( - `model: fake-openai-gpt-4\ntemplate: "${promptContent}"\n`, - ), - }); - await expect(page.getByText("Selected: e2e.prompt")).toBeVisible(); - await page.getByRole("button", { name: "Create Prompt" }).click(); - - await expect - .poll(async () => { - const response = await page.request.get( - `/prompts/${encodeURIComponent(promptId)}/info?environment=development`, - { - headers: { Authorization: `Bearer ${masterKey()}` }, - }, - ); - return response.ok(); - }) - .toBe(true); try { + await expect( + page.getByRole("dialog", { name: "Add New Prompt" }), + ).toBeVisible(); + await page.getByLabel("Prompt ID").fill(promptId); + await page.locator('input[type="file"]').setInputFiles({ + name: "e2e.prompt", + mimeType: "text/plain", + buffer: Buffer.from( + `model: fake-openai-gpt-4\ntemplate: "${promptContent}"\n`, + ), + }); + await expect(page.getByText("Selected: e2e.prompt")).toBeVisible(); + await page.getByRole("button", { name: "Create Prompt" }).click(); + + await expect + .poll(async () => { + const response = await page.request.get( + `/prompts/${encodeURIComponent(promptId)}/info?environment=development`, + { + headers: { Authorization: `Bearer ${masterKey()}` }, + }, + ); + return response.ok(); + }) + .toBe(true); await expect .poll(async () => { const response = await page.request.get( @@ -60,13 +60,12 @@ test.describe("Prompt upload form", () => { .toContain(promptContent); await expect(page.getByText(promptId, { exact: true })).toBeVisible(); } finally { - const deleteResponse = await page.request.delete( + await page.request.delete( `/prompts/${encodeURIComponent(promptId)}?environment=development`, { headers: { Authorization: `Bearer ${masterKey()}` }, }, ); - expect(deleteResponse.ok()).toBe(true); } }); }); diff --git a/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts b/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts index 1104031263e..785211463dd 100644 --- a/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts +++ b/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts @@ -17,22 +17,22 @@ test.describe("Tag management", () => { await navigateToPage(page, DashboardPage.TagManagement); await page.getByRole("button", { name: "+ Create New Tag" }).click(); - await expect( - page.getByRole("dialog", { name: "Create New Tag" }), - ).toBeVisible(); - await page.getByLabel("Tag Name").fill(tagName); - await page.getByLabel("Description").fill(description); - await page.getByRole("button", { name: "Create Tag" }).click(); - - await expect - .poll(async () => { - const response = await readBack< - Record> - >(page, "/tag/list"); - return Object.values(response).some((tag) => tag.name === tagName); - }) - .toBe(true); try { + await expect( + page.getByRole("dialog", { name: "Create New Tag" }), + ).toBeVisible(); + await page.getByLabel("Tag Name").fill(tagName); + await page.getByLabel("Description").fill(description); + await page.getByRole("button", { name: "Create Tag" }).click(); + + await expect + .poll(async () => { + const response = await readBack< + Record> + >(page, "/tag/list"); + return Object.values(response).some((tag) => tag.name === tagName); + }) + .toBe(true); await expect(page.getByText(tagName, { exact: true })).toBeVisible(); await page.getByText(tagName, { exact: true }).click(); @@ -64,14 +64,13 @@ test.describe("Tag management", () => { }) .toBe(updatedDescription); } finally { - const deleteResponse = await page.request.post("/tag/delete", { + await page.request.post("/tag/delete", { headers: { Authorization: `Bearer ${masterKey()}`, "Content-Type": "application/json", }, data: { name: tagName }, }); - expect(deleteResponse.ok()).toBe(true); } }); }); From 43f096dde8ef6c0a0c20036f0a595a7608ea2ea1 Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Thu, 17 Sep 2026 23:18:43 -0700 Subject: [PATCH 05/10] test(ui): preserve form failure evidence --- tests/e2e/ui/tests/prompts/addPrompt.spec.ts | 116 +++++++++------- .../tests/tagManagement/tagManagement.spec.ts | 124 ++++++++++-------- 2 files changed, 136 insertions(+), 104 deletions(-) diff --git a/tests/e2e/ui/tests/prompts/addPrompt.spec.ts b/tests/e2e/ui/tests/prompts/addPrompt.spec.ts index 2b254c78b10..b601b7e8c06 100644 --- a/tests/e2e/ui/tests/prompts/addPrompt.spec.ts +++ b/tests/e2e/ui/tests/prompts/addPrompt.spec.ts @@ -3,7 +3,6 @@ import { test, expect } from "@playwright/test"; import { ADMIN_STORAGE_PATH } from "../../constants"; import { Page as DashboardPage } from "../../fixtures/pages"; import { navigateToPage } from "../../helpers/navigation"; -import { readBack } from "../../helpers/roundTrip"; import { masterKey, uniqueSuffix } from "../../helpers/traffic"; test.use({ storageState: ADMIN_STORAGE_PATH }); @@ -14,58 +13,75 @@ test.describe("Prompt upload form", () => { }) => { const promptId = `e2e-prompt-${uniqueSuffix()}`; const promptContent = "Hello {{name}}"; - await navigateToPage(page, DashboardPage.Prompts); - await page.getByRole("button", { name: "Upload .prompt File" }).click(); + const cleanup = async (): Promise => { + try { + const response = await page.request.delete( + `/prompts/${encodeURIComponent(promptId)}?environment=development`, + { + headers: { Authorization: `Bearer ${masterKey()}` }, + }, + ); + return response.ok(); + } catch { + return false; + } + }; + const testOutcome = await (async () => { + try { + await navigateToPage(page, DashboardPage.Prompts); + await page.getByRole("button", { name: "Upload .prompt File" }).click(); + await expect( + page.getByRole("dialog", { name: "Add New Prompt" }), + ).toBeVisible(); + await page.getByLabel("Prompt ID").fill(promptId); + await page.locator('input[type="file"]').setInputFiles({ + name: "e2e.prompt", + mimeType: "text/plain", + buffer: Buffer.from( + `model: fake-openai-gpt-4\ntemplate: "${promptContent}"\n`, + ), + }); + await expect(page.getByText("Selected: e2e.prompt")).toBeVisible(); + await page.getByRole("button", { name: "Create Prompt" }).click(); + + await expect + .poll(async () => { + const response = await page.request.get( + `/prompts/${encodeURIComponent(promptId)}/info?environment=development`, + { + headers: { Authorization: `Bearer ${masterKey()}` }, + }, + ); + return response.ok(); + }) + .toBe(true); + await expect + .poll(async () => { + const response = await page.request.get( + `/prompts/${encodeURIComponent(promptId)}/info?environment=development`, + { + headers: { Authorization: `Bearer ${masterKey()}` }, + }, + ); + if (!response.ok()) return undefined; + const promptInfo = (await response.json()) as { + raw_prompt_template?: { content?: string }; + }; + return promptInfo.raw_prompt_template?.content; + }) + .toContain(promptContent); + await expect(page.getByText(promptId, { exact: true })).toBeVisible(); + return { passed: true as const }; + } catch (error) { + return { passed: false as const, error }; + } + })(); try { - await expect( - page.getByRole("dialog", { name: "Add New Prompt" }), - ).toBeVisible(); - await page.getByLabel("Prompt ID").fill(promptId); - await page.locator('input[type="file"]').setInputFiles({ - name: "e2e.prompt", - mimeType: "text/plain", - buffer: Buffer.from( - `model: fake-openai-gpt-4\ntemplate: "${promptContent}"\n`, - ), - }); - await expect(page.getByText("Selected: e2e.prompt")).toBeVisible(); - await page.getByRole("button", { name: "Create Prompt" }).click(); - - await expect - .poll(async () => { - const response = await page.request.get( - `/prompts/${encodeURIComponent(promptId)}/info?environment=development`, - { - headers: { Authorization: `Bearer ${masterKey()}` }, - }, - ); - return response.ok(); - }) - .toBe(true); - await expect - .poll(async () => { - const response = await page.request.get( - `/prompts/${encodeURIComponent(promptId)}/info?environment=development`, - { - headers: { Authorization: `Bearer ${masterKey()}` }, - }, - ); - if (!response.ok()) return undefined; - const promptInfo = (await response.json()) as { - raw_prompt_template?: { content?: string }; - }; - return promptInfo.raw_prompt_template?.content; - }) - .toContain(promptContent); - await expect(page.getByText(promptId, { exact: true })).toBeVisible(); + if (!testOutcome.passed) throw testOutcome.error; } finally { - await page.request.delete( - `/prompts/${encodeURIComponent(promptId)}?environment=development`, - { - headers: { Authorization: `Bearer ${masterKey()}` }, - }, - ); + const cleanupSucceeded = await cleanup(); + if (testOutcome.passed) expect(cleanupSucceeded).toBe(true); } }); }); diff --git a/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts b/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts index 785211463dd..4223324ff09 100644 --- a/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts +++ b/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts @@ -13,64 +13,80 @@ test.describe("Tag management", () => { const tagName = `e2e-tag-${uniqueSuffix()}`; const description = "synthetic tag description"; const updatedDescription = `${description} updated`; + const cleanup = async (): Promise => { + try { + const response = await page.request.post("/tag/delete", { + headers: { + Authorization: `Bearer ${masterKey()}`, + "Content-Type": "application/json", + }, + data: { name: tagName }, + }); + return response.ok(); + } catch { + return false; + } + }; + const testOutcome = await (async () => { + try { + await navigateToPage(page, DashboardPage.TagManagement); + await page.getByRole("button", { name: "+ Create New Tag" }).click(); + await expect( + page.getByRole("dialog", { name: "Create New Tag" }), + ).toBeVisible(); + await page.getByLabel("Tag Name").fill(tagName); + await page.getByLabel("Description").fill(description); + await page.getByRole("button", { name: "Create Tag" }).click(); - await navigateToPage(page, DashboardPage.TagManagement); - await page.getByRole("button", { name: "+ Create New Tag" }).click(); + await expect + .poll(async () => { + const response = await readBack< + Record> + >(page, "/tag/list"); + return Object.values(response).some((tag) => tag.name === tagName); + }) + .toBe(true); + await expect(page.getByText(tagName, { exact: true })).toBeVisible(); + + await page.getByText(tagName, { exact: true }).click(); + await expect(page.getByText("Tag Name:")).toBeVisible(); + await page.getByRole("button", { name: "Edit Tag" }).click(); + await page.getByLabel("Description").fill(updatedDescription); + const updateBody = await captureRequestBody( + page, + { method: "POST", urlIncludes: "/tag/update" }, + () => page.getByRole("button", { name: "Save Changes" }).click(), + ); + expect(updateBody).toMatchObject({ + name: tagName, + description: updatedDescription, + }); + + await expect + .poll(async () => { + const infoResponse = await page.request.post("/tag/info", { + headers: { Authorization: `Bearer ${masterKey()}` }, + data: { names: [tagName] }, + }); + expect(infoResponse.ok()).toBe(true); + const info = (await infoResponse.json()) as Record< + string, + { description?: string } + >; + return info[tagName]?.description; + }) + .toBe(updatedDescription); + return { passed: true as const }; + } catch (error) { + return { passed: false as const, error }; + } + })(); try { - await expect( - page.getByRole("dialog", { name: "Create New Tag" }), - ).toBeVisible(); - await page.getByLabel("Tag Name").fill(tagName); - await page.getByLabel("Description").fill(description); - await page.getByRole("button", { name: "Create Tag" }).click(); - - await expect - .poll(async () => { - const response = await readBack< - Record> - >(page, "/tag/list"); - return Object.values(response).some((tag) => tag.name === tagName); - }) - .toBe(true); - await expect(page.getByText(tagName, { exact: true })).toBeVisible(); - - await page.getByText(tagName, { exact: true }).click(); - await expect(page.getByText("Tag Name:")).toBeVisible(); - await page.getByRole("button", { name: "Edit Tag" }).click(); - await page.getByLabel("Description").fill(updatedDescription); - const updateBody = await captureRequestBody( - page, - { method: "POST", urlIncludes: "/tag/update" }, - () => page.getByRole("button", { name: "Save Changes" }).click(), - ); - expect(updateBody).toMatchObject({ - name: tagName, - description: updatedDescription, - }); - - await expect - .poll(async () => { - const infoResponse = await page.request.post("/tag/info", { - headers: { Authorization: `Bearer ${masterKey()}` }, - data: { names: [tagName] }, - }); - expect(infoResponse.ok()).toBe(true); - const info = (await infoResponse.json()) as Record< - string, - { description?: string } - >; - return info[tagName]?.description; - }) - .toBe(updatedDescription); + if (!testOutcome.passed) throw testOutcome.error; } finally { - await page.request.post("/tag/delete", { - headers: { - Authorization: `Bearer ${masterKey()}`, - "Content-Type": "application/json", - }, - data: { name: tagName }, - }); + const cleanupSucceeded = await cleanup(); + if (testOutcome.passed) expect(cleanupSucceeded).toBe(true); } }); }); From 0dc2f0b1c1ff86356d6e9ab9180f708402131df8 Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Thu, 17 Sep 2026 23:20:54 -0700 Subject: [PATCH 06/10] test(ui): protect dashboard form cleanup --- tests/e2e/ui/helpers/roundTrip.ts | 28 ++++++++++- tests/e2e/ui/tests/prompts/addPrompt.spec.ts | 42 ++++++---------- .../tests/tagManagement/tagManagement.spec.ts | 49 ++++++++----------- 3 files changed, 61 insertions(+), 58 deletions(-) diff --git a/tests/e2e/ui/helpers/roundTrip.ts b/tests/e2e/ui/helpers/roundTrip.ts index 8d6e264e622..ee484b8d512 100644 --- a/tests/e2e/ui/helpers/roundTrip.ts +++ b/tests/e2e/ui/helpers/roundTrip.ts @@ -12,17 +12,41 @@ export async function captureRequestBody( match: { method: string; urlIncludes: string }, action: () => Promise, ): Promise> { - const pending = page.waitForRequest((req) => req.method() === match.method && req.url().includes(match.urlIncludes)); + const pending = page.waitForRequest( + (req) => + req.method() === match.method && req.url().includes(match.urlIncludes), + ); await action(); const request = await pending; return JSON.parse(request.postData() ?? "{}") as Record; } /** Reads an endpoint as the master key, so a failure is bad data and not an expired UI token. */ -export async function readBack(page: Page, endpoint: string): Promise { +export async function readBack( + page: Page, + endpoint: string, +): Promise { const res = await page.request.get(endpoint, { headers: { Authorization: `Bearer ${masterKey()}` }, }); expect(res.ok(), `GET ${endpoint}`).toBe(true); return (await res.json()) as T; } + +export async function runWithCleanup( + action: () => Promise, + cleanup: () => Promise, +): Promise { + const outcome = await action().then( + () => ({ status: "success" as const }), + (error: unknown) => ({ status: "failure" as const, error }), + ); + try { + if (outcome.status === "failure") throw outcome.error; + } finally { + const cleanupSucceeded = await cleanup().catch(() => false); + if (outcome.status === "success" && !cleanupSucceeded) { + throw new Error("Failed to clean up UI E2E resource"); + } + } +} diff --git a/tests/e2e/ui/tests/prompts/addPrompt.spec.ts b/tests/e2e/ui/tests/prompts/addPrompt.spec.ts index b601b7e8c06..891739fda28 100644 --- a/tests/e2e/ui/tests/prompts/addPrompt.spec.ts +++ b/tests/e2e/ui/tests/prompts/addPrompt.spec.ts @@ -3,6 +3,7 @@ import { test, expect } from "@playwright/test"; import { ADMIN_STORAGE_PATH } from "../../constants"; import { Page as DashboardPage } from "../../fixtures/pages"; import { navigateToPage } from "../../helpers/navigation"; +import { runWithCleanup } from "../../helpers/roundTrip"; import { masterKey, uniqueSuffix } from "../../helpers/traffic"; test.use({ storageState: ADMIN_STORAGE_PATH }); @@ -13,21 +14,9 @@ test.describe("Prompt upload form", () => { }) => { const promptId = `e2e-prompt-${uniqueSuffix()}`; const promptContent = "Hello {{name}}"; - const cleanup = async (): Promise => { - try { - const response = await page.request.delete( - `/prompts/${encodeURIComponent(promptId)}?environment=development`, - { - headers: { Authorization: `Bearer ${masterKey()}` }, - }, - ); - return response.ok(); - } catch { - return false; - } - }; - const testOutcome = await (async () => { - try { + + await runWithCleanup( + async () => { await navigateToPage(page, DashboardPage.Prompts); await page.getByRole("button", { name: "Upload .prompt File" }).click(); await expect( @@ -71,17 +60,16 @@ test.describe("Prompt upload form", () => { }) .toContain(promptContent); await expect(page.getByText(promptId, { exact: true })).toBeVisible(); - return { passed: true as const }; - } catch (error) { - return { passed: false as const, error }; - } - })(); - - try { - if (!testOutcome.passed) throw testOutcome.error; - } finally { - const cleanupSucceeded = await cleanup(); - if (testOutcome.passed) expect(cleanupSucceeded).toBe(true); - } + }, + async () => { + const response = await page.request.delete( + `/prompts/${encodeURIComponent(promptId)}?environment=development`, + { + headers: { Authorization: `Bearer ${masterKey()}` }, + }, + ); + return response.ok(); + }, + ); }); }); diff --git a/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts b/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts index 4223324ff09..bf46b5ea161 100644 --- a/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts +++ b/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts @@ -3,7 +3,11 @@ import { test, expect } from "@playwright/test"; import { ADMIN_STORAGE_PATH } from "../../constants"; import { Page as DashboardPage } from "../../fixtures/pages"; import { navigateToPage } from "../../helpers/navigation"; -import { captureRequestBody, readBack } from "../../helpers/roundTrip"; +import { + captureRequestBody, + readBack, + runWithCleanup, +} from "../../helpers/roundTrip"; import { masterKey, uniqueSuffix } from "../../helpers/traffic"; test.use({ storageState: ADMIN_STORAGE_PATH }); @@ -13,22 +17,9 @@ test.describe("Tag management", () => { const tagName = `e2e-tag-${uniqueSuffix()}`; const description = "synthetic tag description"; const updatedDescription = `${description} updated`; - const cleanup = async (): Promise => { - try { - const response = await page.request.post("/tag/delete", { - headers: { - Authorization: `Bearer ${masterKey()}`, - "Content-Type": "application/json", - }, - data: { name: tagName }, - }); - return response.ok(); - } catch { - return false; - } - }; - const testOutcome = await (async () => { - try { + + await runWithCleanup( + async () => { await navigateToPage(page, DashboardPage.TagManagement); await page.getByRole("button", { name: "+ Create New Tag" }).click(); await expect( @@ -76,17 +67,17 @@ test.describe("Tag management", () => { return info[tagName]?.description; }) .toBe(updatedDescription); - return { passed: true as const }; - } catch (error) { - return { passed: false as const, error }; - } - })(); - - try { - if (!testOutcome.passed) throw testOutcome.error; - } finally { - const cleanupSucceeded = await cleanup(); - if (testOutcome.passed) expect(cleanupSucceeded).toBe(true); - } + }, + async () => { + const response = await page.request.post("/tag/delete", { + headers: { + Authorization: `Bearer ${masterKey()}`, + "Content-Type": "application/json", + }, + data: { name: tagName }, + }); + return response.ok(); + }, + ); }); }); From a8ab1187ca67f59432beed8b655e833f622a4055 Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Thu, 17 Sep 2026 23:23:48 -0700 Subject: [PATCH 07/10] test(ui): clean up synchronous browser failures --- tests/e2e/ui/helpers/roundTrip.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/tests/e2e/ui/helpers/roundTrip.ts b/tests/e2e/ui/helpers/roundTrip.ts index ee484b8d512..55eb5d6ad9c 100644 --- a/tests/e2e/ui/helpers/roundTrip.ts +++ b/tests/e2e/ui/helpers/roundTrip.ts @@ -37,10 +37,12 @@ export async function runWithCleanup( action: () => Promise, cleanup: () => Promise, ): Promise { - const outcome = await action().then( - () => ({ status: "success" as const }), - (error: unknown) => ({ status: "failure" as const, error }), - ); + const outcome = await Promise.resolve() + .then(action) + .then( + () => ({ status: "success" as const }), + (error: unknown) => ({ status: "failure" as const, error }), + ); try { if (outcome.status === "failure") throw outcome.error; } finally { From 1c08c78ad598f0fa1277305f5a32aa7ac45a2022 Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Thu, 17 Sep 2026 23:27:54 -0700 Subject: [PATCH 08/10] test(ui): retain primary cleanup failures --- tests/e2e/ui/helpers/roundTrip.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/tests/e2e/ui/helpers/roundTrip.ts b/tests/e2e/ui/helpers/roundTrip.ts index 55eb5d6ad9c..4175ba6ec72 100644 --- a/tests/e2e/ui/helpers/roundTrip.ts +++ b/tests/e2e/ui/helpers/roundTrip.ts @@ -46,7 +46,9 @@ export async function runWithCleanup( try { if (outcome.status === "failure") throw outcome.error; } finally { - const cleanupSucceeded = await cleanup().catch(() => false); + const cleanupSucceeded = await Promise.resolve() + .then(cleanup) + .catch(() => false); if (outcome.status === "success" && !cleanupSucceeded) { throw new Error("Failed to clean up UI E2E resource"); } From eb831d956ccb328411ebb86a0161ac7a23b4aba8 Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Thu, 17 Sep 2026 23:46:53 -0700 Subject: [PATCH 09/10] test(ui): address review feedback --- tests/e2e/ui/helpers/roundTrip.ts | 23 +++++++++--- tests/e2e/ui/tests/prompts/addPrompt.spec.ts | 4 +-- .../tests/tagManagement/tagManagement.spec.ts | 9 ++--- ...PaginatedSearchSelect.integration.test.tsx | 36 ------------------- 4 files changed, 26 insertions(+), 46 deletions(-) diff --git a/tests/e2e/ui/helpers/roundTrip.ts b/tests/e2e/ui/helpers/roundTrip.ts index 4175ba6ec72..1fc2d0aec1a 100644 --- a/tests/e2e/ui/helpers/roundTrip.ts +++ b/tests/e2e/ui/helpers/roundTrip.ts @@ -46,11 +46,26 @@ export async function runWithCleanup( try { if (outcome.status === "failure") throw outcome.error; } finally { - const cleanupSucceeded = await Promise.resolve() + const cleanupOutcome = await Promise.resolve() .then(cleanup) - .catch(() => false); - if (outcome.status === "success" && !cleanupSucceeded) { - throw new Error("Failed to clean up UI E2E resource"); + .then( + (succeeded) => + succeeded + ? { status: "success" as const } + : { + status: "failure" as const, + error: new Error("Failed to clean up UI E2E resource"), + }, + (error: unknown) => ({ status: "failure" as const, error }), + ); + if (cleanupOutcome.status === "failure") { + if (outcome.status === "failure") { + throw new AggregateError( + [outcome.error, cleanupOutcome.error], + "Action and cleanup failed", + ); + } + throw cleanupOutcome.error; } } } diff --git a/tests/e2e/ui/tests/prompts/addPrompt.spec.ts b/tests/e2e/ui/tests/prompts/addPrompt.spec.ts index 891739fda28..9d85236c4a6 100644 --- a/tests/e2e/ui/tests/prompts/addPrompt.spec.ts +++ b/tests/e2e/ui/tests/prompts/addPrompt.spec.ts @@ -27,7 +27,7 @@ test.describe("Prompt upload form", () => { name: "e2e.prompt", mimeType: "text/plain", buffer: Buffer.from( - `model: fake-openai-gpt-4\ntemplate: "${promptContent}"\n`, + `---\nmodel: fake-openai-gpt-4\n---\n${promptContent}\n`, ), }); await expect(page.getByText("Selected: e2e.prompt")).toBeVisible(); @@ -58,7 +58,7 @@ test.describe("Prompt upload form", () => { }; return promptInfo.raw_prompt_template?.content; }) - .toContain(promptContent); + .toBe(promptContent); await expect(page.getByText(promptId, { exact: true })).toBeVisible(); }, async () => { diff --git a/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts b/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts index bf46b5ea161..fe659080eab 100644 --- a/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts +++ b/tests/e2e/ui/tests/tagManagement/tagManagement.spec.ts @@ -31,10 +31,11 @@ test.describe("Tag management", () => { await expect .poll(async () => { - const response = await readBack< - Record> - >(page, "/tag/list"); - return Object.values(response).some((tag) => tag.name === tagName); + const response = await readBack>( + page, + "/tag/list", + ); + return response.some((tag) => tag.name === tagName); }) .toBe(true); await expect(page.getByText(tagName, { exact: true })).toBeVisible(); diff --git a/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.integration.test.tsx b/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.integration.test.tsx index 905610a77e6..2b948ca8420 100644 --- a/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.integration.test.tsx +++ b/ui/litellm-dashboard/src/components/shared/PaginatedSearchSelect.integration.test.tsx @@ -1,6 +1,5 @@ import { fireEvent, renderWithProviders as render, screen, waitFor } from "../../../tests/test-utils"; import userEvent from "@testing-library/user-event"; -import { useQuery } from "@tanstack/react-query"; import { useState } from "react"; import { describe, expect, it, vi } from "vitest"; @@ -407,39 +406,4 @@ describe("PaginatedSearchSelect", () => { expect(input).toHaveValue("aliasalpha"); await waitFor(() => expect(onSearchChange).toHaveBeenLastCalledWith("aliasalpha")); }); - - it("keeps the latest query results when an earlier response resolves last", async () => { - const pending = new Map void>(); - - function QueryBackedSelect() { - const [query, setQuery] = useState(""); - const result = useQuery({ - queryKey: ["paginated-select-race", query], - queryFn: () => - new Promise((resolve) => { - pending.set(query, resolve); - }), - enabled: query.length > 0, - }); - return ; - } - - const user = userEvent.setup(); - render(); - const input = screen.getByRole("combobox"); - await user.click(input); - await user.type(input, "A"); - await waitFor(() => expect(pending.has("A")).toBe(true)); - await user.clear(input); - await user.type(input, "B"); - await waitFor(() => expect(pending.has("B")).toBe(true)); - - pending.get("B")?.([{ label: "B result", value: "b" }]); - await user.click(screen.getByRole("combobox")); - expect(await screen.findByText("B result")).toBeInTheDocument(); - - pending.get("A")?.([{ label: "A result", value: "a" }]); - await waitFor(() => expect(screen.queryByText("A result")).not.toBeInTheDocument()); - expect(screen.getByText("B result")).toBeInTheDocument(); - }); }); From da3bd9e31c72e29a2a75ef82107d05e7f91cc4db Mon Sep 17 00:00:00 2001 From: Yuneng Jiang Date: Fri, 18 Sep 2026 04:08:34 -0700 Subject: [PATCH 10/10] test(ui): model E2E cleanup failures as values --- tests/e2e/ui/helpers/roundTrip.ts | 111 ++++++++++++++++++++++-------- 1 file changed, 81 insertions(+), 30 deletions(-) diff --git a/tests/e2e/ui/helpers/roundTrip.ts b/tests/e2e/ui/helpers/roundTrip.ts index 1fc2d0aec1a..91e48b7087c 100644 --- a/tests/e2e/ui/helpers/roundTrip.ts +++ b/tests/e2e/ui/helpers/roundTrip.ts @@ -33,39 +33,90 @@ export async function readBack( return (await res.json()) as T; } -export async function runWithCleanup( - action: () => Promise, - cleanup: () => Promise, -): Promise { - const outcome = await Promise.resolve() +type OperationOutcome = + | { readonly status: "success" } + | { readonly status: "failure"; readonly error: unknown }; + +type RunFailure = + | { readonly status: "action_failure"; readonly error: unknown } + | { readonly status: "cleanup_failure"; readonly error: unknown } + | { + readonly status: "action_and_cleanup_failure"; + readonly actionError: unknown; + readonly cleanupError: unknown; + }; + +function toRunFailure( + actionOutcome: OperationOutcome, + cleanupOutcome: OperationOutcome, +): RunFailure | null { + if ( + actionOutcome.status === "failure" && + cleanupOutcome.status === "failure" + ) { + return { + status: "action_and_cleanup_failure", + actionError: actionOutcome.error, + cleanupError: cleanupOutcome.error, + }; + } + if (actionOutcome.status === "failure") { + return { status: "action_failure", error: actionOutcome.error }; + } + if (cleanupOutcome.status === "failure") { + return { status: "cleanup_failure", error: cleanupOutcome.error }; + } + return null; +} + +function raiseRunFailure(failure: RunFailure): never { + switch (failure.status) { + case "action_failure": + throw failure.error; + case "cleanup_failure": + throw failure.error; + case "action_and_cleanup_failure": + throw new AggregateError( + [failure.actionError, failure.cleanupError], + "Action and cleanup failed", + ); + } +} + +async function runAction( + action: () => void | Promise, +): Promise { + return Promise.resolve() .then(action) .then( () => ({ status: "success" as const }), (error: unknown) => ({ status: "failure" as const, error }), ); - try { - if (outcome.status === "failure") throw outcome.error; - } finally { - const cleanupOutcome = await Promise.resolve() - .then(cleanup) - .then( - (succeeded) => - succeeded - ? { status: "success" as const } - : { - status: "failure" as const, - error: new Error("Failed to clean up UI E2E resource"), - }, - (error: unknown) => ({ status: "failure" as const, error }), - ); - if (cleanupOutcome.status === "failure") { - if (outcome.status === "failure") { - throw new AggregateError( - [outcome.error, cleanupOutcome.error], - "Action and cleanup failed", - ); - } - throw cleanupOutcome.error; - } - } +} + +async function runCleanup( + cleanup: () => boolean | Promise, +): Promise { + return Promise.resolve() + .then(cleanup) + .then( + (succeeded) => + succeeded + ? { status: "success" as const } + : { + status: "failure" as const, + error: new Error("Failed to clean up UI E2E resource"), + }, + (error: unknown) => ({ status: "failure" as const, error }), + ); +} + +export async function runWithCleanup( + action: () => void | Promise, + cleanup: () => boolean | Promise, +): Promise { + const actionOutcome = await runAction(action); + const cleanupOutcome = await runCleanup(cleanup); + const failure = toRunFailure(actionOutcome, cleanupOutcome); + if (failure !== null) raiseRunFailure(failure); }