Merge pull request #1430 from PR0M3TH3AN/codex/add-ui-test-utilities-for-e2e-tests

Add shared Playwright UI test helpers and update E2E specs to use them

tests/e2e/helpers/uiTestUtils.ts

@@ -0,0 +1,38 @@
+import type { Page } from "@playwright/test";
+
+export async function applyReducedMotion(page: Page): Promise<void> {
+  await page.emulateMedia({ reducedMotion: "reduce" });
+  await page.addStyleTag({
+    content: `
+      * {
+        animation-duration: 0s !important;
+        animation-delay: 0s !important;
+        transition-duration: 0s !important;
+        transition-delay: 0s !important;
+      }
+    `,
+  });
+}
+
+export function failOnConsoleErrors(page: Page): void {
+  page.on("console", (message) => {
+    if (message.type() === "error") {
+      throw new Error(`Console error: ${message.text()}`);
+    }
+  });
+
+  page.on("pageerror", (error) => {
+    throw error;
+  });
+}
+
+export async function forceOpenModal(page: Page, selector: string): Promise<void> {
+  await page.evaluate((modalSelector) => {
+    const element = document.querySelector(modalSelector);
+    if (!element) {
+      return;
+    }
+    element.classList.remove("hidden");
+    element.setAttribute("data-open", "true");
+  }, selector);
+}

tests/e2e/popover.spec.ts

@@ -1,9 +1,11 @@
 import { expect, test } from "@playwright/test";
 import type { Locator } from "@playwright/test";
+import { applyReducedMotion, failOnConsoleErrors } from "./helpers/uiTestUtils";
 
 test.describe("popover layout scenarios", () => {
   test.beforeEach(async ({ page }) => {
-    await page.emulateMedia({ reducedMotion: "reduce" });
+    await applyReducedMotion(page);
+    failOnConsoleErrors(page);
     await page.goto("/docs/popover-scenarios.html", { waitUntil: "networkidle" });
   });
 
@@ -150,13 +152,6 @@ test.describe("popover layout scenarios", () => {
   });
 
   test("stress tests popover triggers without console errors", async ({ page }) => {
-    const consoleErrors: string[] = [];
-    page.on("console", (message) => {
-      if (message.type() === "error") {
-        consoleErrors.push(message.text());
-      }
-    });
-
     await page.locator('[data-test-open-modal]').click();
     await expect(page.locator('[data-test-modal]')).toBeVisible();
 
@@ -180,15 +175,14 @@ test.describe("popover layout scenarios", () => {
       await page.click("body");
       await page.waitForTimeout(60);
       await expect(page.locator('[data-popover-state="open"]')).toHaveCount(0);
-      expect(consoleErrors).toHaveLength(0);
-      consoleErrors.length = 0;
     }
   });
 });
 
 test.describe("popover demo alignments", () => {
   test.beforeEach(async ({ page }) => {
-    await page.emulateMedia({ reducedMotion: "reduce" });
+    await applyReducedMotion(page);
+    failOnConsoleErrors(page);
     await page.goto("/views/dev/popover-demo.html", { waitUntil: "networkidle" });
   });
 

tests/e2e/toast-service.spec.ts

@@ -1,8 +1,10 @@
 import { expect, test } from "@playwright/test";
+import { applyReducedMotion, failOnConsoleErrors } from "./helpers/uiTestUtils";
 
 test.describe("toast service in full DOM", () => {
   test("renders, expires, and dismisses toasts", async ({ page }) => {
-    await page.emulateMedia({ reducedMotion: "reduce" });
+    await applyReducedMotion(page);
+    failOnConsoleErrors(page);
     await page.goto("/docs/kitchen-sink.html", { waitUntil: "networkidle" });
 
     await page.addScriptTag({

tests/e2e/ui-modals.spec.ts

@@ -1,19 +1,15 @@
 import { expect, test } from "@playwright/test";
+import {
+  applyReducedMotion,
+  failOnConsoleErrors,
+  forceOpenModal,
+} from "./helpers/uiTestUtils";
 
 test.describe("login modal flows", () => {
   test.beforeEach(async ({ page }) => {
-    await page.emulateMedia({ reducedMotion: "reduce" });
+    await applyReducedMotion(page);
+    failOnConsoleErrors(page);
     await page.goto("/components/login-modal.html", { waitUntil: "networkidle" });
-    await page.addStyleTag({
-      content: `
-        * {
-          animation-duration: 0s !important;
-          animation-delay: 0s !important;
-          transition-duration: 0s !important;
-          transition-delay: 0s !important;
-        }
-      `,
-    });
 
     await page.addScriptTag({
       type: "module",
@@ -175,7 +171,8 @@ test.describe("component modal pages", () => {
 
   for (const pageName of modalPages) {
     test(`closes ${pageName} modal`, async ({ page }) => {
-      await page.emulateMedia({ reducedMotion: "reduce" });
+      await applyReducedMotion(page);
+      failOnConsoleErrors(page);
       await page.goto(`/components/${pageName}.html`, {
         waitUntil: "networkidle",
       });
@@ -183,14 +180,7 @@ test.describe("component modal pages", () => {
       const modal = page.locator(".bv-modal");
       await expect(modal).toHaveCount(1);
 
-      await page.evaluate(() => {
-        const element = document.querySelector(".bv-modal");
-        if (!element) {
-          return;
-        }
-        element.classList.remove("hidden");
-        element.setAttribute("data-open", "true");
-      });
+      await forceOpenModal(page, ".bv-modal");
 
       await expect(modal).not.toHaveClass(/hidden/);