[Infra] UI - E2E Tests: Internal Viewer Sidebar

ui/litellm-dashboard/e2e_tests/constants.ts

@@ -1 +1,2 @@
 export const ADMIN_STORAGE_PATH = "admin.storageState.json";
+export const INTERNAL_USER_VIEWER_STORAGE_PATH = "internalViewer.storageState.json";

ui/litellm-dashboard/e2e_tests/fixtures/users.ts

@@ -7,4 +7,8 @@ export const users = {
     email: "admin",
     password: isCI ? "gm" : "sk-1234",
   },
+  [Role.InternalUserViewer]: {
+    email: "internalViewer@test.com",
+    password: "test",
+  },
 };

ui/litellm-dashboard/e2e_tests/globalSetup.ts

@@ -1,17 +1,30 @@
 import { chromium } from "@playwright/test";
 import { users } from "./fixtures/users";
 import { Role } from "./fixtures/roles";
+import { ADMIN_STORAGE_PATH, INTERNAL_USER_VIEWER_STORAGE_PATH } from "./constants";
+
+async function loginAndSaveState(
+  browser,
+  user,
+  storagePath: string
+) {
+  const context = await browser.newContext();
+  const page = await context.newPage();
+
+  await page.goto("http://localhost:4000/ui/login");
+  await page.getByPlaceholder("Enter your username").fill(user.email);
+  await page.getByPlaceholder("Enter your password").fill(user.password);
+  await page.getByRole("button", { name: "Login" }).click();
+  await page.getByText('AI GATEWAY').waitFor();
+
+  await context.storageState({ path: storagePath });
+  await context.close();
+}
 
 async function globalSetup() {
   const browser = await chromium.launch();
-  const page = await browser.newPage();
-  await page.goto("http://localhost:4000/ui/login");
-  await page.getByPlaceholder("Enter your username").fill(users[Role.ProxyAdmin].email);
-  await page.getByPlaceholder("Enter your password").fill(users[Role.ProxyAdmin].password);
-  const loginButton = page.getByRole("button", { name: "Login" });
-  await loginButton.click();
-  await page.waitForSelector("text=AI Gateway");
-  await page.context().storageState({ path: "admin.storageState.json" });
+  await loginAndSaveState(browser, users[Role.ProxyAdmin], ADMIN_STORAGE_PATH);
+  await loginAndSaveState(browser, users[Role.InternalUserViewer], INTERNAL_USER_VIEWER_STORAGE_PATH);
   await browser.close();
 }
 

ui/litellm-dashboard/e2e_tests/tests/login/login.spec.ts

@@ -3,7 +3,7 @@ import { users } from "../../fixtures/users";
 import { Role } from "../../fixtures/roles";
 
 test("user can log in", async ({ page }) => {
-  await page.goto("http://localhost:4000/ui/login");
+  await page.goto("/ui/login");
   await page.getByPlaceholder("Enter your username").fill(users[Role.ProxyAdmin].email);
   await page.getByPlaceholder("Enter your password").fill(users[Role.ProxyAdmin].password);
   const loginButton = page.getByRole("button", { name: "Login" });

ui/litellm-dashboard/e2e_tests/tests/navigation/sidebar.spec.ts

@@ -1,24 +1,35 @@
 import test, { expect } from "@playwright/test";
 import { Role } from "../../fixtures/roles";
-import { ADMIN_STORAGE_PATH } from "../../constants";
+import { ADMIN_STORAGE_PATH, INTERNAL_USER_VIEWER_STORAGE_PATH } from "../../constants";
 import { Page } from "../../fixtures/pages";
 import { menuLabelToPage } from "../../fixtures/menuMappings";
 import { navigateToPage } from "../../helpers/navigation";
 
 const sidebarButtons = {
   [Role.ProxyAdmin]: [
     "Virtual Keys",
+    "MCP Servers",
     "Playground",
     "Models",
     "Usage",
+    "Logs",
     "Teams",
     "Internal Users",
     "API Reference",
     "AI Hub",
   ],
+  [Role.InternalUserViewer]: [
+    "Virtual Keys",
+    "MCP Servers",
+    "Usage",
+    "Teams",
+    "Logs",
+    "API Reference",
+    "AI Hub",
+  ],
 };
 
-const roles = [{ role: Role.ProxyAdmin, storage: ADMIN_STORAGE_PATH }];
+const roles = [{ role: Role.ProxyAdmin, storage: ADMIN_STORAGE_PATH }, { role: Role.InternalUserViewer, storage: INTERNAL_USER_VIEWER_STORAGE_PATH }];
 
 for (const { role, storage } of roles) {
   test.describe(`${role} sidebar`, () => {

ui/litellm-dashboard/vitest.config.ts

@@ -7,6 +7,7 @@ export default defineConfig({
     setupFiles: ["tests/setupTests.ts"],
     globals: true,
     css: true, // lets you import CSS/modules without extra mocks
+    testTimeout: 10000,
     coverage: {
       provider: "v8",
       reporter: ["text", "lcov"],