@baseline-ui/test-utils 0.54.2 → 0.56.0

package/README.md

@@ -0,0 +1,67 @@
+# @baseline-ui/test-utils
+
+A collection of test utilities for Baseline UI, including a Playwright reporter that tracks flaky tests in a Neon database.
+
+## Exports
+
+| Entry point                             | Description                                        |
+| --------------------------------------- | -------------------------------------------------- |
+| `@baseline-ui/test-utils`               | Custom Playwright matchers (`expect`)              |
+| `@baseline-ui/test-utils/client`        | Client-side test helpers and components            |
+| `@baseline-ui/test-utils/test-reporter` | Playwright reporter for tracking flaky tests in CI |
+
+## Flaky Test Reporter
+
+A custom [Playwright reporter](https://playwright.dev/docs/test-reporters) that automatically detects flaky tests (tests that fail then pass on retry) and records them to a Neon (Postgres) database. It also tracks total CI run counts per project/browser/variant so you can compute flaky rates.
+
+### Setup
+
+#### 1. Install the optional peer dependency
+
+The reporter uses `@neondatabase/serverless` to write to the database. It's listed as an optional peer dependency — install it in the project that runs the tests:
+
+```bash
+pnpm add -D @neondatabase/serverless
+```
+
+#### 2. Add the reporter to your Playwright config
+
+```ts
+// playwright.config.ts
+import { defineConfig } from "@playwright/test";
+
+export default defineConfig({
+  reporter: [["list"], ["@baseline-ui/test-utils/test-reporter"]],
+});
+```
+
+#### 3. Set the database URL
+
+The reporter reads `TEST_DASHBOARD_DATABASE_URL` from the environment. When the variable is missing, the reporter silently no-ops — safe to leave unconfigured locally.
+
+```bash
+# .env or CI secrets
+TEST_DASHBOARD_DATABASE_URL="postgres://user:pass@host/dbname"
+```
+
+### Environment Variables
+
+| Variable                      | Required | Description                                                                     |
+| ----------------------------- | -------- | ------------------------------------------------------------------------------- |
+| `TEST_DASHBOARD_DATABASE_URL` | Yes      | Neon/Postgres connection string. Reporter is disabled when absent.              |
+| `PROJECT`                     | No       | Project identifier (e.g. `org/repo`). Auto-detected from `git remote` if unset. |
+| `METADATA_SHADOW_DOM`         | No       | Set to `"true"` to record the variant as `shadow-dom`.                          |
+| `METADATA_IFRAME`             | No       | Set to `"true"` to record the variant as `iframe`.                              |
+
+### Database Schema
+
+The reporter auto-creates two tables on first run:
+
+**`ci_runs`** — one row per project/browser/variant/day, incremented each run.
+
+**`flaky_tests`** — one row per flaky test/project/browser/variant/day, with the error message from the first failure.
+
+### How It Works
+
+1. **`onTestEnd`** — if a test's final status is `passed` but it had prior `failed` results (i.e. it was retried), it's recorded as flaky.
+2. **`onEnd`** — all collected flaky records are batch-upserted into the database. CI run counts are also upserted so you can compute `flaky_count / run_count` as a flaky rate.

package/client/index.js

@@ -1,4 +1,4 @@
-'use strict';var l=require('react'),w=require('react-frame-component'),F=require('react-dom/client'),core=require('@baseline-ui/core'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var l__default=/*#__PURE__*/_interopDefault(l);var w__default=/*#__PURE__*/_interopDefault(w);var F__default=/*#__PURE__*/_interopDefault(F);/**
+'use strict';var core=require('@baseline-ui/core'),l=require('react'),b=require('react-dom/client'),x=require('react-frame-component'),jsxRuntime=require('react/jsx-runtime');function _interopDefault(e){return e&&e.__esModule?e:{default:e}}var l__default=/*#__PURE__*/_interopDefault(l);var b__default=/*#__PURE__*/_interopDefault(b);var x__default=/*#__PURE__*/_interopDefault(x);/**
  * Copyright (c) 2023-2024 PSPDFKit GmbH. All rights reserved.
  *
  * THIS SOURCE CODE AND ANY ACCOMPANYING DOCUMENTATION ARE PROTECTED BY INTERNATIONAL COPYRIGHT LAW
@@ -8,4 +8,4 @@
  *
  */
 function h(){let t=[],r=document;for(let o=0;o<r.styleSheets.length;o++){let n=r.styleSheets[o];if(n.cssRules){let i=n.cssRules;for(let s of i)t.push(s.cssText);}}return t.join(`
-`)}var E=l__default.default.forwardRef(({head:t=jsxRuntime.jsx("style",{children:h()}),...r},o)=>jsxRuntime.jsx(w__default.default,{style:{width:"100vw",height:"100vh",border:"none"},ref:o,...r,head:t}));E.displayName="IFrame";var T=l__default.default.forwardRef(({children:t,style:r},o)=>{let n=core.useObjectRef(o),i=l__default.default.useRef(null),s=l__default.default.useRef(null),d=l__default.default.useRef(null),m=l__default.default.useRef(false),P=l__default.default.useMemo(()=>h(),[]);return l.useEffect(()=>{if(m.current=false,n.current&&!i.current){let e=n.current.attachShadow({mode:"open"});i.current=e;let c=document.createElement("style");c.textContent=P,e.append(c);let u=document.createElement("div");u.className="content-container",e.append(u);let p=document.createElement("div");p.className="overlay-portal",e.append(p),d.current=p;let y=F__default.default.createRoot(u);s.current=y;}return ()=>{m.current=true;let e=s.current;e&&(queueMicrotask(()=>{e.unmount();}),s.current=null),i.current=null,d.current=null;}},[P,n]),l.useEffect(()=>{if(m.current)return;let e=s.current,c=d.current;e&&c&&e.render(jsxRuntime.jsx(core.PortalContainerProvider,{portalContainer:c,children:t}));},[t]),jsxRuntime.jsx("div",{style:r,ref:n})});T.displayName="ShadowRoot";var Q=({children:t,locale:r,theme:o,themeStyle:n,disableThemeProvider:i=false,disableFrameProvider:s=false,messages:d})=>{let[m,P]=l.useState(),{document:e}=w.useFrame(),c=r==="ar"||r==="he";l.useLayoutEffect(()=>{c?e?.documentElement.setAttribute("dir","rtl"):e?.documentElement.removeAttribute("dir");},[c,e]);let u=m?.ownerDocument?.body,p=[i?void 0:({children:a})=>jsxRuntime.jsx(core.ThemeProvider,{theme:o,style:n,children:a}),s?void 0:({children:a})=>jsxRuntime.jsx(core.FrameProvider,{container:u,portalContainer:m,children:a})].filter(Boolean);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(core.I18nProvider,{locale:r,messages:d,children:jsxRuntime.jsx(({children:a})=>{let v=a;for(let C of [...p].toReversed())v=C?.({children:v});return v},{children:t})}),jsxRuntime.jsx("div",{id:"portal-container",ref:a=>{P(a??void 0);}})]})};exports.IFrame=E;exports.ProvidersContainer=Q;exports.ShadowRoot=T;exports.getRootStyles=h;
+`)}var E=l__default.default.forwardRef(({head:t=jsxRuntime.jsx("style",{children:h()}),...r},o)=>jsxRuntime.jsx(x__default.default,{style:{width:"100vw",height:"100vh",border:"none"},ref:o,...r,head:t}));E.displayName="IFrame";var T=l__default.default.forwardRef(({children:t,style:r},o)=>{let n=core.useObjectRef(o),i=l__default.default.useRef(null),s=l__default.default.useRef(null),d=l__default.default.useRef(null),m=l__default.default.useRef(false),P=l__default.default.useMemo(()=>h(),[]);return l.useEffect(()=>{if(m.current=false,n.current&&!i.current){let e=n.current.attachShadow({mode:"open"});i.current=e;let c=document.createElement("style");c.textContent=P,e.append(c);let u=document.createElement("div");u.className="content-container",e.append(u);let p=document.createElement("div");p.className="overlay-portal",e.append(p),d.current=p;let y=b__default.default.createRoot(u);s.current=y;}return ()=>{m.current=true;let e=s.current;e&&(queueMicrotask(()=>{e.unmount();}),s.current=null),i.current=null,d.current=null;}},[P,n]),l.useEffect(()=>{if(m.current)return;let e=s.current,c=d.current;e&&c&&e.render(jsxRuntime.jsx(core.PortalContainerProvider,{portalContainer:c,children:t}));},[t]),jsxRuntime.jsx("div",{style:r,ref:n})});T.displayName="ShadowRoot";var Q=({children:t,locale:r,theme:o,themeStyle:n,disableThemeProvider:i=false,disableFrameProvider:s=false,messages:d})=>{let[m,P]=l.useState(),{document:e}=x.useFrame(),c=r==="ar"||r==="he";l.useLayoutEffect(()=>{c?e?.documentElement.setAttribute("dir","rtl"):e?.documentElement.removeAttribute("dir");},[c,e]);let u=m?.ownerDocument?.body,p=[i?void 0:({children:a})=>jsxRuntime.jsx(core.ThemeProvider,{theme:o,style:n,children:a}),s?void 0:({children:a})=>jsxRuntime.jsx(core.FrameProvider,{container:u,portalContainer:m,children:a})].filter(Boolean);return jsxRuntime.jsxs(jsxRuntime.Fragment,{children:[jsxRuntime.jsx(core.I18nProvider,{locale:r,messages:d,children:jsxRuntime.jsx(({children:a})=>{let v=a;for(let C of [...p].toReversed())v=C?.({children:v});return v},{children:t})}),jsxRuntime.jsx("div",{id:"portal-container",ref:a=>{P(a??void 0);}})]})};exports.IFrame=E;exports.ProvidersContainer=Q;exports.ShadowRoot=T;exports.getRootStyles=h;

package/client/index.mjs

@@ -1,4 +1,4 @@
-import l,{useEffect,useState,useLayoutEffect}from'react';import w,{useFrame}from'react-frame-component';import F from'react-dom/client';import {useObjectRef,PortalContainerProvider,I18nProvider,ThemeProvider,FrameProvider}from'@baseline-ui/core';import {jsx,jsxs,Fragment}from'react/jsx-runtime';/**
+import {useObjectRef,PortalContainerProvider,I18nProvider,ThemeProvider,FrameProvider}from'@baseline-ui/core';import l,{useEffect,useState,useLayoutEffect}from'react';import b from'react-dom/client';import x,{useFrame}from'react-frame-component';import {jsx,jsxs,Fragment}from'react/jsx-runtime';/**
  * Copyright (c) 2023-2024 PSPDFKit GmbH. All rights reserved.
  *
  * THIS SOURCE CODE AND ANY ACCOMPANYING DOCUMENTATION ARE PROTECTED BY INTERNATIONAL COPYRIGHT LAW
@@ -8,4 +8,4 @@ import l,{useEffect,useState,useLayoutEffect}from'react';import w,{useFrame}from
  *
  */
 function h(){let t=[],r=document;for(let o=0;o<r.styleSheets.length;o++){let n=r.styleSheets[o];if(n.cssRules){let i=n.cssRules;for(let s of i)t.push(s.cssText);}}return t.join(`
