ngwr 11.1.0 → 11.2.0

package/fesm2022/ngwr-border-glow-testing.mjs

@@ -0,0 +1,325 @@
+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
+ */
+/** The seven halo steps, in the order the component writes them: 100%, 60%, 50%, 40%, 30%, 20%, 10%. */
+const GLOW_VAR_SUFFIXES = ['', '-60', '-50', '-40', '-30', '-20', '-10'];
+/** The seven mesh-gradient slots, spelled out rather than numbered — as the component names them. */
+const GRADIENT_VAR_SLOTS = ['one', 'two', 'three', 'four', 'five', 'six', 'seven'];
+/** `hsl(40deg 80% 80% / 65%)` — the alpha, which is the only part `glowIntensity` moves. */
+const GLOW_ALPHA = /\/\s*(-?[\d.]+)%\s*\)\s*$/;
+/** `radial-gradient(at 80% 55%, #c084fc 0px, transparent 50%)` — the colour, not the position. */
+const RADIAL_GRADIENT_COLOR = /^radial-gradient\(\s*at\s+[^,]+,\s*(.+?)\s+0px\s*,/;
+/** `linear-gradient(#c084fc 0 100%)` — the flat base slice. */
+const LINEAR_GRADIENT_COLOR = /^linear-gradient\(\s*(.+?)\s+0\s+100%\s*\)$/;
+/**
+ * Split an inline `style` attribute into its declarations.
+ *
+ * Read from the attribute rather than through `getCssValue()` on purpose. jsdom echoes
+ * an inline custom property back through `getComputedStyle`, so the computed read passes
+ * here and would answer something else entirely in a browser — where the stylesheet's
+ * own per-theme default resolves and "the author left this to the theme" quietly becomes
+ * a colour. The attribute holds what the component itself wrote, and nothing else.
+ */
+function parseInlineDeclarations(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;
+}
+/**
+ * Test harness for `<wr-border-glow>` — a card whose border lights up under the cursor.
+ *
+ * **Nearly all of this component is a bag of custom properties written onto the host,
+ * and that is what the harness reads.** The paint itself — the conic mask, the stacked
+ * `box-shadow` halo, the soft-light bloom — lives in the stylesheet, so a unit test can
+ * never see it. What it CAN see is the arithmetic that feeds it, and that is where the
+ * breakages are: the seven-step alpha ramp {@link getGlowAlphaRamp} derives from
+ * `glowIntensity`, the `[0,1,2,0,1,2,1]` palette mapping in {@link getGradientColors}
+ * with its clamp for short palettes, and the pointer maths behind
+ * {@link getPointerAngle} / {@link getEdgeProximity}.
+ *
+ * **Every custom-property getter reads the inline declaration** — see
+ * {@link parseInlineDeclarations} for why a computed read would be a different, and
+ * wrong, question.
+ *
+ * **A colour getter answering `null` means the component has never written that
+ * variable**, which is the contract when the input is unset: the stylesheet's per-theme
+ * default takes over. Note that it does not un-write them either — setting `[glowColor]`
+ * and then putting it back to `null` leaves the last value on the host — so `null` is
+ * "never set", not "not set now".
+ *
+ * There is deliberately no `getGlowOpacity()`, `isGlowVisible()` or `isHovered()`: the
+ * visible strength is a `calc()` in the stylesheet gated behind `:not(:hover)`, and
+ * jsdom loads no stylesheet and matches no `:hover`, so any number would be invented.
+ * There is no measured halo extent either — `.wr-border-glow__edge` is 0×0 in a test,
+ * and {@link getGlowRadius} reads what the component asked for instead. And there is no
+ * `getSweepProgress()` / `waitForSweep()`: the mount sweep is a four-second chain of
+ * `requestAnimationFrame` tweens, so awaiting it either hangs the spec or samples one
+ * frame and reports a value that was never settled. {@link isSweeping} answers the one
+ * durable fact — that the sweep started.
+ *
+ * @example
+ * ```ts
+ * const card = await loader.getHarness(WrBorderGlowHarness.with({ text: /Hover me/ }));
+ *
+ * expect(await card.getBorderRadius()).toBe(28);
+ * expect(await card.getPointerAngle()).toBeNull();   // nothing has pointed at it yet
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrBorderGlowHarness extends ComponentHarness {
+    static hostSelector = 'wr-border-glow';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrBorderGlowHarness, options)
+            .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getContentText(), text))
+            .addOption('sweeping', options.sweeping, async (harness, sweeping) => (await harness.isSweeping()) === sweeping);
+    }
+    edge = this.locatorFor('.wr-border-glow__edge');
+    /** The corner radius the stylesheet is told to round to, in pixels. */
+    async getBorderRadius() {
+        return this.readNumberVar('--wr-border-glow-radius', 'getBorderRadius');
+    }
+    /** How far past the card edge the halo is told to reach, in pixels. */
+    async getGlowRadius() {
+        return this.readNumberVar('--wr-border-glow-padding', 'getGlowRadius');
+    }
+    /**
+     * The width of the lit cone, as a share of the perimeter.
+     *
+     * Unitless by contract — the stylesheet multiplies it — so a `px` creeping in here is
+     * a real regression that leaves the mask with a length where it wants a number.
+     */
+    async getConeSpread() {
+        return this.readNumberVar('--wr-border-glow-cone-spread', 'getConeSpread');
+    }
+    /** How sharply the halo fades as the cursor leaves an edge; lower is a wider falloff. */
+    async getEdgeSensitivity() {
+        return this.readNumberVar('--wr-border-glow-edge-sensitivity', 'getEdgeSensitivity');
+    }
+    /** Strength of the interior soft-light bloom, again unitless. */
+    async getFillOpacity() {
+        return this.readNumberVar('--wr-border-glow-fill-opacity', 'getFillOpacity');
+    }
+    /**
+     * The card fill the author asked for, or `null` when they left it to the theme.
+     *
+     * The distinction is the whole point: an unset `[backgroundColor]` means the surface
+     * token decides, light or dark, and a card that starts declaring its own fill has
+     * stopped following the theme.
+     */
+    async getBackgroundColor() {
+        return this.readVar('--wr-border-glow-bg');
+    }
+    /**
+     * The halo colour at full strength, or `null` when the theme decides.
+     *
+     * Comes back as the `hsl(H deg S% L% / A%)` the component assembled from the bare
+     * `'H S L'` input, so this also pins that assembly. Be aware the parse is forgiving to
+     * a fault: anything that is not three bare numbers — a hex colour, `rgb(…)`, even
+     * `hsl(40deg 80% 80%)` with its units — silently becomes the default amber, so a
+     * plausible-looking value here does not mean the input was understood.
+     */
+    async getGlowColor() {
+        return this.readVar('--wr-border-glow-color');
+    }
+    /**
+     * The seven halo alphas in percent, brightest first, or `null` when no glow colour
+     * was ever set.
+     *
+     * This is the whole of `[glowIntensity]`: the steps are `[100, 60, 50, 40, 30, 20,
+     * 10]` multiplied by the intensity and clamped at 100, so `0.5` gives
+     * `[50, 30, 25, 20, 15, 10, 5]` and anything above 1 saturates from the top down. The
+     * clamp is one-sided — a negative intensity produces negative percentages, which a
+     * browser drops as invalid declarations and the halo vanishes — so the numbers are
+     * returned as written rather than corrected, which is how a spec can see it.
+     */
+    async getGlowAlphaRamp() {
+        const declarations = await this.declarations();
+        if (!declarations.has('--wr-border-glow-color'))
+            return null;
+        return GLOW_VAR_SUFFIXES.map(suffix => {
+            const name = `--wr-border-glow-color${suffix}`;
+            const raw = declarations.get(name);
+            const alpha = raw === undefined ? null : GLOW_ALPHA.exec(raw);
+            if (!alpha) {
+                throw new Error(`WrBorderGlowHarness.getGlowAlphaRamp(): \`${name}\` reads "${raw ?? '(absent)'}". The seven halo steps ` +
+                    'are written together from one glow colour, so a step that is missing or carries no ` / N%` alpha ' +
+                    'means the ramp stopped being built — the halo would fade in bands the stylesheet cannot use.');
+            }
+            return Number.parseFloat(alpha[1]);
+        });
+    }
+    /**
+     * The seven mesh-gradient colours, in slot order, or `null` when no palette was set.
+     *
+     * The slots do not map one-to-one onto the palette: they take colours
+     * `[0, 1, 2, 0, 1, 2, 1]`, each index clamped to the last entry the palette actually
+     * has. So a two-colour palette repeats the second colour rather than reading past the
+     * end — which is the case worth a spec, since `undefined` in a `radial-gradient()`
+     * kills the whole declaration silently.
+     */
+    async getGradientColors() {
+        const declarations = await this.declarations();
+        if (!declarations.has('--wr-border-glow-gradient-one'))
+            return null;
+        return GRADIENT_VAR_SLOTS.map(slot => {
+            const name = `--wr-border-glow-gradient-${slot}`;
+            const raw = declarations.get(name);
+            const colour = raw === undefined ? null : RADIAL_GRADIENT_COLOR.exec(raw);
+            if (!colour) {
+                throw new Error(`WrBorderGlowHarness.getGradientColors(): \`${name}\` reads "${raw ?? '(absent)'}", which is not the ` +
+                    '`radial-gradient(at X% Y%, <colour> 0px, …)` the component builds. All seven slots are written from ' +
+                    'one palette, so one of them being different means the mapping broke, not the palette.');
+            }
+            return colour[1];
+        });
+    }
+    /**
+     * The flat colour behind the mesh, or `null` when no palette was set.
+     *
+     * Always the palette's FIRST entry. Worth its own method because the base slice is the
+     * one that shows where the gradients are transparent, and it drifting to the last
+     * colour changes the card's whole cast without touching a gradient.
+     */
+    async getBaseGradientColor() {
+        const raw = await this.readVar('--wr-border-glow-gradient-base');
+        if (raw === null)
+            return null;
+        const colour = LINEAR_GRADIENT_COLOR.exec(raw);
+        if (!colour) {
+            throw new Error(`WrBorderGlowHarness.getBaseGradientColor(): \`--wr-border-glow-gradient-base\` reads "${raw}", which is ` +
+                'not the `linear-gradient(<colour> 0 100%)` the component builds from the palette.');
+        }
+        return colour[1];
+    }
+    /**
+     * Where the cursor last sat, in degrees: `0` is straight up and the angle grows
+     * clockwise. `null` until something has pointed at the card.
+     *
+     * `null` is a state of its own rather than a stand-in for zero — the stylesheet's own
+     * default applies until the first pointer arrives, and dead centre legitimately
+     * reports `0`, so a harness that folded the two together could not tell an untouched
+     * card from one being pointed at from the middle.
+     */
+    async getPointerAngle() {
+        const raw = await this.readVar('--wr-border-glow-angle');
+        return raw === null ? null : Number.parseFloat(raw);
+    }
+    /**
+     * How close the cursor is to the perimeter: `0` at dead centre, `100` at the edge.
+     * `null` until something has pointed at the card.
+     *
+     * On a diagonal the NEARER axis wins rather than the two averaging, so a cursor level
+     * with the bottom edge reads 100 wherever it is along it.
+     */
+    async getEdgeProximity() {
+        const raw = await this.readVar('--wr-border-glow-edge-proximity');
+        return raw === null ? null : Number.parseFloat(raw);
+    }
+    /**
+     * Point at the card, in client coordinates.
+     *
+     * **Refuses on a card with no box, which in a unit test is every card.** The component
+     * measures the pointer against its own centre, and with a 0×0 rect that maths
+     * degenerates: the centre is the top-left corner, and `1 / Math.min(0, 0)` pins the
+     * proximity at 100 for every position on the page. Both would come back as confident
+     * numbers describing nothing. Give the host a box first, exactly as the component's own
+     * spec does:
+     *
+     * ```ts
+     * const card = fixture.nativeElement.querySelector('wr-border-glow');
+     * card.getBoundingClientRect = () => ({ left: 0, top: 0, width: 200, height: 100 }) as DOMRect;
+     * ```
+     *
+     * A `pointermove` is dispatched on the host itself, so it needs no hit test and cannot
+     * miss — the coordinates only ever reach the component's own arithmetic.
+     */
+    async movePointerTo(clientX, clientY) {
+        const host = await this.host();
+        const { width, height } = await host.getDimensions();
+        if (!width || !height) {
+            throw new Error(`WrBorderGlowHarness.movePointerTo(${clientX}, ${clientY}): this card measures ${width}×${height}, so a ` +
+                'pointer position over it means nothing — the component reads the cursor against the card centre, and ' +
+                'with no box the centre is the top-left corner and the proximity saturates for every coordinate. Stub ' +
+                '`getBoundingClientRect` on the host first.');
+        }
+        await host.dispatchEvent('pointermove', { clientX, clientY, pointerId: 1, isPrimary: true });
+    }
+    /**
+     * Whether the one-shot mount sweep is running.
+     *
+     * The class is added synchronously when the sweep starts and removed when it ends
+     * about four seconds later, or when the component is torn down — so a spec asserts
+     * that it STARTED, and leaves the angle alone while it does. This is also the
+     * reduced-motion assertion: `[animated]="true"` for someone who asked for less motion
+     * must leave this `false`, and no angle written at all.
+     */
+    async isSweeping() {
+        return (await this.host()).hasClass('wr-border-glow--sweeping');
+    }
+    /** Whether the halo layer is in the markup — the element the whole outer glow paints on. */
+    async hasHaloLayer() {
+        return (await this.locatorForOptional('.wr-border-glow__edge')()) !== null;
+    }
+    /**
+     * Whether the decoration stays out of the accessibility tree.
+     *
+     * The halo layer is the component's only decorative NODE — every other layer is a
+     * pseudo-element and so was never in the tree to begin with. It carries no text and no
+     * name, so losing its `aria-hidden` puts an anonymous element between the reader and
+     * the card's content.
+     */
+    async isDecorationHiddenFromAssistiveTech() {
+        return (await (await this.edge()).getAttribute('aria-hidden')) === 'true';
+    }
+    /**
+     * The projected content's text, trimmed.
+     *
+     * Read from `.wr-border-glow__inner` rather than the host, which is the assertion:
+     * content that lands as a bare host child instead of inside the wrapper renders
+     * underneath the interior bloom, and reading the host would report the same string
+     * either way.
+     */
+    async getContentText() {
+        return (await this.locatorFor('.wr-border-glow__inner')()).text();
+    }
+    /** The host's inline declarations — the component's whole written output. */
+    async declarations() {
+        return parseInlineDeclarations((await (await this.host()).getAttribute('style')) ?? '');
+    }
+    /** One inline custom property, or `null` when the component has not written it. */
+    async readVar(name) {
+        return (await this.declarations()).get(name) ?? null;
+    }
+    /** One inline custom property that is always written, as a number. */
+    async readNumberVar(name, method) {
+        const raw = await this.readVar(name);
+        const value = raw === null ? Number.NaN : Number.parseFloat(raw);
+        if (Number.isNaN(value)) {
+            throw new Error(`WrBorderGlowHarness.${method}(): \`${name}\` reads "${raw ?? '(absent)'}" on the host. The component ` +
+                'writes this one on every input change whatever the inputs say, so a missing or unreadable value means ' +
+                'the variable bag stopped reaching the element at all.');
+        }
+        return value;
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrBorderGlowHarness };
+//# sourceMappingURL=ngwr-border-glow-testing.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-border-glow-testing.mjs","sources":["../../../projects/lib/border-glow/testing/wr-border-glow-harness.ts","../../../projects/lib/border-glow/testing/ngwr-border-glow-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 { WrBorderGlowHarnessFilters } from './interfaces';\n\n/** The seven halo steps, in the order the component writes them: 100%, 60%, 50%, 40%, 30%, 20%, 10%. */\nconst GLOW_VAR_SUFFIXES = ['', '-60', '-50', '-40', '-30', '-20', '-10'] as const;\n\n/** The seven mesh-gradient slots, spelled out rather than numbered — as the component names them. */\nconst GRADIENT_VAR_SLOTS = ['one', 'two', 'three', 'four', 'five', 'six', 'seven'] as const;\n\n/** `hsl(40deg 80% 80% / 65%)` — the alpha, which is the only part `glowIntensity` moves. */\nconst GLOW_ALPHA = /\\/\\s*(-?[\\d.]+)%\\s*\\)\\s*$/;\n\n/** `radial-gradient(at 80% 55%, #c084fc 0px, transparent 50%)` — the colour, not the position. */\nconst RADIAL_GRADIENT_COLOR = /^radial-gradient\\(\\s*at\\s+[^,]+,\\s*(.+?)\\s+0px\\s*,/;\n\n/** `linear-gradient(#c084fc 0 100%)` — the flat base slice. */\nconst LINEAR_GRADIENT_COLOR = /^linear-gradient\\(\\s*(.+?)\\s+0\\s+100%\\s*\\)$/;\n\n/**\n * Split an inline `style` attribute into its declarations.\n *\n * Read from the attribute rather than through `getCssValue()` on purpose. jsdom echoes\n * an inline custom property back through `getComputedStyle`, so the computed read passes\n * here and would answer something else entirely in a browser — where the stylesheet's\n * own per-theme default resolves and \"the author left this to the theme\" quietly becomes\n * a colour. The attribute holds what the component itself wrote, and nothing else.\n */\nfunction parseInlineDeclarations(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/**\n * Test harness for `<wr-border-glow>` — a card whose border lights up under the cursor.\n *\n * **Nearly all of this component is a bag of custom properties written onto the host,\n * and that is what the harness reads.** The paint itself — the conic mask, the stacked\n * `box-shadow` halo, the soft-light bloom — lives in the stylesheet, so a unit test can\n * never see it. What it CAN see is the arithmetic that feeds it, and that is where the\n * breakages are: the seven-step alpha ramp {@link getGlowAlphaRamp} derives from\n * `glowIntensity`, the `[0,1,2,0,1,2,1]` palette mapping in {@link getGradientColors}\n * with its clamp for short palettes, and the pointer maths behind\n * {@link getPointerAngle} / {@link getEdgeProximity}.\n *\n * **Every custom-property getter reads the inline declaration** — see\n * {@link parseInlineDeclarations} for why a computed read would be a different, and\n * wrong, question.\n *\n * **A colour getter answering `null` means the component has never written that\n * variable**, which is the contract when the input is unset: the stylesheet's per-theme\n * default takes over. Note that it does not un-write them either — setting `[glowColor]`\n * and then putting it back to `null` leaves the last value on the host — so `null` is\n * \"never set\", not \"not set now\".\n *\n * There is deliberately no `getGlowOpacity()`, `isGlowVisible()` or `isHovered()`: the\n * visible strength is a `calc()` in the stylesheet gated behind `:not(:hover)`, and\n * jsdom loads no stylesheet and matches no `:hover`, so any number would be invented.\n * There is no measured halo extent either — `.wr-border-glow__edge` is 0×0 in a test,\n * and {@link getGlowRadius} reads what the component asked for instead. And there is no\n * `getSweepProgress()` / `waitForSweep()`: the mount sweep is a four-second chain of\n * `requestAnimationFrame` tweens, so awaiting it either hangs the spec or samples one\n * frame and reports a value that was never settled. {@link isSweeping} answers the one\n * durable fact — that the sweep started.\n *\n * @example\n * ```ts\n * const card = await loader.getHarness(WrBorderGlowHarness.with({ text: /Hover me/ }));\n *\n * expect(await card.getBorderRadius()).toBe(28);\n * expect(await card.getPointerAngle()).toBeNull();   // nothing has pointed at it yet\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrBorderGlowHarness extends ComponentHarness {\n  static hostSelector = 'wr-border-glow';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrBorderGlowHarnessFilters = {}): HarnessPredicate<WrBorderGlowHarness> {\n    return new HarnessPredicate(WrBorderGlowHarness, options)\n      .addOption('text', options.text, (harness, text) =>\n        HarnessPredicate.stringMatches(harness.getContentText(), text)\n      )\n      .addOption('sweeping', options.sweeping, async (harness, sweeping) => (await harness.isSweeping()) === sweeping);\n  }\n\n  private readonly edge = this.locatorFor('.wr-border-glow__edge');\n\n  /** The corner radius the stylesheet is told to round to, in pixels. */\n  async getBorderRadius(): Promise<number> {\n    return this.readNumberVar('--wr-border-glow-radius', 'getBorderRadius');\n  }\n\n  /** How far past the card edge the halo is told to reach, in pixels. */\n  async getGlowRadius(): Promise<number> {\n    return this.readNumberVar('--wr-border-glow-padding', 'getGlowRadius');\n  }\n\n  /**\n   * The width of the lit cone, as a share of the perimeter.\n   *\n   * Unitless by contract — the stylesheet multiplies it — so a `px` creeping in here is\n   * a real regression that leaves the mask with a length where it wants a number.\n   */\n  async getConeSpread(): Promise<number> {\n    return this.readNumberVar('--wr-border-glow-cone-spread', 'getConeSpread');\n  }\n\n  /** How sharply the halo fades as the cursor leaves an edge; lower is a wider falloff. */\n  async getEdgeSensitivity(): Promise<number> {\n    return this.readNumberVar('--wr-border-glow-edge-sensitivity', 'getEdgeSensitivity');\n  }\n\n  /** Strength of the interior soft-light bloom, again unitless. */\n  async getFillOpacity(): Promise<number> {\n    return this.readNumberVar('--wr-border-glow-fill-opacity', 'getFillOpacity');\n  }\n\n  /**\n   * The card fill the author asked for, or `null` when they left it to the theme.\n   *\n   * The distinction is the whole point: an unset `[backgroundColor]` means the surface\n   * token decides, light or dark, and a card that starts declaring its own fill has\n   * stopped following the theme.\n   */\n  async getBackgroundColor(): Promise<string | null> {\n    return this.readVar('--wr-border-glow-bg');\n  }\n\n  /**\n   * The halo colour at full strength, or `null` when the theme decides.\n   *\n   * Comes back as the `hsl(H deg S% L% / A%)` the component assembled from the bare\n   * `'H S L'` input, so this also pins that assembly. Be aware the parse is forgiving to\n   * a fault: anything that is not three bare numbers — a hex colour, `rgb(…)`, even\n   * `hsl(40deg 80% 80%)` with its units — silently becomes the default amber, so a\n   * plausible-looking value here does not mean the input was understood.\n   */\n  async getGlowColor(): Promise<string | null> {\n    return this.readVar('--wr-border-glow-color');\n  }\n\n  /**\n   * The seven halo alphas in percent, brightest first, or `null` when no glow colour\n   * was ever set.\n   *\n   * This is the whole of `[glowIntensity]`: the steps are `[100, 60, 50, 40, 30, 20,\n   * 10]` multiplied by the intensity and clamped at 100, so `0.5` gives\n   * `[50, 30, 25, 20, 15, 10, 5]` and anything above 1 saturates from the top down. The\n   * clamp is one-sided — a negative intensity produces negative percentages, which a\n   * browser drops as invalid declarations and the halo vanishes — so the numbers are\n   * returned as written rather than corrected, which is how a spec can see it.\n   */\n  async getGlowAlphaRamp(): Promise<number[] | null> {\n    const declarations = await this.declarations();\n    if (!declarations.has('--wr-border-glow-color')) return null;\n\n    return GLOW_VAR_SUFFIXES.map(suffix => {\n      const name = `--wr-border-glow-color${suffix}`;\n      const raw = declarations.get(name);\n      const alpha = raw === undefined ? null : GLOW_ALPHA.exec(raw);\n      if (!alpha) {\n        throw new Error(\n          `WrBorderGlowHarness.getGlowAlphaRamp(): \\`${name}\\` reads \"${raw ?? '(absent)'}\". The seven halo steps ` +\n            'are written together from one glow colour, so a step that is missing or carries no ` / N%` alpha ' +\n            'means the ramp stopped being built — the halo would fade in bands the stylesheet cannot use.'\n        );\n      }\n      return Number.parseFloat(alpha[1]);\n    });\n  }\n\n  /**\n   * The seven mesh-gradient colours, in slot order, or `null` when no palette was set.\n   *\n   * The slots do not map one-to-one onto the palette: they take colours\n   * `[0, 1, 2, 0, 1, 2, 1]`, each index clamped to the last entry the palette actually\n   * has. So a two-colour palette repeats the second colour rather than reading past the\n   * end — which is the case worth a spec, since `undefined` in a `radial-gradient()`\n   * kills the whole declaration silently.\n   */\n  async getGradientColors(): Promise<string[] | null> {\n    const declarations = await this.declarations();\n    if (!declarations.has('--wr-border-glow-gradient-one')) return null;\n\n    return GRADIENT_VAR_SLOTS.map(slot => {\n      const name = `--wr-border-glow-gradient-${slot}`;\n      const raw = declarations.get(name);\n      const colour = raw === undefined ? null : RADIAL_GRADIENT_COLOR.exec(raw);\n      if (!colour) {\n        throw new Error(\n          `WrBorderGlowHarness.getGradientColors(): \\`${name}\\` reads \"${raw ?? '(absent)'}\", which is not the ` +\n            '`radial-gradient(at X% Y%, <colour> 0px, …)` the component builds. All seven slots are written from ' +\n            'one palette, so one of them being different means the mapping broke, not the palette.'\n        );\n      }\n      return colour[1];\n    });\n  }\n\n  /**\n   * The flat colour behind the mesh, or `null` when no palette was set.\n   *\n   * Always the palette's FIRST entry. Worth its own method because the base slice is the\n   * one that shows where the gradients are transparent, and it drifting to the last\n   * colour changes the card's whole cast without touching a gradient.\n   */\n  async getBaseGradientColor(): Promise<string | null> {\n    const raw = await this.readVar('--wr-border-glow-gradient-base');\n    if (raw === null) return null;\n\n    const colour = LINEAR_GRADIENT_COLOR.exec(raw);\n    if (!colour) {\n      throw new Error(\n        `WrBorderGlowHarness.getBaseGradientColor(): \\`--wr-border-glow-gradient-base\\` reads \"${raw}\", which is ` +\n          'not the `linear-gradient(<colour> 0 100%)` the component builds from the palette.'\n      );\n    }\n    return colour[1];\n  }\n\n  /**\n   * Where the cursor last sat, in degrees: `0` is straight up and the angle grows\n   * clockwise. `null` until something has pointed at the card.\n   *\n   * `null` is a state of its own rather than a stand-in for zero — the stylesheet's own\n   * default applies until the first pointer arrives, and dead centre legitimately\n   * reports `0`, so a harness that folded the two together could not tell an untouched\n   * card from one being pointed at from the middle.\n   */\n  async getPointerAngle(): Promise<number | null> {\n    const raw = await this.readVar('--wr-border-glow-angle');\n    return raw === null ? null : Number.parseFloat(raw);\n  }\n\n  /**\n   * How close the cursor is to the perimeter: `0` at dead centre, `100` at the edge.\n   * `null` until something has pointed at the card.\n   *\n   * On a diagonal the NEARER axis wins rather than the two averaging, so a cursor level\n   * with the bottom edge reads 100 wherever it is along it.\n   */\n  async getEdgeProximity(): Promise<number | null> {\n    const raw = await this.readVar('--wr-border-glow-edge-proximity');\n    return raw === null ? null : Number.parseFloat(raw);\n  }\n\n  /**\n   * Point at the card, in client coordinates.\n   *\n   * **Refuses on a card with no box, which in a unit test is every card.** The component\n   * measures the pointer against its own centre, and with a 0×0 rect that maths\n   * degenerates: the centre is the top-left corner, and `1 / Math.min(0, 0)` pins the\n   * proximity at 100 for every position on the page. Both would come back as confident\n   * numbers describing nothing. Give the host a box first, exactly as the component's own\n   * spec does:\n   *\n   * ```ts\n   * const card = fixture.nativeElement.querySelector('wr-border-glow');\n   * card.getBoundingClientRect = () => ({ left: 0, top: 0, width: 200, height: 100 }) as DOMRect;\n   * ```\n   *\n   * A `pointermove` is dispatched on the host itself, so it needs no hit test and cannot\n   * miss — the coordinates only ever reach the component's own arithmetic.\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        `WrBorderGlowHarness.movePointerTo(${clientX}, ${clientY}): this card measures ${width}×${height}, so a ` +\n          'pointer position over it means nothing — the component reads the cursor against the card centre, and ' +\n          'with no box the centre is the top-left corner and the proximity saturates for every coordinate. Stub ' +\n          '`getBoundingClientRect` on the host first.'\n      );\n    }\n    await host.dispatchEvent('pointermove', { clientX, clientY, pointerId: 1, isPrimary: true });\n  }\n\n  /**\n   * Whether the one-shot mount sweep is running.\n   *\n   * The class is added synchronously when the sweep starts and removed when it ends\n   * about four seconds later, or when the component is torn down — so a spec asserts\n   * that it STARTED, and leaves the angle alone while it does. This is also the\n   * reduced-motion assertion: `[animated]=\"true\"` for someone who asked for less motion\n   * must leave this `false`, and no angle written at all.\n   */\n  async isSweeping(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-border-glow--sweeping');\n  }\n\n  /** Whether the halo layer is in the markup — the element the whole outer glow paints on. */\n  async hasHaloLayer(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-border-glow__edge')()) !== null;\n  }\n\n  /**\n   * Whether the decoration stays out of the accessibility tree.\n   *\n   * The halo layer is the component's only decorative NODE — every other layer is a\n   * pseudo-element and so was never in the tree to begin with. It carries no text and no\n   * name, so losing its `aria-hidden` puts an anonymous element between the reader and\n   * the card's content.\n   */\n  async isDecorationHiddenFromAssistiveTech(): Promise<boolean> {\n    return (await (await this.edge()).getAttribute('aria-hidden')) === 'true';\n  }\n\n  /**\n   * The projected content's text, trimmed.\n   *\n   * Read from `.wr-border-glow__inner` rather than the host, which is the assertion:\n   * content that lands as a bare host child instead of inside the wrapper renders\n   * underneath the interior bloom, and reading the host would report the same string\n   * either way.\n   */\n  async getContentText(): Promise<string> {\n    return (await this.locatorFor('.wr-border-glow__inner')()).text();\n  }\n\n  /** The host's inline declarations — the component's whole written output. */\n  private async declarations(): Promise<Map<string, string>> {\n    return parseInlineDeclarations((await (await this.host()).getAttribute('style')) ?? '');\n  }\n\n  /** One inline custom property, or `null` when the component has not written it. */\n  private async readVar(name: string): Promise<string | null> {\n    return (await this.declarations()).get(name) ?? null;\n  }\n\n  /** One inline custom property that is always written, as a number. */\n  private async readNumberVar(name: string, method: string): Promise<number> {\n    const raw = await this.readVar(name);\n    const value = raw === null ? Number.NaN : Number.parseFloat(raw);\n    if (Number.isNaN(value)) {\n      throw new Error(\n        `WrBorderGlowHarness.${method}(): \\`${name}\\` reads \"${raw ?? '(absent)'}\" on the host. The component ` +\n          'writes this one on every input change whatever the inputs say, so a missing or unreadable value means ' +\n          'the variable bag stopped reaching the element at all.'\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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"}

package/fesm2022/ngwr-calendar-heatmap-testing.mjs

@@ -0,0 +1,95 @@
+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-calendar-heatmap>`.
+ *
+ * **Every square is `aria-hidden`, and that is the design.** The grid is one
+ * `role="img"` with a name; a year of individually announced days would be unusable
+ * with a screen reader. What each square carries instead is a `title` — its ISO date
+ * and value — which is the only text a spec can read, and what
+ * {@link getCells} parses.
+ *
+ * **Four of the seven weekday labels are blank on purpose**: seven do not fit beside
+ * a grid this dense. {@link getWeekdayLabels} returns them as they are, empties
+ * included, rather than filtering — a spec asserting seven entries with four blanks
+ * is pinning the real layout.
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrCalendarHeatmapHarness extends ComponentHarness {
+    static hostSelector = 'wr-calendar-heatmap';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrCalendarHeatmapHarness, options).addOption('ariaLabel', options.ariaLabel, (harness, label) => HarnessPredicate.stringMatches(harness.getAccessibleName(), label));
+    }
+    grid = this.locatorFor('.wr-calendar-heatmap__grid');
+    /** The role the grid announces — `img`, for the whole picture. */
+    async getRole() {
+        return (await this.grid()).getAttribute('role');
+    }
+    /** The grid's accessible name — the only name a reader gets. */
+    async getAccessibleName() {
+        return (await this.grid()).getAttribute('aria-label');
+    }
+    /** How many day squares were drawn. */
+    async getCellCount() {
+        return (await this.locatorForAll('.wr-calendar-heatmap__cell')()).length;
+    }
+    /**
+     * Every square, from its tooltip and its grid placement.
+     *
+     * The `title` is `"<iso>: <value>"`, which is the component's own format and the
+     * only text on a square — everything else about it is colour.
+     */
+    async getCells() {
+        const cells = await this.locatorForAll('.wr-calendar-heatmap__cell')();
+        return Promise.all(cells.map(async (cell) => {
+            const title = (await cell.getAttribute('title')) ?? '';
+            const [iso, value] = title.split(': ');
+            return {
+                iso: iso ?? '',
+                value: value ?? '',
+                // `grid-column` / `grid-row` as WRITTEN, not the `-start` longhands: the
+                // component sets the shorthand, and jsdom does not expand shorthands, so the
+                // longhand reads back empty and every square would land at NaN.
+                week: Number.parseInt(await cell.getCssValue('grid-column'), 10),
+                day: Number.parseInt(await cell.getCssValue('grid-row'), 10),
+            };
+        }));
+    }
+    /** The value a given ISO date's square reports, or `null` when that day is not drawn. */
+    async getValueFor(iso) {
+        for (const cell of await this.getCells()) {
+            if (cell.iso === iso)
+                return cell.value;
+        }
+        return null;
+    }
+    /** Whether the weekday and month labels are drawn (`showLabels`). */
+    async hasLabels() {
+        return (await this.locatorForOptional('.wr-calendar-heatmap__weekdays')()) !== null;
+    }
+    /** The weekday labels as drawn — seven entries, four of them deliberately empty. */
+    async getWeekdayLabels() {
+        const labels = await this.locatorForAll('.wr-calendar-heatmap__weekday')();
+        return Promise.all(labels.map(label => label.text()));
+    }
+    /** The month labels along the top, in order. */
+    async getMonthLabels() {
+        const labels = await this.locatorForAll('.wr-calendar-heatmap__month')();
+        return Promise.all(labels.map(label => label.text()));
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrCalendarHeatmapHarness };
+//# sourceMappingURL=ngwr-calendar-heatmap-testing.mjs.map

package/fesm2022/ngwr-calendar-heatmap-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-calendar-heatmap-testing.mjs","sources":["../../../projects/lib/calendar-heatmap/testing/wr-calendar-heatmap-harness.ts","../../../projects/lib/calendar-heatmap/testing/ngwr-calendar-heatmap-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 { WrCalendarHeatmapCell, WrCalendarHeatmapHarnessFilters } from './interfaces';\n\n/**\n * Test harness for `<wr-calendar-heatmap>`.\n *\n * **Every square is `aria-hidden`, and that is the design.** The grid is one\n * `role=\"img\"` with a name; a year of individually announced days would be unusable\n * with a screen reader. What each square carries instead is a `title` — its ISO date\n * and value — which is the only text a spec can read, and what\n * {@link getCells} parses.\n *\n * **Four of the seven weekday labels are blank on purpose**: seven do not fit beside\n * a grid this dense. {@link getWeekdayLabels} returns them as they are, empties\n * included, rather than filtering — a spec asserting seven entries with four blanks\n * is pinning the real layout.\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrCalendarHeatmapHarness extends ComponentHarness {\n  static hostSelector = 'wr-calendar-heatmap';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrCalendarHeatmapHarnessFilters = {}): HarnessPredicate<WrCalendarHeatmapHarness> {\n    return new HarnessPredicate(WrCalendarHeatmapHarness, options).addOption(\n      'ariaLabel',\n      options.ariaLabel,\n      (harness, label) => HarnessPredicate.stringMatches(harness.getAccessibleName(), label)\n    );\n  }\n\n  private readonly grid = this.locatorFor('.wr-calendar-heatmap__grid');\n\n  /** The role the grid announces — `img`, for the whole picture. */\n  async getRole(): Promise<string | null> {\n    return (await this.grid()).getAttribute('role');\n  }\n\n  /** The grid's accessible name — the only name a reader gets. */\n  async getAccessibleName(): Promise<string | null> {\n    return (await this.grid()).getAttribute('aria-label');\n  }\n\n  /** How many day squares were drawn. */\n  async getCellCount(): Promise<number> {\n    return (await this.locatorForAll('.wr-calendar-heatmap__cell')()).length;\n  }\n\n  /**\n   * Every square, from its tooltip and its grid placement.\n   *\n   * The `title` is `\"<iso>: <value>\"`, which is the component's own format and the\n   * only text on a square — everything else about it is colour.\n   */\n  async getCells(): Promise<WrCalendarHeatmapCell[]> {\n    const cells = await this.locatorForAll('.wr-calendar-heatmap__cell')();\n\n    return Promise.all(\n      cells.map(async cell => {\n        const title = (await cell.getAttribute('title')) ?? '';\n        const [iso, value] = title.split(': ');\n        return {\n          iso: iso ?? '',\n          value: value ?? '',\n          // `grid-column` / `grid-row` as WRITTEN, not the `-start` longhands: the\n          // component sets the shorthand, and jsdom does not expand shorthands, so the\n          // longhand reads back empty and every square would land at NaN.\n          week: Number.parseInt(await cell.getCssValue('grid-column'), 10),\n          day: Number.parseInt(await cell.getCssValue('grid-row'), 10),\n        };\n      })\n    );\n  }\n\n  /** The value a given ISO date's square reports, or `null` when that day is not drawn. */\n  async getValueFor(iso: string): Promise<string | null> {\n    for (const cell of await this.getCells()) {\n      if (cell.iso === iso) return cell.value;\n    }\n    return null;\n  }\n\n  /** Whether the weekday and month labels are drawn (`showLabels`). */\n  async hasLabels(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-calendar-heatmap__weekdays')()) !== null;\n  }\n\n  /** The weekday labels as drawn — seven entries, four of them deliberately empty. */\n  async getWeekdayLabels(): Promise<string[]> {\n    const labels = await this.locatorForAll('.wr-calendar-heatmap__weekday')();\n    return Promise.all(labels.map(label => label.text()));\n  }\n\n  /** The month labels along the top, in order. */\n  async getMonthLabels(): Promise<string[]> {\n    const labels = await this.locatorForAll('.wr-calendar-heatmap__month')();\n    return Promise.all(labels.map(label => label.text()));\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}