Carlos Florêncio
73 lines
3.0 KiB
TypeScript
73 lines
3.0 KiB
TypeScript
import { expect, type Locator, type Page } from "@playwright/test";
|
|
import { test } from "../../fixtures/test-base";
|
|
import {
|
|
readDialogRenderingMetrics,
|
|
expectWebkitDialogMotion,
|
|
} from "../../helpers/dialog-webkit-metrics";
|
|
import { useRegularMode } from "../../helpers/regular-mode";
|
|
import { KanbanPage } from "../../pages/kanban-page";
|
|
|
|
useRegularMode();
|
|
|
|
async function openCreateTaskDialog(
|
|
testPage: Page,
|
|
beforeOpen?: () => Promise<void>,
|
|
): Promise<Locator> {
|
|
const kanban = new KanbanPage(testPage);
|
|
await kanban.goto();
|
|
await beforeOpen?.();
|
|
await kanban.createTaskButton.first().click();
|
|
const dialog = testPage.getByTestId("create-task-dialog");
|
|
await expect(dialog).toBeVisible();
|
|
await expect(dialog.getByRole("button", { name: "Close", exact: true })).toHaveCount(0);
|
|
await expect(dialog.getByRole("button", { name: "Cancel", exact: true })).toBeVisible();
|
|
await expect(dialog).toHaveCSS("padding-top", "0px");
|
|
return dialog;
|
|
}
|
|
|
|
test.describe("Create Task WebKit rendering", () => {
|
|
test("keeps the existing Chromium motion and geometry", async ({ testPage, prCapture }) => {
|
|
const dialog = await openCreateTaskDialog(testPage);
|
|
await expect(testPage.locator("html")).toHaveAttribute("data-rendering-engine", "other");
|
|
|
|
const metrics = await readDialogRenderingMetrics(dialog, {
|
|
contentSelector: '[data-testid="create-task-dialog"]',
|
|
});
|
|
const viewport = testPage.viewportSize();
|
|
expect(viewport).not.toBeNull();
|
|
expect(metrics.animationName).toBe("enter");
|
|
expect(metrics.translate).toContain("-50%");
|
|
expect(metrics.zIndex).toBe("50");
|
|
expect(metrics.overlayZIndex).toBe("50");
|
|
expect(metrics.width).toBe(900);
|
|
expect(metrics.centerX).toBeCloseTo(viewport!.width / 2, 0);
|
|
expect(metrics.centerY).toBeCloseTo(viewport!.height / 2, 0);
|
|
expect(metrics.contentOverOverlay).toBe(true);
|
|
await prCapture.screenshot("chromium-create-task-dialog", {
|
|
caption: "Chromium keeps the existing Create Task dialog motion and geometry.",
|
|
});
|
|
});
|
|
|
|
test("uses transform-free motion and centering for WebKit", async ({ testPage, prCapture }) => {
|
|
const dialog = await openCreateTaskDialog(testPage, async () => {
|
|
await testPage.locator("html").evaluate((root) => {
|
|
root.setAttribute("data-rendering-engine", "webkit");
|
|
});
|
|
});
|
|
const metrics = await expectWebkitDialogMotion(dialog, {
|
|
contentSelector: '[data-testid="create-task-dialog"]',
|
|
contentZIndex: "50",
|
|
overlayZIndex: "49",
|
|
});
|
|
const viewport = testPage.viewportSize();
|
|
expect(viewport).not.toBeNull();
|
|
expect(metrics.width).toBe(900);
|
|
expect(metrics.centerX).toBeCloseTo(viewport!.width / 2, 0);
|
|
expect(metrics.centerY).toBeCloseTo(viewport!.height / 2, 0);
|
|
expect(metrics.contentOverOverlay).toBe(true);
|
|
await prCapture.screenshot("webkit-create-task-dialog", {
|
|
caption: "The WebKit-safe Create Task dialog is centered without transformed text.",
|
|
});
|
|
});
|
|
});
|