@sit-onyx/playwright-utils 1.2.1-dev-20260316114803 → 1.2.2-dev-20260420124344

package/dist/emits/index.d.ts

@@ -11,7 +11,7 @@ export declare const EMIT_SPY_SYMBOL: unique symbol;
  * // add spy
  * const component = await mount(<OnyxColorSchemeDialog onUpdate:open={onUpdateOpen} />);
  * // check spy
- * expectEmit(onUpdateOpen, 1, [false]);
+ * await expectEmit(onUpdateOpen, 1, [false]);
  * ```
  */
 export declare const createEmitSpy: <C extends Component, Key extends keyof Emits | keyof Events | string, Emits = ComponentEmitProps<C>, Handler = Key extends keyof Emits ? NonNullable<Emits[Key]> : Key extends keyof Events ? (arg: Events[Key]) => void : unknown, Args extends unknown[] = Handler extends (...args: infer _Args) => unknown ? _Args : unknown[]>() => {

package/dist/index.js

@@ -1,162 +1,143 @@
-import { test as B, expect as f } from "@playwright/test";
-import { jsxs as m, jsx as u } from "playwright/jsx-runtime";
-import { expect as v, test as L } from "@playwright/experimental-ct-vue";
-const S = /* @__PURE__ */ Symbol("EMIT_SPY_SYMBOL"), Y = () => {
-  const t = [], a = (...r) => {
-    t.push(r);
-  };
-  return a[S] = t, a;
-}, G = (t, a, r) => B.step(
-  "check emitted events",
-  async () => {
-    const e = t[S];
-    f(e, "Should have emitted at least n times.").toHaveLength(a);
-    const c = e[a - 1];
-    return r && f(c, "Should match expected emit details.").toMatchObject(r), c;
-  },
-  { box: !0 }
-), d = (t) => t.replace(/\W/g, (a) => a.codePointAt(0)?.toString() || "-"), H = (t) => {
-  const a = () => {
-    const r = [
-      `"blank ${t.columns.map((e) => `column-${d(e)}`).join(" ")}"`
-    ];
-    return t.rows.forEach((e) => {
-      r.push(
-        `"row-${d(e)} ${t.columns.map((c) => `${d(e)}-${d(c)}`).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: [
-        "Screenshot test: ",
-        t.name
-      ] }),
-      /* @__PURE__ */ m("div", { children: [
-        "Browser: ",
-        t.browserName
-      ] })
-    ] }),
-    /* @__PURE__ */ m(
-      "div",
-      {
-        style: {
-          display: "grid",
-          gap: "2rem",
-          gridTemplateRows: "auto",
-          width: "max-content",
-          alignItems: "center",
-          justifyContent: "center",
-          gridTemplateColumns: `auto repeat(${t.columns.length}, 1fr)`,
-          gridTemplateAreas: a()
-        },
-        children: [
-          /* @__PURE__ */ u("div", { style: { gridArea: "blank" } }),
-          t.children
-        ]
-      }
-    )
-  ] });
-}, N = (t = {}) => {
-  const a = t.test ?? L;
-  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: $, 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",
-            ...t.defaults?.screenshotOptions,
-            ...e.screenshotOptions
-          }), h = await o.boundingBox(), k = `${d(l)}-${d(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: k, 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
-          }
-        )), A = e.rows.map((s) => g({ name: s, type: "row" })), M = e.columns.map(
-          (s) => g({ name: s, type: "column" })
-        ), P = H({
-          columns: e.columns,
-          rows: e.rows,
-          name: e.name,
-          browserName: $,
-          children: [...T, ...A, ...M]
-        }), j = await c(P);
-        await v(j).toHaveScreenshot(`${e.name}.png`), await i.unroute(`${y}*`);
-      });
-    }
-  };
-}, O = async (t) => {
-  await v(t).toBeVisible(), await t.evaluate((a) => {
-    a.style.height = `${a.scrollHeight}px`, a.style.width = `${a.scrollWidth}px`;
-  });
-}, g = (t) => /* @__PURE__ */ u(
-  "div",
-  {
-    style: { textAlign: "center", gridArea: `${t.type}-${d(t.name)}` },
-    children: t.name
-  }
-), p = 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 {
-  S as EMIT_SPY_SYMBOL,
-  O as adjustSizeToAbsolutePosition,
-  Y as createEmitSpy,
-  G as expectEmit,
-  p as useFocusStateHooks,
-  N as useMatrixScreenshotTest
+import { expect as e, test as t } from "@playwright/test";
+import { expect as n, test as r } from "@playwright/experimental-ct-vue";
+import { jsx as i, jsxs as a } from "playwright/jsx-runtime";
+//#region src/emits/index.ts
+var o = Symbol("EMIT_SPY_SYMBOL"), s = () => {
+	let e = [], t = (...t) => {
+		e.push(t);
+	};
+	return t[o] = e, t;
+}, c = (n, r, i) => t.step("check emitted events", async () => {
+	await e(() => e(n[o], "Should have emitted at least n times.").toHaveLength(r)).toPass();
+	let t = n[o][r - 1];
+	return i && e(t, "Should match expected emit details.").toMatchObject(i), t;
+}, { box: !0 }), l = (e) => e.replace(/\W/g, (e) => e.codePointAt(0)?.toString() || "-"), u = (e) => /* @__PURE__ */ a("div", {
+	style: {
+		width: "max-content",
+		fontFamily: "Arial, sans-serif"
+	},
+	children: [/* @__PURE__ */ a("div", {
+		style: { marginBottom: "2rem" },
+		children: [/* @__PURE__ */ a("h1", {
+			style: {
+				fontSize: "1.25rem",
+				lineHeight: "1.75rem",
+				margin: "0"
+			},
+			children: ["Screenshot test: ", e.name]
+		}), /* @__PURE__ */ a("div", { children: ["Browser: ", e.browserName] })]
+	}), /* @__PURE__ */ a("div", {
+		style: {
+			display: "grid",
+			gap: "2rem",
+			gridTemplateRows: "auto",
+			width: "max-content",
+			alignItems: "center",
+			justifyContent: "center",
+			gridTemplateColumns: `auto repeat(${e.columns.length}, 1fr)`,
+			gridTemplateAreas: (() => {
+				let t = [`"blank ${e.columns.map((e) => `column-${l(e)}`).join(" ")}"`];
+				return e.rows.forEach((n) => {
+					t.push(`"row-${l(n)} ${e.columns.map((e) => `${l(n)}-${l(e)}`).join(" ")}"`);
+				}), t.join("\n");
+			})()
+		},
+		children: [/* @__PURE__ */ i("div", { style: { gridArea: "blank" } }), e.children]
+	})]
+}), d = (e = {}) => {
+	let t = e.test ?? r;
+	return { executeMatrixScreenshotTest: (r) => {
+		t(`${r.name}`, async ({ mount: a, page: o, browserName: s, context: c }) => {
+			t.setTimeout(r.columns.length * r.rows.length * (25 * 1e3));
+			let d = async (t, n, i) => {
+				await o.getByRole("document").focus(), await o.getByRole("document").hover({
+					position: {
+						x: 0,
+						y: 0
+					},
+					force: !0
+				}), await o.mouse.up();
+				let s = await a(t);
+				await e.defaults?.hooks?.beforeEach?.(s, o, n, i, r.context), await r.hooks?.beforeEach?.(s, o, n, i, r.context);
+				let c = await s.screenshot({
+					animations: "disabled",
+					...e.defaults?.screenshotOptions,
+					...r.screenshotOptions
+				}), u = await s.boundingBox(), d = `${l(i)}-${l(n)}`;
+				return await e.defaults?.hooks?.afterEach?.(s, o, n, i, r.context), await r.hooks?.afterEach?.(s, o, n, i, r.context), {
+					box: u,
+					id: d,
+					screenshot: c
+				};
+			}, f = /* @__PURE__ */ new Map();
+			for (let t of r.rows) for (let n of r.columns) {
+				let a = r.component(n, t), o = await d(/* @__PURE__ */ i("div", {
+					style: {
+						display: "grid",
+						width: "max-content",
+						padding: r.removePadding ?? e.defaults?.removePadding ? void 0 : "1rem"
+					},
+					children: a
+				}), n, t);
+				f.set(o.id, o);
+			}
+			let m = "/_playwright-matrix-screenshot", h = (e) => `${m}?id=${e}`;
+			await c.route(`${m}*`, (e, t) => {
+				let n = new URL(t.url()).searchParams.get("id") ?? "";
+				return e.fulfill({
+					status: 200,
+					contentType: "image/png",
+					body: f.get(n)?.screenshot
+				});
+			});
+			let g = Array.from(f.values()).map(({ box: e, id: t }) => {
+				let n = () => {};
+				return [new Promise((e) => n = e), /* @__PURE__ */ i("img", {
+					width: e?.width,
+					height: e?.height,
+					style: { gridArea: t },
+					src: h(t),
+					alt: t,
+					onLoad: n
+				})];
+			}), _ = g.map(([, e]) => e), v = g.map(([e]) => e), y = r.rows.map((e) => p({
+				name: e,
+				type: "row"
+			})), b = r.columns.map((e) => p({
+				name: e,
+				type: "column"
+			})), x = await a(u({
+				columns: r.columns,
+				rows: r.rows,
+				name: r.name,
+				browserName: s,
+				children: [
+					..._,
+					...y,
+					...b
+				]
+			}));
+			await Promise.all(v), await n(x).toHaveScreenshot(`${r.name}.png`), await o.unroute(`${m}*`);
+		});
+	} };
+}, f = async (e) => {
+	await n(e).toBeVisible(), await e.evaluate((e) => {
+		e.style.height = `${e.scrollHeight}px`, e.style.width = `${e.scrollWidth}px`;
+	});
+}, p = (e) => /* @__PURE__ */ i("div", {
+	style: {
+		textAlign: "center",
+		gridArea: `${e.type}-${l(e.name)}`
+	},
+	children: e.name
+}), m = async ({ component: e, page: t, state: n }) => {
+	if (n === "hover" && await e.hover(), n === "focus-visible" && await t.keyboard.press("Tab"), n === "active") {
+		let n = await e.boundingBox(), r = {
+			x: n.x + n.width / 2,
+			y: n.y + n.height / 2
+		};
+		await t.mouse.move(r.x, r.y), await t.mouse.down();
+	}
 };
+//#endregion
+export { o as EMIT_SPY_SYMBOL, f as adjustSizeToAbsolutePosition, s as createEmitSpy, c as expectEmit, m as useFocusStateHooks, d as useMatrixScreenshotTest };

package/dist/screenshots/index.d.ts

@@ -8,7 +8,7 @@ export declare const useMatrixScreenshotTest: <TContext extends HookContext = Ho
     /**
      * Creates a single matrix screenshot that includes the screenshots for every column-row combination.
      */
-    executeMatrixScreenshotTest: <TColumn extends string, TRow extends string>(options: MatrixScreenshotTestOptions<TColumn, TRow, TContext>) => Promise<void>;
+    executeMatrixScreenshotTest: <TColumn extends string, TRow extends string>(options: MatrixScreenshotTestOptions<TColumn, TRow, TContext>) => void;
 };
 /**
  * Sets the component size to fit all absolute positioned content so it is fully included in screenshots.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/playwright-utils",
   "description": "Utilities for Vue component testing with Playwright",
-  "version": "1.2.1-dev-20260316114803",
+  "version": "1.2.2-dev-20260420124344",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "typescript": "5.9.3",
-    "vite": "7.3.1",
+    "vite": "8.0.5",
     "@sit-onyx/shared": "0.1.0"
   },
   "scripts": {