ngwr 11.1.0 → 11.2.0

package/fesm2022/ngwr-spotlight-card-testing.mjs

@@ -0,0 +1,368 @@
+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
+ */
+/**
+ * Split an inline `style` attribute into its declarations.
+ *
+ * Read from the attribute rather than through `getCssValue()`, and the difference is not
+ * cosmetic. `getCssValue()` is `getComputedStyle()`, which in a browser resolves the
+ * stylesheet's own `--wr-spotlight-x: 50%` / `--wr-spotlight-color: rgba(…)` defaults —
+ * so "the component has written nothing here yet, and the theme decides" would come back
+ * as a concrete value and the assertion would invert. jsdom loads no stylesheet, so the
+ * computed read happens to agree today and would start lying the moment these harnesses
+ * ran anywhere else. The attribute holds what the component or the directive itself
+ * wrote, and nothing else.
+ *
+ * Shared by both harnesses in this entry point because both read the same three
+ * variables off their host — in different units. See each class for which.
+ */
+function wrSpotlightInlineVars(style) {
+    const declarations = new Map();
+    for (const declaration of style.split(';')) {
+        const colon = declaration.indexOf(':');
+        if (colon === -1)
+            continue;
+        const name = declaration.slice(0, colon).trim();
+        if (name !== '')
+            declarations.set(name, declaration.slice(colon + 1).trim());
+    }
+    return declarations;
+}
+
+/**
+ * @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
+ */
+/** `120px` — the card writes its pointer coordinates as a pixel length, always. */
+const PIXEL_LENGTH = /^(-?[\d.]+)px$/;
+/** `80%` — the radius, whose `%` suffix is the half that makes the gradient legal. */
+const PERCENTAGE = /^(-?[\d.]+)%$/;
+/**
+ * Test harness for `<wr-spotlight-card>` — a card with a soft radial highlight that
+ * follows the cursor.
+ *
+ * **The component's entire output is three custom properties on its own host, and this
+ * harness reads them off the inline declaration.** There is no DOM for the highlight at
+ * all: it is a `::before` pseudo-element, painted by the stylesheet from those three
+ * values. So the paint is out of reach here and always will be — what is in reach is the
+ * arithmetic and the exact spelling that feeds it, which is where this component breaks.
+ *
+ * **This harness reads PIXELS. {@link WrSpotlightHarness}, the `[wrSpotlight]` directive
+ * shipped from the same entry point, reads PERCENTAGES.** Both write
+ * `--wr-spotlight-x` / `--wr-spotlight-y`, in different units, off different events —
+ * the card listens for `mousemove`, the directive for `pointermove`. That is deliberate
+ * and documented, and it is also the mistake waiting to happen: putting `wrSpotlight` on
+ * a `<wr-spotlight-card>` gives you two handlers overwriting one variable in units that
+ * do not agree. Reach for the harness that matches the thing under test.
+ *
+ * **{@link movePointerTo} needs the card to have a box, and in a unit test it has none.**
+ * The component subtracts its own `getBoundingClientRect()` from the client coordinate,
+ * and jsdom answers that with a 0×0 rect at the origin — so the subtraction is a no-op
+ * and the coordinate comes back unchanged. No throw here, unlike the directive's version:
+ * the answer is degenerate rather than wrong, and it is legitimately what a real card
+ * with no box would report. But a spec that asserts `x === clientX` against an unstubbed
+ * rect has proved nothing about the box-relative conversion, which is the only thing
+ * {@link getSpotlightPosition} is for. Give the host a box first:
+ *
+ * ```ts
+ * const card = fixture.nativeElement.querySelector('wr-spotlight-card');
+ * card.getBoundingClientRect = () => ({ left: 40, top: 20, width: 200, height: 100 }) as DOMRect;
+ * ```
+ *
+ * Several plausible methods are deliberately absent. There is no `isSpotlightVisible()`
+ * or `getSpotlightOpacity()`: the highlight sits at `opacity: 0` and is lifted to `0.6`
+ * only under `:hover` / `:focus-within`, both of which are stylesheet selectors on a
+ * pseudo-element — jsdom loads no stylesheet, matches no `:hover`, and cannot read a
+ * pseudo-element's style at any time, so any answer would be invented. No `getGradient()`
+ * for the same reason. No `hover()` / `mouseAway()` wrappers, which would be worse than
+ * missing: the CDK's versions dispatch `mouseenter` / `mouseover` / `mouseleave`, none of
+ * which this component listens to and none of which changes a `:hover` match in a test —
+ * a spec calling them would look like it exercised the reveal and would have exercised
+ * nothing. No `getSpotlightRect()` or `getCardSize()`, which are layout. And no
+ * `respectsReducedMotion()`: this is the one animation component in the library that
+ * deliberately does not implement the preference — a gradient tracks the cursor and no
+ * content moves — so the method would answer identically for a component that honoured it
+ * and one that ignored it.
+ *
+ * @example
+ * ```ts
+ * const card = await loader.getHarness(WrSpotlightCardHarness.with({ text: 'Hover me' }));
+ *
+ * expect(await card.getRadiusPercent()).toBe(80);
+ * expect(await card.getSpotlightColor()).toBeNull();       // the theme decides
+ * expect(await card.getSpotlightPosition()).toBeNull();    // nothing has pointed at it
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrSpotlightCardHarness extends ComponentHarness {
+    static hostSelector = 'wr-spotlight-card';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrSpotlightCardHarness, options).addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getContentText(), text));
+    }
+    /**
+     * Where the gradient fades out, as a percentage of its own radius.
+     *
+     * Returns the number, but the assertion it really makes is about the `%` that was
+     * stripped to get it — this method refuses a bare `80`. The stylesheet interpolates the
+     * variable straight into `transparent var(--wr-spotlight-radius, 80%)`, where a unitless
+     * value is not a length, so the whole `radial-gradient()` declaration is dropped and the
+     * highlight disappears with nothing in the console to say why. Reading this as a plain
+     * number would sail past exactly that.
+     *
+     * Always present, whatever the input says: a `[radius]` that is not a number coerces
+     * back to the default 80 rather than writing nonsense into the sheet.
+     */
+    async getRadiusPercent() {
+        const raw = (await this.vars()).get('--wr-spotlight-radius') ?? null;
+        const match = raw === null ? null : PERCENTAGE.exec(raw);
+        if (!match) {
+            throw new Error(`WrSpotlightCardHarness.getRadiusPercent(): \`--wr-spotlight-radius\` reads "${raw ?? '(absent)'}" on the ` +
+                'host, and the stylesheet needs a percentage there — it drops the whole gradient for a bare number. The ' +
+                'card writes this one on every render whatever the input says, so a missing or unsuffixed value means ' +
+                'the binding itself stopped reaching the element.');
+        }
+        return Number.parseFloat(match[1]);
+    }
+    /**
+     * The highlight colour the author asked for, or `null` when they left it to the theme.
+     *
+     * `null` IS the contract for an unset `[spotlightColor]`, not a gap in it. The
+     * stylesheet's own default is `rgba(var(--wr-color-on-surface-rgb), .15)`, and that
+     * token flips per theme — which is what makes one component read as a dark glow on a
+     * light surface and a light beam on a dark one. A card that started writing a concrete
+     * colour here would look right in whichever theme it was authored against and wrong in
+     * the other, and this is the only method that can tell.
+     */
+    async getSpotlightColor() {
+        return (await this.vars()).get('--wr-spotlight-color') ?? null;
+    }
+    /**
+     * Where the highlight last sat, in pixels from the card's own top-left corner. `null`
+     * until something has pointed at the card.
+     *
+     * Pixels, not percentages — see this class's docs for why the distinction matters
+     * inside this one entry point.
+     *
+     * `null` is a state of its own rather than a stand-in for `{ x: 0, y: 0 }`: before the
+     * first move the stylesheet's `50% / 50%` default applies, and a pointer at the card's
+     * own origin legitimately reports zero, so folding the two together would make an
+     * untouched card indistinguishable from one being pointed at in its corner.
+     *
+     * Note there is no reset when the cursor leaves, and that is not an oversight the
+     * harness papers over: the stylesheet fades the whole overlay to `opacity: 0` on leave,
+     * so nothing is parked visibly — but the coordinate stays written for the life of the
+     * element. `null` therefore means "no pointer has EVER arrived", not "none is here now".
+     */
+    async getSpotlightPosition() {
+        const vars = await this.vars();
+        const x = vars.get('--wr-spotlight-x');
+        const y = vars.get('--wr-spotlight-y');
+        if (x === undefined || y === undefined)
+            return null;
+        return { x: this.parsePixels(x, '--wr-spotlight-x'), y: this.parsePixels(y, '--wr-spotlight-y') };
+    }
+    /**
+     * Point at the card, in client coordinates.
+     *
+     * A `mousemove`, not a `pointermove` — the component listens for the former, and the
+     * directive in the same entry point for the latter, so a pointer event dispatched here
+     * is silently ignored. It goes to the host itself, so it needs no hit test and cannot
+     * miss in a test that has no layout; the coordinates only ever reach the component's
+     * own subtraction.
+     *
+     * Stub the host's `getBoundingClientRect` before calling this, or the subtraction is
+     * invisible — see this class's docs.
+     */
+    async movePointerTo(clientX, clientY) {
+        await (await this.host()).dispatchEvent('mousemove', { clientX, clientY });
+    }
+    /**
+     * The projected content's text, trimmed.
+     *
+     * Read from the host, which is the whole assertion: the template is a bare
+     * `<ng-content />` with no wrapper element, so content lands as a direct child and an
+     * interactive one keeps its own name and role. The component adds no ARIA and no node
+     * of its own — there is nothing else here for a harness to ask about.
+     */
+    async getContentText() {
+        return (await this.host()).text();
+    }
+    /** The host's inline declarations — the component's whole written output. */
+    async vars() {
+        return wrSpotlightInlineVars((await (await this.host()).getAttribute('style')) ?? '');
+    }
+    /** One written coordinate, as a number, insisting on the `px` the card promises. */
+    parsePixels(raw, name) {
+        const match = PIXEL_LENGTH.exec(raw);
+        if (!match) {
+            throw new Error(`WrSpotlightCardHarness.getSpotlightPosition(): \`${name}\` reads "${raw}", which is not the pixel length ` +
+                'the card writes. A percentage here is the tell that `[wrSpotlight]` is on the same element — the two ' +
+                'exports of this entry point share these variables and disagree about the unit.');
+        }
+        return Number.parseFloat(match[1]);
+    }
+}
+
+/**
+ * @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 `[wrSpotlight]` — the directive that makes a cursor-following
+ * gradient possible on an element the consumer owns.
+ *
+ * **This harness reads PERCENTAGES. {@link WrSpotlightCardHarness}, shipped from the same
+ * entry point, reads PIXELS.** Both write `--wr-spotlight-x` / `--wr-spotlight-y`; the
+ * directive writes them as a share of its own box off `pointermove`, the card as a pixel
+ * offset off `mousemove`. That is why {@link getSpotlightPosition} hands back raw strings
+ * and not numbers — collapsing `'37.5%'` to `37.5` would hide the one thing that decides
+ * whether the gradient lands where the cursor is, and would make the two halves of this
+ * entry point look interchangeable when they are not.
+ *
+ * **The directive ships no styles and adds no node.** There is no class to assert, no
+ * wrapper, no ARIA: whatever the element announced before the directive applies is
+ * exactly what it announces after, and the gradient is entirely the consumer's own CSS.
+ * So there is no `isSpotlightVisible()` — there is nothing here to be visible — and no
+ * `getResetX()` / `getResetY()`, which would echo the inputs back rather than report the
+ * coordinate the directive actually WROTE. The echo would pass while the written value
+ * was wrong, which is not hypothetical (see {@link getSpotlightPosition}). And no
+ * `respectsReducedMotion()`: neither export in this entry point implements the
+ * preference — it is the library's one documented exemption, since a gradient tracks the
+ * cursor and no content moves — so the method would answer the same for a directive that
+ * honoured it and one that ignored it.
+ *
+ * @example
+ * ```ts
+ * const spotlight = await loader.getHarness(WrSpotlightHarness.with({ hostClass: 'card' }));
+ *
+ * expect(await spotlight.getSpotlightPosition()).toEqual({ x: '50%', y: '50%' });
+ * await spotlight.movePointerTo(150, 25);   // stub the host's rect first
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrSpotlightHarness extends ComponentHarness {
+    static hostSelector = '[wrSpotlight]';
+    /**
+     * Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`.
+     *
+     * Both options describe the HOST rather than the directive, because the directive
+     * leaves no mark of its own to match on.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(WrSpotlightHarness, options)
+            .addOption('text', options.text, async (harness, text) => HarnessPredicate.stringMatches((await harness.host()).text(), text))
+            .addOption('hostClass', options.hostClass, async (harness, hostClass) => (await harness.host()).hasClass(hostClass));
+    }
+    /**
+     * The coordinates the directive has written, as the raw strings it wrote them.
+     *
+     * Strings on purpose — see this class's docs. The values are percentages of the host's
+     * own box while a pointer is over it, and whatever `[resetX]` / `[resetY]` say
+     * otherwise, so a `px` appearing here means something else is writing these variables.
+     *
+     * **Present from construction, before any pointer arrives.** The directive seeds the
+     * reset coordinates in its constructor, so the first read is `50%` / `50%` on a fresh
+     * host — do not mistake that for a pointer having been tracked. Worth knowing that the
+     * constructor runs before signal inputs are bound, so a bound (or even a static)
+     * `resetX` is NOT what appears here initially: it is honoured from the first
+     * {@link leave} onward, and the highlight jumps at that point. Reading the written
+     * coordinate rather than the input is what makes that visible at all.
+     *
+     * Throws once the directive has been destroyed, rather than answering with the last
+     * value it happened to leave behind — {@link hasTrackedPointer} is the question to ask
+     * when the host may be gone.
+     */
+    async getSpotlightPosition() {
+        const vars = await this.vars();
+        const x = vars.get('--wr-spotlight-x');
+        const y = vars.get('--wr-spotlight-y');
+        if (x === undefined || y === undefined) {
+            throw new Error('WrSpotlightHarness.getSpotlightPosition(): the host carries no `--wr-spotlight-x` / `--wr-spotlight-y`. ' +
+                'The directive writes both in its constructor and removes both on destroy, so this is a torn-down ' +
+                'directive rather than one that has not started — ask hasTrackedPointer() when the host may be gone.');
+        }
+        return { x, y };
+    }
+    /**
+     * Point at the host, in client coordinates.
+     *
+     * **Refuses on a host with no box, which in a unit test is every host.** The directive
+     * divides the cursor offset by the element's own width and height, so a 0×0 rect writes
+     * literally `Infinity%` or — at the origin — `NaN%` into the style. jsdom accepts either
+     * string without complaint, so an unguarded harness would hand back something that looks
+     * like a coordinate and describes nothing. Give the host a box first:
+     *
+     * ```ts
+     * const el = fixture.nativeElement.querySelector('[wrSpotlight]');
+     * el.getBoundingClientRect = () => ({ left: 0, top: 0, width: 200, height: 100 }) as DOMRect;
+     * ```
+     *
+     * A `pointermove`, not a `mousemove` — the directive listens for the former, and the
+     * component in the same entry point for the latter. It is dispatched on the host itself,
+     * so it needs no hit test and cannot miss.
+     */
+    async movePointerTo(clientX, clientY) {
+        const host = await this.host();
+        const { width, height } = await host.getDimensions();
+        if (!width || !height) {
+            throw new Error(`WrSpotlightHarness.movePointerTo(${clientX}, ${clientY}): this host measures ${width}×${height}, so a ` +
+                'pointer position over it means nothing — the directive divides the offset by the box, and the result ' +
+                'goes into the style as `Infinity%` or `NaN%`. Stub `getBoundingClientRect` on the host first.');
+        }
+        await host.dispatchEvent('pointermove', { clientX, clientY, pointerId: 1, isPrimary: true });
+    }
+    /**
+     * Take the pointer away.
+     *
+     * Dispatches `pointerleave` — the directive's reset path, and the only place `[resetX]`
+     * / `[resetY]` are read after construction. Needs no box: the handler writes the reset
+     * strings straight through without measuring anything, which is why this one does not
+     * refuse the way {@link movePointerTo} does.
+     *
+     * Not the CDK's `mouseAway()`, though that dispatches `pointerleave` too. This says what
+     * it does, and it does not also fire the `mouseleave` / `mouseout` that the CDK helper
+     * sends alongside it — events this directive ignores, and that would make a spec look
+     * like it had covered more than it did.
+     */
+    async leave() {
+        await (await this.host()).dispatchEvent('pointerleave');
+    }
+    /**
+     * Whether the directive still owns the host's spotlight variables.
+     *
+     * **This is "the directive is alive", not "a pointer has moved over it".** It is `true`
+     * from the moment the directive constructs, because the constructor seeds the reset
+     * coordinates — there is no earlier state to catch. What it distinguishes is a live
+     * directive from a torn-down one: destroy removes both declarations from the element,
+     * and nothing else in the repo asserts that cleanup. A directive that stopped removing
+     * them would leave a stale gradient position on an element the consumer went on using,
+     * and the only trace would be these two declarations outliving it.
+     */
+    async hasTrackedPointer() {
+        const vars = await this.vars();
+        return vars.has('--wr-spotlight-x') && vars.has('--wr-spotlight-y');
+    }
+    /** The host's inline declarations — the directive's whole written output. */
+    async vars() {
+        return wrSpotlightInlineVars((await (await this.host()).getAttribute('style')) ?? '');
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrSpotlightCardHarness, WrSpotlightHarness };
+//# sourceMappingURL=ngwr-spotlight-card-testing.mjs.map

