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

package/README.md

@@ -1,9 +1,5 @@
 <div align="center" style="text-align: center">
-  <picture>
-    <source media="(prefers-color-scheme: dark)" type="image/svg+xml" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-light.svg">
-    <source media="(prefers-color-scheme: light)" type="image/svg+xml" srcset="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg">
-    <img alt="onyx logo" src="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo-dark.svg" width="160px">
-  </picture>
+  <img alt="onyx logo" src="https://raw.githubusercontent.com/SchwarzIT/onyx/main/.github/onyx-logo.svg" height="96px">
 </div>
 
 <br>

package/dist/index.d.ts

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

package/dist/index.js

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

package/dist/screenshots/index.d.ts

@@ -1,5 +1,5 @@
-import type { Locator } from "@playwright/test";
-import type { HookContext, MatrixScreenshotTestOptions, UseMatrixScreenshotTestOptions } from "./types";
+import type { Locator, Page } from "@playwright/test";
+import type { HookContext, MatrixScreenshotTestOptions, UseMatrixScreenshotTestOptions } from "./types.js";
 /**
  * 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.
@@ -17,3 +17,26 @@ export declare const useMatrixScreenshotTest: <TContext extends HookContext = Ho
  * Will wait for the component to be visible.
  */
 export declare const adjustSizeToAbsolutePosition: (component: Locator) => Promise<void>;
+export type UseFocusStateHooksOptions = {
+    /**
+     * Component to apply the focus to.
+     */
+    component: Locator;
+    /**
+     * Current Playwright test page.
+     */
+    page: Page;
+    /**
+     * States to apply the focus to. One of: "hover", "active", "focus-visible".
+     */
+    state: string;
+};
+/**
+ * Utility hook for screenshot tests to capture the component in hover, active and focus-visible state.
+ *
+ * States:
+ * - hover: will hover the center of the component
+ * - active: will hold the mouse down on the center of the component
+ * - focus-visible: press Tab key to focus component
+ */
+export declare const useFocusStateHooks: ({ component, page, state }: UseFocusStateHooksOptions) => Promise<void>;

package/package.json

@@ -1,9 +1,13 @@
 {
   "name": "@sit-onyx/playwright-utils",
   "description": "Utilities for Vue component testing with Playwright",
-  "version": "1.0.0-beta.2",
+  "version": "1.0.0-beta.4",
   "type": "module",
+  "author": "Schwarz IT KG",
   "license": "Apache-2.0",
+  "engines": {
+    "node": ">=20"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/schwarzit/onyx",
@@ -19,8 +23,7 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "default": "./dist/index.js"
     }
   },
   "peerDependencies": {
@@ -30,9 +33,9 @@
     "vue": ">= 3"
   },
   "devDependencies": {
-    "typescript": "5.6.3",
-    "vite": "5.4.11",
-    "@sit-onyx/shared": "0.0.1-beta.0"
+    "typescript": "5.8.3",
+    "vite": "7.0.0",
+    "@sit-onyx/shared": "1.0.0-beta.4"
   },
   "scripts": {
     "build": "vite build && vue-tsc --emitDeclarationOnly"

package/dist/index.cjs

@@ -1,2 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("playwright/jsx-runtime"),x=require("@playwright/experimental-ct-vue"),l=e=>e.replace(/\W/g,"-"),L=e=>{const o=()=>{const t=[`"blank ${e.columns.map(m=>`column-${l(m)}`).join(" ")}"`];return e.rows.forEach(m=>{t.push(`"row-${l(m)} ${e.columns.map(s=>`${l(m)}-${l(s)}`).join(" ")}"`)}),t.join(`
-`)};return c.jsxs("div",{style:{width:"max-content",fontFamily:"Arial, sans-serif"},children:[c.jsxs("div",{style:{marginBottom:"2rem"},children:[c.jsxs("h1",{style:{fontSize:"1.25rem",lineHeight:"1.75rem",margin:"0"},children:["Screenshot test: ",e.name]}),c.jsxs("div",{children:["Browser: ",e.browserName]})]}),c.jsxs("div",{style:{display:"grid",gap:"2rem",gridTemplateRows:"auto",width:"max-content",alignItems:"center",justifyContent:"center",gridTemplateColumns:`auto repeat(${e.columns.length}, 1fr)`,gridTemplateAreas:o()},children:[c.jsx("div",{style:{gridArea:"blank"}}),e.children]})]})},z=({defaults:e})=>({executeMatrixScreenshotTest:async t=>{x.test(`${t.name}`,async({mount:m,page:s,browserName:P,context:b})=>{x.test.setTimeout(t.columns.length*t.rows.length*25e3);const M=async(n,r,i)=>{var u,S,w,v,g,T,y,A;await s.getByRole("document").focus(),await s.getByRole("document").hover({position:{x:0,y:0},force:!0}),await s.mouse.up();const a=await m(n);await((S=(u=e==null?void 0:e.hooks)==null?void 0:u.beforeEach)==null?void 0:S.call(u,a,s,r,i,t.context)),await((v=(w=t.hooks)==null?void 0:w.beforeEach)==null?void 0:v.call(w,a,s,r,i,t.context));const h=await a.screenshot({animations:"disabled"}),d=await a.boundingBox(),H=`${l(i)}-${l(r)}`;return await((T=(g=e==null?void 0:e.hooks)==null?void 0:g.afterEach)==null?void 0:T.call(g,a,s,r,i,t.context)),await((A=(y=t.hooks)==null?void 0:y.afterEach)==null?void 0:A.call(y,a,s,r,i,t.context)),{box:d,id:H,screenshot:h}},$=new Map;for(const n of t.rows)for(const r of t.columns){const i=t.component(r,n),a=t.removePadding??(e==null?void 0:e.removePadding),d=await M(c.jsx("div",{style:{display:"grid",width:"max-content",padding:a?void 0:"1rem"},children:i}),r,n);$.set(d.id,d)}const j="/_playwright-matrix-screenshot";await b.route(`${j}*`,(n,r)=>{var h;const a=new URL(r.url()).searchParams.get("id")??"";return n.fulfill({status:200,contentType:"image/png",body:(h=$.get(a))==null?void 0:h.screenshot})});const R=Array.from($.values()).map(({box:n,id:r})=>c.jsx("img",{width:n==null?void 0:n.width,height:n==null?void 0:n.height,style:{gridArea:r},src:`${j}?id=${r}`,alt:r})),f=t.rows.map(n=>E({name:n,type:"row"})),k=t.columns.map(n=>E({name:n,type:"column"})),B=L({columns:t.columns,rows:t.rows,name:t.name,browserName:P,children:[...R,...f,...k]}),C=await m(B);await x.expect(C).toHaveScreenshot(`${t.name}.png`),await s.unroute(`${j}*`)})}}),G=async e=>{await x.expect(e).toBeVisible(),await e.evaluate(o=>{o.style.height=`${o.scrollHeight}px`,o.style.width=`${o.scrollWidth}px`})},E=e=>c.jsx("div",{style:{textAlign:"center",gridArea:`${e.type}-${l(e.name)}`},children:e.name});exports.adjustSizeToAbsolutePosition=G;exports.useMatrixScreenshotTest=z;