50 lines
2.9 KiB
TypeScript
50 lines
2.9 KiB
TypeScript
import { expect, test } from "@playwright/test";
|
|
|
|
for (const width of [1440, 900, 390]) {
|
|
test(`mixed form controls and attachment actions remain aligned at ${width}px`, async ({ page }) => {
|
|
await page.setViewportSize({ width, height: 1200 });
|
|
const errors: string[] = [];
|
|
page.on("pageerror", (error) => errors.push(error.message));
|
|
await page.route((url) => url.pathname.startsWith("/api/"), (route) => route.abort());
|
|
await page.goto("/?form-control-layout&language=en");
|
|
const grid = page.getByTestId("mixed-form-grid");
|
|
const password = grid.locator('input[type="password"]');
|
|
const remove = grid.locator(".toggle-switch-row").filter({ hasText: "Remove configured secret" });
|
|
await expect(remove).toBeVisible();
|
|
if (width > 1100) {
|
|
for (const [input, toggle] of [
|
|
[password, remove.locator(".toggle-switch-track")],
|
|
[grid.getByRole("textbox", { name: "Wrapped field", exact: true }), grid.locator(".content-grid-item .toggle-switch-track")],
|
|
[page.getByRole("textbox", { name: "Other setting", exact: true }), page.getByTestId("mixed-form-layout").locator(".toggle-switch-track")]
|
|
]) {
|
|
await expect.poll(async () => {
|
|
const a = await input.boundingBox(), b = await toggle.boundingBox();
|
|
return a && b ? Math.abs(a.y + a.height / 2 - b.y - b.height / 2) : Infinity;
|
|
}).toBeLessThan(2);
|
|
}
|
|
const long = await grid.getByRole("textbox", { name: "Long label field" }).boundingBox();
|
|
const short = await grid.getByRole("textbox", { name: "Short label field" }).boundingBox();
|
|
expect(Math.abs(long!.y - short!.y)).toBeLessThan(2);
|
|
} else {
|
|
const field = await password.boundingBox(), toggle = await remove.boundingBox();
|
|
expect(toggle!.y).toBeGreaterThan(field!.y + field!.height);
|
|
expect(toggle!.height).toBeLessThanOrEqual(64);
|
|
}
|
|
await remove.getByRole("checkbox").focus();
|
|
await page.keyboard.press("Space");
|
|
await expect(remove.getByRole("checkbox")).toBeChecked();
|
|
await password.fill("fixture-only");
|
|
await expect(remove.getByRole("checkbox")).toBeDisabled();
|
|
await expect(page.getByTestId("compact-action").getByRole("button")).toHaveCSS("width", "36px");
|
|
const attachments = page.getByTestId("global-attachments");
|
|
const add = attachments.getByRole("button", { name: "Add first attachment", exact: true });
|
|
await expect(add).toHaveCSS("width", "36px");
|
|
await expect.poll(() => attachments.locator(".data-grid-empty-action-cell").evaluate((node) => node.getBoundingClientRect().width)).toBeLessThanOrEqual(200);
|
|
await add.click();
|
|
await expect(attachments.locator(".data-grid-empty-action-cell")).toHaveCount(0);
|
|
await expect(attachments.getByRole("button", { name: "Add attachment below", exact: true })).toHaveCSS("width", "36px");
|
|
await expect.poll(() => page.locator("main").evaluate((node) => node.scrollWidth <= node.clientWidth + 1)).toBe(true);
|
|
expect(errors).toEqual([]);
|
|
});
|
|
}
|