diff --git a/examples/reproducers/001-popover-404/repro.spec.ts b/examples/reproducers/001-popover-404/repro.spec.ts new file mode 100644 index 00000000..a0d99c60 --- /dev/null +++ b/examples/reproducers/001-popover-404/repro.spec.ts @@ -0,0 +1,16 @@ +import { test } from "@playwright/test"; +import { + applyReducedMotion, + failOnConsoleErrors, +} from "../../../tests/e2e/helpers/uiTestUtils"; + +test.describe("repro popover 404", () => { + test.beforeEach(async ({ page }) => { + await applyReducedMotion(page); + failOnConsoleErrors(page); + }); + + test("fails to load popover demo due to 404", async ({ page }) => { + await page.goto("/views/dev/popover-demo.html", { waitUntil: "networkidle" }); + }); +}); diff --git a/examples/reproducers/002-sidebar-layout/repro.spec.ts b/examples/reproducers/002-sidebar-layout/repro.spec.ts new file mode 100644 index 00000000..f3bf41ba --- /dev/null +++ b/examples/reproducers/002-sidebar-layout/repro.spec.ts @@ -0,0 +1,26 @@ +import { expect, test } from "@playwright/test"; + +test("mobile sidebar layout regression", async ({ page }) => { + await page.setViewportSize({ width: 390, height: 844 }); + await page.goto("/index.html", { waitUntil: "networkidle" }); + + // Dismiss disclaimer + await page.evaluate(() => { + window.localStorage?.setItem("hasSeenDisclaimer", "true"); + document.getElementById("disclaimerModal")?.remove(); + document.documentElement.classList.remove("modal-open"); + }); + + const toggle = page.locator("#sidebarCollapseToggle"); + await toggle.click({ force: true }); + + await expect(page.locator("#sidebar")).toHaveClass(/sidebar-expanded/); + + const marginLeft = await page.evaluate(() => { + const app = document.getElementById("app"); + return parseFloat(window.getComputedStyle(app!).marginLeft); + }); + + // It should be 0 on mobile even if expanded (overlay mode). + expect(marginLeft).toBe(0); +}); diff --git a/examples/reproducers/003-video-modal-reg/repro.spec.ts b/examples/reproducers/003-video-modal-reg/repro.spec.ts new file mode 100644 index 00000000..f9ebd143 --- /dev/null +++ b/examples/reproducers/003-video-modal-reg/repro.spec.ts @@ -0,0 +1,25 @@ +import { expect, test } from "@playwright/test"; + +test("video modal mobile regression", async ({ page }) => { + await page.setViewportSize({ width: 390, height: 844 }); + await page.goto("/components/video-modal.html", { waitUntil: "networkidle" }); + + await page.evaluate(() => { + const modal = document.getElementById("playerModal"); + if (modal) { + modal.classList.remove("hidden"); + modal.removeAttribute("hidden"); + modal.setAttribute("data-ds", "new"); + } + }); + + const modal = page.locator("#playerModal"); + await expect(modal).toBeVisible(); + + // Wait a bit for layout + await page.waitForTimeout(100); + + // Check height which was failing (1561 vs 1554) + const box = await modal.boundingBox(); + expect(box?.height).toBe(1554); +}); diff --git a/examples/reproducers/playwright.config.ts b/examples/reproducers/playwright.config.ts new file mode 100644 index 00000000..9057f634 --- /dev/null +++ b/examples/reproducers/playwright.config.ts @@ -0,0 +1,13 @@ +import { defineConfig } from "@playwright/test"; +import baseConfig from "../../playwright.config"; + +export default defineConfig({ + ...baseConfig, + testDir: ".", + projects: [ + { + name: "repro", + testMatch: "**/*.spec.ts", + }, + ], +});