507 lines
27 KiB
JavaScript
507 lines
27 KiB
JavaScript
const { test, expect } = require("@playwright/test");
|
|
const AxeBuilder = require("@axe-core/playwright").default;
|
|
|
|
async function loginAsAdmin(page) {
|
|
await page.goto("/auth/localhost");
|
|
await page.getByLabel(/username/i).fill("admin");
|
|
await page.getByLabel(/password/i).fill("admin");
|
|
await Promise.all([
|
|
page.waitForURL(/\/$|\/admin/),
|
|
page.getByRole("button", { name: /login locally/i }).click()
|
|
]);
|
|
}
|
|
|
|
async function expectNoSeriousAxeViolations(page) {
|
|
const result = await new AxeBuilder({ page }).analyze();
|
|
const blocking = result.violations.filter((item) => ["serious", "critical"].includes(item.impact));
|
|
expect(blocking, blocking.map((item) => `${item.id}: ${item.help}`).join("\n")).toEqual([]);
|
|
}
|
|
|
|
async function clickSidebarLink(page, href) {
|
|
const link = page.locator(`.nav-link[href="${href}"]`);
|
|
if (!(await link.isVisible())) {
|
|
await link.locator("xpath=ancestor::details/summary").click();
|
|
}
|
|
await Promise.all([
|
|
page.waitForNavigation({ waitUntil: "load" }),
|
|
link.click()
|
|
]);
|
|
}
|
|
|
|
test("public shell renders without page errors or serious accessibility violations", async ({ page }, testInfo) => {
|
|
const errors = [];
|
|
page.on("pageerror", (error) => errors.push(error.message));
|
|
await page.goto("/");
|
|
await expect(page.locator("main.content")).toBeVisible();
|
|
await expect(page.getByRole("heading", { level: 1 })).toBeVisible();
|
|
await expectNoSeriousAxeViolations(page);
|
|
await page.screenshot({ path: testInfo.outputPath("home-baseline.png"), fullPage: true });
|
|
expect(errors).toEqual([]);
|
|
});
|
|
|
|
test("mobile navigation is a focus-contained drawer and restores its opener", async ({ page }) => {
|
|
test.skip((page.viewportSize()?.width || 999) > 900, "Mobile drawer contract applies below 900px.");
|
|
await page.goto("/");
|
|
const opener = page.locator(".mobile-topbar [data-sidebar-toggle]");
|
|
await opener.click();
|
|
await expect(opener).toHaveAttribute("aria-expanded", "true");
|
|
await expect(page.locator("#lumi-sidebar")).toHaveAttribute("aria-modal", "true");
|
|
await page.keyboard.press("Escape");
|
|
await expect(opener).toHaveAttribute("aria-expanded", "false");
|
|
await expect(opener).toBeFocused();
|
|
});
|
|
|
|
test("live events use one connection and release it across repeated navigation", async ({ page }) => {
|
|
test.skip((page.viewportSize()?.width || 0) <= 900, "Desktop navigation stress coverage exercises the same event lifecycle.");
|
|
await page.addInitScript(() => {
|
|
const NativeEventSource = window.EventSource;
|
|
window.__lumiEventSourceUrls = [];
|
|
window.EventSource = new Proxy(NativeEventSource, {
|
|
construct(Target, args) {
|
|
window.__lumiEventSourceUrls.push(new URL(args[0], window.location.href).pathname);
|
|
return Reflect.construct(Target, args);
|
|
}
|
|
});
|
|
});
|
|
await loginAsAdmin(page);
|
|
await clickSidebarLink(page, "/admin/updates");
|
|
await expect.poll(() => page.evaluate(() => window.__lumiEventSourceUrls)).toEqual(["/api/events"]);
|
|
|
|
const routes = ["/commands", "/feedback", "/admin", "/admin/navigation", "/admin/settings", "/"];
|
|
for (let cycle = 0; cycle < 3; cycle += 1) {
|
|
for (const route of routes) {
|
|
await clickSidebarLink(page, route);
|
|
await expect.poll(() => page.evaluate(() => window.__lumiEventSourceUrls)).toEqual(["/api/events"]);
|
|
}
|
|
}
|
|
});
|
|
|
|
test("updates reconcile checks and cleanup settings without document reloads", async ({ page }) => {
|
|
await loginAsAdmin(page);
|
|
let snapshotSaveAttempts = 0;
|
|
await page.route("**/admin/updates/core/check", async (route) => {
|
|
if (route.request().method() !== "POST") return route.continue();
|
|
const core = {
|
|
current_version: "0.2.24",
|
|
safe_target_version: "0.2.25",
|
|
latest_available_version: "0.2.25",
|
|
source_branch: "main",
|
|
update_available: true,
|
|
blocked: false,
|
|
version_description: "A targeted browser-test update is available."
|
|
};
|
|
await route.fulfill({
|
|
status: 200,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
ok: true,
|
|
message: "Core version 0.2.25 is available.",
|
|
status: { core },
|
|
data: { status: { core } },
|
|
patch: {},
|
|
reloadRequired: false
|
|
})
|
|
});
|
|
});
|
|
await page.route("**/admin/updates/snapshots/settings", async (route) => {
|
|
if (route.request().method() !== "POST" || snapshotSaveAttempts++ > 0) return route.continue();
|
|
await route.fulfill({
|
|
status: 422,
|
|
contentType: "application/json",
|
|
body: JSON.stringify({
|
|
ok: false,
|
|
message: "Correct the snapshot cleanup limits and try again.",
|
|
fieldErrors: { max_age_days: "Enter a whole number from 1 to 3650." },
|
|
data: {},
|
|
patch: {},
|
|
reloadRequired: false
|
|
})
|
|
});
|
|
});
|
|
await page.goto("/admin/updates");
|
|
await expect(page.locator("[data-update-management]")).toBeVisible();
|
|
const deployment = page.locator("[data-deployment-panel]");
|
|
await expect(deployment.getByRole("heading", { name: "Running code branch" })).toBeVisible();
|
|
await expect(deployment.locator("select[name='branch']")).toContainText("Stable · main");
|
|
await expect(deployment.getByRole("button", { name: "Deploy selected branch" })).toBeVisible();
|
|
const navigationCount = await page.evaluate(() => performance.getEntriesByType("navigation").length);
|
|
const core = page.locator('[data-update-key="core"]');
|
|
await core.locator("summary").first().click();
|
|
const [checkResponse] = await Promise.all([
|
|
page.waitForResponse((response) => new URL(response.url()).pathname === "/admin/updates/core/check"),
|
|
core.getByRole("button", { name: "Check for updates" }).click()
|
|
]);
|
|
expect(checkResponse.headers()["content-type"]).toContain("application/json");
|
|
await expect(core.locator("[data-update-summary]")).toContainText("0.2.25");
|
|
await expect(core.locator("[data-update-badge]")).toHaveText("Update available");
|
|
await expect(core.locator("[data-update-inline-result]")).toContainText("0.2.25");
|
|
expect(await page.evaluate(() => performance.getEntriesByType("navigation").length)).toBe(navigationCount);
|
|
|
|
const settings = page.locator("[data-update-settings-form]");
|
|
const age = settings.locator("input[name='max_age_days']");
|
|
const count = settings.locator("input[name='max_per_target']");
|
|
const originalAge = await age.inputValue();
|
|
const originalCount = await count.inputValue();
|
|
const [invalidResponse] = await Promise.all([
|
|
page.waitForResponse((response) => new URL(response.url()).pathname === "/admin/updates/snapshots/settings"),
|
|
settings.getByRole("button", { name: "Save cleanup policy" }).click()
|
|
]);
|
|
expect(invalidResponse.status()).toBe(422);
|
|
await expect(age).toHaveAttribute("aria-invalid", "true");
|
|
await expect(settings.locator("[data-update-inline-result]")).toContainText("Correct the snapshot cleanup limits");
|
|
await age.fill(originalAge);
|
|
await count.fill(originalCount);
|
|
const [saveResponse] = await Promise.all([
|
|
page.waitForResponse((response) => new URL(response.url()).pathname === "/admin/updates/snapshots/settings" && response.status() === 200),
|
|
settings.getByRole("button", { name: "Save cleanup policy" }).click()
|
|
]);
|
|
expect(saveResponse.headers()["content-type"]).toContain("application/json");
|
|
await expect(settings.locator("[data-update-inline-result]")).toContainText("Snapshot cleanup now keeps");
|
|
expect(await page.evaluate(() => performance.getEntriesByType("navigation").length)).toBe(navigationCount);
|
|
|
|
const reflow = await page.evaluate(() => ({ viewport: document.documentElement.clientWidth, documentWidth: document.documentElement.scrollWidth }));
|
|
expect(reflow.documentWidth).toBeLessThanOrEqual(reflow.viewport + 1);
|
|
await expectNoSeriousAxeViolations(page);
|
|
});
|
|
|
|
test("custom commands and policies save targeted state without document reloads", async ({ page }) => {
|
|
await loginAsAdmin(page);
|
|
await page.goto("/commands");
|
|
const triggerHeader = page.locator("th[data-sort='trigger']");
|
|
await triggerHeader.getByRole("button", { name: "Trigger" }).focus();
|
|
await page.keyboard.press("Enter");
|
|
await expect(triggerHeader).toHaveAttribute("aria-sort", "ascending");
|
|
await expectNoSeriousAxeViolations(page);
|
|
await page.goto("/admin/commands");
|
|
const createForm = page.locator("[data-command-create-form]");
|
|
const mode = createForm.locator("select[name='mode']");
|
|
await mode.selectOption("random");
|
|
await expect(createForm.locator(".js-field-random")).toBeVisible();
|
|
await expect(createForm.locator(".js-field-response").locator("xpath=ancestor::div[contains(@class,'field')]")).toBeHidden();
|
|
await mode.selectOption("plain");
|
|
|
|
const trigger = `uxcommand${Date.now()}`;
|
|
await createForm.locator("input[name='trigger']").fill(trigger);
|
|
await createForm.locator("input[name='response']").fill("A targeted command response");
|
|
const commandNavigationCount = await page.evaluate(() => performance.getEntriesByType("navigation").length);
|
|
const [createResponse] = await Promise.all([
|
|
page.waitForResponse((response) => new URL(response.url()).pathname === "/admin/commands" && response.request().method() === "POST"),
|
|
createForm.getByRole("button", { name: "Create command" }).click({ timeout: 5000 })
|
|
]);
|
|
expect(createResponse.headers()["content-type"]).toContain("application/json");
|
|
await expect(page.locator("[data-command-list-section]")).toContainText(trigger);
|
|
await expect(page.locator("[data-command-management-status]")).toContainText("Command created");
|
|
expect(await page.evaluate(() => performance.getEntriesByType("navigation").length)).toBe(commandNavigationCount);
|
|
await expect(createForm.locator("input[name='trigger']")).toHaveValue("");
|
|
expect(await createForm.evaluate((form) => Array.from(form.elements)
|
|
.filter((field) => typeof field.checkValidity === "function" && !field.checkValidity())
|
|
.map((field) => ({ name: field.name, message: field.validationMessage })))).toEqual([]);
|
|
const [invalidResponse] = await Promise.all([
|
|
page.waitForResponse((response) => new URL(response.url()).pathname === "/admin/commands" && response.request().method() === "POST"),
|
|
createForm.evaluate((form) => form.requestSubmit(form.querySelector("button[type='submit']")))
|
|
]);
|
|
expect(invalidResponse.status()).toBe(422);
|
|
await expect(createForm.locator("input[name='trigger']")).toHaveAttribute("aria-invalid", "true");
|
|
await expect(createForm.locator("[data-lumi-form-status]")).toContainText("Trigger is required");
|
|
expect(await page.evaluate(() => performance.getEntriesByType("navigation").length)).toBe(commandNavigationCount);
|
|
const commandReflow = await page.evaluate(() => ({ viewport: document.documentElement.clientWidth, documentWidth: document.documentElement.scrollWidth }));
|
|
expect(commandReflow.documentWidth).toBeLessThanOrEqual(commandReflow.viewport + 1);
|
|
|
|
await page.goto("/admin/command-policies");
|
|
const commandItem = page.locator('[data-policy-search-scope="commands"] [data-policy-item]', { hasText: `!${trigger}` });
|
|
await expect(commandItem).toHaveCount(1);
|
|
await commandItem.locator("summary").click();
|
|
await commandItem.locator("select[name$='window_mode']").selectOption("custom");
|
|
await commandItem.locator("input[name$='window_uses']").fill("2");
|
|
const policyNavigationCount = await page.evaluate(() => performance.getEntriesByType("navigation").length);
|
|
const [policyResponse] = await Promise.all([
|
|
page.waitForResponse((response) => new URL(response.url()).pathname === "/admin/command-policies/commands"),
|
|
page.locator(".command-policy-savebar").first().getByRole("button", { name: "Save all command settings" }).click()
|
|
]);
|
|
expect(policyResponse.headers()["content-type"]).toContain("application/json");
|
|
await expect(page.locator("[data-command-save-state]")).toContainText("saved");
|
|
expect(await page.evaluate(() => performance.getEntriesByType("navigation").length)).toBe(policyNavigationCount);
|
|
|
|
const reflow = await page.evaluate(() => ({ viewport: document.documentElement.clientWidth, documentWidth: document.documentElement.scrollWidth }));
|
|
expect(reflow.documentWidth).toBeLessThanOrEqual(reflow.viewport + 1);
|
|
await expectNoSeriousAxeViolations(page);
|
|
});
|
|
|
|
test("enhanced settings save preserves the document, focus, and viewport", async ({ page }) => {
|
|
await loginAsAdmin(page);
|
|
await page.goto("/admin/settings");
|
|
const title = page.locator("input[name='site_title']");
|
|
await title.focus();
|
|
const navigationCount = await page.evaluate(() => performance.getEntriesByType("navigation").length);
|
|
const scrollBefore = await page.evaluate(() => window.scrollY);
|
|
await title.fill(`Lumi UI Test ${Date.now()}`);
|
|
await page.getByRole("button", { name: "Save changes" }).click();
|
|
await expect(page.getByText(/Section saved|Settings saved/).first()).toBeVisible();
|
|
expect(await page.evaluate(() => performance.getEntriesByType("navigation").length)).toBe(navigationCount);
|
|
expect(Math.abs((await page.evaluate(() => window.scrollY)) - scrollBefore)).toBeLessThan(3);
|
|
await expect(title).toBeFocused();
|
|
await expectNoSeriousAxeViolations(page);
|
|
});
|
|
|
|
test("overlay editor keeps settings scrollable and synchronizes interactive previews", async ({ page }) => {
|
|
await loginAsAdmin(page);
|
|
await page.goto("/admin/overlays");
|
|
await page.getByRole("button", { name: "Create overlay" }).click();
|
|
const createName = page.locator("[data-overlay-create-modal] input[name='name']");
|
|
const overlayName = `UX overlay ${Date.now()}`;
|
|
await expect(createName).toBeFocused();
|
|
await createName.fill(overlayName);
|
|
await Promise.all([
|
|
page.waitForURL(/\/admin\/overlays/),
|
|
page.locator("[data-overlay-create-modal]").getByRole("button", { name: /create|add/i }).click()
|
|
]);
|
|
await page.locator("tbody tr", { hasText: overlayName }).getByRole("link", { name: "Open editor" }).click();
|
|
const viewportWidth = page.viewportSize()?.width || 0;
|
|
const preview = page.locator("[data-overlay-editor]");
|
|
const previewLauncher = page.locator("[data-preview-drawer-toggle]");
|
|
if (viewportWidth >= 1180) {
|
|
await expect(preview).toBeVisible();
|
|
} else {
|
|
await expect(preview).toBeHidden();
|
|
await page.mouse.move((page.viewportSize()?.width || 320) / 2, Math.min(420, (page.viewportSize()?.height || 720) / 2));
|
|
await page.mouse.wheel(0, 480);
|
|
await expect.poll(() => page.evaluate(() => window.scrollY)).toBeGreaterThan(0);
|
|
await page.evaluate(() => window.scrollTo(0, 0));
|
|
const launcherGeometry = await previewLauncher.evaluate((button) => {
|
|
const rect = button.getBoundingClientRect();
|
|
return {
|
|
top: rect.top,
|
|
bottom: rect.bottom,
|
|
viewportHeight: window.innerHeight
|
|
};
|
|
});
|
|
expect(launcherGeometry.top).toBeGreaterThanOrEqual(0);
|
|
expect(launcherGeometry.bottom).toBeLessThanOrEqual(launcherGeometry.viewportHeight);
|
|
await previewLauncher.click();
|
|
await expect(preview).toBeVisible();
|
|
await expect(previewLauncher).toHaveAttribute("aria-expanded", "true");
|
|
await expect(preview).toHaveCSS("overflow-y", "auto");
|
|
}
|
|
|
|
const previewGeometry = await preview.evaluate((panel) => {
|
|
const panelRect = panel.getBoundingClientRect();
|
|
const frameRect = panel.querySelector("[data-preview-frame]").getBoundingClientRect();
|
|
return {
|
|
panelTop: panelRect.top,
|
|
panelBottom: panelRect.bottom,
|
|
viewportHeight: window.innerHeight,
|
|
frameRatio: frameRect.width / frameRect.height,
|
|
stageHeight: panel.querySelector("[data-preview-stage]").getBoundingClientRect().height,
|
|
frameHeight: frameRect.height,
|
|
panelHeight: panelRect.height
|
|
};
|
|
});
|
|
expect(previewGeometry.panelTop).toBeGreaterThanOrEqual(-1);
|
|
expect(previewGeometry.panelBottom).toBeLessThanOrEqual(previewGeometry.viewportHeight + 1);
|
|
expect(previewGeometry.frameRatio).toBeCloseTo(16 / 9, 2);
|
|
expect(Math.abs(previewGeometry.stageHeight - previewGeometry.frameHeight)).toBeLessThanOrEqual(2);
|
|
if (viewportWidth >= 1180) expect(previewGeometry.panelHeight).toBeLessThan(previewGeometry.viewportHeight * 0.9);
|
|
|
|
if (viewportWidth < 1180) {
|
|
await preview.getByRole("button", { name: "Close scene preview" }).click();
|
|
await expect(preview).toBeHidden();
|
|
await expect(previewLauncher).toBeFocused();
|
|
}
|
|
|
|
const settingsColumn = page.locator(".overlay-settings-column");
|
|
const finalSettingsCard = page.locator(".overlay-settings-column > .card").last();
|
|
const finalDisclosure = finalSettingsCard.locator("details").first();
|
|
if (viewportWidth < 1180) {
|
|
await finalDisclosure.locator("summary").evaluate((item) => item.scrollIntoView({ block: "center", behavior: "instant" }));
|
|
}
|
|
await finalDisclosure.locator("summary").click();
|
|
const scrollContract = await settingsColumn.evaluate((item) => ({
|
|
overflowY: getComputedStyle(item).overflowY,
|
|
maxHeight: getComputedStyle(item).maxHeight,
|
|
legacyHeight: item.style.getPropertyValue("--overlay-settings-max-height"),
|
|
clientHeight: item.clientHeight,
|
|
scrollHeight: item.scrollHeight
|
|
}));
|
|
expect(scrollContract.legacyHeight).toBe("");
|
|
if (viewportWidth >= 1180) {
|
|
expect(scrollContract.overflowY).toBe("auto");
|
|
expect(scrollContract.scrollHeight).toBeGreaterThan(scrollContract.clientHeight);
|
|
await settingsColumn.evaluate((item) => { item.scrollTop = item.scrollHeight; });
|
|
await expect.poll(() => settingsColumn.evaluate((item) => item.scrollTop)).toBeGreaterThan(0);
|
|
} else {
|
|
expect(["visible", "clip"]).toContain(scrollContract.overflowY);
|
|
}
|
|
|
|
const finalSettingsAction = finalSettingsCard.locator("button").last();
|
|
await finalSettingsAction.scrollIntoViewIfNeeded();
|
|
await expect(finalSettingsAction).toBeVisible();
|
|
const finalActionGeometry = await finalSettingsAction.evaluate((button) => {
|
|
const rect = button.getBoundingClientRect();
|
|
return { top: rect.top, bottom: rect.bottom, viewportHeight: window.innerHeight };
|
|
});
|
|
expect(finalActionGeometry.top).toBeGreaterThanOrEqual(-1);
|
|
expect(finalActionGeometry.bottom).toBeLessThanOrEqual(finalActionGeometry.viewportHeight + 1);
|
|
if (viewportWidth >= 1180) {
|
|
const stickyGeometry = await preview.evaluate((panel) => {
|
|
const rect = panel.getBoundingClientRect();
|
|
return { top: rect.top, bottom: rect.bottom, viewportHeight: window.innerHeight };
|
|
});
|
|
expect(stickyGeometry.top).toBeGreaterThanOrEqual(-1);
|
|
expect(stickyGeometry.bottom).toBeLessThanOrEqual(stickyGeometry.viewportHeight + 1);
|
|
|
|
const addSource = page.locator(".overlay-add-source").first();
|
|
await addSource.scrollIntoViewIfNeeded();
|
|
await addSource.locator("summary").click();
|
|
await addSource.locator("input[name='name']").fill("Pop-out adjustment source");
|
|
await Promise.all([
|
|
page.waitForNavigation({ waitUntil: "load" }),
|
|
addSource.getByRole("button", { name: "Add source" }).click()
|
|
]);
|
|
await expect(page.locator("[data-overlay-editor]")).toBeVisible();
|
|
|
|
const [popup] = await Promise.all([
|
|
page.waitForEvent("popup"),
|
|
preview.getByRole("button", { name: "Pop out" }).click()
|
|
]);
|
|
await popup.waitForLoadState("domcontentloaded");
|
|
await popup.setViewportSize({ width: 900, height: 500 });
|
|
const popoutFrame = popup.locator("[data-preview-window-frame]");
|
|
await expect(popoutFrame).toBeVisible();
|
|
await expect.poll(() => popoutFrame.evaluate((frame) => {
|
|
const rect = frame.getBoundingClientRect();
|
|
return rect.right <= window.innerWidth + 1 && rect.bottom <= window.innerHeight + 1;
|
|
})).toBe(true);
|
|
const popoutGeometry = await popoutFrame.evaluate((frame) => {
|
|
const rect = frame.getBoundingClientRect();
|
|
return {
|
|
top: rect.top,
|
|
right: rect.right,
|
|
bottom: rect.bottom,
|
|
left: rect.left,
|
|
ratio: rect.width / rect.height,
|
|
viewportWidth: window.innerWidth,
|
|
viewportHeight: window.innerHeight
|
|
};
|
|
});
|
|
expect(popoutGeometry.top).toBeGreaterThanOrEqual(-1);
|
|
expect(popoutGeometry.left).toBeGreaterThanOrEqual(-1);
|
|
expect(popoutGeometry.right).toBeLessThanOrEqual(popoutGeometry.viewportWidth + 1);
|
|
expect(popoutGeometry.bottom).toBeLessThanOrEqual(popoutGeometry.viewportHeight + 1);
|
|
expect(popoutGeometry.ratio).toBeCloseTo(16 / 9, 2);
|
|
await expect(popup.locator("[data-popout-source]")).toHaveValue(/.+/);
|
|
await expect(popup.locator(".lumi-overlay-module.is-selected")).toHaveCount(1);
|
|
const mainX = page.locator("[data-module-editor][data-module-id] input[name='x']").first();
|
|
await expect(mainX).toHaveValue("0");
|
|
const transformResponse = popup.waitForResponse((response) => /\/api\/admin\/overlays\/[^/]+\/modules\/[^/]+\/transform$/.test(new URL(response.url()).pathname));
|
|
await popup.locator("[data-preview-window-canvas]").focus();
|
|
await popup.keyboard.press("ArrowRight");
|
|
expect((await transformResponse).ok()).toBe(true);
|
|
await expect(popup.locator("[data-preview-window-status]")).toContainText("Saved");
|
|
await expect(mainX).toHaveValue("0.1");
|
|
await popup.close();
|
|
}
|
|
|
|
const navigationCount = await page.evaluate(() => performance.getEntriesByType("navigation").length);
|
|
await page.getByText("Overlay name and canvas size", { exact: true }).click();
|
|
const name = page.locator("form[data-lumi-enhanced-form] input[name='name']").first();
|
|
await name.fill(`${await name.inputValue()} edited`);
|
|
await name.locator("xpath=ancestor::form").getByRole("button", { name: /save overlay settings/i }).click();
|
|
await expect(name.locator("xpath=ancestor::form").locator("[data-lumi-form-status]")).toContainText("Overlay saved");
|
|
expect(await page.evaluate(() => performance.getEntriesByType("navigation").length)).toBe(navigationCount);
|
|
await expectNoSeriousAxeViolations(page);
|
|
});
|
|
|
|
test("resource storage limits save, reconcile immediately, and persist", async ({ page }) => {
|
|
await loginAsAdmin(page);
|
|
await page.goto("/admin/resources");
|
|
const settings = page.locator(".resource-settings-panel");
|
|
await settings.locator("summary").click();
|
|
const form = settings.locator("[data-resource-settings-form]");
|
|
await form.locator("[name='limit_gib']").fill("3.5");
|
|
await form.locator("[name='reserve_gib']").fill("0.3");
|
|
await form.locator("[name='max_file_mib']").fill("24");
|
|
await form.locator("[name='max_files']").fill("6");
|
|
const [response] = await Promise.all([
|
|
page.waitForResponse((candidate) => new URL(candidate.url()).pathname === "/admin/resources/settings"),
|
|
form.getByRole("button", { name: "Save storage settings" }).click()
|
|
]);
|
|
expect(response.ok()).toBe(true);
|
|
const payload = await response.json();
|
|
expect(payload.settings).toEqual({ limit_gib: 3.5, reserve_gib: 0.3, max_file_mib: 24, max_files: 6 });
|
|
await expect(form.locator("[data-resource-settings-status]")).toContainText("saved");
|
|
await expect(page.locator("[data-storage-limit]")).toContainText("3.50 GB");
|
|
await expect(page.locator("[data-storage-max-file]")).toContainText("24.0 MB");
|
|
const fileInput = page.locator("[data-resource-file-input]");
|
|
await expect(fileInput).toHaveAttribute("data-max-files", "6");
|
|
await expect(fileInput).toHaveAttribute("data-max-file-bytes", String(24 * 1024 * 1024));
|
|
|
|
await page.reload();
|
|
await page.locator(".resource-settings-panel summary").click();
|
|
await expect(page.locator("[data-resource-settings-form] [name='limit_gib']")).toHaveValue("3.5");
|
|
await expect(page.locator("[data-resource-settings-form] [name='reserve_gib']")).toHaveValue("0.3");
|
|
await expect(page.locator("[data-resource-settings-form] [name='max_file_mib']")).toHaveValue("24");
|
|
await expect(page.locator("[data-resource-settings-form] [name='max_files']")).toHaveValue("6");
|
|
await expectNoSeriousAxeViolations(page);
|
|
});
|
|
|
|
test("navigation builder supports keyboard movement and saves without navigation", async ({ page }) => {
|
|
await loginAsAdmin(page);
|
|
await page.goto("/admin/navigation");
|
|
await expect(page.locator("[data-navigation-builder]" )).toBeVisible();
|
|
const navigationCount = await page.evaluate(() => performance.getEntriesByType("navigation").length);
|
|
|
|
const firstItem = page.locator("[data-nav-section-card] .nav-dd-item").first();
|
|
const navId = await firstItem.getAttribute("data-nav-id");
|
|
const movedItem = page.locator(`.nav-dd-item[data-nav-id="${navId}"]`);
|
|
const originalGroup = await movedItem.locator("xpath=parent::*").getAttribute("data-group-label");
|
|
await movedItem.getByRole("button", { name: /to the next group/i }).click();
|
|
const movedGroup = await movedItem.locator("xpath=parent::*").getAttribute("data-group-label");
|
|
expect(movedGroup).not.toBe(originalGroup);
|
|
|
|
await page.getByRole("button", { name: "Add section" }).click();
|
|
const newLabel = page.locator("[data-nav-section-card] .nav-section-label").last();
|
|
await expect(newLabel).toBeFocused();
|
|
await newLabel.fill("Automation");
|
|
await page.getByRole("button", { name: "Save navigation" }).click();
|
|
await expect(page.locator("[data-nav-builder-status]")).toContainText("Navigation saved");
|
|
expect(await page.evaluate(() => performance.getEntriesByType("navigation").length)).toBe(navigationCount);
|
|
await expect(page.locator("[data-nav-dirty-badge]")).toBeHidden();
|
|
|
|
const reflow = await page.evaluate(() => ({
|
|
viewport: document.documentElement.clientWidth,
|
|
documentWidth: document.documentElement.scrollWidth
|
|
}));
|
|
expect(reflow.documentWidth).toBeLessThanOrEqual(reflow.viewport + 1);
|
|
await expectNoSeriousAxeViolations(page);
|
|
});
|
|
|
|
test("theme draft preview survives a targeted custom-theme save", async ({ page }) => {
|
|
await loginAsAdmin(page);
|
|
await page.goto("/admin/theming");
|
|
const sourceTheme = page.locator(".theme-card").first();
|
|
await sourceTheme.locator("summary", { hasText: "More actions" }).click();
|
|
const copyName = `UX Theme ${Date.now()}`;
|
|
await sourceTheme.locator("form[action='/admin/theming/duplicate'] input[name='name']").fill(copyName);
|
|
await Promise.all([
|
|
page.waitForURL(/\/admin\/theming\?edit=.*#theme-editor/),
|
|
sourceTheme.getByRole("button", { name: "Duplicate" }).click()
|
|
]);
|
|
|
|
const form = page.locator("[data-theme-form]");
|
|
await expect(form).toBeVisible();
|
|
const accent = form.locator("input[name='light_accent']");
|
|
const nextAccent = (await accent.inputValue()).toLowerCase() === "#176b76" ? "#176b75" : "#176b76";
|
|
await accent.fill(nextAccent);
|
|
const navigationCount = await page.evaluate(() => performance.getEntriesByType("navigation").length);
|
|
const [saveResponse] = await Promise.all([
|
|
page.waitForResponse((response) => /\/admin\/theming\/custom\/[^/]+\/save$/.test(new URL(response.url()).pathname)),
|
|
form.getByRole("button", { name: "Save theme" }).click()
|
|
]);
|
|
expect(saveResponse.headers()["content-type"]).toContain("application/json");
|
|
expect((await saveResponse.json()).message).toContain(`${copyName} saved`);
|
|
await expect(form.locator("[data-lumi-form-status]")).toContainText(`${copyName} saved`);
|
|
expect(await page.evaluate(() => performance.getEntriesByType("navigation").length)).toBe(navigationCount);
|
|
await expect(form.getByRole("button", { name: "Saved", exact: true })).toBeVisible();
|
|
await expectNoSeriousAxeViolations(page);
|
|
});
|