Omar SobhandClaude Opus 4.8
654ec0f511
Add a Compare tab to /topologies: pick a task + roles + topology kinds, build a graph per kind, run POST /api/topologies/compare, and render a leaderboard table + a quality/cost Pareto scatter (SVG, no deps). Wrap Build + Compare in a tabbed TopologyWorkbench. e2e p8 extended to run a comparison end-to-end (build×N → compare → leaderboard + Pareto). Full suite 39 green; build + TS clean. Co-Authored-By: Claude Opus 4.8 <[email protected]>
46 lines
1.9 KiB
TypeScript
46 lines
1.9 KiB
TypeScript
import { expect, test, type Page } from "@playwright/test";
|
|
|
|
// The Topologies page: browse the catalog and build a topology graph against
|
|
// the real /api/topologies endpoints (frontend → proxy → backend).
|
|
|
|
const OWNER_EMAIL = "[email protected]";
|
|
const OWNER_PASSWORD = "e2e-password";
|
|
|
|
async function signIn(page: Page) {
|
|
await page.goto("/login");
|
|
await page.getByLabel("Email").fill(OWNER_EMAIL);
|
|
await page.getByRole("button", { name: /Continue with work email/ }).click();
|
|
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
|
await page.getByRole("button", { name: "Sign in" }).click();
|
|
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
|
}
|
|
|
|
test("browse the topology catalog and build a graph", async ({ page }) => {
|
|
await signIn(page);
|
|
|
|
await page.getByRole("link", { name: "Topologies" }).click();
|
|
await expect(page).toHaveURL(/\/topologies$/);
|
|
await expect(page.getByRole("heading", { name: "Topologies" })).toBeVisible();
|
|
|
|
// The catalog lists the kinds.
|
|
await expect(page.getByRole("button", { name: /hierarchical/i })).toBeVisible();
|
|
|
|
// Build a pipeline topology and confirm the graph renders.
|
|
await page.getByRole("button", { name: /^pipeline$/i }).click();
|
|
await page.getByLabel(/Roles/).fill("alpha, beta, gamma");
|
|
await page.getByRole("button", { name: "Build" }).click();
|
|
await expect(page.locator("svg[aria-label*='topology']")).toBeVisible();
|
|
});
|
|
|
|
test("compare topologies shows a leaderboard and Pareto chart", async ({ page }) => {
|
|
await signIn(page);
|
|
await page.getByRole("link", { name: "Topologies" }).click();
|
|
await page.getByRole("tab", { name: /compare/i }).click();
|
|
|
|
await page.getByRole("button", { name: "Run comparison" }).click();
|
|
|
|
// Leaderboard table + Pareto chart render from the comparison result.
|
|
await expect(page.getByRole("cell", { name: /pipeline/i })).toBeVisible();
|
|
await expect(page.locator("svg[aria-label*='pareto']")).toBeVisible();
|
|
});
|