ranui
Version:
A framework-agnostic Web Components UI library built on native custom elements, with TypeScript types, light/dark theming, SSR and PWA support.
60 lines (59 loc) • 3.48 kB
TypeScript
import type { Page } from '@playwright/test';
/**
* Freezes animations in the **light DOM** only — page chrome, demo scaffolding, anything the
* specs mount directly into `<body>`.
*
* It cannot reach inside a component: this is injected as a document-level `<style>`, and
* document stylesheets do not cascade into a shadow tree. Components are frozen instead by
* `reducedMotion: 'reduce'` in `playwright.config.ts`, which triggers the `REDUCED_MOTION_CSS`
* that `ensureShadowRoot` adopts into every shadow root. Don't add component animation
* overrides here — they will silently do nothing.
*/
export declare const FREEZE_ANIMATIONS = "\n *, *::before, *::after {\n animation-duration: 0.001ms !important;\n animation-delay: 0ms !important;\n animation-iteration-count: 1 !important;\n transition-duration: 0.001ms !important;\n transition-delay: 0ms !important;\n }\n";
/**
* Navigate to the dev server, wait for a custom element tag to register,
* freeze all animations, and clear the body for isolated component mounting.
*
* Screenshot the element you mounted, not `body`. The demo app this navigates to can repaint
* into the body after the clear, and a capture that happens to catch it comes back a
* different height — `toHaveScreenshot` then alternates between two sizes across its retries
* and reports whichever it ended on. A component's baseline should be of the component
* anyway.
*/
export declare function isolatedSetup(page: Page, url: string, waitForTag: string): Promise<void>;
/**
* Setup for the specs under `test/e2e/visual/`, which screenshot the demo's `/components`
* route in place rather than mounting isolated markup.
*
* Same determinism guarantees as `isolatedSetup` — in particular `document.fonts.ready`,
* which these specs used to skip. `r-math` lazy-loads Temml plus two font faces, so without
* it the formula is measured against fallback metrics and the screenshot lands a hundred-odd
* pixels off, differently each run.
*/
export declare function demoSetup(page: Page, waitForTag: string): Promise<void>;
/**
* Wait until every matching element has finished rendering its lazily-loaded variant.
*
* Components that resolve `name` at runtime (`r-loading`, `r-icon`) fetch the variant with a
* dynamic `import()` and expose the in-flight promise as `_pending`. A fixed `waitForTimeout`
* races that fetch — on a cold module graph the chunk lands *after* the screenshot starts, and
* `toHaveScreenshot` then fails with "Failed to take two consecutive stable screenshots"
* because the element is still swapping its children between the two captures.
*
* Awaiting `_pending` is deterministic regardless of how slow the chunk is.
*/
export declare function settlePending(page: Page, selector: string): Promise<void>;
/**
* Replace body content with arbitrary HTML.
* Custom elements are already registered from the dev server boot,
* so they upgrade synchronously when inserted into the DOM.
*/
export declare function mount(page: Page, html: string): Promise<void>;
/**
* Reaching inside a closed shadow root is `ranui/testing`'s job, not this file's.
*
* It is exported from the package because it is not internal test scaffolding: every
* consumer testing against these components hits the same wall, and answering it once in the
* public API is better than each of them rediscovering `_shadowDom`.
*/
export { insideShadow, settlePainted } from '../../testing';