ngwr 11.1.0 → 11.2.0

package/fesm2022/ngwr-falling-text-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-falling-text-testing.mjs","sources":["../../../projects/lib/falling-text/testing/wr-falling-text-harness.ts","../../../projects/lib/falling-text/testing/ngwr-falling-text-testing.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrFallingTextHarnessFilters } from './interfaces';\n\n/** Read one declaration out of an inline `style` attribute, or `null` when it is not there. */\nfunction inlineStyle(style: string | null, property: string): string | null {\n  for (const declaration of (style ?? '').split(';')) {\n    const colon = declaration.indexOf(':');\n    if (colon === -1) continue;\n    if (declaration.slice(0, colon).trim() !== property) continue;\n    return declaration.slice(colon + 1).trim();\n  }\n  return null;\n}\n\n/**\n * Test harness for `<wr-falling-text>`.\n *\n * **The assertion that matters here is that the animation did not eat the text.** The\n * component cuts the sentence into one span per word so a physics loop can throw them\n * around, and {@link getText} is the check that a screen reader still gets prose out of\n * the other end. It normalises whitespace on the way, because the separators are real\n * `&nbsp;` characters rather than plain spaces — so `textContent` is never byte-identical\n * to the `[text]` input, and a spec comparing the two raw would fail on a component that\n * works perfectly.\n *\n * The rest of the readable surface is the split itself: {@link getWords} pins the rule\n * (split on spaces, empty tokens dropped) and {@link getHighlightedWords} pins the\n * prefix match, which is genuine logic — `grav` highlights `gravity`, and a whole-word\n * implementation would satisfy every naive test but not this one.\n *\n * **Nothing positional is offered, and that is not a jsdom concession.** The words'\n * `transform` values are one frame of a loop that never stops, seeded by `Math.random()`,\n * so they are not reproducible even in a real browser; there is no rest state to call\n * settled; the drag path needs `setPointerCapture` and AABB hit-testing over boxes that\n * a unit test measures as 0×0 at the origin, where every word contains every point. Nor\n * is `[gravity]` or `[trigger]` readable — neither reaches the DOM, and answering them\n * would mean reaching into the component instance. There is no `isReducedMotion()`\n * either: under reduced motion the component simply returns before touching anything, so\n * the only honest proxy is {@link hasReleased}, which reports what it did rather than\n * what it was told.\n *\n * **{@link hasReleased} and {@link release} have a precondition, and without it they are\n * worthless.** The simulator measures the host and each word before it starts, and bails\n * on a zero-sized box — which is every box in a test with no layout. So the spec has to\n * give them one, and it has to do it BEFORE the trigger fires: the component marks itself\n * started on the way past that guard, and the trigger listener is `{ once: true }`, so a\n * failed first attempt is permanent.\n *\n * ```ts\n * // In your spec, on a fixture mounted with trigger=\"click\", before calling release():\n * const box = { width: 300, height: 120, left: 0, top: 0, right: 300, bottom: 120 } as DOMRect;\n * for (const el of fixture.nativeElement.querySelectorAll('wr-falling-text, .wr-falling-text__word')) {\n *   el.getBoundingClientRect = () => box;\n * }\n * ```\n *\n * Assert `hasReleased()` is `true` in that control case before you assert it is `false`\n * anywhere else, or a spec proves only that the guard fired.\n *\n * @example\n * ```ts\n * const loader = TestbedHarnessEnvironment.loader(fixture);\n * const text = await loader.getHarness(WrFallingTextHarness);\n *\n * expect(await text.getText()).toBe('gravity pulls every word down');\n * expect(await text.getHighlightedWords()).toEqual(['gravity']);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrFallingTextHarness extends ComponentHarness {\n  static hostSelector = 'wr-falling-text';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrFallingTextHarnessFilters = {}): HarnessPredicate<WrFallingTextHarness> {\n    return new HarnessPredicate(WrFallingTextHarness, options).addOption('text', options.text, (harness, text) =>\n      HarnessPredicate.stringMatches(harness.getText(), text)\n    );\n  }\n\n  private readonly wordEls = this.locatorForAll('.wr-falling-text__word');\n\n  /**\n   * The whole sentence, as a screen reader reads it: whitespace collapsed and trimmed.\n   *\n   * The one assertion worth making about a component that dismantles a paragraph. The\n   * words are separated by `.wr-falling-text__space` spans holding U+00A0, so this\n   * collapses them back to ordinary spaces — losing those spans would be invisible to\n   * every other check here while turning the announcement into one run-on word.\n   *\n   * DOM order never changes once the physics starts. The words are absolutely positioned\n   * and scattered on screen, but they are still read in the order they were typeset, so\n   * this answers the same before and after {@link release}.\n   */\n  async getText(): Promise<string> {\n    return (await (await this.host()).text()).replace(/\\s+/g, ' ').trim();\n  }\n\n  /**\n   * Each word, in DOM order.\n   *\n   * Pins the split rule: on a literal space, with empty tokens dropped. Each of these is\n   * also one body in the simulator, so the length is the body count — which is why there\n   * is no separate `getWordCount()`, a method that would invite asserting how many\n   * without asserting which.\n   */\n  async getWords(): Promise<string[]> {\n    return Promise.all((await this.wordEls()).map(word => word.text()));\n  }\n\n  /**\n   * The words carrying the highlight, in DOM order.\n   *\n   * `[highlightWords]` is matched as a PREFIX and case-sensitively, so `['grav']` picks\n   * up `gravity` and `['Grav']` picks up nothing. The highlight is colour alone with no\n   * non-visual counterpart, which is acceptable only because it adds no meaning the\n   * sentence does not already carry.\n   */\n  async getHighlightedWords(): Promise<string[]> {\n    return Promise.all((await this.locatorForAll('.wr-falling-text__word--hl')()).map(word => word.text()));\n  }\n\n  /**\n   * Whether one word is highlighted — for asserting a keyword without depending on the\n   * order or the completeness of the whole list.\n   *\n   * Takes the word as it is rendered, not the keyword that matched it: ask for `gravity`,\n   * not for `grav`. Throws for a word the sentence does not contain, since `false` there\n   * would read as \"present and not highlighted\" and quietly survive a typo. A word that\n   * appears twice is answered once, which is safe — matching is on the text alone, so\n   * both copies always agree.\n   */\n  async isHighlighted(word: string): Promise<boolean> {\n    const words = await this.wordEls();\n    const texts = await Promise.all(words.map(el => el.text()));\n    const index = texts.indexOf(word);\n\n    if (index === -1) {\n      throw new Error(\n        `WrFallingTextHarness.isHighlighted(): there is no word \"${word}\" in \"${await this.getText()}\". The text ` +\n          'is split on spaces, so ask for a single word rather than a phrase, and for the word as rendered ' +\n          'rather than the prefix that highlights it.'\n      );\n    }\n    return words[index].hasClass('wr-falling-text__word--hl');\n  }\n\n  /**\n   * The font size as the consumer wrote it — `'2rem'`, not `'32px'`.\n   *\n   * Read off the inline `style` attribute rather than through `getCssValue()`. The two\n   * agree here and would part company in a real browser, which resolves `font-size` to\n   * pixels; `[fontSize]` takes a CSS length and handing back a different unit than the\n   * one that went in is the sort of green unit test that hides a broken assertion.\n   *\n   * Throws when nothing is written, which takes an empty `[fontSize]` — the component\n   * writes this on every render otherwise, default included.\n   */\n  async getFontSize(): Promise<string> {\n    const words = await this.locatorFor('.wr-falling-text__words')();\n    const size = inlineStyle(await words.getAttribute('style'), 'font-size');\n\n    if (size === null) {\n      throw new Error(\n        'WrFallingTextHarness.getFontSize(): the words carry no inline font-size. The component writes one from ' +\n          '[fontSize] on every render — an empty string is the only binding that removes it, and it leaves the ' +\n          'text at whatever the page inherits.'\n      );\n    }\n    return size;\n  }\n\n  /**\n   * Whether the simulator has taken the words over.\n   *\n   * Reads the `position: absolute` the component writes onto every word before its first\n   * frame — a value it wrote itself, not a measurement, and the only difference in the\n   * DOM between \"the physics is running\" and \"the words are still in normal flow\". That\n   * makes it the way to observe the trigger contract and the reduced-motion escape, since\n   * neither leaves anything else behind.\n   *\n   * **It is `false` by default in a test, for a reason that has nothing to do with the\n   * component.** Without layout every box measures 0×0 and the simulator refuses to start\n   * — see this class's docs for the stub, and assert a `true` before you trust a `false`.\n   *\n   * Throws for a component rendering no words at all, where the question does not apply.\n   */\n  async hasReleased(): Promise<boolean> {\n    const words = await this.wordEls();\n\n    if (words.length === 0) {\n      throw new Error(\n        'WrFallingTextHarness.hasReleased(): there are no words. Empty [text] renders nothing, and the simulator ' +\n          'has nothing to take over — check getWords() instead.'\n      );\n    }\n    return inlineStyle(await words[0].getAttribute('style'), 'position') === 'absolute';\n  }\n\n  /**\n   * Fire the events a `click` or `hover` trigger is waiting for.\n   *\n   * Both, because the harness cannot tell which one it is: `[trigger]` never reaches the\n   * DOM. The component consumes at most one — its listener is registered `{ once: true }`\n   * and the simulator refuses to start twice — so this is safe to call whatever the\n   * trigger is, and safe to call again.\n   *\n   * It does nothing for `auto`, which released on mount, and nothing for `scroll`, which\n   * waits on an `IntersectionObserver`: jsdom has none, so a spec has to stub the global\n   * and fire the callback itself. Same precondition as {@link hasReleased} — stub the\n   * boxes BEFORE calling this, because a start that bails on a zero-sized host still\n   * burns the trigger.\n   *\n   * Both are dispatched as bare events rather than through the harness's `click()` and\n   * `hover()` helpers, which would bring a whole pointer sequence with them. Released\n   * words listen for `pointerdown` so they can be picked up and thrown, and that handler\n   * calls `setPointerCapture` — which a unit environment does not implement, so the\n   * realistic version of this method would throw the moment the simulator was running.\n   */\n  async release(): Promise<void> {\n    const host = await this.host();\n    await host.dispatchEvent('click');\n    await host.dispatchEvent('mouseenter');\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/fesm2022/ngwr-fuzzy-text-testing.mjs

@@ -0,0 +1,134 @@
+import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Test harness for `<wr-fuzzy-text>` — a headline drawn into a canvas, one row of pixels
+ * at a time, with a random offset per row.
+ *
+ * **The drawing is out of reach and the accessible half is not, which is the whole shape
+ * of this harness.** There is no 2D context in a unit test — `getContext('2d')` returns
+ * `null`, and the component's `init()` gives up on the line after — so nothing downstream
+ * of that ever happens: no font load, no animation frame, no canvas listeners, no sizing.
+ * What survives is the markup, and the markup is the part that regressed: everything this
+ * component rendered used to be a canvas, so a screen reader got an empty element where
+ * the page showed a headline. {@link getText} and {@link isDecorative} are that fix,
+ * asserted as the PAIR it has to be — a readable copy plus a hidden pixel copy. Reading
+ * one without the other passes just as happily on a component that announces the headline
+ * twice.
+ *
+ * **The canvas is selected by tag, not by a class.** It carries no BEM name, unlike the
+ * two sibling animation canvases — this entry point ships no stylesheet at all, which is
+ * also why {@link isTextVisuallyHidden} is a real question rather than a formality.
+ *
+ * Nothing about the animation is offered, and none of it is a gap that could be closed by
+ * trying harder. There is no `getIntensity()` / `isFuzzing()` / `isGlitching()`: those are
+ * closure variables inside `init()` that only ever manifest as pixels, and in a test the
+ * function returns before they exist. No `hover()` / `click()` / `getHoverIntensity()`:
+ * the pointer listeners are attached only after a real context AND a resolved
+ * `document.fonts` — neither of which a unit test has — so a dispatched event would land
+ * on nothing and the assertion would pass vacuously; the hit test also measures the canvas
+ * box, which is all zeros. No `getCanvasSize()`, which would be asserting jsdom's untouched
+ * 300×150 default rather than the component's layout maths. No `getColor()` /
+ * `getFontSize()` / `getFontFamily()` / `getGradient()`: every one of those becomes a
+ * canvas font string or a fill style and never reaches the DOM. No `getRenderedText()` or
+ * `readPixel()` — there are no pixels, and faking a context would change what every spec
+ * here is testing. And no `isReducedMotion()`: the preference is honoured by taking a
+ * different DRAWING path, with identical markup, classes and attributes either way, so the
+ * method would answer the same for a component that honoured it and one that ignored it.
+ *
+ * @example
+ * ```ts
+ * const headline = await loader.getHarness(WrFuzzyTextHarness.with({ text: '404' }));
+ *
+ * expect(await headline.getText()).toBe('404');
+ * expect(await headline.isDecorative()).toBe(true);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrFuzzyTextHarness extends ComponentHarness {
+    static hostSelector = 'wr-fuzzy-text';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrFuzzyTextHarness, options).addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
+    }
+    srOnly = this.locatorFor('.wr-fuzzy-text__sr-only');
+    canvas = this.locatorForOptional('canvas');
+    /**
+     * The headline as TEXT, trimmed.
+     *
+     * From the screen-reader span, which is the only place the string exists as characters —
+     * the visible copy is glyphs painted into a canvas. This is the single assertion that
+     * separates the component from an empty box for anyone not looking at the screen, and it
+     * is the one that has already regressed once.
+     *
+     * There is no letter-by-letter split to worry about here, unlike the other text
+     * animations in the library: the span holds one text node, so what a reader announces is
+     * what {@link WrFuzzyTextHarness.getText} returns.
+     */
+    async getText() {
+        return (await this.srOnly()).text();
+    }
+    /**
+     * Whether the pixel copy stays out of the accessibility tree.
+     *
+     * The other half of {@link getText}. The canvas has no text and no name, so without its
+     * `aria-hidden` a reader meets an anonymous element next to the headline it already
+     * read — or, if the span ever goes away again, only the anonymous element. Asserting the
+     * two together is what pins the arrangement; asserting either alone does not.
+     */
+    async isDecorative() {
+        const canvas = await this.canvas();
+        if (!canvas) {
+            throw new Error('WrFuzzyTextHarness.isDecorative(): there is no <canvas> in this headline at all, so there is nothing to ' +
+                'keep out of the accessibility tree. That is a different failure from an announced canvas — ask ' +
+                'hasCanvas() to tell the two apart.');
+        }
+        return (await canvas.getAttribute('aria-hidden')) === 'true';
+    }
+    /**
+     * Whether the drawing surface is in the markup.
+     *
+     * True even where it can never be painted — under SSR, in a prerender, in a browser that
+     * refuses a 2D context, and in every unit test — because the element is rendered
+     * unconditionally and only the drawing depends on a context. That is precisely the state
+     * the readable copy exists to cover, so this is the method that says "the fallback is
+     * carrying the page right now".
+     */
+    async hasCanvas() {
+        return (await this.canvas()) !== null;
+    }
+    /**
+     * Whether the readable copy hides itself without a stylesheet.
+     *
+     * This entry point ships no CSS. The span is therefore hidden with inline declarations
+     * rather than an `.sr-only` class, and that is load-bearing rather than a style choice:
+     * move the block into a class and every consumer who imported no CSS sees the headline
+     * twice — once as pixels, once as a stray line of markup underneath.
+     *
+     * Three of the declarations are checked, not one, because they fail apart: `position`
+     * takes the span out of flow, the 1px box collapses it, and `clip-path` is what keeps
+     * the character still reachable by a reader instead of `display: none`-ing it away.
+     */
+    async isTextVisuallyHidden() {
+        const span = await this.srOnly();
+        const [position, width, clipPath] = await Promise.all([
+            span.getCssValue('position'),
+            span.getCssValue('width'),
+            span.getCssValue('clip-path'),
+        ]);
+        return position === 'absolute' && width === '1px' && clipPath === 'inset(50%)';
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrFuzzyTextHarness };
+//# sourceMappingURL=ngwr-fuzzy-text-testing.mjs.map

package/fesm2022/ngwr-fuzzy-text-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-fuzzy-text-testing.mjs","sources":["../../../projects/lib/fuzzy-text/testing/wr-fuzzy-text-harness.ts","../../../projects/lib/fuzzy-text/testing/ngwr-fuzzy-text-testing.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrFuzzyTextHarnessFilters } from './interfaces';\n\n/**\n * Test harness for `<wr-fuzzy-text>` — a headline drawn into a canvas, one row of pixels\n * at a time, with a random offset per row.\n *\n * **The drawing is out of reach and the accessible half is not, which is the whole shape\n * of this harness.** There is no 2D context in a unit test — `getContext('2d')` returns\n * `null`, and the component's `init()` gives up on the line after — so nothing downstream\n * of that ever happens: no font load, no animation frame, no canvas listeners, no sizing.\n * What survives is the markup, and the markup is the part that regressed: everything this\n * component rendered used to be a canvas, so a screen reader got an empty element where\n * the page showed a headline. {@link getText} and {@link isDecorative} are that fix,\n * asserted as the PAIR it has to be — a readable copy plus a hidden pixel copy. Reading\n * one without the other passes just as happily on a component that announces the headline\n * twice.\n *\n * **The canvas is selected by tag, not by a class.** It carries no BEM name, unlike the\n * two sibling animation canvases — this entry point ships no stylesheet at all, which is\n * also why {@link isTextVisuallyHidden} is a real question rather than a formality.\n *\n * Nothing about the animation is offered, and none of it is a gap that could be closed by\n * trying harder. There is no `getIntensity()` / `isFuzzing()` / `isGlitching()`: those are\n * closure variables inside `init()` that only ever manifest as pixels, and in a test the\n * function returns before they exist. No `hover()` / `click()` / `getHoverIntensity()`:\n * the pointer listeners are attached only after a real context AND a resolved\n * `document.fonts` — neither of which a unit test has — so a dispatched event would land\n * on nothing and the assertion would pass vacuously; the hit test also measures the canvas\n * box, which is all zeros. No `getCanvasSize()`, which would be asserting jsdom's untouched\n * 300×150 default rather than the component's layout maths. No `getColor()` /\n * `getFontSize()` / `getFontFamily()` / `getGradient()`: every one of those becomes a\n * canvas font string or a fill style and never reaches the DOM. No `getRenderedText()` or\n * `readPixel()` — there are no pixels, and faking a context would change what every spec\n * here is testing. And no `isReducedMotion()`: the preference is honoured by taking a\n * different DRAWING path, with identical markup, classes and attributes either way, so the\n * method would answer the same for a component that honoured it and one that ignored it.\n *\n * @example\n * ```ts\n * const headline = await loader.getHarness(WrFuzzyTextHarness.with({ text: '404' }));\n *\n * expect(await headline.getText()).toBe('404');\n * expect(await headline.isDecorative()).toBe(true);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrFuzzyTextHarness extends ComponentHarness {\n  static hostSelector = 'wr-fuzzy-text';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrFuzzyTextHarnessFilters = {}): HarnessPredicate<WrFuzzyTextHarness> {\n    return new HarnessPredicate(WrFuzzyTextHarness, options).addOption('text', options.text, (harness, text) =>\n      HarnessPredicate.stringMatches(harness.getText(), text)\n    );\n  }\n\n  private readonly srOnly = this.locatorFor('.wr-fuzzy-text__sr-only');\n  private readonly canvas = this.locatorForOptional('canvas');\n\n  /**\n   * The headline as TEXT, trimmed.\n   *\n   * From the screen-reader span, which is the only place the string exists as characters —\n   * the visible copy is glyphs painted into a canvas. This is the single assertion that\n   * separates the component from an empty box for anyone not looking at the screen, and it\n   * is the one that has already regressed once.\n   *\n   * There is no letter-by-letter split to worry about here, unlike the other text\n   * animations in the library: the span holds one text node, so what a reader announces is\n   * what {@link WrFuzzyTextHarness.getText} returns.\n   */\n  async getText(): Promise<string> {\n    return (await this.srOnly()).text();\n  }\n\n  /**\n   * Whether the pixel copy stays out of the accessibility tree.\n   *\n   * The other half of {@link getText}. The canvas has no text and no name, so without its\n   * `aria-hidden` a reader meets an anonymous element next to the headline it already\n   * read — or, if the span ever goes away again, only the anonymous element. Asserting the\n   * two together is what pins the arrangement; asserting either alone does not.\n   */\n  async isDecorative(): Promise<boolean> {\n    const canvas = await this.canvas();\n    if (!canvas) {\n      throw new Error(\n        'WrFuzzyTextHarness.isDecorative(): there is no <canvas> in this headline at all, so there is nothing to ' +\n          'keep out of the accessibility tree. That is a different failure from an announced canvas — ask ' +\n          'hasCanvas() to tell the two apart.'\n      );\n    }\n    return (await canvas.getAttribute('aria-hidden')) === 'true';\n  }\n\n  /**\n   * Whether the drawing surface is in the markup.\n   *\n   * True even where it can never be painted — under SSR, in a prerender, in a browser that\n   * refuses a 2D context, and in every unit test — because the element is rendered\n   * unconditionally and only the drawing depends on a context. That is precisely the state\n   * the readable copy exists to cover, so this is the method that says \"the fallback is\n   * carrying the page right now\".\n   */\n  async hasCanvas(): Promise<boolean> {\n    return (await this.canvas()) !== null;\n  }\n\n  /**\n   * Whether the readable copy hides itself without a stylesheet.\n   *\n   * This entry point ships no CSS. The span is therefore hidden with inline declarations\n   * rather than an `.sr-only` class, and that is load-bearing rather than a style choice:\n   * move the block into a class and every consumer who imported no CSS sees the headline\n   * twice — once as pixels, once as a stray line of markup underneath.\n   *\n   * Three of the declarations are checked, not one, because they fail apart: `position`\n   * takes the span out of flow, the 1px box collapses it, and `clip-path` is what keeps\n   * the character still reachable by a reader instead of `display: none`-ing it away.\n   */\n  async isTextVisuallyHidden(): Promise<boolean> {\n    const span = await this.srOnly();\n    const [position, width, clipPath] = await Promise.all([\n      span.getCssValue('position'),\n      span.getCssValue('width'),\n      span.getCssValue('clip-path'),\n    ]);\n    return position === 'absolute' && width === '1px' && clipPath === 'inset(50%)';\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AAMH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4CG;AACG,MAAO,kBAAmB,SAAQ,gBAAgB,CAAA;AACtD,IAAA,OAAO,YAAY,GAAG,eAAe;;AAGrC,IAAA,OAAO,IAAI,CAAC,OAAA,GAAqC,EAAE,EAAA;AACjD,QAAA,OAAO,IAAI,gBAAgB,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC,SAAS,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,OAAO,EAAE,IAAI,KACrG,gBAAgB,CAAC,aAAa,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,IAAI,CAAC,CACxD;IACH;AAEiB,IAAA,MAAM,GAAG,IAAI,CAAC,UAAU,CAAC,yBAAyB,CAAC;AACnD,IAAA,MAAM,GAAG,IAAI,CAAC,kBAAkB,CAAC,QAAQ,CAAC;AAE3D;;;;;;;;;;;AAWG;AACH,IAAA,MAAM,OAAO,GAAA;QACX,OAAO,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE;IACrC;AAEA;;;;;;;AAOG;AACH,IAAA,MAAM,YAAY,GAAA;AAChB,QAAA,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,MAAM,EAAE;QAClC,IAAI,CAAC,MAAM,EAAE;YACX,MAAM,IAAI,KAAK,CACb,0GAA0G;gBACxG,iGAAiG;AACjG,gBAAA,oCAAoC,CACvC;QACH;QACA,OAAO,CAAC,MAAM,MAAM,CAAC,YAAY,CAAC,aAAa,CAAC,MAAM,MAAM;IAC9D;AAEA;;;;;;;;AAQG;AACH,IAAA,MAAM,SAAS,GAAA;QACb,OAAO,CAAC,MAAM,IAAI,CAAC,MAAM,EAAE,MAAM,IAAI;IACvC;AAEA;;;;;;;;;;;AAWG;AACH,IAAA,MAAM,oBAAoB,GAAA;AACxB,QAAA,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,MAAM,EAAE;AAChC,QAAA,MAAM,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,CAAC,GAAG,MAAM,OAAO,CAAC,GAAG,CAAC;AACpD,YAAA,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC;AAC5B,YAAA,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC;AACzB,YAAA,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC;AAC9B,SAAA,CAAC;QACF,OAAO,QAAQ,KAAK,UAAU,IAAI,KAAK,KAAK,KAAK,IAAI,QAAQ,KAAK,YAAY;IAChF;;;AC1IF;;AAEG;;;;"}

package/fesm2022/ngwr-gauge-testing.mjs

@@ -0,0 +1,86 @@
+import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Test harness for `<wr-gauge>`.
+ *
+ * **The dial is `aria-hidden` and the printed number is optional, so the ARIA is the
+ * whole readable surface.** The component carries `role="meter"` with the value
+ * trio and an `aria-valuetext` that includes the suffix — which is what makes a
+ * gauge with `showValue` off readable at all. {@link getValue} is what it announces;
+ * {@link getDisplayValue} is what is drawn, and it is `null` when nothing is.
+ *
+ * The arc is an SVG path, and its `d` is a rendering detail rather than an
+ * assertion — it moves with the size, the stroke width and the sweep.
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrGaugeHarness extends ComponentHarness {
+    static hostSelector = 'wr-gauge';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrGaugeHarness, options)
+            .addOption('ariaLabel', options.ariaLabel, (harness, label) => HarnessPredicate.stringMatches(harness.getAccessibleName(), label))
+            .addOption('value', options.value, async (harness, value) => (await harness.getValue()) === value);
+    }
+    surface = this.locatorFor('.wr-gauge__surface');
+    /** The role the dial announces — `meter`, which is what a gauge is. */
+    async getRole() {
+        return (await this.surface()).getAttribute('role');
+    }
+    /** The dial's accessible name. */
+    async getAccessibleName() {
+        return (await this.surface()).getAttribute('aria-label');
+    }
+    /** The value it announces, from `aria-valuenow`. */
+    async getValue() {
+        return Number(await (await this.surface()).getAttribute('aria-valuenow'));
+    }
+    /** The bottom of the range, from `aria-valuemin`. */
+    async getMin() {
+        return Number(await (await this.surface()).getAttribute('aria-valuemin'));
+    }
+    /** The top of the range, from `aria-valuemax`. */
+    async getMax() {
+        return Number(await (await this.surface()).getAttribute('aria-valuemax'));
+    }
+    /**
+     * The spoken form of the value — the number with its suffix.
+     *
+     * The reason a gauge with no printed value is still readable, and worth asserting
+     * separately from {@link getValue}: a percentage announced as a bare `72` says
+     * something different from `72%`.
+     */
+    async getValueText() {
+        return (await this.surface()).getAttribute('aria-valuetext');
+    }
+    /** The number printed in the middle, suffix included, or `null` when `showValue` is off. */
+    async getDisplayValue() {
+        const text = await this.locatorForOptional('.wr-gauge__text')();
+        return text ? text.text() : null;
+    }
+    /** The suffix alone, or `null` when there is none — or nothing is printed. */
+    async getSuffix() {
+        const suffix = await this.locatorForOptional('.wr-gauge__suffix')();
+        if (!suffix)
+            return null;
+        const text = await suffix.text();
+        return text === '' ? null : text;
+    }
+    /** The dial's width in pixels, as the component writes it inline. */
+    async getSize() {
+        return Number.parseFloat(await (await this.surface()).getCssValue('width'));
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrGaugeHarness };
+//# sourceMappingURL=ngwr-gauge-testing.mjs.map

package/fesm2022/ngwr-gauge-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-gauge-testing.mjs","sources":["../../../projects/lib/gauge/testing/wr-gauge-harness.ts","../../../projects/lib/gauge/testing/ngwr-gauge-testing.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrGaugeHarnessFilters } from './interfaces';\n\n/**\n * Test harness for `<wr-gauge>`.\n *\n * **The dial is `aria-hidden` and the printed number is optional, so the ARIA is the\n * whole readable surface.** The component carries `role=\"meter\"` with the value\n * trio and an `aria-valuetext` that includes the suffix — which is what makes a\n * gauge with `showValue` off readable at all. {@link getValue} is what it announces;\n * {@link getDisplayValue} is what is drawn, and it is `null` when nothing is.\n *\n * The arc is an SVG path, and its `d` is a rendering detail rather than an\n * assertion — it moves with the size, the stroke width and the sweep.\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrGaugeHarness extends ComponentHarness {\n  static hostSelector = 'wr-gauge';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrGaugeHarnessFilters = {}): HarnessPredicate<WrGaugeHarness> {\n    return new HarnessPredicate(WrGaugeHarness, options)\n      .addOption('ariaLabel', options.ariaLabel, (harness, label) =>\n        HarnessPredicate.stringMatches(harness.getAccessibleName(), label)\n      )\n      .addOption('value', options.value, async (harness, value) => (await harness.getValue()) === value);\n  }\n\n  private readonly surface = this.locatorFor('.wr-gauge__surface');\n\n  /** The role the dial announces — `meter`, which is what a gauge is. */\n  async getRole(): Promise<string | null> {\n    return (await this.surface()).getAttribute('role');\n  }\n\n  /** The dial's accessible name. */\n  async getAccessibleName(): Promise<string | null> {\n    return (await this.surface()).getAttribute('aria-label');\n  }\n\n  /** The value it announces, from `aria-valuenow`. */\n  async getValue(): Promise<number> {\n    return Number(await (await this.surface()).getAttribute('aria-valuenow'));\n  }\n\n  /** The bottom of the range, from `aria-valuemin`. */\n  async getMin(): Promise<number> {\n    return Number(await (await this.surface()).getAttribute('aria-valuemin'));\n  }\n\n  /** The top of the range, from `aria-valuemax`. */\n  async getMax(): Promise<number> {\n    return Number(await (await this.surface()).getAttribute('aria-valuemax'));\n  }\n\n  /**\n   * The spoken form of the value — the number with its suffix.\n   *\n   * The reason a gauge with no printed value is still readable, and worth asserting\n   * separately from {@link getValue}: a percentage announced as a bare `72` says\n   * something different from `72%`.\n   */\n  async getValueText(): Promise<string | null> {\n    return (await this.surface()).getAttribute('aria-valuetext');\n  }\n\n  /** The number printed in the middle, suffix included, or `null` when `showValue` is off. */\n  async getDisplayValue(): Promise<string | null> {\n    const text = await this.locatorForOptional('.wr-gauge__text')();\n    return text ? text.text() : null;\n  }\n\n  /** The suffix alone, or `null` when there is none — or nothing is printed. */\n  async getSuffix(): Promise<string | null> {\n    const suffix = await this.locatorForOptional('.wr-gauge__suffix')();\n    if (!suffix) return null;\n    const text = await suffix.text();\n    return text === '' ? null : text;\n  }\n\n  /** The dial's width in pixels, as the component writes it inline. */\n  async getSize(): Promise<number> {\n    return Number.parseFloat(await (await this.surface()).getCssValue('width'));\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AAMH;;;;;;;;;;;;;AAaG;AACG,MAAO,cAAe,SAAQ,gBAAgB,CAAA;AAClD,IAAA,OAAO,YAAY,GAAG,UAAU;;AAGhC,IAAA,OAAO,IAAI,CAAC,OAAA,GAAiC,EAAE,EAAA;AAC7C,QAAA,OAAO,IAAI,gBAAgB,CAAC,cAAc,EAAE,OAAO;aAChD,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC,SAAS,EAAE,CAAC,OAAO,EAAE,KAAK,KACxD,gBAAgB,CAAC,aAAa,CAAC,OAAO,CAAC,iBAAiB,EAAE,EAAE,KAAK,CAAC;aAEnE,SAAS,CAAC,OAAO,EAAE,OAAO,CAAC,KAAK,EAAE,OAAO,OAAO,EAAE,KAAK,KAAK,CAAC,MAAM,OAAO,CAAC,QAAQ,EAAE,MAAM,KAAK,CAAC;IACtG;AAEiB,IAAA,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,oBAAoB,CAAC;;AAGhE,IAAA,MAAM,OAAO,GAAA;AACX,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,YAAY,CAAC,MAAM,CAAC;IACpD;;AAGA,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,YAAY,CAAC,YAAY,CAAC;IAC1D;;AAGA,IAAA,MAAM,QAAQ,GAAA;AACZ,QAAA,OAAO,MAAM,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,YAAY,CAAC,eAAe,CAAC,CAAC;IAC3E;;AAGA,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,OAAO,MAAM,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,YAAY,CAAC,eAAe,CAAC,CAAC;IAC3E;;AAGA,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,OAAO,MAAM,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,YAAY,CAAC,eAAe,CAAC,CAAC;IAC3E;AAEA;;;;;;AAMG;AACH,IAAA,MAAM,YAAY,GAAA;AAChB,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,YAAY,CAAC,gBAAgB,CAAC;IAC9D;;AAGA,IAAA,MAAM,eAAe,GAAA;QACnB,MAAM,IAAI,GAAG,MAAM,IAAI,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,EAAE;AAC/D,QAAA,OAAO,IAAI,GAAG,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI;IAClC;;AAGA,IAAA,MAAM,SAAS,GAAA;QACb,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,kBAAkB,CAAC,mBAAmB,CAAC,EAAE;AACnE,QAAA,IAAI,CAAC,MAAM;AAAE,YAAA,OAAO,IAAI;AACxB,QAAA,MAAM,IAAI,GAAG,MAAM,MAAM,CAAC,IAAI,EAAE;QAChC,OAAO,IAAI,KAAK,EAAE,GAAG,IAAI,GAAG,IAAI;IAClC;;AAGA,IAAA,MAAM,OAAO,GAAA;AACX,QAAA,OAAO,MAAM,CAAC,UAAU,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;IAC7E;;;AC5FF;;AAEG;;;;"}

package/fesm2022/ngwr-glitch-text-testing.mjs

@@ -0,0 +1,181 @@
+import { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+/**
+ * Test harness for `<wr-glitch-text>`.
+ *
+ * **The one thing worth testing here is the pairing.** The two torn clones are
+ * `::before` / `::after` pseudo-elements whose glyphs come from `content:
+ * attr(data-text)`, so the string has to be in the host's text node AND in the host's
+ * `data-text` attribute. Drop either binding and the visible text stays flawless while
+ * the effect disappears — no error, no missing element, nothing else in the DOM
+ * changes. {@link isCloneTextInSync} is that assertion in one call.
+ *
+ * **Everything else the harness reads is an inline custom property**, because that is
+ * everything the component writes: the two clone durations, the two colour-split
+ * shadows and the optional slice background. They are worth pinning for the unit
+ * transforms — a duration that loses its `s`, or two clones that end up on the same
+ * multiple and tear in lockstep, is a regression that changes no class, no attribute
+ * and no text.
+ *
+ * **What the harness deliberately does not offer**, and why. There is no
+ * `isGlitching()`: the tear is a `@keyframes` animation on a pseudo-element, applied by
+ * a stylesheet a unit test never loads, so the only available answer is a class name
+ * repackaged as a state. There is no `hover()` / `isGlitchingOnHover()`: the gate is a
+ * `:hover` SELECTOR, and the DOM after a dispatched mouse event is byte-identical to
+ * the DOM before it — a spec built on that would pass against a component whose hover
+ * rules had been deleted. There is no `getCloneOffset()` / `getClipPath()`: the ±10px
+ * offsets and the tear bands live in the stylesheet and are pure layout besides. There
+ * is no `respectsReducedMotion()`: the handling is a `@media` block with no TypeScript
+ * counterpart, so the DOM is identical in both states and there is nothing to read.
+ * There is no resolver for the shadow colours — they hold `var(--wr-color-info)` /
+ * `var(--wr-color-danger)`, and resolving those needs the theme stylesheet. And there
+ * is no `getSpeed()`: the input is never written to the DOM, only its two products are,
+ * and dividing one back would invent a precision the component never published (at
+ * `[speed]="0.3"` the after-duration is literally `0.8999999999999999s`).
+ *
+ * @example
+ * ```ts
+ * const glitch = await loader.getHarness(WrGlitchTextHarness);
+ *
+ * expect(await glitch.isCloneTextInSync()).toBe(true);
+ * expect((await glitch.getDurations()).after).toBeCloseTo(3);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrGlitchTextHarness extends ComponentHarness {
+    static hostSelector = 'wr-glitch-text';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrGlitchTextHarness, options)
+            .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text))
+            .addOption('hoverOnly', options.hoverOnly, async (harness, hoverOnly) => (await harness.isHoverOnly()) === hoverOnly);
+    }
+    /**
+     * The rendered text, trimmed.
+     *
+     * The half a sighted user reads, and the half every other check would notice
+     * breaking. The component interpolates the input straight onto the host, so there is
+     * no inner element to query.
+     */
+    async getText() {
+        return (await this.host()).text();
+    }
+    /**
+     * The string the two clone layers draw from — the host's `data-text`.
+     *
+     * The half nothing else notices. `content: attr(data-text)` is how both pseudo-clones
+     * get their glyphs, so this attribute IS the effect. `null` means the mirror is gone
+     * and the component is rendering plain text with extra classes.
+     */
+    async getCloneText() {
+        return (await this.host()).getAttribute('data-text');
+    }
+    /**
+     * Whether the clone attribute still mirrors the rendered text.
+     *
+     * The component's defining silent failure, as a single assertion — two separate reads
+     * are two things a spec can forget to write together. Compared raw on both sides,
+     * with no trimming: the template is the bare interpolation, so the text node and the
+     * attribute are byte-identical or the mirror is broken. An empty `text` is legal and
+     * counts as in sync — `data-text=""` is a mirror of nothing, not a missing binding,
+     * which is why {@link getCloneText} reports the absent case as `null` instead.
+     */
+    async isCloneTextInSync() {
+        const host = await this.host();
+        return (await host.getProperty('textContent')) === (await host.getAttribute('data-text'));
+    }
+    /**
+     * Whether the effect idles until the pointer arrives (`enableOnHover`).
+     *
+     * The `wr-glitch-text--hover-only` class is the only DOM trace of that input, the gate
+     * itself being a `:hover` rule. It defaults to `true`, so this is also how a spec
+     * catches the day someone "fixes" the default to match the component's own JSDoc,
+     * which describes the opposite.
+     */
+    async isHoverOnly() {
+        return (await this.host()).hasClass('wr-glitch-text--hover-only');
+    }
+    /**
+     * How long each clone takes to complete a cycle, in seconds.
+     *
+     * The two must NOT be equal: they run at 2× and 3× the `speed` multiplier so the tears
+     * fall out of phase, and clones tearing in lockstep read as one shifted copy rather
+     * than as a glitch. That regression changes no class, no attribute and no text, and no
+     * visual gate in this repo can see it either.
+     *
+     * These are raw JavaScript floats — `[speed]="0.3"` writes `0.8999999999999999s` —
+     * so compare with `toBeCloseTo`, never against a formatted string.
+     */
+    async getDurations() {
+        return {
+            before: await this.seconds('--wr-glitch-text-before-duration'),
+            after: await this.seconds('--wr-glitch-text-after-duration'),
+        };
+    }
+    /**
+     * Whether the red / cyan colour split is switched on (`enableShadows`).
+     *
+     * The component writes the literal `none` rather than removing the properties when the
+     * split is off, so "disabled" and "never set" stay distinguishable — an absent property
+     * would mean a broken binding, and this reports that as no split either.
+     */
+    async hasColourSplit() {
+        const { before, after } = await this.getColourSplit();
+        return before !== 'none' && after !== 'none' && before !== '' && after !== '';
+    }
+    /**
+     * The two clone `text-shadow`s, exactly as written — `var()` tokens and all.
+     *
+     * Returned unresolved on purpose: resolving `var(--wr-color-info)` needs the theme
+     * stylesheet, and a unit test that answered with a colour would be inventing one.
+     * What the raw pair does prove is the thing a copy-paste breaks — the offsets must
+     * have OPPOSITE signs and the two tints must be DIFFERENT intents. Give both clones
+     * the same colour, or the same sign, and the chromatic aberration is gone while every
+     * other reading stays green.
+     */
+    async getColourSplit() {
+        const host = await this.host();
+        return {
+            before: (await host.getCssValue('--wr-glitch-text-before-shadow')).trim(),
+            after: (await host.getCssValue('--wr-glitch-text-after-shadow')).trim(),
+        };
+    }
+    /**
+     * The masking colour behind the clone slices, or `null` when none was given.
+     *
+     * The binding emits `null` for an empty input, so the property is ABSENT rather than
+     * set to `transparent`, and the stylesheet's own `var(--wr-glitch-text-bg, transparent)`
+     * fallback does the work. A component that started writing `transparent` inline would
+     * look identical and break nothing until a consumer relied on that fallback — which is
+     * the whole reason this reports the absent case as `null` instead of as a colour.
+     */
+    async getSliceBackground() {
+        const raw = (await (await this.host()).getCssValue('--wr-glitch-text-bg')).trim();
+        return raw === '' ? null : raw;
+    }
+    /** One of the host's inline duration properties, as a number of seconds. */
+    async seconds(property) {
+        const raw = (await (await this.host()).getCssValue(property)).trim();
+        const value = Number.parseFloat(raw);
+        if (Number.isNaN(value)) {
+            throw new Error(`WrGlitchTextHarness.getDurations(): \`${property}\` computed to "${raw}", which is not a number of ` +
+                'seconds. The component writes it inline on the host as a multiple of `[speed]`; an empty value means ' +
+                'that binding is gone, and there is no honest duration to report in its place.');
+        }
+        return value;
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrGlitchTextHarness };
+//# sourceMappingURL=ngwr-glitch-text-testing.mjs.map

package/fesm2022/ngwr-glitch-text-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-glitch-text-testing.mjs","sources":["../../../projects/lib/glitch-text/testing/wr-glitch-text-harness.ts","../../../projects/lib/glitch-text/testing/ngwr-glitch-text-testing.ts"],"sourcesContent":["/**\n * @license\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE\n */\n\nimport { ComponentHarness, HarnessPredicate } from '@angular/cdk/testing';\n\nimport type { WrGlitchTextColourSplit, WrGlitchTextDurations, WrGlitchTextHarnessFilters } from './interfaces';\n\n/**\n * Test harness for `<wr-glitch-text>`.\n *\n * **The one thing worth testing here is the pairing.** The two torn clones are\n * `::before` / `::after` pseudo-elements whose glyphs come from `content:\n * attr(data-text)`, so the string has to be in the host's text node AND in the host's\n * `data-text` attribute. Drop either binding and the visible text stays flawless while\n * the effect disappears — no error, no missing element, nothing else in the DOM\n * changes. {@link isCloneTextInSync} is that assertion in one call.\n *\n * **Everything else the harness reads is an inline custom property**, because that is\n * everything the component writes: the two clone durations, the two colour-split\n * shadows and the optional slice background. They are worth pinning for the unit\n * transforms — a duration that loses its `s`, or two clones that end up on the same\n * multiple and tear in lockstep, is a regression that changes no class, no attribute\n * and no text.\n *\n * **What the harness deliberately does not offer**, and why. There is no\n * `isGlitching()`: the tear is a `@keyframes` animation on a pseudo-element, applied by\n * a stylesheet a unit test never loads, so the only available answer is a class name\n * repackaged as a state. There is no `hover()` / `isGlitchingOnHover()`: the gate is a\n * `:hover` SELECTOR, and the DOM after a dispatched mouse event is byte-identical to\n * the DOM before it — a spec built on that would pass against a component whose hover\n * rules had been deleted. There is no `getCloneOffset()` / `getClipPath()`: the ±10px\n * offsets and the tear bands live in the stylesheet and are pure layout besides. There\n * is no `respectsReducedMotion()`: the handling is a `@media` block with no TypeScript\n * counterpart, so the DOM is identical in both states and there is nothing to read.\n * There is no resolver for the shadow colours — they hold `var(--wr-color-info)` /\n * `var(--wr-color-danger)`, and resolving those needs the theme stylesheet. And there\n * is no `getSpeed()`: the input is never written to the DOM, only its two products are,\n * and dividing one back would invent a precision the component never published (at\n * `[speed]=\"0.3\"` the after-duration is literally `0.8999999999999999s`).\n *\n * @example\n * ```ts\n * const glitch = await loader.getHarness(WrGlitchTextHarness);\n *\n * expect(await glitch.isCloneTextInSync()).toBe(true);\n * expect((await glitch.getDurations()).after).toBeCloseTo(3);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrGlitchTextHarness extends ComponentHarness {\n  static hostSelector = 'wr-glitch-text';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrGlitchTextHarnessFilters = {}): HarnessPredicate<WrGlitchTextHarness> {\n    return new HarnessPredicate(WrGlitchTextHarness, options)\n      .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text))\n      .addOption(\n        'hoverOnly',\n        options.hoverOnly,\n        async (harness, hoverOnly) => (await harness.isHoverOnly()) === hoverOnly\n      );\n  }\n\n  /**\n   * The rendered text, trimmed.\n   *\n   * The half a sighted user reads, and the half every other check would notice\n   * breaking. The component interpolates the input straight onto the host, so there is\n   * no inner element to query.\n   */\n  async getText(): Promise<string> {\n    return (await this.host()).text();\n  }\n\n  /**\n   * The string the two clone layers draw from — the host's `data-text`.\n   *\n   * The half nothing else notices. `content: attr(data-text)` is how both pseudo-clones\n   * get their glyphs, so this attribute IS the effect. `null` means the mirror is gone\n   * and the component is rendering plain text with extra classes.\n   */\n  async getCloneText(): Promise<string | null> {\n    return (await this.host()).getAttribute('data-text');\n  }\n\n  /**\n   * Whether the clone attribute still mirrors the rendered text.\n   *\n   * The component's defining silent failure, as a single assertion — two separate reads\n   * are two things a spec can forget to write together. Compared raw on both sides,\n   * with no trimming: the template is the bare interpolation, so the text node and the\n   * attribute are byte-identical or the mirror is broken. An empty `text` is legal and\n   * counts as in sync — `data-text=\"\"` is a mirror of nothing, not a missing binding,\n   * which is why {@link getCloneText} reports the absent case as `null` instead.\n   */\n  async isCloneTextInSync(): Promise<boolean> {\n    const host = await this.host();\n    return (await host.getProperty<string>('textContent')) === (await host.getAttribute('data-text'));\n  }\n\n  /**\n   * Whether the effect idles until the pointer arrives (`enableOnHover`).\n   *\n   * The `wr-glitch-text--hover-only` class is the only DOM trace of that input, the gate\n   * itself being a `:hover` rule. It defaults to `true`, so this is also how a spec\n   * catches the day someone \"fixes\" the default to match the component's own JSDoc,\n   * which describes the opposite.\n   */\n  async isHoverOnly(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-glitch-text--hover-only');\n  }\n\n  /**\n   * How long each clone takes to complete a cycle, in seconds.\n   *\n   * The two must NOT be equal: they run at 2× and 3× the `speed` multiplier so the tears\n   * fall out of phase, and clones tearing in lockstep read as one shifted copy rather\n   * than as a glitch. That regression changes no class, no attribute and no text, and no\n   * visual gate in this repo can see it either.\n   *\n   * These are raw JavaScript floats — `[speed]=\"0.3\"` writes `0.8999999999999999s` —\n   * so compare with `toBeCloseTo`, never against a formatted string.\n   */\n  async getDurations(): Promise<WrGlitchTextDurations> {\n    return {\n      before: await this.seconds('--wr-glitch-text-before-duration'),\n      after: await this.seconds('--wr-glitch-text-after-duration'),\n    };\n  }\n\n  /**\n   * Whether the red / cyan colour split is switched on (`enableShadows`).\n   *\n   * The component writes the literal `none` rather than removing the properties when the\n   * split is off, so \"disabled\" and \"never set\" stay distinguishable — an absent property\n   * would mean a broken binding, and this reports that as no split either.\n   */\n  async hasColourSplit(): Promise<boolean> {\n    const { before, after } = await this.getColourSplit();\n    return before !== 'none' && after !== 'none' && before !== '' && after !== '';\n  }\n\n  /**\n   * The two clone `text-shadow`s, exactly as written — `var()` tokens and all.\n   *\n   * Returned unresolved on purpose: resolving `var(--wr-color-info)` needs the theme\n   * stylesheet, and a unit test that answered with a colour would be inventing one.\n   * What the raw pair does prove is the thing a copy-paste breaks — the offsets must\n   * have OPPOSITE signs and the two tints must be DIFFERENT intents. Give both clones\n   * the same colour, or the same sign, and the chromatic aberration is gone while every\n   * other reading stays green.\n   */\n  async getColourSplit(): Promise<WrGlitchTextColourSplit> {\n    const host = await this.host();\n    return {\n      before: (await host.getCssValue('--wr-glitch-text-before-shadow')).trim(),\n      after: (await host.getCssValue('--wr-glitch-text-after-shadow')).trim(),\n    };\n  }\n\n  /**\n   * The masking colour behind the clone slices, or `null` when none was given.\n   *\n   * The binding emits `null` for an empty input, so the property is ABSENT rather than\n   * set to `transparent`, and the stylesheet's own `var(--wr-glitch-text-bg, transparent)`\n   * fallback does the work. A component that started writing `transparent` inline would\n   * look identical and break nothing until a consumer relied on that fallback — which is\n   * the whole reason this reports the absent case as `null` instead of as a colour.\n   */\n  async getSliceBackground(): Promise<string | null> {\n    const raw = (await (await this.host()).getCssValue('--wr-glitch-text-bg')).trim();\n    return raw === '' ? null : raw;\n  }\n\n  /** One of the host's inline duration properties, as a number of seconds. */\n  private async seconds(property: string): Promise<number> {\n    const raw = (await (await this.host()).getCssValue(property)).trim();\n    const value = Number.parseFloat(raw);\n\n    if (Number.isNaN(value)) {\n      throw new Error(\n        `WrGlitchTextHarness.getDurations(): \\`${property}\\` computed to \"${raw}\", which is not a number of ` +\n          'seconds. The component writes it inline on the host as a multiple of `[speed]`; an empty value means ' +\n          'that binding is gone, and there is no honest duration to report in its place.'\n      );\n    }\n    return value;\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}