67 lines
2.9 KiB
TypeScript
67 lines
2.9 KiB
TypeScript
|
import { expect, test } from "@playwright/test";
|
||
|
|
import { collectBrowserIssues, login } from "./helpers";
|
||
|
|
|
||
|
|
test.describe("cross-page UI polish", () => {
|
||
|
|
test("rounds notification panels and normalizes graph fields", async ({ page }) => {
|
||
|
|
const browserIssues = collectBrowserIssues(page);
|
||
|
|
await login(page);
|
||
|
|
|
||
|
|
await page.goto("/notifications");
|
||
|
|
const notificationRadius = await page.locator("#keyword-section").evaluate((element) =>
|
||
|
|
Number.parseFloat(getComputedStyle(element).borderTopLeftRadius),
|
||
|
|
);
|
||
|
|
const deliveryRadius = await page.locator("details.notification-section").first().evaluate((element) =>
|
||
|
|
Number.parseFloat(getComputedStyle(element).borderTopLeftRadius),
|
||
|
|
);
|
||
|
|
expect(notificationRadius).toBeGreaterThanOrEqual(14);
|
||
|
|
expect(deliveryRadius).toBeGreaterThanOrEqual(14);
|
||
|
|
|
||
|
|
await page.goto("/graph");
|
||
|
|
const graphColors = await page.evaluate(() => {
|
||
|
|
const field = document.querySelector(".graph-field");
|
||
|
|
const input = document.querySelector("#graph-search");
|
||
|
|
const select = document.querySelector("#graph-status");
|
||
|
|
if (!field || !input || !select) throw new Error("Graph controls are missing");
|
||
|
|
return {
|
||
|
|
field: getComputedStyle(field).backgroundColor,
|
||
|
|
input: getComputedStyle(input).backgroundColor,
|
||
|
|
select: getComputedStyle(select).backgroundColor,
|
||
|
|
};
|
||
|
|
});
|
||
|
|
expect(graphColors.input).toBe("rgba(0, 0, 0, 0)");
|
||
|
|
expect(graphColors.field).toBe(graphColors.select);
|
||
|
|
|
||
|
|
await page.locator("#graph-search").fill("example");
|
||
|
|
await expect(page.locator("#graph-search")).toHaveValue("example");
|
||
|
|
expect(browserIssues).toEqual([]);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("spaces the File Share empty state and fits on mobile", async ({ page }) => {
|
||
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
||
|
|
const browserIssues = collectBrowserIssues(page);
|
||
|
|
await login(page);
|
||
|
|
await page.goto("/file-share");
|
||
|
|
|
||
|
|
const emptyState = page.locator(".file-share-empty");
|
||
|
|
await expect(emptyState).toBeVisible();
|
||
|
|
const filePickerColors = await page.locator("#upload-file").evaluate((element) => ({
|
||
|
|
field: getComputedStyle(element).backgroundColor,
|
||
|
|
button: getComputedStyle(element, "::file-selector-button").backgroundColor,
|
||
|
|
}));
|
||
|
|
expect(filePickerColors.button).toBe("rgba(0, 0, 0, 0)");
|
||
|
|
expect(filePickerColors.field).not.toBe(filePickerColors.button);
|
||
|
|
await page.locator("#upload-file").hover();
|
||
|
|
const iconBox = await emptyState.locator("i").boundingBox();
|
||
|
|
const labelBox = await emptyState.locator("span").boundingBox();
|
||
|
|
expect(iconBox).not.toBeNull();
|
||
|
|
expect(labelBox).not.toBeNull();
|
||
|
|
expect(labelBox!.y - (iconBox!.y + iconBox!.height)).toBeGreaterThanOrEqual(11);
|
||
|
|
|
||
|
|
const overflow = await page.evaluate(() =>
|
||
|
|
document.documentElement.scrollWidth - document.documentElement.clientWidth,
|
||
|
|
);
|
||
|
|
expect(overflow).toBeLessThanOrEqual(1);
|
||
|
|
expect(browserIssues).toEqual([]);
|
||
|
|
});
|
||
|
|
});
|