6ae8a509f0
* test(ui): add a data-driven App Router migration E2E smoke
Add a growing Playwright smoke for migrated pages: for each segment it deep-links
to the path route, asserts the URL and that the dashboard shell rendered, then
clicks off to a legacy page and asserts navigation still works. Driven by
e2e_tests/fixtures/migratedPages.ts, so adding a page is one line.
Runs in two situations against the same proxy: the default mount (npm run
e2e:migration) and a non-root SERVER_ROOT_PATH mount (npm run e2e:migration:root).
globalSetup now logs in at `${SERVER_ROOT_PATH}/ui/login` so the admin storage
state is valid under a prefix. Seeded with api-reference; append the rest as their
migrations merge.
* test(ui): support headed slow-motion + watch pauses in the migration smoke
Honor SLOWMO in the server-root-path config (the default config already did),
and add an env-gated E2E_WATCH_MS pause so a headed run lingers on each state.
Both are no-ops by default, so CI behavior is unchanged.
* test(ui): make the migration smoke a sidebar-click user journey
Rework the smoke from deep-linking to a real navigation journey: start at the
landing page, click the migrated page in the sidebar (expanding submenus for
nested items), assert the path route rendered, reload it (the check a wrong
server_root_path breaks), bounce to a legacy page and back, and — once two pages
are migrated — navigate directly between two migrated pages. Verifies via URL +
shell render, driven by the same fixture list.
* test(ui): address review on the migration smoke
Escape ROOT and segment before interpolating them into RegExp URL matchers so a
future segment containing regex metacharacters can't silently widen the match.
Make the server-root-path config fail fast when SERVER_ROOT_PATH is unset instead
of silently re-running the default mount and passing without exercising the prefix.
* test(ui): drop unused watch helper and fix stale smoke README
* test(ui): run the migration smoke under a server root path in CI
* test(ui): harden + instrument the server-root-path proxy reboot in CI
* test(ui): run the server-root-path migration smoke as its own CI job
Replace the in-place proxy reboot in e2e_ui_testing with a dedicated
e2e_ui_testing_server_root_path job that boots the proxy once with
SERVER_ROOT_PATH=/litellm, matching how every other proxy variant in the
config gets its own job rather than killing and relaunching the live proxy.
The reboot was failing deterministically: after pkill -9 and relaunch the
prefixed proxy never came back up on :4000 (connection refused), so the smoke
never ran. The readiness step that was supposed to surface the cause could
never reach its boot-log tail because CircleCI runs steps under bash -eo
pipefail and the preceding `curl -sv ... | tail` aborted the step with curl's
exit 7. Booting the proxy as the job's own background step lets any boot crash
land in that step's log instead of being swallowed.
The default e2e_ui_testing job is unchanged aside from dropping the reboot,
prefixed-readiness, and prefixed-smoke steps; the migration smoke still runs at
the root mount there via the default Playwright config.
102 lines
4.3 KiB
TypeScript
102 lines
4.3 KiB
TypeScript
import { test, expect, type Page } from "@playwright/test";
|
|
import { MIGRATED_E2E_SEGMENTS } from "../../fixtures/migratedPages";
|
|
import { ADMIN_STORAGE_PATH } from "../../constants";
|
|
import { dismissFeedbackPopup } from "../../helpers/navigation";
|
|
|
|
/**
|
|
* App Router migration smoke as a user journey: start where the proxy lands you,
|
|
* click a migrated page in the sidebar, confirm it routed and rendered, reload it
|
|
* (the check a wrong server_root_path breaks), bounce to a legacy page and back,
|
|
* and, once two pages are migrated, navigate directly between two migrated pages.
|
|
*
|
|
* Driven by MIGRATED_E2E_SEGMENTS, so it grows as pages are migrated. Set
|
|
* SERVER_ROOT_PATH (e.g. "/litellm") to exercise the non-root mount; leave it
|
|
* unset for the default mount. Boot the proxy with the matching value first.
|
|
*/
|
|
const ROOT = process.env.SERVER_ROOT_PATH ?? "";
|
|
|
|
const esc = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
|
const pathRe = (segment: string) => new RegExp(`${esc(ROOT)}/ui/${esc(segment)}/?($|\\?)`);
|
|
const legacyAnchor = (page: Page) => page.locator("a", { hasText: "Virtual Keys" });
|
|
|
|
/** The dashboard shell is present (sidebar rendered); page didn't 404 / crash. */
|
|
async function expectRendered(page: Page) {
|
|
await expect(legacyAnchor(page)).toBeVisible({ timeout: 20_000 });
|
|
}
|
|
|
|
/**
|
|
* Click a migrated page's sidebar link. Migrated items render as <a href=".../ui/<segment>">;
|
|
* nested ones live under collapsible submenus, so expand submenus until the link is clickable.
|
|
*/
|
|
async function clickSidebar(page: Page, segment: string) {
|
|
const link = page.locator(`a[href$="/ui/${segment}"]`).first();
|
|
for (let i = 0; i < 8 && !(await link.isVisible().catch(() => false)); i++) {
|
|
const collapsedSubmenu = page
|
|
.locator(".ant-menu-submenu:not(.ant-menu-submenu-open) > .ant-menu-submenu-title")
|
|
.first();
|
|
if (!(await collapsedSubmenu.isVisible().catch(() => false))) break;
|
|
await collapsedSubmenu.click();
|
|
await page.waitForTimeout(250);
|
|
}
|
|
await link.click();
|
|
}
|
|
|
|
test.use({ storageState: ADMIN_STORAGE_PATH });
|
|
|
|
test.describe("App Router migrated pages", () => {
|
|
for (const segment of MIGRATED_E2E_SEGMENTS) {
|
|
test(`${segment}: sidebar nav, reload, and round-trip with a legacy page`, async ({ page }) => {
|
|
const pageErrors: string[] = [];
|
|
page.on("pageerror", (e) => pageErrors.push(String(e)));
|
|
|
|
// 1. Start where the proxy lands us.
|
|
await page.goto(`${ROOT}/ui/`);
|
|
await dismissFeedbackPopup(page);
|
|
await expectRendered(page);
|
|
|
|
// 2. Click the migrated page in the sidebar -> path route + rendered.
|
|
await clickSidebar(page, segment);
|
|
await expect(page).toHaveURL(pathRe(segment));
|
|
await expectRendered(page);
|
|
// 3. Reload the path route directly; a wrong server_root_path 404s here.
|
|
await page.reload();
|
|
await dismissFeedbackPopup(page);
|
|
await expect(page).toHaveURL(pathRe(segment));
|
|
await expectRendered(page);
|
|
// 4. Click off to a legacy (not-yet-migrated) page.
|
|
await legacyAnchor(page).click();
|
|
await expect(page).toHaveURL(new RegExp(`${esc(ROOT)}/ui/\\?page=api-keys`));
|
|
await dismissFeedbackPopup(page);
|
|
await expectRendered(page);
|
|
// 5. Click back to the migrated page.
|
|
await clickSidebar(page, segment);
|
|
await expect(page).toHaveURL(pathRe(segment));
|
|
await expectRendered(page);
|
|
expect(pageErrors, `page errors during ${segment} journey`).toEqual([]);
|
|
});
|
|
}
|
|
|
|
test("navigates directly between two migrated pages", async ({ page }) => {
|
|
test.skip(MIGRATED_E2E_SEGMENTS.length < 2, "needs >= 2 migrated pages");
|
|
const [first, second] = MIGRATED_E2E_SEGMENTS;
|
|
const pageErrors: string[] = [];
|
|
page.on("pageerror", (e) => pageErrors.push(String(e)));
|
|
|
|
await page.goto(`${ROOT}/ui/`);
|
|
await dismissFeedbackPopup(page);
|
|
|
|
await clickSidebar(page, first);
|
|
await expect(page).toHaveURL(pathRe(first));
|
|
await expectRendered(page);
|
|
await clickSidebar(page, second);
|
|
await expect(page).toHaveURL(pathRe(second));
|
|
await expectRendered(page);
|
|
// Back to the first migrated page.
|
|
await clickSidebar(page, first);
|
|
await expect(page).toHaveURL(pathRe(first));
|
|
await expectRendered(page);
|
|
|
|
expect(pageErrors, "page errors during migrated -> migrated nav").toEqual([]);
|
|
});
|
|
});
|