@sit-onyx/playwright-utils 1.0.0 → 1.1.0-dev-20251230085909

package/dist/index.js

@@ -1,40 +1,40 @@
-import { expect as g } from "@playwright/test";
-import { jsxs as m, jsx as d } from "playwright/jsx-runtime";
-import { expect as v, test as x } from "@playwright/experimental-ct-vue";
-const b = Symbol("EMIT_SPY_SYMBOL"), O = () => {
-  const t = [], n = (...e) => {
-    t.push(e);
+import { expect as f } from "@playwright/test";
+import { jsxs as d, jsx as u } from "playwright/jsx-runtime";
+import { test as k, expect as v } from "@playwright/experimental-ct-vue";
+const $ = /* @__PURE__ */ Symbol("EMIT_SPY_SYMBOL"), I = () => {
+  const t = [], a = (...r) => {
+    t.push(r);
   };
-  return n[b] = t, n;
-}, C = (t, n, e) => {
-  const r = t[b];
-  g(r).toHaveLength(n);
-  const a = r[n - 1];
-  return e && g(a).toMatchObject(e), a;
-}, l = (t) => t.replace(/\W/g, "-"), k = (t) => {
-  const n = () => {
-    const e = [
-      `"blank ${t.columns.map((r) => `column-${l(r)}`).join(" ")}"`
+  return a[$] = t, a;
+}, Y = (t, a, r) => {
+  const e = t[$];
+  f(e).toHaveLength(a);
+  const c = e[a - 1];
+  return r && f(c).toMatchObject(r), c;
+}, m = (t) => t.replace(/\W/g, "-"), L = (t) => {
+  const a = () => {
+    const r = [
+      `"blank ${t.columns.map((e) => `column-${m(e)}`).join(" ")}"`
     ];
-    return t.rows.forEach((r) => {
-      e.push(
-        `"row-${l(r)} ${t.columns.map((a) => `${l(r)}-${l(a)}`).join(" ")}"`
+    return t.rows.forEach((e) => {
+      r.push(
+        `"row-${m(e)} ${t.columns.map((c) => `${m(e)}-${m(c)}`).join(" ")}"`
       );
-    }), e.join(`
+    }), r.join(`
 `);
   };
-  return /* @__PURE__ */ m("div", { style: { width: "max-content", fontFamily: "Arial, sans-serif" }, children: [
-    /* @__PURE__ */ m("div", { style: { marginBottom: "2rem" }, children: [
-      /* @__PURE__ */ m("h1", { style: { fontSize: "1.25rem", lineHeight: "1.75rem", margin: "0" }, children: [
+  return /* @__PURE__ */ d("div", { style: { width: "max-content", fontFamily: "Arial, sans-serif" }, children: [
+    /* @__PURE__ */ d("div", { style: { marginBottom: "2rem" }, children: [
+      /* @__PURE__ */ d("h1", { style: { fontSize: "1.25rem", lineHeight: "1.75rem", margin: "0" }, children: [
         "Screenshot test: ",
         t.name
       ] }),
-      /* @__PURE__ */ m("div", { children: [
+      /* @__PURE__ */ d("div", { children: [
         "Browser: ",
         t.browserName
       ] })
     ] }),
-    /* @__PURE__ */ m(
+    /* @__PURE__ */ d(
       "div",
       {
         style: {
@@ -45,97 +45,110 @@ const b = Symbol("EMIT_SPY_SYMBOL"), O = () => {
           alignItems: "center",
           justifyContent: "center",
           gridTemplateColumns: `auto repeat(${t.columns.length}, 1fr)`,
-          gridTemplateAreas: n()
+          gridTemplateAreas: a()
         },
         children: [
-          /* @__PURE__ */ d("div", { style: { gridArea: "blank" } }),
+          /* @__PURE__ */ u("div", { style: { gridArea: "blank" } }),
           t.children
         ]
       }
     )
   ] });
-}, I = ({
-  defaults: t
-}) => ({
-  /**
-   * Creates a single matrix screenshot that includes the screenshots for every column-row combination.
-   */
-  executeMatrixScreenshotTest: async (e) => {
-    x(`${e.name}`, async ({ mount: r, page: a, browserName: S, context: $ }) => {
-      x.setTimeout(e.columns.length * e.rows.length * 25e3);
-      const E = async (c, s, i) => {
-        await a.getByRole("document").focus(), await a.getByRole("document").hover({ position: { x: 0, y: 0 }, force: !0 }), await a.mouse.up();
-        const o = await r(c);
-        await t?.hooks?.beforeEach?.(o, a, s, i, e.context), await e.hooks?.beforeEach?.(o, a, s, i, e.context);
-        const y = await o.screenshot({ animations: "disabled" }), h = await o.boundingBox(), P = `${l(i)}-${l(s)}`;
-        return await t?.hooks?.afterEach?.(o, a, s, i, e.context), await e.hooks?.afterEach?.(o, a, s, i, e.context), { box: h, id: P, screenshot: y };
-      }, u = /* @__PURE__ */ new Map();
-      for (const c of e.rows)
-        for (const s of e.columns) {
-          const i = e.component(s, c), o = e.removePadding ?? t?.removePadding, h = await E(/* @__PURE__ */ d(
-            "div",
-            {
-              style: {
-                display: "grid",
-                width: "max-content",
-                padding: o ? void 0 : "1rem"
-              },
-              children: i
-            }
-          ), s, c);
-          u.set(h.id, h);
-        }
-      const w = "/_playwright-matrix-screenshot";
-      await $.route(`${w}*`, (c, s) => {
-        const o = new URL(s.url()).searchParams.get("id") ?? "";
-        return c.fulfill({
-          status: 200,
-          contentType: "image/png",
-          body: u.get(o)?.screenshot
+}, G = (t = {}) => {
+  const a = t.test ?? k;
+  return {
+    /**
+     * Creates a single matrix screenshot that includes the screenshots for every column-row combination.
+     */
+    executeMatrixScreenshotTest: async (e) => {
+      a(`${e.name}`, async ({ mount: c, page: i, browserName: S, context: b }) => {
+        a.setTimeout(e.columns.length * e.rows.length * 25e3);
+        const E = async (s, n, l) => {
+          await i.getByRole("document").focus(), await i.getByRole("document").hover({ position: { x: 0, y: 0 }, force: !0 }), await i.mouse.up();
+          const o = await c(s);
+          await t.defaults?.hooks?.beforeEach?.(
+            o,
+            i,
+            n,
+            l,
+            e.context
+          ), await e.hooks?.beforeEach?.(o, i, n, l, e.context);
+          const x = await o.screenshot({ animations: "disabled" }), h = await o.boundingBox(), P = `${m(l)}-${m(n)}`;
+          return await t.defaults?.hooks?.afterEach?.(
+            o,
+            i,
+            n,
+            l,
+            e.context
+          ), await e.hooks?.afterEach?.(o, i, n, l, e.context), { box: h, id: P, screenshot: x };
+        }, w = /* @__PURE__ */ new Map();
+        for (const s of e.rows)
+          for (const n of e.columns) {
+            const l = e.component(n, s), o = e.removePadding ?? t.defaults?.removePadding, h = await E(/* @__PURE__ */ u(
+              "div",
+              {
+                style: {
+                  display: "grid",
+                  width: "max-content",
+                  padding: o ? void 0 : "1rem"
+                },
+                children: l
+              }
+            ), n, s);
+            w.set(h.id, h);
+          }
+        const y = "/_playwright-matrix-screenshot";
+        await b.route(`${y}*`, (s, n) => {
+          const o = new URL(n.url()).searchParams.get("id") ?? "";
+          return s.fulfill({
+            status: 200,
+            contentType: "image/png",
+            body: w.get(o)?.screenshot
+          });
         });
+        const T = Array.from(w.values()).map(({ box: s, id: n }) => /* @__PURE__ */ u(
+          "img",
+          {
+            width: s?.width,
+            height: s?.height,
+            style: { gridArea: n },
+            src: `${y}?id=${n}`,
+            alt: n
+          }
+        )), M = e.rows.map((s) => g({ name: s, type: "row" })), A = e.columns.map(
+          (s) => g({ name: s, type: "column" })
+        ), j = L({
+          columns: e.columns,
+          rows: e.rows,
+          name: e.name,
+          browserName: S,
+          children: [...T, ...M, ...A]
+        }), B = await c(j);
+        await v(B).toHaveScreenshot(`${e.name}.png`), await i.unroute(`${y}*`);
       });
-      const T = Array.from(u.values()).map(({ box: c, id: s }) => /* @__PURE__ */ d(
-        "img",
-        {
-          width: c?.width,
-          height: c?.height,
-          style: { gridArea: s },
-          src: `${w}?id=${s}`,
-          alt: s
-        }
-      )), M = e.rows.map((c) => f({ name: c, type: "row" })), A = e.columns.map(
-        (c) => f({ name: c, type: "column" })
-      ), j = k({
-        columns: e.columns,
-        rows: e.rows,
-        name: e.name,
-        browserName: S,
-        children: [...T, ...M, ...A]
-      }), B = await r(j);
-      await v(B).toHaveScreenshot(`${e.name}.png`), await a.unroute(`${w}*`);
-    });
-  }
-}), Y = async (t) => {
-  await v(t).toBeVisible(), await t.evaluate((n) => {
-    n.style.height = `${n.scrollHeight}px`, n.style.width = `${n.scrollWidth}px`;
+    }
+  };
+}, N = async (t) => {
+  await v(t).toBeVisible(), await t.evaluate((a) => {
+    a.style.height = `${a.scrollHeight}px`, a.style.width = `${a.scrollWidth}px`;
   });
-}, f = (t) => /* @__PURE__ */ d(
+}, g = (t) => /* @__PURE__ */ u(
   "div",
   {
-    style: { textAlign: "center", gridArea: `${t.type}-${l(t.name)}` },
+    style: { textAlign: "center", gridArea: `${t.type}-${m(t.name)}` },
     children: t.name
   }
-), p = async ({ component: t, page: n, state: e }) => {
-  if (e === "hover" && await t.hover(), e === "focus-visible" && await n.keyboard.press("Tab"), e === "active") {
-    const r = await t.boundingBox(), a = { x: r.x + r.width / 2, y: r.y + r.height / 2 };
-    await n.mouse.move(a.x, a.y), await n.mouse.down();
+), z = async ({ component: t, page: a, state: r }) => {
+  if (r === "hover" && await t.hover(), r === "focus-visible" && await a.keyboard.press("Tab"), r === "active") {
+    const e = await t.boundingBox(), c = { x: e.x + e.width / 2, y: e.y + e.height / 2 };
+    await a.mouse.move(c.x, c.y), await a.mouse.down();
   }
 };
 export {
-  b as EMIT_SPY_SYMBOL,
-  Y as adjustSizeToAbsolutePosition,
-  O as createEmitSpy,
-  C as expectEmit,
-  p as useFocusStateHooks,
-  I as useMatrixScreenshotTest
+  $ as EMIT_SPY_SYMBOL,
+  N as adjustSizeToAbsolutePosition,
+  I as createEmitSpy,
+  Y as expectEmit,
+  z as useFocusStateHooks,
+  G as useMatrixScreenshotTest
 };

package/dist/screenshots/index.d.ts

@@ -4,7 +4,7 @@ import type { HookContext, MatrixScreenshotTestOptions, UseMatrixScreenshotTestO
  * Creates a screenshot utility that can be used to capture matrix screenshots.
  * Useful for capturing a single screenshot/image that contains multiple variants of a component.
  */
-export declare const useMatrixScreenshotTest: <TContext extends HookContext = HookContext>({ defaults, }: UseMatrixScreenshotTestOptions<TContext>) => {
+export declare const useMatrixScreenshotTest: <TContext extends HookContext = HookContext>(globalOptions?: UseMatrixScreenshotTestOptions<TContext>) => {
     /**
      * Creates a single matrix screenshot that includes the screenshots for every column-row combination.
      */

package/dist/screenshots/types.d.ts

@@ -6,6 +6,10 @@ export type UseMatrixScreenshotTestOptions<TContext extends HookContext = HookCo
      * Will be merged with the options passed to a single screenshot test.
      */
     defaults?: Partial<Pick<MatrixScreenshotTestOptions<string, string, TContext>, "removePadding" | "hooks">>;
+    /**
+     * Optional custom `test` function to use. Useful when using [fixtures](https://playwright.dev/docs/test-fixtures#creating-a-fixture).
+     */
+    test?: typeof test;
 };
 export type MatrixScreenshotTestOptions<TColumn extends string = string, TRow extends string = string, TContext extends HookContext = HookContext> = {
     /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/playwright-utils",
   "description": "Utilities for Vue component testing with Playwright",
-  "version": "1.0.0",
+  "version": "1.1.0-dev-20251230085909",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -34,8 +34,8 @@
     "vue-component-type-helpers": ">= 3"
   },
   "devDependencies": {
-    "typescript": "5.9.2",
-    "vite": "7.1.5",
+    "typescript": "5.9.3",
+    "vite": "7.3.0",
     "@sit-onyx/shared": "0.1.0"
   },
   "scripts": {