@sit-onyx/playwright-utils 1.0.0-beta.4 → 1.0.0-dev-20250912111044

package/dist/emits/index.d.ts

@@ -0,0 +1,28 @@
+import type { Component } from "vue";
+import type { ComponentEmitProps } from "./types.js";
+export declare const EMIT_SPY_SYMBOL: unique symbol;
+/**
+ * Creates a simple, typed spy for recording emits.
+ *
+ * @example
+ * ```tsx
+ * // create spy
+ * const onUpdateOpen = createEmitSpy<typeof OnyxColorSchemeDialog, "onUpdate:open">();
+ * // add spy
+ * const component = await mount(<OnyxColorSchemeDialog onUpdate:open={onUpdateOpen} />);
+ * // check spy
+ * expectEmit(onUpdateOpen, 1, [false]);
+ * ```
+ */
+export declare const createEmitSpy: <C extends Component, Key extends keyof Emits, Emits = ComponentEmitProps<C>, Handler = NonNullable<Emits[Key]>, Args extends unknown[] = Handler extends (...args: infer _Args) => unknown ? _Args : unknown[]>() => {
+    (...args: Args): void;
+    [EMIT_SPY_SYMBOL]: Args[];
+};
+/**
+ * Asserts the emits recorded from the spy created by `createEmitSpy`.
+ * Expects the spy to have recorded `n` calls, and `matches` to match the arguments of the last call.
+ * @see `createEmitSpy` documentation for example usage.
+ */
+export declare const expectEmit: <Handler extends {
+    [EMIT_SPY_SYMBOL]: unknown[][];
+}>(emitSpy: Handler, n: number, matches?: unknown[]) => unknown[] | undefined;

package/dist/emits/types.d.ts

@@ -0,0 +1,23 @@
+import type { Component } from "vue";
+import type { ComponentExposed } from "vue-component-type-helpers";
+/**
+ * Picks the emits from an components property type.
+ *
+ * Unlike the `ComponentEmit` type utility from *vue-component-type-helpers*, it provides the emits as `Record<EmitName, EmitHandler>`, rather than a type intersection of the emit functions.
+ *
+ * e.g.:
+ * ```ts
+ * import MyInput from "./MyInput.vue";
+ * import type { ComponentExposed } from "vue-component-type-helpers";
+ *
+ * type MyInputPublicProps = ComponentExposed<typeof MyInput>["$props"];
+ * type MyInputVModelEmits = VModelEmits<MyInputPublicProps>; // => { 'onUpdate:modelValue': (newValue: string) => void }
+ * ```
+ */
+export type PickEmitsFromProps<T> = {
+    -readonly [key in keyof T as key extends `on${string}` ? key extends `onVnode${string}` ? never : key : never]: NonNullable<T[key]>;
+};
+/**
+ * Unwraps the declared emits from a Vue component.
+ */
+export type ComponentEmitProps<C extends Component> = PickEmitsFromProps<ComponentExposed<C>["$props"]>;

package/dist/index.d.ts

@@ -1,2 +1,4 @@
+export * from "./emits/index.js";
+export * from "./emits/types.js";
 export * from "./screenshots/index.js";
 export * from "./screenshots/types.js";

package/dist/index.js

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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/playwright-utils",
   "description": "Utilities for Vue component testing with Playwright",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-dev-20250912111044",
   "type": "module",
   "author": "Schwarz IT KG",
   "license": "Apache-2.0",
@@ -10,11 +10,11 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/schwarzit/onyx",
+    "url": "https://github.com/SchwarzIT/onyx",
     "directory": "packages/playwright-utils"
   },
   "bugs": {
-    "url": "https://github.com/schwarzit/onyx/issues"
+    "url": "https://github.com/SchwarzIT/onyx/issues"
   },
   "files": [
     "dist"
@@ -30,12 +30,13 @@
     "@playwright/experimental-ct-vue": ">= 1",
     "@playwright/test": ">= 1",
     "playwright": ">= 1",
-    "vue": ">= 3"
+    "vue": ">= 3",
+    "vue-component-type-helpers": ">= 3"
   },
   "devDependencies": {
-    "typescript": "5.8.3",
-    "vite": "7.0.0",
-    "@sit-onyx/shared": "1.0.0-beta.4"
+    "typescript": "5.9.2",
+    "vite": "7.1.5",
+    "@sit-onyx/shared": "0.1.0-dev-20250912111044"
   },
   "scripts": {
     "build": "vite build && vue-tsc --emitDeclarationOnly"