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

package/dist/index.cjs

@@ -0,0 +1,2 @@
+"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;

package/dist/index.js

@@ -0,0 +1,123 @@
+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(" ")}"`
+    ];
+    return e.rows.forEach((o) => {
+      t.push(
+        `"row-${m(o)} ${e.columns.map((a) => `${m(o)}-${m(a)}`).join(" ")}"`
+      );
+    }), t.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: [
+        "Screenshot test: ",
+        e.name
+      ] }),
+      /* @__PURE__ */ l("div", { children: [
+        "Browser: ",
+        e.browserName
+      ] })
+    ] }),
+    /* @__PURE__ */ l(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gap: "2rem",
+          gridTemplateRows: "auto",
+          width: "max-content",
+          alignItems: "center",
+          justifyContent: "center",
+          gridTemplateColumns: `auto repeat(${e.columns.length}, 1fr)`,
+          gridTemplateAreas: i()
+        },
+        children: [
+          /* @__PURE__ */ $("div", { style: { gridArea: "blank" } }),
+          e.children
+        ]
+      }
+    )
+  ] });
+}, U = ({
+  defaults: e
+}) => ({
+  /**
+   * 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__ */ $(
+            "div",
+            {
+              style: {
+                display: "grid",
+                width: "max-content",
+                padding: c ? void 0 : "1rem"
+              },
+              children: s
+            }
+          ), r, n);
+          x.set(d.id, d);
+        }
+      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({
+          status: 200,
+          contentType: "image/png",
+          body: (h = x.get(c)) == null ? void 0 : h.screenshot
+        });
+      });
+      const R = Array.from(x.values()).map(({ box: n, id: r }) => /* @__PURE__ */ $(
+        "img",
+        {
+          width: n == null ? void 0 : n.width,
+          height: n == null ? void 0 : n.height,
+          style: { gridArea: r },
+          src: `${v}?id=${r}`,
+          alt: r
+        }
+      )), 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}*`);
+    });
+  }
+}), W = async (e) => {
+  await P(e).toBeVisible(), await e.evaluate((i) => {
+    i.style.height = `${i.scrollHeight}px`, i.style.width = `${i.scrollWidth}px`;
+  });
+}, f = (e) => /* @__PURE__ */ $(
+  "div",
+  {
+    style: { textAlign: "center", gridArea: `${e.type}-${m(e.name)}` },
+    children: e.name
+  }
+);
+export {
+  W as adjustSizeToAbsolutePosition,
+  U as useMatrixScreenshotTest
+};

package/dist/screenshots/ScreenshotMatrix.d.ts

@@ -0,0 +1,23 @@
+export type ScreenshotMatrixProps = {
+    /**
+     * Test name. Will be displayed above the matrix screenshot and be used as filename.
+     */
+    name: string;
+    /**
+     * Matrix columns. Must not contain spaces.
+     */
+    columns: readonly string[];
+    /**
+     * Matrix rows. Must not contain spaces.
+     */
+    rows: readonly string[];
+    /**
+     * Current Playwright browser name.
+     */
+    browserName: string;
+    /**
+     * Matrix children. Must contain column/row labels and screenshots for each column-row combination.
+     */
+    children: unknown[];
+};
+export declare const ScreenshotMatrix: (props: ScreenshotMatrixProps) => import("vue/jsx-runtime").JSX.Element;

package/dist/screenshots/index.d.ts

@@ -0,0 +1,19 @@
+import type { Locator } from "@playwright/test";
+import type { HookContext, MatrixScreenshotTestOptions, UseMatrixScreenshotTestOptions } from "./types";
+/**
+ * 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>) => {
+    /**
+     * 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>;
+};
+/**
+ * Sets the component size to fit all absolute positioned content so it is fully included in screenshots.
+ * Useful if component includes flyouts etc. that use CSS `position: absolute`.
+ *
+ * Will wait for the component to be visible.
+ */
+export declare const adjustSizeToAbsolutePosition: (component: Locator) => Promise<void>;

package/dist/screenshots/types.d.ts

@@ -0,0 +1,58 @@
+import type { MountResultJsx, test } from "@playwright/experimental-ct-vue";
+import type { JSX } from "vue/jsx-runtime";
+export type UseMatrixScreenshotTestOptions<TContext extends HookContext = HookContext> = {
+    /**
+     * Global default options for the matrix screenshot tests.
+     * Will be merged with the options passed to a single screenshot test.
+     */
+    defaults?: Partial<Pick<MatrixScreenshotTestOptions<string, string, TContext>, "removePadding" | "hooks">>;
+};
+export type MatrixScreenshotTestOptions<TColumn extends string = string, TRow extends string = string, TContext extends HookContext = HookContext> = {
+    /**
+     * Test name. Will be displayed above the matrix screenshot and be used as filename.
+     */
+    name: string;
+    /**
+     * Matrix columns.
+     */
+    columns: readonly TColumn[];
+    /**
+     * Matrix rows.
+     */
+    rows: readonly TRow[];
+    /**
+     * Function that returns the component for the given column and row.
+     */
+    component: (column: TColumn, row: TRow) => JSX.Element;
+    /**
+     * Custom hooks/callbacks that can be executed at specific points in time during the matrix screenshot.
+     */
+    hooks?: ScreenshotTestHooks<TColumn, TRow, TContext>;
+    /**
+     * If `true`, no padding will be added to the screenshots.
+     * By default a `1rem` padding is added around the component/screenshot.
+     */
+    removePadding?: boolean;
+    /**
+     * Context that is passed to all `hooks`.
+     * Useful for passing options to (global) hooks per matrix screenshot, e.g. for disabling specific accessibility test rule.
+     */
+    context?: TContext;
+};
+export type ScreenshotTestHooks<TColumn extends string, TRow extends string, TContext extends HookContext = HookContext> = Partial<{
+    /**
+     * Optional callback to be executed before capturing each individual screenshot (column + row combination).
+     * Useful for performing `expect()` or e.g. hover, focus-visible state etc.
+     * Focus and mouse will be reset after each screenshot.
+     */
+    beforeEach: ScreenshotTestHook<TColumn, TRow, TContext>;
+    /**
+     * Optional callback to be executed after capturing each individual screenshot (column + row combination).
+     * Useful for performing clean ups of side effects created by the `beforeEach` hook.
+     * Focus and mouse will be reset after each screenshot.
+     */
+    afterEach: ScreenshotTestHook<TColumn, TRow, TContext>;
+}>;
+export type ScreenshotTestHook<TColumn extends string, TRow extends string, TContext extends HookContext = HookContext> = (component: MountResultJsx, page: TestArgs["page"], column: TColumn, row: TRow, context?: TContext) => Promise<void>;
+export type TestArgs = Parameters<Parameters<typeof test>[2]>[0];
+export type HookContext = Record<PropertyKey, unknown>;

package/{src/screenshots/utils.ts → dist/screenshots/utils.d.ts}

@@ -1,6 +1,4 @@
 /**
  * Escapes the given string so its save to be used as CSS grid-area, e.g. by replacing whitespaces.
  */
-export const escapeGridAreaName = (name: string) => {
-  return name.replace(/\W/g, "-");
-};
+export declare const escapeGridAreaName: (name: string) => string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sit-onyx/playwright-utils",
   "description": "Utilities for Vue component testing with Playwright",
-  "version": "0.1.0-beta.0",
+  "version": "1.0.0-beta.2",
   "type": "module",
   "license": "Apache-2.0",
   "repository": {
@@ -13,17 +13,28 @@
     "url": "https://github.com/schwarzit/onyx/issues"
   },
   "files": [
-    "src"
+    "dist"
   ],
+  "types": "./dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts"
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    }
   },
   "peerDependencies": {
     "@playwright/experimental-ct-vue": ">= 1",
     "@playwright/test": ">= 1",
+    "playwright": ">= 1",
     "vue": ">= 3"
   },
+  "devDependencies": {
+    "typescript": "5.6.3",
+    "vite": "5.4.11",
+    "@sit-onyx/shared": "0.0.1-beta.0"
+  },
   "scripts": {
-    "build": "vue-tsc --noEmit"
+    "build": "vite build && vue-tsc --emitDeclarationOnly"
   }
 }

package/src/screenshots/ScreenshotMatrix.vue

@@ -1,121 +0,0 @@
-<script lang="ts" setup>
-import { computed } from "vue";
-import { escapeGridAreaName } from "./utils";
-
-defineSlots<{
-  default: () => unknown;
-}>();
-
-const props = defineProps<{
-  /**
-   * Test name. Will be displayed above the matrix screenshot and be used as filename.
-   */
-  name: string;
-  /**
-   * Matrix columns. Must not contain spaces.
-   */
-  columns: readonly string[];
-  /**
-   * Matrix rows. Must not contain spaces.
-   */
-  rows: readonly string[];
-  /**
-   * Current Playwright browser name.
-   */
-  browserName: string;
-}>();
-
-/**
- * CSS "grid-template-areas" for the current columns and rows.
- * Every grid element must have the "grid-area" set to `{row}-{column}` to place it correctly.
- */
-const gridTemplateAreas = computed(() => {
-  const lines: string[] = [
-    `"blank ${props.columns.map((col) => `column-${escapeGridAreaName(col)}`).join(" ")}"`,
-  ];
-
-  props.rows.forEach((row) => {
-    lines.push(
-      `"row-${escapeGridAreaName(row)} ${props.columns.map((col) => `${escapeGridAreaName(row)}-${escapeGridAreaName(col)}`).join(" ")}"`,
-    );
-  });
-
-  return lines.join("\n");
-});
-</script>
-
-<template>
-  <div class="wrapper">
-    <div class="meta">
-      <h1 class="meta__name">Screenshot test: {{ props.name }}</h1>
-      <div>Browser: {{ props.browserName }}</div>
-    </div>
-
-    <div
-      class="grid"
-      :style="{
-        gridTemplateColumns: `auto repeat(${props.columns.length}, 1fr)`,
-        gridTemplateAreas,
-      }"
-    >
-      <div
-        v-for="column of props.columns"
-        :key="column"
-        class="grid__label"
-        :style="{ gridArea: `column-${escapeGridAreaName(column)}` }"
-      >
-        {{ column }}
-      </div>
-
-      <div
-        v-for="row of props.rows"
-        :key="row"
-        class="grid__label"
-        :style="{ gridArea: `row-${escapeGridAreaName(row)}` }"
-      >
-        {{ row }}
-      </div>
-
-      <!-- blank / placeholder element for the first column/row to align the matrix correctly -->
-      <div class="grid__blank"></div>
-
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<style scoped>
-.wrapper {
-  width: max-content;
-}
-
-.meta {
-  font-family: Arial, sans-serif;
-  margin-bottom: 2rem;
-}
-
-.meta__name {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  margin: 0;
-}
-
-.grid {
-  font-family: Arial, sans-serif;
-  display: grid;
-  gap: 2rem;
-  grid-template-rows: auto;
-  width: max-content;
-
-  align-items: center;
-  justify-content: center;
-}
-
-.grid__label {
-  text-align: center;
-}
-
-.grid__blank {
-  grid-area: blank;
-}
-</style>

package/src/screenshots/index.tsx

@@ -1,141 +0,0 @@
-import { expect, test } from "@playwright/experimental-ct-vue";
-import type { Locator } from "@playwright/test";
-import type { JSX } from "vue/jsx-runtime";
-import ScreenshotMatrix from "./ScreenshotMatrix.vue";
-import type {
-  HookContext,
-  MatrixScreenshotTestOptions,
-  UseMatrixScreenshotTestOptions,
-} from "./types";
-import { escapeGridAreaName } from "./utils";
-
-/**
- * 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 const useMatrixScreenshotTest = <TContext extends HookContext = HookContext>({
-  defaults,
-}: UseMatrixScreenshotTestOptions<TContext>) => {
-  const executeMatrixScreenshotTest = async <TColumn extends string, TRow extends string>(
-    options: MatrixScreenshotTestOptions<TColumn, TRow, TContext>,
-  ) => {
-    test(`${options.name}`, async ({ mount, page, browserName, context }) => {
-      // limit the max timeout per permutation
-      const timeoutPerScreenshot = 25 * 1000;
-      test.setTimeout(options.columns.length * options.rows.length * timeoutPerScreenshot);
-
-      /**
-       * Mounts the given element, captures a screenshot and returns and HTML `<img />` containing the captured screenshot.
-       */
-      const getScreenshot = async (element: JSX.Element, column: TColumn, row: TRow) => {
-        await page.getByRole("document").focus(); // reset focus
-        await page.getByRole("document").hover({ position: { x: 0, y: 0 } }); // reset mouse
-        await page.mouse.up(); // reset mouse
-
-        const component = await mount(element);
-
-        // BEFORE hook
-        await defaults?.hooks?.beforeEach?.(component, page, column, row, options.context);
-        await options.hooks?.beforeEach?.(component, page, column, row, options.context);
-
-        const screenshot = await component.screenshot({ animations: "disabled" });
-
-        // some browser (e.g. safari) have different device resolutions which would cause the screenshot
-        // to be twice as large (or more) so we need to get the actual size here to set the correct image size below
-        // see (`scale` option of `component.screenshot()` above)
-        const box = await component.boundingBox();
-        const id = `${escapeGridAreaName(row)}-${escapeGridAreaName(column)}`;
-
-        // AFTER hook
-        await defaults?.hooks?.afterEach?.(component, page, column, row, options.context);
-        await options.hooks?.afterEach?.(component, page, column, row, options.context);
-
-        return { box, id, screenshot };
-      };
-
-      const screenshotMap = new Map<string, Awaited<ReturnType<typeof getScreenshot>>>();
-
-      for (const row of options.rows) {
-        for (const column of options.columns) {
-          const jsxElement = options.component(column, row);
-          const removePadding = options.removePadding ?? defaults?.removePadding;
-
-          const wrappedElement = (
-            <div
-              style={{
-                display: "grid",
-                width: "max-content",
-                padding: removePadding ? undefined : "1rem",
-              }}
-            >
-              {jsxElement}
-            </div>
-          );
-
-          const data = await getScreenshot(wrappedElement, column, row);
-          screenshotMap.set(data.id, data);
-        }
-      }
-
-      const SCREENSHOT_ROUTE = "/_playwright-matrix-screenshot";
-
-      await context.route(`${SCREENSHOT_ROUTE}*`, (route, request) => {
-        const url = new URL(request.url());
-        const wantedId = url.searchParams.get("id") ?? "";
-
-        return route.fulfill({
-          status: 200,
-          contentType: "image/png",
-          body: screenshotMap.get(wantedId)?.screenshot,
-        });
-      });
-
-      const screenshots = Array.from(screenshotMap.values()).map(({ box, id }) => (
-        <img
-          width={box?.width}
-          height={box?.height}
-          style={{ gridArea: id }}
-          src={`${SCREENSHOT_ROUTE}?id=${id}`}
-          alt={id}
-        />
-      ));
-
-      const component = await mount(
-        <ScreenshotMatrix
-          columns={options.columns}
-          rows={options.rows}
-          name={options.name}
-          browserName={browserName}
-        >
-          {screenshots}
-        </ScreenshotMatrix>,
-      );
-
-      await expect(component).toHaveScreenshot(`${options.name}.png`);
-
-      await page.unroute(`${SCREENSHOT_ROUTE}*`);
-    });
-  };
-
-  return {
-    /**
-     * Creates a single matrix screenshot that includes the screenshots for every column-row combination.
-     */
-    executeMatrixScreenshotTest,
-  };
-};
-
-/**
- * Sets the component size to fit all absolute positioned content so it is fully included in screenshots.
- * Useful if component includes flyouts etc. that use CSS `position: absolute`.
- *
- * Will wait for the component to be visible.
- */
-export const adjustSizeToAbsolutePosition = async (component: Locator) => {
-  await expect(component).toBeVisible();
-
-  await component.evaluate((element) => {
-    element.style.height = `${element.scrollHeight}px`;
-    element.style.width = `${element.scrollWidth}px`;
-  });
-};

package/src/screenshots/types.ts

@@ -1,84 +0,0 @@
-import type { MountResultJsx, test } from "@playwright/experimental-ct-vue";
-import type { JSX } from "vue/jsx-runtime";
-
-export type UseMatrixScreenshotTestOptions<TContext extends HookContext = HookContext> = {
-  /**
-   * Global default options for the matrix screenshot tests.
-   * Will be merged with the options passed to a single screenshot test.
-   */
-  defaults?: Partial<
-    Pick<MatrixScreenshotTestOptions<string, string, TContext>, "removePadding" | "hooks">
-  >;
-};
-
-export type MatrixScreenshotTestOptions<
-  TColumn extends string = string,
-  TRow extends string = string,
-  TContext extends HookContext = HookContext,
-> = {
-  /**
-   * Test name. Will be displayed above the matrix screenshot and be used as filename.
-   */
-  name: string;
-  /**
-   * Matrix columns.
-   */
-  columns: readonly TColumn[];
-  /**
-   * Matrix rows.
-   */
-  rows: readonly TRow[];
-  /**
-   * Function that returns the component for the given column and row.
-   */
-  component: (column: TColumn, row: TRow) => JSX.Element;
-  /**
-   * Custom hooks/callbacks that can be executed at specific points in time during the matrix screenshot.
-   */
-  hooks?: ScreenshotTestHooks<TColumn, TRow, TContext>;
-  /**
-   * If `true`, no padding will be added to the screenshots.
-   * By default a `1rem` padding is added around the component/screenshot.
-   */
-  removePadding?: boolean;
-  /**
-   * Context that is passed to all `hooks`.
-   * Useful for passing options to (global) hooks per matrix screenshot, e.g. for disabling specific accessibility test rule.
-   */
-  context?: TContext;
-};
-
-export type ScreenshotTestHooks<
-  TColumn extends string,
-  TRow extends string,
-  TContext extends HookContext = HookContext,
-> = Partial<{
-  /**
-   * Optional callback to be executed before capturing each individual screenshot (column + row combination).
-   * Useful for performing `expect()` or e.g. hover, focus-visible state etc.
-   * Focus and mouse will be reset after each screenshot.
-   */
-  beforeEach: ScreenshotTestHook<TColumn, TRow, TContext>;
-  /**
-   * Optional callback to be executed after capturing each individual screenshot (column + row combination).
-   * Useful for performing clean ups of side effects created by the `beforeEach` hook.
-   * Focus and mouse will be reset after each screenshot.
-   */
-  afterEach: ScreenshotTestHook<TColumn, TRow, TContext>;
-}>;
-
-export type ScreenshotTestHook<
-  TColumn extends string,
-  TRow extends string,
-  TContext extends HookContext = HookContext,
-> = (
-  component: MountResultJsx,
-  page: TestArgs["page"],
-  column: TColumn,
-  row: TRow,
-  context?: TContext,
-) => Promise<void>;
-
-export type TestArgs = Parameters<Parameters<typeof test>[2]>[0];
-
-export type HookContext = Record<PropertyKey, unknown>;