55 lines
2.7 KiB
TypeScript
55 lines
2.7 KiB
TypeScript
|
import { expect, test } from "@playwright/test";
|
||
|
|
import { collectBrowserIssues, login } from "./helpers";
|
||
|
|
|
||
|
|
test.describe("compact notifications layout", () => {
|
||
|
|
test("keeps common settings visible and advanced delivery collapsed", async ({ page }) => {
|
||
|
|
const browserIssues = collectBrowserIssues(page);
|
||
|
|
await login(page);
|
||
|
|
await page.goto("/notifications");
|
||
|
|
|
||
|
|
await expect(page.getByRole("heading", { name: "Keywords" })).toBeVisible();
|
||
|
|
await expect(page.locator("#keyword-input")).toBeVisible();
|
||
|
|
await expect(page.getByRole("heading", { name: "Desktop alerts" })).toBeVisible();
|
||
|
|
await expect(page.getByRole("heading", { name: "Event delivery" })).toBeVisible();
|
||
|
|
|
||
|
|
const deliverySections = page.locator("details.notification-section");
|
||
|
|
await expect(deliverySections).toHaveCount(2);
|
||
|
|
await expect(deliverySections.nth(0)).not.toHaveAttribute("open", "");
|
||
|
|
await expect(deliverySections.nth(1)).not.toHaveAttribute("open", "");
|
||
|
|
await expect(page.locator("#save-webhook")).not.toBeVisible();
|
||
|
|
await expect(page.locator("#save-telegram")).not.toBeVisible();
|
||
|
|
|
||
|
|
await deliverySections.nth(0).locator(":scope > summary").click();
|
||
|
|
await expect(page.locator("#save-webhook")).toBeVisible();
|
||
|
|
await expect(page.locator("#webhook-url")).toBeVisible();
|
||
|
|
await expect(page.locator("#webhook-template")).not.toBeVisible();
|
||
|
|
await deliverySections.nth(0).locator("details.notification-advanced > summary").click();
|
||
|
|
await expect(page.getByRole("textbox", { name: "Editor content" })).toBeVisible();
|
||
|
|
|
||
|
|
await expect(page.locator(".ui-help[title]")).toHaveCount(9);
|
||
|
|
await expect(page.getByText("Fire when a client connects")).toHaveCount(0);
|
||
|
|
await expect(page.getByText("Your personal webhook")).toHaveCount(0);
|
||
|
|
expect(browserIssues).toEqual([]);
|
||
|
|
});
|
||
|
|
|
||
|
|
test("fits opened settings on a phone viewport", async ({ page }) => {
|
||
|
|
await page.setViewportSize({ width: 390, height: 844 });
|
||
|
|
const browserIssues = collectBrowserIssues(page);
|
||
|
|
await login(page);
|
||
|
|
await page.goto("/notifications");
|
||
|
|
|
||
|
|
const webhook = page.locator("details.notification-section").first();
|
||
|
|
await webhook.locator(":scope > summary").click();
|
||
|
|
await webhook.locator("details.notification-advanced > summary").click();
|
||
|
|
await expect(page.getByRole("textbox", { name: "Editor content" })).toBeVisible();
|
||
|
|
|
||
|
|
const overflow = await page.evaluate(() => ({
|
||
|
|
body: document.body.scrollWidth - document.body.clientWidth,
|
||
|
|
root: document.documentElement.scrollWidth - document.documentElement.clientWidth,
|
||
|
|
}));
|
||
|
|
expect(overflow.body).toBeLessThanOrEqual(1);
|
||
|
|
expect(overflow.root).toBeLessThanOrEqual(1);
|
||
|
|
expect(browserIssues).toEqual([]);
|
||
|
|
});
|
||
|
|
});
|