838 lines
33 KiB
TypeScript
838 lines
33 KiB
TypeScript
import { expect, test, type Locator, type Page, type Route } from "@playwright/test";
|
|
import { createAuthenticationStack } from "./fixtures/auth-stack.mjs";
|
|
|
|
test.describe.configure({ mode: "serial" });
|
|
test.use({ viewport: { width: 1910, height: 911 } });
|
|
|
|
let stack: Awaited<ReturnType<typeof createAuthenticationStack>>;
|
|
|
|
const databaseId = "11111111-1111-4111-8111-111111111111";
|
|
const database = {
|
|
id: databaseId,
|
|
workspaceId: "psd-clinical",
|
|
workspaceName: "Policlinico San Donato",
|
|
workspaceAvailable: true,
|
|
workspaceRevision: { commit: "a".repeat(40), blob: "b".repeat(40) },
|
|
workspaceEvidence: { sourceType: "filesystem", state: "materialized_current_revision" },
|
|
runtimeBinding: {
|
|
transport: "postgres_direct",
|
|
configurationState: "ready",
|
|
sessionTransportSupported: true,
|
|
},
|
|
configured: true,
|
|
engine: "postgres",
|
|
databaseName: "warehouse",
|
|
schema: "datawarehouse",
|
|
version: 3,
|
|
createdAt: "2026-08-27T08:00:00Z",
|
|
updatedAt: "2026-08-27T09:00:00Z",
|
|
binding: {
|
|
transport: "postgres_direct",
|
|
host: "db.internal",
|
|
port: 5432,
|
|
username: "reader",
|
|
},
|
|
connectionStatus: "reachable",
|
|
testedVersion: 3,
|
|
secrets: {
|
|
password: false,
|
|
apiKey: false,
|
|
sshPrivateKey: false,
|
|
sshPrivateKeyPassphrase: false,
|
|
sshKnownHosts: false,
|
|
tlsCa: false,
|
|
},
|
|
};
|
|
|
|
const unconfiguredDatabase = {
|
|
...database,
|
|
id: undefined,
|
|
workspaceId: "research-lab",
|
|
workspaceName: "Research laboratory",
|
|
configured: false,
|
|
databaseName: "research",
|
|
schema: "analytics",
|
|
version: 0,
|
|
createdAt: "",
|
|
updatedAt: "",
|
|
binding: { transport: "postgres_direct", port: 5432 },
|
|
connectionStatus: "untested",
|
|
testedVersion: undefined,
|
|
};
|
|
|
|
const table = {
|
|
id: "aaaaaaaa-aaaa-4aaa-8aaa-aaaaaaaaaaaa",
|
|
databaseId,
|
|
name: "patients",
|
|
sourceComment: "Patients imported from the clinical source",
|
|
description: null,
|
|
generatedDescription: null,
|
|
version: 1,
|
|
createdAt: "2026-08-27T08:00:00Z",
|
|
updatedAt: "2026-08-27T09:00:00Z",
|
|
};
|
|
|
|
const descriptionRun = {
|
|
id: "77777777-7777-4777-8777-777777777777",
|
|
databaseId,
|
|
scope: "selected_columns",
|
|
modelId: "glm-53",
|
|
language: "it",
|
|
status: "completed",
|
|
total: 5,
|
|
processed: 5,
|
|
generated: 4,
|
|
nonGeneratable: 1,
|
|
failed: 0,
|
|
inputTokens: 1200,
|
|
cacheReadTokens: 80,
|
|
outputTokens: 420,
|
|
createdAt: "2026-08-31T09:00:00Z",
|
|
startedAt: "2026-08-31T09:00:01Z",
|
|
updatedAt: "2026-08-31T09:00:04Z",
|
|
finishedAt: "2026-08-31T09:00:04Z",
|
|
errorSummary: null,
|
|
};
|
|
|
|
function metrics(requestedDatabaseId: string | null) {
|
|
return {
|
|
scope: requestedDatabaseId ? "database" : "global",
|
|
databaseId: requestedDatabaseId,
|
|
tables: 1,
|
|
columns: 0,
|
|
sensitiveColumns: 0,
|
|
relationships: 0,
|
|
descriptionTargets: 1,
|
|
describedTargets: 0,
|
|
descriptionCoverage: 0,
|
|
updatedAt: "2026-08-31T09:00:00Z",
|
|
};
|
|
}
|
|
|
|
function json(route: Route, body: unknown, status = 200) {
|
|
return route.fulfill({
|
|
status,
|
|
contentType: "application/json",
|
|
body: JSON.stringify(body),
|
|
});
|
|
}
|
|
|
|
async function signInAsAdmin(page: Page) {
|
|
const account = stack.localAccount("admin");
|
|
await page.getByLabel("Username").fill(account.username);
|
|
await page.locator('input[name="password"]').fill(account.password);
|
|
await page.getByRole("button", { name: "Sign in", exact: true }).click();
|
|
await expect(page.getByTestId("app-shell")).toBeVisible({ timeout: 30_000 });
|
|
}
|
|
|
|
async function expectContextPanelGeometry(page: Page, accessibleName: string) {
|
|
const manager = page
|
|
.getByTestId("conversation-column")
|
|
.getByRole("main", { name: "Database management" });
|
|
const panel = manager.getByRole("dialog", { name: accessibleName });
|
|
const sessionRail = page.getByRole("complementary", { name: "Session navigation" });
|
|
|
|
await expect(panel).toBeVisible();
|
|
expect(
|
|
await panel.evaluate((element) => element.hasAttribute("data-catalog-panel")),
|
|
).toBe(true);
|
|
await expect(
|
|
panel.locator(':scope > [data-catalog-panel-region="header"]'),
|
|
).toHaveCount(1);
|
|
await expect(
|
|
panel.locator(':scope > [data-catalog-panel-region="body"]'),
|
|
).toHaveCount(1);
|
|
const [managerBox, panelBox, sessionRailBox] = await Promise.all([
|
|
manager.boundingBox(),
|
|
panel.boundingBox(),
|
|
sessionRail.boundingBox(),
|
|
]);
|
|
expect(managerBox).not.toBeNull();
|
|
expect(panelBox).not.toBeNull();
|
|
expect(sessionRailBox).not.toBeNull();
|
|
if (!managerBox || !panelBox || !sessionRailBox) return;
|
|
|
|
const managerCenter = managerBox.x + managerBox.width / 2;
|
|
const panelCenter = panelBox.x + panelBox.width / 2;
|
|
expect(Math.abs(panelCenter - managerCenter)).toBeLessThanOrEqual(1);
|
|
const expectedPanelWidth = Math.min(1200, managerBox.width - (managerBox.width <= 768 ? 24 : 32));
|
|
expect(Math.abs(panelBox.width - expectedPanelWidth)).toBeLessThanOrEqual(1);
|
|
expect(panelBox.x).toBeGreaterThanOrEqual(managerBox.x - 1);
|
|
expect(panelBox.x + panelBox.width).toBeLessThanOrEqual(managerBox.x + managerBox.width + 1);
|
|
expect(panelBox.x + panelBox.width).toBeLessThanOrEqual(sessionRailBox.x + 1);
|
|
expect(panelBox.y).toBeGreaterThanOrEqual(managerBox.y);
|
|
expect(panelBox.y + panelBox.height).toBeLessThanOrEqual(managerBox.y + managerBox.height + 1);
|
|
}
|
|
|
|
async function expectCurrentNavigation(page: Page, accessibleName: string) {
|
|
const navigation = page.getByRole("complementary", { name: "Session navigation" });
|
|
const button = navigation.getByRole("button", { name: accessibleName, exact: true });
|
|
const available = navigation.locator('[data-navigation-state="available"]').first();
|
|
await expect(navigation.locator('[data-navigation-state="current"]')).toHaveCount(1);
|
|
await expect(button).toHaveAttribute("data-navigation-state", "current");
|
|
await expect(button).toHaveAttribute("aria-current", "page");
|
|
expect(await button.getAttribute("class")).toContain("bg-[oklch(var(--nav-active))]");
|
|
|
|
const [style, availableStyle] = await Promise.all([
|
|
button.evaluate((element) => ({
|
|
backgroundColor: getComputedStyle(element).backgroundColor,
|
|
borderColor: getComputedStyle(element).borderTopColor,
|
|
})),
|
|
available.evaluate((element) => ({
|
|
backgroundColor: getComputedStyle(element).backgroundColor,
|
|
borderColor: getComputedStyle(element).borderTopColor,
|
|
})),
|
|
]);
|
|
expect(style.backgroundColor).not.toBe(availableStyle.backgroundColor);
|
|
expect(style.borderColor).not.toBe(availableStyle.borderColor);
|
|
|
|
const tokens = await page.evaluate(() => {
|
|
const root = getComputedStyle(document.documentElement);
|
|
const read = (name: string) => root.getPropertyValue(name).trim().split(/\s+/).map(Number);
|
|
return { primary: read("--primary"), active: read("--nav-active") };
|
|
});
|
|
expect(tokens.active[2]).toBeCloseTo(tokens.primary[2], 1);
|
|
expect(tokens.active[1]).toBeLessThan(tokens.primary[1]);
|
|
expect(tokens.active[0]).toBeGreaterThan(tokens.primary[0]);
|
|
}
|
|
|
|
async function expectSelectedSessionScopeTab(page: Page, accessibleName: string) {
|
|
const tablist = page.getByRole("tablist", { name: "Session scope" });
|
|
const selected = tablist.getByRole("tab", { name: accessibleName, exact: true });
|
|
const inactive = tablist.locator('[role="tab"][aria-selected="false"]');
|
|
await expect(tablist.locator('[role="tab"][aria-selected="true"]')).toHaveCount(1);
|
|
await expect(selected).toHaveAttribute("data-tab-state", "active");
|
|
expect(await selected.getAttribute("class")).toContain("bg-[oklch(var(--nav-active))]");
|
|
|
|
const [selectedStyle, inactiveStyle] = await Promise.all([
|
|
selected.evaluate((element) => ({
|
|
backgroundColor: getComputedStyle(element).backgroundColor,
|
|
borderColor: getComputedStyle(element).borderBottomColor,
|
|
})),
|
|
inactive.evaluate((element) => ({
|
|
backgroundColor: getComputedStyle(element).backgroundColor,
|
|
borderColor: getComputedStyle(element).borderBottomColor,
|
|
borderWidth: getComputedStyle(element).borderTopWidth,
|
|
})),
|
|
]);
|
|
expect(selectedStyle.backgroundColor).not.toBe(inactiveStyle.backgroundColor);
|
|
expect(selectedStyle.borderColor).not.toBe(inactiveStyle.borderColor);
|
|
expect(inactiveStyle.borderWidth).toBe("1px");
|
|
expect(inactiveStyle.backgroundColor).not.toMatch(/^(?:transparent|rgba\(0, 0, 0, 0\))$/);
|
|
expect(inactiveStyle.borderColor).not.toMatch(/^(?:transparent|rgba\(0, 0, 0, 0\))$/);
|
|
}
|
|
|
|
function cssLightness(color: string): number {
|
|
const oklab = color.match(/^okl(?:ab|ch)\(([\d.]+)(%)?/);
|
|
if (oklab) {
|
|
const value = Number(oklab[1]);
|
|
return oklab[2] ? value / 100 : value;
|
|
}
|
|
const channels = color.match(/[\d.]+/g)?.slice(0, 3).map(Number) ?? [];
|
|
if (channels.length !== 3) return Number.NaN;
|
|
return color.startsWith("color(srgb") ? Math.max(...channels) : Math.max(...channels) / 255;
|
|
}
|
|
|
|
async function expectFleetRowTooltipBelow(trigger: Locator, expectedContent: string) {
|
|
await trigger.hover();
|
|
await expect.poll(() => trigger.evaluate((element) => {
|
|
const owner = element.closest<HTMLElement>("[data-tooltip]");
|
|
return owner ? getComputedStyle(owner, "::after").visibility : "missing";
|
|
})).toBe("visible");
|
|
await expect.poll(() => trigger.evaluate((element) => {
|
|
const owner = element.closest<HTMLElement>("[data-tooltip]");
|
|
return owner ? getComputedStyle(owner, "::after").opacity : "missing";
|
|
})).toBe("1");
|
|
|
|
const state = await trigger.evaluate((element) => {
|
|
const owner = element.closest<HTMLElement>("[data-tooltip]");
|
|
if (!owner) throw new Error("Row action tooltip owner is missing");
|
|
const style = getComputedStyle(owner, "::after");
|
|
return {
|
|
content: style.content.replace(/^['\"]|['\"]$/g, ""),
|
|
ownerHeight: owner.getBoundingClientRect().height,
|
|
top: Number.parseFloat(style.top),
|
|
right: Number.parseFloat(style.right),
|
|
opacity: style.opacity,
|
|
pointerEvents: style.pointerEvents,
|
|
backgroundColor: style.backgroundColor,
|
|
color: style.color,
|
|
};
|
|
});
|
|
|
|
expect(state.content).toBe(expectedContent);
|
|
expect(state.top - state.ownerHeight).toBeCloseTo(3, 1);
|
|
expect(state.right).toBe(0);
|
|
expect(state.opacity).toBe("1");
|
|
expect(state.pointerEvents).toBe("none");
|
|
expect(cssLightness(state.backgroundColor)).toBeLessThan(0.35);
|
|
expect(cssLightness(state.color)).toBeGreaterThan(0.9);
|
|
}
|
|
|
|
async function expectContextPanelHeaderUsesPrimary(
|
|
page: Page,
|
|
accessibleName: string,
|
|
) {
|
|
const manager = page
|
|
.getByTestId("conversation-column")
|
|
.getByRole("main", { name: "Database management" });
|
|
const panel = manager.getByRole("dialog", { name: accessibleName });
|
|
const header = panel.locator(':scope > [data-catalog-panel-region="header"]');
|
|
await expect(header).toHaveCount(1);
|
|
|
|
const currentNavigation = page.locator('[data-navigation-state="current"]');
|
|
const [headerStyle, navigationStyle] = await Promise.all([
|
|
header.evaluate((element) => ({
|
|
backgroundColor: getComputedStyle(element).backgroundColor,
|
|
backgroundImage: getComputedStyle(element).backgroundImage,
|
|
})),
|
|
currentNavigation.evaluate((element) => ({
|
|
backgroundColor: getComputedStyle(element).backgroundColor,
|
|
})),
|
|
]);
|
|
|
|
expect(headerStyle.backgroundImage).toBe("none");
|
|
expect(headerStyle.backgroundColor).not.toBe("rgba(0, 0, 0, 0)");
|
|
expect(headerStyle.backgroundColor).not.toBe(navigationStyle.backgroundColor);
|
|
}
|
|
|
|
async function expectWorkAreaPanelGeometry(page: Page, accessibleName: string) {
|
|
const workArea = page.getByTestId("conversation-column");
|
|
const panel = workArea.getByRole("dialog", { name: accessibleName });
|
|
const sessionRail = page.getByRole("complementary", { name: "Session navigation" });
|
|
|
|
await expect(panel).toBeVisible();
|
|
await expect(panel).toHaveAttribute("aria-modal", "false");
|
|
await expect(panel).toHaveAttribute("data-work-area-panel", "");
|
|
await expect(panel.locator(':scope > [data-work-area-panel-region="header"]')).toHaveCount(1);
|
|
await expect(panel.locator(':scope > [data-work-area-panel-region="body"]')).toHaveCount(1);
|
|
|
|
const [workAreaBox, panelBox, sessionRailBox] = await Promise.all([
|
|
workArea.boundingBox(),
|
|
panel.boundingBox(),
|
|
sessionRail.boundingBox(),
|
|
]);
|
|
expect(workAreaBox).not.toBeNull();
|
|
expect(panelBox).not.toBeNull();
|
|
expect(sessionRailBox).not.toBeNull();
|
|
if (!workAreaBox || !panelBox || !sessionRailBox) return;
|
|
|
|
expect(Math.abs(
|
|
panelBox.x + panelBox.width / 2 - (workAreaBox.x + workAreaBox.width / 2),
|
|
)).toBeLessThanOrEqual(1);
|
|
const expectedPanelWidth = Math.min(1200, workAreaBox.width - (workAreaBox.width <= 768 ? 24 : 32));
|
|
expect(Math.abs(panelBox.width - expectedPanelWidth)).toBeLessThanOrEqual(1);
|
|
expect(panelBox.x).toBeGreaterThanOrEqual(workAreaBox.x - 1);
|
|
expect(panelBox.x + panelBox.width).toBeLessThanOrEqual(workAreaBox.x + workAreaBox.width + 1);
|
|
expect(panelBox.x + panelBox.width).toBeLessThanOrEqual(sessionRailBox.x + 1);
|
|
expect(panelBox.y).toBeGreaterThanOrEqual(workAreaBox.y);
|
|
expect(panelBox.y + panelBox.height).toBeLessThanOrEqual(workAreaBox.y + workAreaBox.height + 1);
|
|
}
|
|
|
|
async function expectWorkAreaPanelHeaderUsesPrimary(
|
|
page: Page,
|
|
accessibleName: string,
|
|
) {
|
|
const panel = page
|
|
.getByTestId("conversation-column")
|
|
.getByRole("dialog", { name: accessibleName });
|
|
const header = panel.locator(':scope > [data-work-area-panel-region="header"]');
|
|
const currentNavigation = page.locator('[data-navigation-state="current"]');
|
|
const [headerStyle, navigationStyle] = await Promise.all([
|
|
header.evaluate((element) => ({
|
|
backgroundColor: getComputedStyle(element).backgroundColor,
|
|
backgroundImage: getComputedStyle(element).backgroundImage,
|
|
})),
|
|
currentNavigation.evaluate((element) => ({
|
|
backgroundColor: getComputedStyle(element).backgroundColor,
|
|
})),
|
|
]);
|
|
|
|
expect(headerStyle.backgroundImage).toBe("none");
|
|
expect(headerStyle.backgroundColor).not.toBe(navigationStyle.backgroundColor);
|
|
}
|
|
|
|
test.beforeAll(async () => {
|
|
stack = await createAuthenticationStack();
|
|
await stack.useLocalMode();
|
|
});
|
|
|
|
test.afterAll(async () => {
|
|
await stack?.close();
|
|
});
|
|
|
|
test("context panels stay inside the manager and the Tables grid sits in a sidebar-colored frame", async ({ page }) => {
|
|
const unexpectedCatalogRequests: string[] = [];
|
|
const responses: Record<string, unknown> = {
|
|
"GET /api/catalog/databases": [database, unconfiguredDatabase],
|
|
"GET /api/catalog/metadata-generation/models": {
|
|
models: [
|
|
{ id: "deepseek-v4-pro", label: "DeepSeek V4 Pro" },
|
|
{ id: "deepseek-v4-flash", label: "DeepSeek V4 Flash" },
|
|
{ id: "glm-53", label: "GLM 5.3" },
|
|
{ id: "qwen-36", label: "AritmoLab Qwen 3.6 35B A3B" },
|
|
],
|
|
default: "glm-53",
|
|
},
|
|
"GET /api/catalog/description-generation-runs?limit=50": [descriptionRun],
|
|
[`GET /api/catalog/description-generation-runs/${descriptionRun.id}`]: descriptionRun,
|
|
[`GET /api/catalog/description-generation-runs/${descriptionRun.id}/events-list?after=0`]: [{
|
|
sequence: 1,
|
|
level: "info",
|
|
message: "Description generation completed.",
|
|
createdAt: "2026-08-31T09:00:04Z",
|
|
}],
|
|
"GET /api/catalog/sensitive-data-suggestion-runs?limit=50": [],
|
|
[`GET /api/catalog/databases/${databaseId}/tables`]: [table],
|
|
};
|
|
|
|
await page.route("**/api/catalog/**", async (route) => {
|
|
const request = route.request();
|
|
const url = new URL(request.url());
|
|
const key = `${request.method()} ${url.pathname}${url.search}`;
|
|
|
|
if (request.method() === "GET" && url.pathname === "/api/catalog/metrics") {
|
|
const requestedId = url.searchParams.get("databaseId");
|
|
if (requestedId === null || requestedId === databaseId) {
|
|
await json(route, metrics(requestedId));
|
|
return;
|
|
}
|
|
}
|
|
|
|
if (Object.hasOwn(responses, key)) {
|
|
await json(route, responses[key]);
|
|
return;
|
|
}
|
|
|
|
unexpectedCatalogRequests.push(key);
|
|
await json(route, { code: "unexpected_catalog_request" }, 500);
|
|
});
|
|
|
|
await page.goto(stack.publicUrl);
|
|
await signInAsAdmin(page);
|
|
await expectCurrentNavigation(page, "New session");
|
|
await expectSelectedSessionScopeTab(page, "My sessions");
|
|
await page.getByRole("tab", { name: "All sessions", exact: true }).click();
|
|
await expectSelectedSessionScopeTab(page, "All sessions");
|
|
await page.getByRole("tab", { name: "My sessions", exact: true }).click();
|
|
await expectSelectedSessionScopeTab(page, "My sessions");
|
|
|
|
const adminNavigationRail = page.getByRole("complementary", { name: "Session navigation" });
|
|
const administration = adminNavigationRail.getByRole("button", { name: "Administration", exact: true });
|
|
await expect(administration).toHaveCSS("font-family", /Manrope/);
|
|
await expect(administration).toHaveAttribute("aria-expanded", "false");
|
|
await expect(adminNavigationRail.getByRole("region", { name: "Administration" })).toHaveCount(0);
|
|
await administration.click();
|
|
await expect(administration).toHaveAttribute("aria-expanded", "true");
|
|
const administrationPanel = adminNavigationRail.getByRole("region", { name: "Administration" });
|
|
await expect(administrationPanel).toBeVisible();
|
|
expect(await administrationPanel.locator(":scope > *").evaluateAll((elements) => elements.map((element) => (
|
|
element.getAttribute("role") === "separator" ? "separator" : element.textContent?.trim()
|
|
)))).toEqual([
|
|
"Database management",
|
|
"separator",
|
|
"Workspace management",
|
|
"Pi management",
|
|
]);
|
|
|
|
await administration.click();
|
|
await expect(administration).toHaveAttribute("aria-expanded", "false");
|
|
await expect(adminNavigationRail.getByRole("button", { name: "Database management", exact: true })).toHaveCount(0);
|
|
await administration.click();
|
|
await expect(administration).toHaveAttribute("aria-expanded", "true");
|
|
|
|
await adminNavigationRail
|
|
.getByRole("button", { name: "Database management", exact: true })
|
|
.click();
|
|
await expectCurrentNavigation(page, "Database management");
|
|
|
|
await expect(
|
|
page.getByRole("complementary", { name: "Session navigation" }),
|
|
).toBeVisible();
|
|
await expect(
|
|
page.getByTestId("conversation-column").getByRole("main", {
|
|
name: "Database management",
|
|
}),
|
|
).toBeVisible();
|
|
await expect(
|
|
page.getByRole("button", { name: "Back to workspace", exact: true }),
|
|
).toHaveCount(0);
|
|
await expect(page.getByRole("button", { name: /Add database/i })).toHaveCount(0);
|
|
await expect(page.getByRole("columnheader", { name: /Revision \/ Evidence/ })).toBeVisible();
|
|
await expect(page.getByRole("columnheader", { name: /NL→SQL runtime/ })).toBeVisible();
|
|
await expect(page.getByRole("columnheader", { name: /Metadata Catalog/ })).toBeVisible();
|
|
const metadataModelSelector = page.getByRole("combobox", {
|
|
name: "Metadata-generation LLM model",
|
|
});
|
|
await expect(metadataModelSelector).toHaveCount(1);
|
|
await expect(metadataModelSelector).toHaveValue("glm-53");
|
|
await expect(metadataModelSelector.locator("option")).toHaveText([
|
|
"DeepSeek V4 Pro",
|
|
"DeepSeek V4 Flash",
|
|
"GLM 5.3",
|
|
"AritmoLab Qwen 3.6 35B A3B",
|
|
]);
|
|
|
|
await page
|
|
.getByRole("button", { name: "Configure catalog for Research laboratory", exact: true })
|
|
.click();
|
|
const configurePanel = page.getByRole("dialog", { name: "Configure catalog" });
|
|
await expectContextPanelGeometry(page, "Configure catalog");
|
|
const configuredWorkspace = configurePanel.getByLabel("Workspace", { exact: true });
|
|
await expect(configuredWorkspace).toHaveValue("Research laboratory");
|
|
await expect(configuredWorkspace).toHaveAttribute("readonly", "");
|
|
await configurePanel.getByRole("button", { name: "Close database panel" }).click();
|
|
|
|
await page
|
|
.getByRole("button", { name: "Edit Policlinico San Donato", exact: true })
|
|
.click();
|
|
await expectContextPanelGeometry(page, "Edit database");
|
|
await expectContextPanelHeaderUsesPrimary(page, "Edit database");
|
|
await page
|
|
.getByRole("dialog", { name: "Edit database" })
|
|
.getByRole("button", { name: "Close database panel" })
|
|
.click();
|
|
|
|
await page.setViewportSize({ width: 1280, height: 800 });
|
|
await page
|
|
.getByRole("button", { name: "Edit Policlinico San Donato", exact: true })
|
|
.click();
|
|
await expectContextPanelGeometry(page, "Edit database");
|
|
await page
|
|
.getByRole("dialog", { name: "Edit database" })
|
|
.getByRole("button", { name: "Close database panel" })
|
|
.click();
|
|
await page.setViewportSize({ width: 1910, height: 911 });
|
|
|
|
const databaseTablesAction = page.getByRole("button", {
|
|
name: "View tables for Policlinico San Donato",
|
|
exact: true,
|
|
});
|
|
await expectFleetRowTooltipBelow(databaseTablesAction, "Tables");
|
|
await databaseTablesAction.click();
|
|
|
|
await expect(
|
|
page.getByRole("region", {
|
|
name: "Tables for Policlinico San Donato",
|
|
}),
|
|
).toBeVisible();
|
|
|
|
await page
|
|
.getByRole("button", { name: "Description history", exact: true })
|
|
.click();
|
|
await expectContextPanelGeometry(page, "Description generation");
|
|
await expectContextPanelHeaderUsesPrimary(page, "Description generation");
|
|
const descriptionPanel = page.getByRole("dialog", { name: "Description generation" });
|
|
const descriptionBody = descriptionPanel.locator(
|
|
':scope > [data-catalog-panel-region="body"]',
|
|
);
|
|
const progressTable = descriptionPanel.getByRole("table", {
|
|
name: "Description generation progress",
|
|
});
|
|
const eventLog = descriptionPanel.getByRole("log", {
|
|
name: "Description generation events",
|
|
});
|
|
const recentRuns = descriptionPanel.getByRole("region", {
|
|
name: "Description generation history",
|
|
});
|
|
await expect(progressTable.getByRole("columnheader")).toHaveCount(5);
|
|
await expect(eventLog).toBeVisible();
|
|
await expect(recentRuns).toBeVisible();
|
|
|
|
const [bodyBox, eventLogBox, recentRunsBox] = await Promise.all([
|
|
descriptionBody.boundingBox(),
|
|
eventLog.boundingBox(),
|
|
recentRuns.boundingBox(),
|
|
]);
|
|
expect(bodyBox).not.toBeNull();
|
|
expect(eventLogBox).not.toBeNull();
|
|
expect(recentRunsBox).not.toBeNull();
|
|
if (bodyBox && eventLogBox && recentRunsBox) {
|
|
const eventBottomGutter = bodyBox.y + bodyBox.height - eventLogBox.y - eventLogBox.height;
|
|
const recentBottomGutter = bodyBox.y + bodyBox.height - recentRunsBox.y - recentRunsBox.height;
|
|
expect(eventBottomGutter).toBeGreaterThanOrEqual(10);
|
|
expect(recentBottomGutter).toBeGreaterThanOrEqual(10);
|
|
expect(eventLogBox.x + eventLogBox.width).toBeLessThan(recentRunsBox.x);
|
|
}
|
|
|
|
await page.setViewportSize({ width: 720, height: 800 });
|
|
const [compactManagerBox, compactDescriptionPanelBox] = await Promise.all([
|
|
page.getByTestId("conversation-column").getByRole("main", {
|
|
name: "Database management",
|
|
}).boundingBox(),
|
|
descriptionPanel.boundingBox(),
|
|
]);
|
|
expect(compactManagerBox).not.toBeNull();
|
|
expect(compactDescriptionPanelBox).not.toBeNull();
|
|
if (compactManagerBox && compactDescriptionPanelBox) {
|
|
expect(compactManagerBox.width - compactDescriptionPanelBox.width).toBeGreaterThanOrEqual(20);
|
|
}
|
|
expect(await descriptionBody.evaluate((element) => getComputedStyle(element).display)).not.toBe("grid");
|
|
|
|
await page.setViewportSize({ width: 1910, height: 911 });
|
|
await descriptionPanel.getByRole("button", { name: /close/i }).click();
|
|
|
|
const applicationBar = page.locator(
|
|
'main[aria-label="Database management"] .thot-fleet-ledger__header',
|
|
);
|
|
await expect(applicationBar).toHaveCount(1);
|
|
await expect(
|
|
applicationBar.getByRole("heading", { name: "Database management" }),
|
|
).toBeVisible();
|
|
await expect(
|
|
applicationBar.getByRole("region", { name: "Catalog status" }),
|
|
).toBeVisible();
|
|
await expect(
|
|
applicationBar.getByRole("group", { name: "Database management actions" }),
|
|
).toBeVisible();
|
|
await expect(
|
|
applicationBar.getByRole("combobox", { name: "Metadata-generation LLM model" }),
|
|
).toHaveValue("glm-53");
|
|
await expect(metadataModelSelector).toHaveCount(1);
|
|
await expect(applicationBar).not.toContainText("Thoth catalog · Fleet ledger");
|
|
await expect(applicationBar).not.toContainText("Inspect physical metadata");
|
|
|
|
const applicationBarLayout = await applicationBar.evaluate((element) => {
|
|
const title = element.querySelector(".thot-fleet-ledger__heading-copy");
|
|
const status = element.querySelector(".thot-fleet-ledger__header-status");
|
|
const actions = element.querySelector(".thot-fleet-ledger__header-actions");
|
|
if (!title || !status || !actions) {
|
|
throw new Error("Application bar regions are missing");
|
|
}
|
|
const centerY = (node: Element) => {
|
|
const rect = node.getBoundingClientRect();
|
|
return rect.top + rect.height / 2;
|
|
};
|
|
return {
|
|
backgroundImage: getComputedStyle(element).backgroundImage,
|
|
height: element.getBoundingClientRect().height,
|
|
centers: [centerY(title), centerY(status), centerY(actions)],
|
|
};
|
|
});
|
|
|
|
expect(applicationBarLayout.backgroundImage).toBe("none");
|
|
expect(applicationBarLayout.height).toBeLessThanOrEqual(64);
|
|
expect(
|
|
Math.max(...applicationBarLayout.centers) - Math.min(...applicationBarLayout.centers),
|
|
).toBeLessThanOrEqual(1);
|
|
|
|
await expect(page.getByRole("row", { name: /patients/ })).toBeVisible();
|
|
|
|
const editPatientsAction = page.getByRole("button", {
|
|
name: "Edit description for patients",
|
|
exact: true,
|
|
});
|
|
await expectFleetRowTooltipBelow(editPatientsAction, "Edit metadata");
|
|
await editPatientsAction.click();
|
|
await expectContextPanelGeometry(page, "Review table description");
|
|
await expectContextPanelHeaderUsesPrimary(page, "Review table description");
|
|
const tableEditor = page.getByRole("dialog", { name: "Review table description" });
|
|
const tableEditorFooter = tableEditor.locator(
|
|
':scope > [data-catalog-panel-region="footer"]',
|
|
);
|
|
await expect(tableEditorFooter).toHaveCount(1);
|
|
await expect(
|
|
tableEditorFooter.getByRole("button", { name: "Cancel", exact: true }),
|
|
).toBeVisible();
|
|
await expect(
|
|
tableEditorFooter.getByRole("button", { name: "Save metadata", exact: true }),
|
|
).toBeVisible();
|
|
await tableEditor
|
|
.getByRole("button", { name: "Close table metadata", exact: true })
|
|
.click();
|
|
|
|
const gridRoot = page.locator(
|
|
'main[aria-label="Database management"] .thot-fleet-ledger-grid .ag-root-wrapper',
|
|
);
|
|
|
|
await expect(gridRoot).toHaveCount(1);
|
|
await expect(gridRoot).toBeVisible();
|
|
|
|
await expect.poll(
|
|
() => gridRoot.evaluate((element) => {
|
|
const manager = element.closest('main[aria-label="Database management"]');
|
|
if (!manager) throw new Error("Database manager is missing");
|
|
|
|
const managerBottom = manager.getBoundingClientRect().bottom;
|
|
const gridBottom = element.getBoundingClientRect().bottom;
|
|
|
|
return Math.max(
|
|
Math.abs(window.innerHeight - managerBottom),
|
|
Math.abs(managerBottom - gridBottom - 30),
|
|
);
|
|
}),
|
|
{ message: "AG Grid must end 30px above the manager bottom" },
|
|
).toBeLessThanOrEqual(1);
|
|
|
|
const gapColors = await gridRoot.evaluate((element) => {
|
|
const workspace = element.closest(".thot-fleet-ledger__workspace");
|
|
const tableSurface = element.closest(".thot-fleet-ledger__content");
|
|
const sidebar = document.querySelector('aside[aria-label="Session navigation"]');
|
|
if (!workspace || !tableSurface || !sidebar) {
|
|
throw new Error("Application layout is missing");
|
|
}
|
|
|
|
return {
|
|
gap: getComputedStyle(workspace).backgroundColor,
|
|
table: getComputedStyle(tableSurface).backgroundColor,
|
|
sidebar: getComputedStyle(sidebar).backgroundColor,
|
|
};
|
|
});
|
|
|
|
expect(gapColors.gap).not.toBe("rgba(0, 0, 0, 0)");
|
|
expect(gapColors.gap).toBe(gapColors.sidebar);
|
|
expect(gapColors.gap).not.toBe(gapColors.table);
|
|
|
|
const workspace = page.locator(
|
|
'main[aria-label="Database management"] .thot-fleet-ledger__workspace',
|
|
);
|
|
const tableSurface = page.locator(
|
|
'main[aria-label="Database management"] .thot-fleet-ledger__content',
|
|
);
|
|
const sessionNavigation = page.getByRole("complementary", {
|
|
name: "Session navigation",
|
|
});
|
|
|
|
await expect.poll(
|
|
async () => {
|
|
const [workspaceBox, tableBox, gridBox, sidebarBox] = await Promise.all([
|
|
workspace.boundingBox(),
|
|
tableSurface.boundingBox(),
|
|
gridRoot.boundingBox(),
|
|
sessionNavigation.boundingBox(),
|
|
]);
|
|
if (!workspaceBox || !tableBox || !gridBox || !sidebarBox) {
|
|
throw new Error("Database frame geometry is missing");
|
|
}
|
|
|
|
return Math.max(
|
|
Math.abs(tableBox.x - workspaceBox.x - 20),
|
|
Math.abs(tableBox.x + tableBox.width - sidebarBox.x),
|
|
Math.abs(tableBox.y + tableBox.height - gridBox.y - gridBox.height),
|
|
);
|
|
},
|
|
{
|
|
message:
|
|
"The table must have a 20px left frame and its right border must stop at the footer",
|
|
},
|
|
).toBeLessThanOrEqual(1);
|
|
|
|
const frameBorders = await tableSurface.evaluate((element) => {
|
|
const sidebar = document.querySelector('aside[aria-label="Session navigation"]');
|
|
if (!sidebar) throw new Error("Session navigation is missing");
|
|
|
|
return {
|
|
tableEnd: Number.parseFloat(getComputedStyle(element).borderInlineEndWidth),
|
|
sidebarStart: Number.parseFloat(
|
|
getComputedStyle(sidebar).borderInlineStartWidth,
|
|
),
|
|
};
|
|
});
|
|
|
|
expect(frameBorders.tableEnd).toBe(1);
|
|
expect(frameBorders.sidebarStart).toBe(0);
|
|
await expect(page.locator(".thot-session-navigation__boundary")).toHaveCount(0);
|
|
|
|
expect(unexpectedCatalogRequests).toEqual([]);
|
|
});
|
|
|
|
test("Workspace and Pi management share the centered work-area panel without covering the session rail", async ({ page }) => {
|
|
await page.route("**/api/workspace-registry/status", (route) => json(route, {
|
|
branch: "main",
|
|
head: "a".repeat(40),
|
|
ahead: 0,
|
|
behind: 0,
|
|
degraded: false,
|
|
repository: {
|
|
host: "git.example.test",
|
|
repository: "analytics/thoth-workspaces",
|
|
transport: "ssh",
|
|
},
|
|
}));
|
|
await page.route("**/api/workspaces", (route) => json(route, []));
|
|
await page.route("**/api/pi-management/status", (route) => json(route, {
|
|
version: "0.80.3",
|
|
ready: true,
|
|
credentials: "present",
|
|
config: { provider: "zai", model: "glm-5.2", reasoning: "medium" },
|
|
checkedAt: "2026-08-31T09:00:00Z",
|
|
}));
|
|
await page.route("**/api/pi-management/options", (route) => json(route, {
|
|
providers: ["zai"],
|
|
models: [{ provider: "zai", id: "glm-5.2" }],
|
|
reasoning: ["low", "medium", "high"],
|
|
checkedAt: "2026-08-31T09:00:00Z",
|
|
}));
|
|
|
|
await page.goto(stack.publicUrl);
|
|
await signInAsAdmin(page);
|
|
const administration = page.getByRole("button", { name: "Administration", exact: true });
|
|
await expect(administration).toHaveAttribute("aria-expanded", "false");
|
|
await administration.click();
|
|
await expect(administration).toHaveAttribute("aria-expanded", "true");
|
|
|
|
for (const viewport of [
|
|
{ width: 1910, height: 911 },
|
|
{ width: 1280, height: 800 },
|
|
]) {
|
|
await page.setViewportSize(viewport);
|
|
const workspaceTrigger = page.getByRole("button", {
|
|
name: "Workspace management",
|
|
exact: true,
|
|
});
|
|
await workspaceTrigger.click();
|
|
await expectCurrentNavigation(page, "Workspace management");
|
|
await expectWorkAreaPanelGeometry(page, "Workspace management");
|
|
await expectWorkAreaPanelHeaderUsesPrimary(page, "Workspace management");
|
|
|
|
const piTrigger = page.getByRole("button", { name: "Pi management", exact: true });
|
|
await piTrigger.click();
|
|
await expectCurrentNavigation(page, "Pi management");
|
|
await expect(
|
|
page.getByRole("dialog", { name: "Workspace management" }),
|
|
).toHaveCount(0);
|
|
await expectWorkAreaPanelGeometry(page, "Pi management");
|
|
await expectWorkAreaPanelHeaderUsesPrimary(page, "Pi management");
|
|
await page
|
|
.getByRole("dialog", { name: "Pi management" })
|
|
.getByRole("button", { name: "Close Pi management" })
|
|
.click();
|
|
await expect(piTrigger).toBeFocused();
|
|
await expectCurrentNavigation(page, "New session");
|
|
}
|
|
|
|
await page.setViewportSize({ width: 720, height: 800 });
|
|
await page.getByRole("button", { name: "Workspace management", exact: true }).click();
|
|
await expectCurrentNavigation(page, "Workspace management");
|
|
const compactWorkArea = page.getByTestId("conversation-column");
|
|
const compactPanel = compactWorkArea.getByRole("dialog", { name: "Workspace management" });
|
|
const [compactWorkAreaBox, compactPanelBox] = await Promise.all([
|
|
compactWorkArea.boundingBox(),
|
|
compactPanel.boundingBox(),
|
|
]);
|
|
expect(compactWorkAreaBox).not.toBeNull();
|
|
expect(compactPanelBox).not.toBeNull();
|
|
if (compactWorkAreaBox && compactPanelBox) {
|
|
expect(Math.abs(compactPanelBox.width - compactWorkAreaBox.width + 24)).toBeLessThanOrEqual(1);
|
|
expect(Math.abs(
|
|
compactPanelBox.x + compactPanelBox.width / 2
|
|
- (compactWorkAreaBox.x + compactWorkAreaBox.width / 2),
|
|
)).toBeLessThanOrEqual(1);
|
|
}
|
|
const compactNavigation = compactPanel.getByRole("navigation", { name: "Workspaces" });
|
|
const compactContent = compactPanel.getByRole("region", {
|
|
name: "Workspace configuration",
|
|
});
|
|
const [compactNavigationBox, compactContentBox] = await Promise.all([
|
|
compactNavigation.boundingBox(),
|
|
compactContent.boundingBox(),
|
|
]);
|
|
expect(compactNavigationBox).not.toBeNull();
|
|
expect(compactContentBox).not.toBeNull();
|
|
if (compactNavigationBox && compactContentBox) {
|
|
expect(compactContentBox.y).toBeGreaterThanOrEqual(
|
|
compactNavigationBox.y + compactNavigationBox.height - 1,
|
|
);
|
|
}
|
|
});
|