-`)}var E=l.forwardRef(({head:t=jsx("style",{children:h()}),...r},o)=>jsx(w,{style:{width:"100vw",height:"100vh",border:"none"},ref:o,...r,head:t}));E.displayName="IFrame";var T=l.forwardRef(({children:t,style:r},o)=>{let n=useObjectRef(o),i=l.useRef(null),s=l.useRef(null),d=l.useRef(null),m=l.useRef(false),P=l.useMemo(()=>h(),[]);return useEffect(()=>{if(m.current=false,n.current&&!i.current){let e=n.current.attachShadow({mode:"open"});i.current=e;let c=document.createElement("style");c.textContent=P,e.append(c);let u=document.createElement("div");u.className="content-container",e.append(u);let p=document.createElement("div");p.className="overlay-portal",e.append(p),d.current=p;let y=F.createRoot(u);s.current=y;}return ()=>{m.current=true;let e=s.current;e&&(queueMicrotask(()=>{e.unmount();}),s.current=null),i.current=null,d.current=null;}},[P,n]),useEffect(()=>{if(m.current)return;let e=s.current,c=d.current;e&&c&&e.render(jsx(PortalContainerProvider,{portalContainer:c,children:t}));},[t]),jsx("div",{style:r,ref:n})});T.displayName="ShadowRoot";var Q=({children:t,locale:r,theme:o,themeStyle:n,disableThemeProvider:i=false,disableFrameProvider:s=false,messages:d})=>{let[m,P]=useState(),{document:e}=useFrame(),c=r==="ar"||r==="he";useLayoutEffect(()=>{c?e?.documentElement.setAttribute("dir","rtl"):e?.documentElement.removeAttribute("dir");},[c,e]);let u=m?.ownerDocument?.body,p=[i?void 0:({children:a})=>jsx(ThemeProvider,{theme:o,style:n,children:a}),s?void 0:({children:a})=>jsx(FrameProvider,{container:u,portalContainer:m,children:a})].filter(Boolean);return jsxs(Fragment,{children:[jsx(I18nProvider,{locale:r,messages:d,children:jsx(({children:a})=>{let v=a;for(let C of [...p].toReversed())v=C?.({children:v});return v},{children:t})}),jsx("div",{id:"portal-container",ref:a=>{P(a??void 0);}})]})};export{E as IFrame,Q as ProvidersContainer,T as ShadowRoot,h as getRootStyles};
+`)}var E=l.forwardRef(({head:t=jsx("style",{children:h()}),...r},o)=>jsx(x,{style:{width:"100vw",height:"100vh",border:"none"},ref:o,...r,head:t}));E.displayName="IFrame";var T=l.forwardRef(({children:t,style:r},o)=>{let n=useObjectRef(o),i=l.useRef(null),s=l.useRef(null),d=l.useRef(null),m=l.useRef(false),P=l.useMemo(()=>h(),[]);return useEffect(()=>{if(m.current=false,n.current&&!i.current){let e=n.current.attachShadow({mode:"open"});i.current=e;let c=document.createElement("style");c.textContent=P,e.append(c);let u=document.createElement("div");u.className="content-container",e.append(u);let p=document.createElement("div");p.className="overlay-portal",e.append(p),d.current=p;let y=b.createRoot(u);s.current=y;}return ()=>{m.current=true;let e=s.current;e&&(queueMicrotask(()=>{e.unmount();}),s.current=null),i.current=null,d.current=null;}},[P,n]),useEffect(()=>{if(m.current)return;let e=s.current,c=d.current;e&&c&&e.render(jsx(PortalContainerProvider,{portalContainer:c,children:t}));},[t]),jsx("div",{style:r,ref:n})});T.displayName="ShadowRoot";var Q=({children:t,locale:r,theme:o,themeStyle:n,disableThemeProvider:i=false,disableFrameProvider:s=false,messages:d})=>{let[m,P]=useState(),{document:e}=useFrame(),c=r==="ar"||r==="he";useLayoutEffect(()=>{c?e?.documentElement.setAttribute("dir","rtl"):e?.documentElement.removeAttribute("dir");},[c,e]);let u=m?.ownerDocument?.body,p=[i?void 0:({children:a})=>jsx(ThemeProvider,{theme:o,style:n,children:a}),s?void 0:({children:a})=>jsx(FrameProvider,{container:u,portalContainer:m,children:a})].filter(Boolean);return jsxs(Fragment,{children:[jsx(I18nProvider,{locale:r,messages:d,children:jsx(({children:a})=>{let v=a;for(let C of [...p].toReversed())v=C?.({children:v});return v},{children:t})}),jsx("div",{id:"portal-container",ref:a=>{P(a??void 0);}})]})};export{E as IFrame,Q as ProvidersContainer,T as ShadowRoot,h as getRootStyles};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@baseline-ui/test-utils",
-  "version": "0.54.2",
+  "version": "0.56.0",
   "description": "A collection of test utilities for Baseline UI",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
@@ -11,23 +11,47 @@
     "License.md",
     "Acknowledgements.md",
     "client",
+    "test-reporter",
     "sbom.json"
   ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./client": {
+      "types": "./client/index.d.ts",
+      "import": "./client/index.mjs",
+      "require": "./client/index.js"
+    },
+    "./test-reporter": {
+      "types": "./test-reporter/test-reporter.d.ts",
+      "import": "./test-reporter/test-reporter.mjs",
+      "require": "./test-reporter/test-reporter.js"
+    }
+  },
   "source": "src/index.ts",
   "author": "",
   "license": "SEE LICENSE IN https://pspdfkit.com/legal/License.pdf",
   "peerDependencies": {
+    "@neondatabase/serverless": "^1.0.2",
+    "@playwright/test": "^1.58.2",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
-    "sinon": ">=19.0.0",
-    "@playwright/test": "^1.58.2"
+    "sinon": ">=19.0.0"
+  },
+  "peerDependenciesMeta": {
+    "@neondatabase/serverless": {
+      "optional": true
+    }
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "react-frame-component": "^5.2.7",
-    "@baseline-ui/core": "0.54.2"
+    "@baseline-ui/core": "0.56.0"
   },
   "scripts": {
     "build": "tsup",