package/fesm2022/ngwr-spotlight-card-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-spotlight-card-testing.mjs","sources":["../../../projects/lib/spotlight-card/testing/wr-spotlight-harness-vars.ts","../../../projects/lib/spotlight-card/testing/wr-spotlight-card-harness.ts","../../../projects/lib/spotlight-card/testing/wr-spotlight-harness.ts","../../../projects/lib/spotlight-card/testing/ngwr-spotlight-card-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\n/**\n * Split an inline `style` attribute into its declarations.\n *\n * Read from the attribute rather than through `getCssValue()`, and the difference is not\n * cosmetic. `getCssValue()` is `getComputedStyle()`, which in a browser resolves the\n * stylesheet's own `--wr-spotlight-x: 50%` / `--wr-spotlight-color: rgba(…)` defaults —\n * so \"the component has written nothing here yet, and the theme decides\" would come back\n * as a concrete value and the assertion would invert. jsdom loads no stylesheet, so the\n * computed read happens to agree today and would start lying the moment these harnesses\n * ran anywhere else. The attribute holds what the component or the directive itself\n * wrote, and nothing else.\n *\n * Shared by both harnesses in this entry point because both read the same three\n * variables off their host — in different units. See each class for which.\n */\nexport function wrSpotlightInlineVars(style: string): Map<string, string> {\n  const declarations = new Map<string, string>();\n  for (const declaration of style.split(';')) {\n    const colon = declaration.indexOf(':');\n    if (colon === -1) continue;\n    const name = declaration.slice(0, colon).trim();\n    if (name !== '') declarations.set(name, declaration.slice(colon + 1).trim());\n  }\n  return declarations;\n}\n","/**\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 { WrSpotlightCardHarnessFilters } from './interfaces';\nimport { wrSpotlightInlineVars } from './wr-spotlight-harness-vars';\n\n/** `120px` — the card writes its pointer coordinates as a pixel length, always. */\nconst PIXEL_LENGTH = /^(-?[\\d.]+)px$/;\n\n/** `80%` — the radius, whose `%` suffix is the half that makes the gradient legal. */\nconst PERCENTAGE = /^(-?[\\d.]+)%$/;\n\n/**\n * Test harness for `<wr-spotlight-card>` — a card with a soft radial highlight that\n * follows the cursor.\n *\n * **The component's entire output is three custom properties on its own host, and this\n * harness reads them off the inline declaration.** There is no DOM for the highlight at\n * all: it is a `::before` pseudo-element, painted by the stylesheet from those three\n * values. So the paint is out of reach here and always will be — what is in reach is the\n * arithmetic and the exact spelling that feeds it, which is where this component breaks.\n *\n * **This harness reads PIXELS. {@link WrSpotlightHarness}, the `[wrSpotlight]` directive\n * shipped from the same entry point, reads PERCENTAGES.** Both write\n * `--wr-spotlight-x` / `--wr-spotlight-y`, in different units, off different events —\n * the card listens for `mousemove`, the directive for `pointermove`. That is deliberate\n * and documented, and it is also the mistake waiting to happen: putting `wrSpotlight` on\n * a `<wr-spotlight-card>` gives you two handlers overwriting one variable in units that\n * do not agree. Reach for the harness that matches the thing under test.\n *\n * **{@link movePointerTo} needs the card to have a box, and in a unit test it has none.**\n * The component subtracts its own `getBoundingClientRect()` from the client coordinate,\n * and jsdom answers that with a 0×0 rect at the origin — so the subtraction is a no-op\n * and the coordinate comes back unchanged. No throw here, unlike the directive's version:\n * the answer is degenerate rather than wrong, and it is legitimately what a real card\n * with no box would report. But a spec that asserts `x === clientX` against an unstubbed\n * rect has proved nothing about the box-relative conversion, which is the only thing\n * {@link getSpotlightPosition} is for. Give the host a box first:\n *\n * ```ts\n * const card = fixture.nativeElement.querySelector('wr-spotlight-card');\n * card.getBoundingClientRect = () => ({ left: 40, top: 20, width: 200, height: 100 }) as DOMRect;\n * ```\n *\n * Several plausible methods are deliberately absent. There is no `isSpotlightVisible()`\n * or `getSpotlightOpacity()`: the highlight sits at `opacity: 0` and is lifted to `0.6`\n * only under `:hover` / `:focus-within`, both of which are stylesheet selectors on a\n * pseudo-element — jsdom loads no stylesheet, matches no `:hover`, and cannot read a\n * pseudo-element's style at any time, so any answer would be invented. No `getGradient()`\n * for the same reason. No `hover()` / `mouseAway()` wrappers, which would be worse than\n * missing: the CDK's versions dispatch `mouseenter` / `mouseover` / `mouseleave`, none of\n * which this component listens to and none of which changes a `:hover` match in a test —\n * a spec calling them would look like it exercised the reveal and would have exercised\n * nothing. No `getSpotlightRect()` or `getCardSize()`, which are layout. And no\n * `respectsReducedMotion()`: this is the one animation component in the library that\n * deliberately does not implement the preference — a gradient tracks the cursor and no\n * content moves — so the method would answer identically for a component that honoured it\n * and one that ignored it.\n *\n * @example\n * ```ts\n * const card = await loader.getHarness(WrSpotlightCardHarness.with({ text: 'Hover me' }));\n *\n * expect(await card.getRadiusPercent()).toBe(80);\n * expect(await card.getSpotlightColor()).toBeNull();       // the theme decides\n * expect(await card.getSpotlightPosition()).toBeNull();    // nothing has pointed at it\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrSpotlightCardHarness extends ComponentHarness {\n  static hostSelector = 'wr-spotlight-card';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrSpotlightCardHarnessFilters = {}): HarnessPredicate<WrSpotlightCardHarness> {\n    return new HarnessPredicate(WrSpotlightCardHarness, options).addOption('text', options.text, (harness, text) =>\n      HarnessPredicate.stringMatches(harness.getContentText(), text)\n    );\n  }\n\n  /**\n   * Where the gradient fades out, as a percentage of its own radius.\n   *\n   * Returns the number, but the assertion it really makes is about the `%` that was\n   * stripped to get it — this method refuses a bare `80`. The stylesheet interpolates the\n   * variable straight into `transparent var(--wr-spotlight-radius, 80%)`, where a unitless\n   * value is not a length, so the whole `radial-gradient()` declaration is dropped and the\n   * highlight disappears with nothing in the console to say why. Reading this as a plain\n   * number would sail past exactly that.\n   *\n   * Always present, whatever the input says: a `[radius]` that is not a number coerces\n   * back to the default 80 rather than writing nonsense into the sheet.\n   */\n  async getRadiusPercent(): Promise<number> {\n    const raw = (await this.vars()).get('--wr-spotlight-radius') ?? null;\n    const match = raw === null ? null : PERCENTAGE.exec(raw);\n    if (!match) {\n      throw new Error(\n        `WrSpotlightCardHarness.getRadiusPercent(): \\`--wr-spotlight-radius\\` reads \"${raw ?? '(absent)'}\" on the ` +\n          'host, and the stylesheet needs a percentage there — it drops the whole gradient for a bare number. The ' +\n          'card writes this one on every render whatever the input says, so a missing or unsuffixed value means ' +\n          'the binding itself stopped reaching the element.'\n      );\n    }\n    return Number.parseFloat(match[1]);\n  }\n\n  /**\n   * The highlight colour the author asked for, or `null` when they left it to the theme.\n   *\n   * `null` IS the contract for an unset `[spotlightColor]`, not a gap in it. The\n   * stylesheet's own default is `rgba(var(--wr-color-on-surface-rgb), .15)`, and that\n   * token flips per theme — which is what makes one component read as a dark glow on a\n   * light surface and a light beam on a dark one. A card that started writing a concrete\n   * colour here would look right in whichever theme it was authored against and wrong in\n   * the other, and this is the only method that can tell.\n   */\n  async getSpotlightColor(): Promise<string | null> {\n    return (await this.vars()).get('--wr-spotlight-color') ?? null;\n  }\n\n  /**\n   * Where the highlight last sat, in pixels from the card's own top-left corner. `null`\n   * until something has pointed at the card.\n   *\n   * Pixels, not percentages — see this class's docs for why the distinction matters\n   * inside this one entry point.\n   *\n   * `null` is a state of its own rather than a stand-in for `{ x: 0, y: 0 }`: before the\n   * first move the stylesheet's `50% / 50%` default applies, and a pointer at the card's\n   * own origin legitimately reports zero, so folding the two together would make an\n   * untouched card indistinguishable from one being pointed at in its corner.\n   *\n   * Note there is no reset when the cursor leaves, and that is not an oversight the\n   * harness papers over: the stylesheet fades the whole overlay to `opacity: 0` on leave,\n   * so nothing is parked visibly — but the coordinate stays written for the life of the\n   * element. `null` therefore means \"no pointer has EVER arrived\", not \"none is here now\".\n   */\n  async getSpotlightPosition(): Promise<{ x: number; y: number } | null> {\n    const vars = await this.vars();\n    const x = vars.get('--wr-spotlight-x');\n    const y = vars.get('--wr-spotlight-y');\n    if (x === undefined || y === undefined) return null;\n\n    return { x: this.parsePixels(x, '--wr-spotlight-x'), y: this.parsePixels(y, '--wr-spotlight-y') };\n  }\n\n  /**\n   * Point at the card, in client coordinates.\n   *\n   * A `mousemove`, not a `pointermove` — the component listens for the former, and the\n   * directive in the same entry point for the latter, so a pointer event dispatched here\n   * is silently ignored. It goes to the host itself, so it needs no hit test and cannot\n   * miss in a test that has no layout; the coordinates only ever reach the component's\n   * own subtraction.\n   *\n   * Stub the host's `getBoundingClientRect` before calling this, or the subtraction is\n   * invisible — see this class's docs.\n   */\n  async movePointerTo(clientX: number, clientY: number): Promise<void> {\n    await (await this.host()).dispatchEvent('mousemove', { clientX, clientY });\n  }\n\n  /**\n   * The projected content's text, trimmed.\n   *\n   * Read from the host, which is the whole assertion: the template is a bare\n   * `<ng-content />` with no wrapper element, so content lands as a direct child and an\n   * interactive one keeps its own name and role. The component adds no ARIA and no node\n   * of its own — there is nothing else here for a harness to ask about.\n   */\n  async getContentText(): Promise<string> {\n    return (await this.host()).text();\n  }\n\n  /** The host's inline declarations — the component's whole written output. */\n  private async vars(): Promise<Map<string, string>> {\n    return wrSpotlightInlineVars((await (await this.host()).getAttribute('style')) ?? '');\n  }\n\n  /** One written coordinate, as a number, insisting on the `px` the card promises. */\n  private parsePixels(raw: string, name: string): number {\n    const match = PIXEL_LENGTH.exec(raw);\n    if (!match) {\n      throw new Error(\n        `WrSpotlightCardHarness.getSpotlightPosition(): \\`${name}\\` reads \"${raw}\", which is not the pixel length ` +\n          'the card writes. A percentage here is the tell that `[wrSpotlight]` is on the same element — the two ' +\n          'exports of this entry point share these variables and disagree about the unit.'\n      );\n    }\n    return Number.parseFloat(match[1]);\n  }\n}\n","/**\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 { WrSpotlightHarnessFilters } from './interfaces';\nimport { wrSpotlightInlineVars } from './wr-spotlight-harness-vars';\n\n/**\n * Test harness for `[wrSpotlight]` — the directive that makes a cursor-following\n * gradient possible on an element the consumer owns.\n *\n * **This harness reads PERCENTAGES. {@link WrSpotlightCardHarness}, shipped from the same\n * entry point, reads PIXELS.** Both write `--wr-spotlight-x` / `--wr-spotlight-y`; the\n * directive writes them as a share of its own box off `pointermove`, the card as a pixel\n * offset off `mousemove`. That is why {@link getSpotlightPosition} hands back raw strings\n * and not numbers — collapsing `'37.5%'` to `37.5` would hide the one thing that decides\n * whether the gradient lands where the cursor is, and would make the two halves of this\n * entry point look interchangeable when they are not.\n *\n * **The directive ships no styles and adds no node.** There is no class to assert, no\n * wrapper, no ARIA: whatever the element announced before the directive applies is\n * exactly what it announces after, and the gradient is entirely the consumer's own CSS.\n * So there is no `isSpotlightVisible()` — there is nothing here to be visible — and no\n * `getResetX()` / `getResetY()`, which would echo the inputs back rather than report the\n * coordinate the directive actually WROTE. The echo would pass while the written value\n * was wrong, which is not hypothetical (see {@link getSpotlightPosition}). And no\n * `respectsReducedMotion()`: neither export in this entry point implements the\n * preference — it is the library's one documented exemption, since a gradient tracks the\n * cursor and no content moves — so the method would answer the same for a directive that\n * honoured it and one that ignored it.\n *\n * @example\n * ```ts\n * const spotlight = await loader.getHarness(WrSpotlightHarness.with({ hostClass: 'card' }));\n *\n * expect(await spotlight.getSpotlightPosition()).toEqual({ x: '50%', y: '50%' });\n * await spotlight.movePointerTo(150, 25);   // stub the host's rect first\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrSpotlightHarness extends ComponentHarness {\n  static hostSelector = '[wrSpotlight]';\n\n  /**\n   * Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`.\n   *\n   * Both options describe the HOST rather than the directive, because the directive\n   * leaves no mark of its own to match on.\n   */\n  static with(options: WrSpotlightHarnessFilters = {}): HarnessPredicate<WrSpotlightHarness> {\n    return new HarnessPredicate(WrSpotlightHarness, options)\n      .addOption('text', options.text, async (harness, text) =>\n        HarnessPredicate.stringMatches((await harness.host()).text(), text)\n      )\n      .addOption('hostClass', options.hostClass, async (harness, hostClass) =>\n        (await harness.host()).hasClass(hostClass)\n      );\n  }\n\n  /**\n   * The coordinates the directive has written, as the raw strings it wrote them.\n   *\n   * Strings on purpose — see this class's docs. The values are percentages of the host's\n   * own box while a pointer is over it, and whatever `[resetX]` / `[resetY]` say\n   * otherwise, so a `px` appearing here means something else is writing these variables.\n   *\n   * **Present from construction, before any pointer arrives.** The directive seeds the\n   * reset coordinates in its constructor, so the first read is `50%` / `50%` on a fresh\n   * host — do not mistake that for a pointer having been tracked. Worth knowing that the\n   * constructor runs before signal inputs are bound, so a bound (or even a static)\n   * `resetX` is NOT what appears here initially: it is honoured from the first\n   * {@link leave} onward, and the highlight jumps at that point. Reading the written\n   * coordinate rather than the input is what makes that visible at all.\n   *\n   * Throws once the directive has been destroyed, rather than answering with the last\n   * value it happened to leave behind — {@link hasTrackedPointer} is the question to ask\n   * when the host may be gone.\n   */\n  async getSpotlightPosition(): Promise<{ x: string; y: string }> {\n    const vars = await this.vars();\n    const x = vars.get('--wr-spotlight-x');\n    const y = vars.get('--wr-spotlight-y');\n    if (x === undefined || y === undefined) {\n      throw new Error(\n        'WrSpotlightHarness.getSpotlightPosition(): the host carries no `--wr-spotlight-x` / `--wr-spotlight-y`. ' +\n          'The directive writes both in its constructor and removes both on destroy, so this is a torn-down ' +\n          'directive rather than one that has not started — ask hasTrackedPointer() when the host may be gone.'\n      );\n    }\n    return { x, y };\n  }\n\n  /**\n   * Point at the host, in client coordinates.\n   *\n   * **Refuses on a host with no box, which in a unit test is every host.** The directive\n   * divides the cursor offset by the element's own width and height, so a 0×0 rect writes\n   * literally `Infinity%` or — at the origin — `NaN%` into the style. jsdom accepts either\n   * string without complaint, so an unguarded harness would hand back something that looks\n   * like a coordinate and describes nothing. Give the host a box first:\n   *\n   * ```ts\n   * const el = fixture.nativeElement.querySelector('[wrSpotlight]');\n   * el.getBoundingClientRect = () => ({ left: 0, top: 0, width: 200, height: 100 }) as DOMRect;\n   * ```\n   *\n   * A `pointermove`, not a `mousemove` — the directive listens for the former, and the\n   * component in the same entry point for the latter. It is dispatched on the host itself,\n   * so it needs no hit test and cannot miss.\n   */\n  async movePointerTo(clientX: number, clientY: number): Promise<void> {\n    const host = await this.host();\n    const { width, height } = await host.getDimensions();\n    if (!width || !height) {\n      throw new Error(\n        `WrSpotlightHarness.movePointerTo(${clientX}, ${clientY}): this host measures ${width}×${height}, so a ` +\n          'pointer position over it means nothing — the directive divides the offset by the box, and the result ' +\n          'goes into the style as `Infinity%` or `NaN%`. Stub `getBoundingClientRect` on the host first.'\n      );\n    }\n    await host.dispatchEvent('pointermove', { clientX, clientY, pointerId: 1, isPrimary: true });\n  }\n\n  /**\n   * Take the pointer away.\n   *\n   * Dispatches `pointerleave` — the directive's reset path, and the only place `[resetX]`\n   * / `[resetY]` are read after construction. Needs no box: the handler writes the reset\n   * strings straight through without measuring anything, which is why this one does not\n   * refuse the way {@link movePointerTo} does.\n   *\n   * Not the CDK's `mouseAway()`, though that dispatches `pointerleave` too. This says what\n   * it does, and it does not also fire the `mouseleave` / `mouseout` that the CDK helper\n   * sends alongside it — events this directive ignores, and that would make a spec look\n   * like it had covered more than it did.\n   */\n  async leave(): Promise<void> {\n    await (await this.host()).dispatchEvent('pointerleave');\n  }\n\n  /**\n   * Whether the directive still owns the host's spotlight variables.\n   *\n   * **This is \"the directive is alive\", not \"a pointer has moved over it\".** It is `true`\n   * from the moment the directive constructs, because the constructor seeds the reset\n   * coordinates — there is no earlier state to catch. What it distinguishes is a live\n   * directive from a torn-down one: destroy removes both declarations from the element,\n   * and nothing else in the repo asserts that cleanup. A directive that stopped removing\n   * them would leave a stale gradient position on an element the consumer went on using,\n   * and the only trace would be these two declarations outliving it.\n   */\n  async hasTrackedPointer(): Promise<boolean> {\n    const vars = await this.vars();\n    return vars.has('--wr-spotlight-x') && vars.has('--wr-spotlight-y');\n  }\n\n  /** The host's inline declarations — the directive's whole written output. */\n  private async vars(): Promise<Map<string, string>> {\n    return wrSpotlightInlineVars((await (await this.host()).getAttribute('style')) ?? '');\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-star-border-testing.mjs

@@ -0,0 +1,172 @@
+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
+ */
+/** Read one declaration out of an inline `style` attribute, or `null` when it is not there. */
+function inlineStyle(style, property) {
+    for (const declaration of (style ?? '').split(';')) {
+        const colon = declaration.indexOf(':');
+        if (colon === -1)
+            continue;
+        if (declaration.slice(0, colon).trim() !== property)
+            continue;
+        return declaration.slice(colon + 1).trim();
+    }
+    return null;
+}
+/**
+ * Test harness for `<wr-star-border>` and for the `[wr-star-border]` attribute form.
+ *
+ * **There is no `getRayCount()`, and no `hasTopRay()`.** `rays="single"` does not remove
+ * the top ray: both spans are always in the DOM and the stylesheet hides one with
+ * `display: none`. A count would answer 2 in both modes — flatly contradicting the input
+ * that was set — so the variant is read as {@link isSingleRay}, off the modifier class
+ * the CSS itself keys on. That class is public API, and it is the honest observable.
+ *
+ * Nothing here reports on the motion either. The sweep is a `@keyframes` rule in a
+ * stylesheet a unit test never loads, so `animationName` is `''` and `getAnimations()` is
+ * empty whether the component works or not; `mode="hover"` is a bare `:hover` selector
+ * with no state behind it, which is why there is no `hover()` to pair with anything; and
+ * the reduced-motion escape is a media query with no mirror in TypeScript, so the DOM is
+ * identical for a user who asked for less motion and one who did not.
+ *
+ * **The inline values are read off the `style` attribute rather than through
+ * `getCssValue()`, and that is not a jsdom concession.** The stylesheet declares its own
+ * `--wr-star-border-color` and `--wr-star-border-speed` on `.wr-star-border`, so in a
+ * real browser a computed read answers with the stylesheet's default at exactly the
+ * moment the host binding is the thing that broke. What the component wrote is the only
+ * value nothing else can forge.
+ *
+ * On the attribute form the host's `[class]` binding MERGES with the classes the consumer
+ * already put there, so read the variants through {@link isHoverOnly} and
+ * {@link isSingleRay} rather than comparing a whole `className` — the latter passes only
+ * as long as the host happens to carry nothing else.
+ *
+ * @example
+ * ```ts
+ * const loader = TestbedHarnessEnvironment.loader(fixture);
+ * const border = await loader.getHarness(WrStarBorderHarness);
+ *
+ * expect(await border.getText()).toBe('Upgrade');
+ * expect(await border.getSpeedSeconds()).toBe(6);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrStarBorderHarness extends ComponentHarness {
+    static hostSelector = 'wr-star-border, [wr-star-border]';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrStarBorderHarness, options).addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
+    }
+    /**
+     * The projected content's text, trimmed.
+     *
+     * Read from the inner panel rather than from the host, which would pick up anything the
+     * rays ever came to hold. They are empty spans today, so the two agree — but the panel
+     * is the slot the content was put in, and it is the thing a reader actually sees.
+     */
+    async getText() {
+        return (await this.locatorFor('.wr-star-border__inner')()).text();
+    }
+    /** Whether the rays wait for the pointer (`mode="hover"`) instead of running always. */
+    async isHoverOnly() {
+        return (await this.host()).hasClass('wr-star-border--hover');
+    }
+    /**
+     * Whether only the bottom ray is drawn (`rays="single"`).
+     *
+     * From the modifier class, because the DOM cannot be asked: both ray spans are rendered
+     * in both modes and the top one is hidden in CSS. See this class's docs.
+     */
+    async isSingleRay() {
+        return (await this.host()).hasClass('wr-star-border--single');
+    }
+    /**
+     * The ray colour as the consumer passed it — a CSS value, not a resolved one — or
+     * `null` when none was given.
+     *
+     * `null` is the common case and a real answer rather than a missing one: with no
+     * `[color]` the theme decides, primary on a light surface and white on a dark one, and
+     * a component that started writing a colour of its own there would silently take that
+     * choice away.
+     */
+    async getRayColor() {
+        return this.hostStyle('--wr-star-border-color');
+    }
+    /**
+     * How long one ray sweep takes, in seconds.
+     *
+     * Refuses a value that lost its unit rather than parsing the number out of it. The
+     * component builds this string from a plain number input and the stylesheet drops it
+     * straight into `animation-duration`, where a bare `6` is invalid — the declaration is
+     * discarded, the stylesheet's own default takes over, and nothing about the page looks
+     * wrong. A `parseFloat` would report 6 either way.
+     */
+    async getSpeedSeconds() {
+        const raw = await this.hostStyle('--wr-star-border-speed');
+        const match = /^(-?\d*\.?\d+)s$/.exec(raw ?? '');
+        if (!match) {
+            throw new Error(`WrStarBorderHarness.getSpeedSeconds(): \`--wr-star-border-speed\` reads "${raw}" rather than a value in ` +
+                'seconds. The stylesheet uses it as an animation-duration, so anything without the unit is an invalid ' +
+                'declaration and the rays fall back to the default sweep.');
+        }
+        return Number(match[1]);
+    }
+    /**
+     * How far the rays bleed past the inner panel, in pixels.
+     *
+     * Read off the host's `padding`, which is where `[thickness]` lands: the component
+     * writes the SHORTHAND, `<n>px 0`. Worth knowing on the attribute form — an inline
+     * shorthand wins the cascade, so a `<button wr-star-border>` loses whatever padding its
+     * own classes gave it, horizontal included. The visible padding lives on the inner
+     * panel, so this is a bleed measurement rather than a spacing one.
+     *
+     * Throws when the host's padding is not that shape, which means either the binding
+     * stopped arriving or something else is writing the property inline.
+     */
+    async getThickness() {
+        const raw = await this.hostStyle('padding');
+        const match = /^(-?\d*\.?\d+)px\s+0(?:px)?$/.exec(raw ?? '');
+        if (!match) {
+            throw new Error(`WrStarBorderHarness.getThickness(): the host's inline padding reads "${raw}" rather than the ` +
+                '`<n>px 0` shorthand the component writes from [thickness]. Either the binding is gone, or something ' +
+                'else is setting padding inline on the same element.');
+        }
+        return Number(match[1]);
+    }
+    /**
+     * Whether every ray is kept out of the accessible tree.
+     *
+     * The one question worth asking about both spans at once — not how many there are, but
+     * whether either has stopped being decoration. They carry no text and mean nothing, so
+     * a ray that reached a screen reader would be an empty announcement in the middle of a
+     * button. Answered for all of them together, so one ray losing the attribute is enough
+     * to report `false`.
+     */
+    async areRaysDecorative() {
+        const rays = await this.locatorForAll('.wr-star-border__ray')();
+        if (rays.length === 0) {
+            throw new Error('WrStarBorderHarness.areRaysDecorative(): there are no rays at all. Both spans are rendered in every ' +
+                'mode — `rays="single"` hides one in CSS rather than dropping it — so none of them is a broken template ' +
+                'rather than a variant.');
+        }
+        const hidden = await Promise.all(rays.map(ray => ray.getAttribute('aria-hidden')));
+        return hidden.every(value => value === 'true');
+    }
+    /** Read one declaration off the host's inline `style` — see this class's docs for why not `getCssValue()`. */
+    async hostStyle(property) {
+        return inlineStyle(await (await this.host()).getAttribute('style'), property);
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrStarBorderHarness };
+//# sourceMappingURL=ngwr-star-border-testing.mjs.map

package/fesm2022/ngwr-star-border-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-star-border-testing.mjs","sources":["../../../projects/lib/star-border/testing/wr-star-border-harness.ts","../../../projects/lib/star-border/testing/ngwr-star-border-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 { WrStarBorderHarnessFilters } 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-star-border>` and for the `[wr-star-border]` attribute form.\n *\n * **There is no `getRayCount()`, and no `hasTopRay()`.** `rays=\"single\"` does not remove\n * the top ray: both spans are always in the DOM and the stylesheet hides one with\n * `display: none`. A count would answer 2 in both modes — flatly contradicting the input\n * that was set — so the variant is read as {@link isSingleRay}, off the modifier class\n * the CSS itself keys on. That class is public API, and it is the honest observable.\n *\n * Nothing here reports on the motion either. The sweep is a `@keyframes` rule in a\n * stylesheet a unit test never loads, so `animationName` is `''` and `getAnimations()` is\n * empty whether the component works or not; `mode=\"hover\"` is a bare `:hover` selector\n * with no state behind it, which is why there is no `hover()` to pair with anything; and\n * the reduced-motion escape is a media query with no mirror in TypeScript, so the DOM is\n * identical for a user who asked for less motion and one who did not.\n *\n * **The inline values are read off the `style` attribute rather than through\n * `getCssValue()`, and that is not a jsdom concession.** The stylesheet declares its own\n * `--wr-star-border-color` and `--wr-star-border-speed` on `.wr-star-border`, so in a\n * real browser a computed read answers with the stylesheet's default at exactly the\n * moment the host binding is the thing that broke. What the component wrote is the only\n * value nothing else can forge.\n *\n * On the attribute form the host's `[class]` binding MERGES with the classes the consumer\n * already put there, so read the variants through {@link isHoverOnly} and\n * {@link isSingleRay} rather than comparing a whole `className` — the latter passes only\n * as long as the host happens to carry nothing else.\n *\n * @example\n * ```ts\n * const loader = TestbedHarnessEnvironment.loader(fixture);\n * const border = await loader.getHarness(WrStarBorderHarness);\n *\n * expect(await border.getText()).toBe('Upgrade');\n * expect(await border.getSpeedSeconds()).toBe(6);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrStarBorderHarness extends ComponentHarness {\n  static hostSelector = 'wr-star-border, [wr-star-border]';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrStarBorderHarnessFilters = {}): HarnessPredicate<WrStarBorderHarness> {\n    return new HarnessPredicate(WrStarBorderHarness, options).addOption('text', options.text, (harness, text) =>\n      HarnessPredicate.stringMatches(harness.getText(), text)\n    );\n  }\n\n  /**\n   * The projected content's text, trimmed.\n   *\n   * Read from the inner panel rather than from the host, which would pick up anything the\n   * rays ever came to hold. They are empty spans today, so the two agree — but the panel\n   * is the slot the content was put in, and it is the thing a reader actually sees.\n   */\n  async getText(): Promise<string> {\n    return (await this.locatorFor('.wr-star-border__inner')()).text();\n  }\n\n  /** Whether the rays wait for the pointer (`mode=\"hover\"`) instead of running always. */\n  async isHoverOnly(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-star-border--hover');\n  }\n\n  /**\n   * Whether only the bottom ray is drawn (`rays=\"single\"`).\n   *\n   * From the modifier class, because the DOM cannot be asked: both ray spans are rendered\n   * in both modes and the top one is hidden in CSS. See this class's docs.\n   */\n  async isSingleRay(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-star-border--single');\n  }\n\n  /**\n   * The ray colour as the consumer passed it — a CSS value, not a resolved one — or\n   * `null` when none was given.\n   *\n   * `null` is the common case and a real answer rather than a missing one: with no\n   * `[color]` the theme decides, primary on a light surface and white on a dark one, and\n   * a component that started writing a colour of its own there would silently take that\n   * choice away.\n   */\n  async getRayColor(): Promise<string | null> {\n    return this.hostStyle('--wr-star-border-color');\n  }\n\n  /**\n   * How long one ray sweep takes, in seconds.\n   *\n   * Refuses a value that lost its unit rather than parsing the number out of it. The\n   * component builds this string from a plain number input and the stylesheet drops it\n   * straight into `animation-duration`, where a bare `6` is invalid — the declaration is\n   * discarded, the stylesheet's own default takes over, and nothing about the page looks\n   * wrong. A `parseFloat` would report 6 either way.\n   */\n  async getSpeedSeconds(): Promise<number> {\n    const raw = await this.hostStyle('--wr-star-border-speed');\n    const match = /^(-?\\d*\\.?\\d+)s$/.exec(raw ?? '');\n\n    if (!match) {\n      throw new Error(\n        `WrStarBorderHarness.getSpeedSeconds(): \\`--wr-star-border-speed\\` reads \"${raw}\" rather than a value in ` +\n          'seconds. The stylesheet uses it as an animation-duration, so anything without the unit is an invalid ' +\n          'declaration and the rays fall back to the default sweep.'\n      );\n    }\n    return Number(match[1]);\n  }\n\n  /**\n   * How far the rays bleed past the inner panel, in pixels.\n   *\n   * Read off the host's `padding`, which is where `[thickness]` lands: the component\n   * writes the SHORTHAND, `<n>px 0`. Worth knowing on the attribute form — an inline\n   * shorthand wins the cascade, so a `<button wr-star-border>` loses whatever padding its\n   * own classes gave it, horizontal included. The visible padding lives on the inner\n   * panel, so this is a bleed measurement rather than a spacing one.\n   *\n   * Throws when the host's padding is not that shape, which means either the binding\n   * stopped arriving or something else is writing the property inline.\n   */\n  async getThickness(): Promise<number> {\n    const raw = await this.hostStyle('padding');\n    const match = /^(-?\\d*\\.?\\d+)px\\s+0(?:px)?$/.exec(raw ?? '');\n\n    if (!match) {\n      throw new Error(\n        `WrStarBorderHarness.getThickness(): the host's inline padding reads \"${raw}\" rather than the ` +\n          '`<n>px 0` shorthand the component writes from [thickness]. Either the binding is gone, or something ' +\n          'else is setting padding inline on the same element.'\n      );\n    }\n    return Number(match[1]);\n  }\n\n  /**\n   * Whether every ray is kept out of the accessible tree.\n   *\n   * The one question worth asking about both spans at once — not how many there are, but\n   * whether either has stopped being decoration. They carry no text and mean nothing, so\n   * a ray that reached a screen reader would be an empty announcement in the middle of a\n   * button. Answered for all of them together, so one ray losing the attribute is enough\n   * to report `false`.\n   */\n  async areRaysDecorative(): Promise<boolean> {\n    const rays = await this.locatorForAll('.wr-star-border__ray')();\n\n    if (rays.length === 0) {\n      throw new Error(\n        'WrStarBorderHarness.areRaysDecorative(): there are no rays at all. Both spans are rendered in every ' +\n          'mode — `rays=\"single\"` hides one in CSS rather than dropping it — so none of them is a broken template ' +\n          'rather than a variant.'\n      );\n    }\n\n    const hidden = await Promise.all(rays.map(ray => ray.getAttribute('aria-hidden')));\n    return hidden.every(value => value === 'true');\n  }\n\n  /** Read one declaration off the host's inline `style` — see this class's docs for why not `getCssValue()`. */\n  private async hostStyle(property: string): Promise<string | null> {\n    return inlineStyle(await (await this.host()).getAttribute('style'), property);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}