ngwr 11.1.0 → 11.2.0

package/fesm2022/ngwr-marquee-testing.mjs

@@ -0,0 +1,336 @@
+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 one entry of a `<wr-marquee>`.
+ *
+ * **Reach these through `WrMarqueeHarness.getItems()`, which scopes them to the first
+ * copy.** The strip duplicates its whole sequence to make the loop seamless, so asking
+ * the document loader for all of these returns one per entry per copy — at least twice
+ * everything, and a count assertion that quietly multiplies. The parent harness is the
+ * only place that knows which copy is the original.
+ *
+ * An entry is built from an image or from a projected template, and it may or may not be
+ * a link. That is the reason to ask a harness rather than the DOM: the same question —
+ * what does this announce, is it decoration — is answered from a different attribute in
+ * each of those shapes, and {@link getAccessibleName} and {@link isDecorative} pick the
+ * right one.
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrMarqueeItemHarness extends ComponentHarness {
+    static hostSelector = '.wr-marquee__item';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrMarqueeItemHarness, options)
+            .addOption('name', options.name, (harness, name) => HarnessPredicate.stringMatches(harness.getAccessibleName(), name))
+            .addOption('link', options.link, async (harness, link) => (await harness.isLink()) === link);
+    }
+    link = this.locatorForOptional('a.wr-marquee__link');
+    image = this.locatorForOptional('img');
+    node = this.locatorForOptional('.wr-marquee__node');
+    /**
+     * What this entry announces, without the caller needing to know how it was built.
+     *
+     * A linked entry answers with the link's own name, which is the end of a four-step
+     * ladder — the item's `ariaLabel`, then its `title`, then an image's `alt`, then the
+     * catalog's `marquee.link`. An unlinked image answers with its `alt`, where `''` means
+     * the logo is decoration and announces nothing. Anything else answers with its text.
+     */
+    async getAccessibleName() {
+        const link = await this.link();
+        if (link)
+            return link.getAttribute('aria-label');
+        const image = await this.image();
+        if (image)
+            return image.getAttribute('alt');
+        return (await this.host()).text();
+    }
+    /** Whether this entry became a link — `[items]` carries `href` per entry, optionally. */
+    async isLink() {
+        return (await this.link()) !== null;
+    }
+    /** The `href` exactly as the entry declared it, unresolved, or `null` when it is not a link. */
+    async getHref() {
+        const link = await this.link();
+        return link ? link.getAttribute('href') : null;
+    }
+    /**
+     * Whether the link opens in a new tab AND says so safely: `target="_blank"` with both
+     * `noreferrer` and `noopener` in `rel`.
+     *
+     * One question rather than two, because half of it is a reverse-tabnabbing hole that
+     * nothing visual would ever show. The library hard-codes the safe pair, so this is a
+     * regression check on the template rather than on the caller's data.
+     *
+     * Throws for an entry that is not a link, where a `false` would read as "it opens in
+     * this tab" — an answer about safety that is not true of anything.
+     */
+    async opensInNewTab() {
+        const link = await this.link();
+        if (!link) {
+            throw new Error(`WrMarqueeItemHarness.opensInNewTab(): "${await this.getAccessibleName()}" is not a link — its entry in ` +
+                '[items] carries no `href`, so there is no target or rel to check. Ask isLink() first.');
+        }
+        const rel = (await link.getAttribute('rel')) ?? '';
+        return (await link.getAttribute('target')) === '_blank' && rel.includes('noreferrer') && rel.includes('noopener');
+    }
+    /**
+     * Whether this entry's content is kept out of the accessible tree, leaving whatever
+     * wraps it to do the announcing.
+     *
+     * The marker depends on how the entry was built, which is the whole reason to ask here:
+     * a projected template inside a named link carries `aria-hidden`, so the link's own name
+     * is not read twice, while an image says the same thing with `alt=""`. It describes the
+     * CONTENT — a decorative logo inside a link is still announced, by the link, and that
+     * name is {@link getAccessibleName}.
+     *
+     * Throws for an entry that rendered neither, which should not happen — every entry of
+     * `[items]` is one or the other.
+     */
+    async isDecorative() {
+        const node = await this.node();
+        if (node)
+            return (await node.getAttribute('aria-hidden')) === 'true';
+        const image = await this.image();
+        if (image)
+            return (await image.getAttribute('alt')) === '';
+        throw new Error('WrMarqueeItemHarness.isDecorative(): this entry rendered neither a projected node nor an image, so there ' +
+            'is nothing carrying a decorative marker. Every entry of [items] is one or the other.');
+    }
+}
+
+/**
+ * @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
+ */
+/** Copy 0 is the original sequence; every other `.wr-marquee__list` is a clone of it. */
+const FIRST_COPY = '.wr-marquee__list[data-copy="0"]';
+/** 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-marquee>`.
+ *
+ * **Almost everything worth asserting about a marquee is structural, not animated.** The
+ * strip duplicates its sequence so the loop has no seam, and only the first copy is left
+ * in the accessible tree — {@link getAnnouncedCopyCount} is the assertion that catches
+ * the regression that matters, because a duplicate leaking in makes a screen reader read
+ * the whole logo strip twice and changes nothing on screen. The other half is the naming
+ * ladder on linked entries, which is real logic with a real bug in its history: the
+ * fallback used to be the hard-coded English word "link".
+ *
+ * **Every list query is scoped to the first copy**, and that is the reason to use
+ * {@link getItems} rather than a raw `.wr-marquee__item` query, which returns at least
+ * twice as many elements as there are entries.
+ *
+ * Nothing about the motion is offered. The track's `translate3d` is written only when the
+ * measured sequence is wider than zero, so it never appears in a test at all, and in a
+ * browser it is one frame of a loop that is already stale by the time an assertion reads
+ * it. `[speed]` and `[direction]` reach the DOM in no form. Neither does the hover state:
+ * pausing flips a private signal with no class, attribute or property behind it, so a
+ * `hover()` here would fire events that provably change nothing readable. And the
+ * reduced-motion freeze is a CSS `!important` rule with no counterpart in TypeScript,
+ * which means the DOM is identical either way — see `getGap` for what a harness can
+ * honestly read off a stylesheet-driven component, and why it reads it where it does.
+ *
+ * @example
+ * ```ts
+ * const loader = TestbedHarnessEnvironment.loader(fixture);
+ * const strip = await loader.getHarness(WrMarqueeHarness);
+ *
+ * expect(await strip.getAnnouncedCopyCount()).toBe(1);
+ * expect(await strip.getItemCount()).toBe(logos.length);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrMarqueeHarness extends ComponentHarness {
+    static hostSelector = 'wr-marquee';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrMarqueeHarness, options).addOption('ariaLabel', options.ariaLabel, (harness, label) => HarnessPredicate.stringMatches(harness.getAccessibleName(), label));
+    }
+    copies = this.locatorForAll('.wr-marquee__list');
+    /**
+     * The name the region announces.
+     *
+     * Pins the i18n ladder end to end: `'Marquee'` with no catalog loaded, the consumer's
+     * `[ariaLabel]` when one is given, the localized string under a catalog. A landmark
+     * with no name is an axe failure, so this is what keeps the `region` legitimate rather
+     * than a decoration a screen-reader user is invited to jump to and finds unnamed.
+     */
+    async getAccessibleName() {
+        return (await this.host()).getAttribute('aria-label');
+    }
+    /**
+     * The landmark role the strip claims.
+     *
+     * Static in the template and one attribute away from being dropped in a refactor, which
+     * is exactly why a consumer asserting their page's landmark structure should be able to
+     * see it from here.
+     */
+    async getRole() {
+        return (await this.host()).getAttribute('role');
+    }
+    /**
+     * How many copies of the sequence are rendered.
+     *
+     * The seamless loop is built by repeating the whole list until it covers the container,
+     * so the count is decided by measurement — which means it stays at the floor of 2 in a
+     * test with no layout, whatever the container would really be. Assert `>= 2`; the
+     * growth needs a browser.
+     */
+    async getCopyCount() {
+        return (await this.copies()).length;
+    }
+    /**
+     * How many copies are left in the accessible tree. Must be exactly 1.
+     *
+     * The one assertion here that catches a silent regression: every copy after the first
+     * carries `aria-hidden="true"`, and losing that makes a screen reader read the whole
+     * strip once per copy while the page looks unchanged.
+     *
+     * Note the first copy carries the literal `aria-hidden="false"` rather than no
+     * attribute at all, so this compares against the string `'true'` — testing the
+     * attribute for presence would count nothing at all as announced.
+     */
+    async getAnnouncedCopyCount() {
+        const copies = await this.copies();
+        const hidden = await Promise.all(copies.map(copy => copy.getAttribute('aria-hidden')));
+        return hidden.filter(value => value !== 'true').length;
+    }
+    /** The entries of the first copy, in order — one per entry of `[items]`. */
+    async getItems() {
+        return this.locatorForAll(WrMarqueeItemHarness.with({ ancestor: FIRST_COPY }))();
+    }
+    /**
+     * How many entries the strip drew, counting the first copy only.
+     *
+     * One per entry of `[items]` — the mapping a consumer's own data pipeline is really
+     * being tested for.
+     */
+    async getItemCount() {
+        return (await this.locatorForAll(`${FIRST_COPY} .wr-marquee__item`)()).length;
+    }
+    /**
+     * The `alt` of each image in the first copy, in order.
+     *
+     * `null` in this list is the thing to look for: it means the attribute is MISSING, which
+     * is a serious axe violation and announces the file name. An empty string is the
+     * opposite — a deliberately decorative logo — and the template's `alt || ''` is what
+     * keeps the two apart. A method typed `string[]` would have had to flatten them.
+     */
+    async getImageAlts() {
+        const images = await this.locatorForAll(`${FIRST_COPY} img`)();
+        return Promise.all(images.map(image => image.getAttribute('alt')));
+    }
+    /**
+     * Every linked entry of the first copy: where it goes and what it announces.
+     *
+     * The name is the interesting half. It walks a ladder ending in the catalog's
+     * `marquee.link`, so an unlabelled logo announces a localized word rather than nothing
+     * — real component logic rather than an echo of the input.
+     */
+    async getLinks() {
+        const links = await this.locatorForAll(`${FIRST_COPY} a.wr-marquee__link`)();
+        return Promise.all(links.map(async (link) => ({ href: await link.getAttribute('href'), name: await link.getAttribute('aria-label') })));
+    }
+    /**
+     * Whether the edge fades are on.
+     *
+     * The fades themselves are `::before` / `::after` gradients, which no unit environment
+     * can see — so the modifier class is the observable, and it is public API a consumer
+     * may be styling against in any case.
+     */
+    async hasFade() {
+        return (await this.host()).hasClass('wr-marquee--fade');
+    }
+    /**
+     * The fade colour as the component passed it through — a CSS value such as
+     * `'var(--wr-color-success)'`, not a resolved colour — or `null` when none was given.
+     *
+     * Worth asserting next to {@link hasFade}: a colour with no fade modifier renders
+     * nothing at all, which is a consumer mistake this pairing makes visible.
+     */
+    async getFadeColor() {
+        return this.hostStyle('--wr-marquee-fade-color');
+    }
+    /**
+     * Whether entries scale up under the pointer.
+     *
+     * A `:hover` transform, so again the modifier is the only honest read — and it earns
+     * its place by doing more than the name suggests: it also changes the strip's vertical
+     * padding, so a lost class shifts the layout as well as the hover.
+     */
+    async hasScaleOnHover() {
+        return (await this.host()).hasClass('wr-marquee--scale-hover');
+    }
+    /** The gap between entries in pixels — the seam width the stylesheet reads. */
+    async getGap() {
+        return this.pixels('--wr-marquee-gap', 'getGap');
+    }
+    /**
+     * The entry height in pixels.
+     *
+     * It drives the image height AND the entry font size, so a binding that stops arriving
+     * collapses the whole strip rather than merely resizing it.
+     */
+    async getItemHeight() {
+        return this.pixels('--wr-marquee-height', 'getItemHeight');
+    }
+    /**
+     * Read a custom property off the host's inline `style`, rather than through
+     * `getCssValue()`.
+     *
+     * Not a jsdom workaround — the opposite. The stylesheet declares its own
+     * `--wr-marquee-gap: 32px` and `--wr-marquee-height: 28px` on `.wr-marquee`, so a
+     * computed read in a real browser answers with the stylesheet's default when the host
+     * binding is the very thing that broke. The inline value is what the component wrote,
+     * and nothing else can forge it.
+     */
+    async hostStyle(property) {
+        return inlineStyle(await (await this.host()).getAttribute('style'), property);
+    }
+    /**
+     * Parse a `<n>px` custom property, refusing anything that lost its unit.
+     *
+     * The refusal is the point. `[gap]` and `[itemHeight]` are numbers that the host binding
+     * turns into lengths, and the stylesheet uses them raw — a bare `32` is an invalid
+     * declaration, so the property falls back to the stylesheet default and the strip looks
+     * merely a little different. A `parseFloat` would report 32 either way and hide it.
+     */
+    async pixels(property, method) {
+        const raw = await this.hostStyle(property);
+        const match = /^(-?\d*\.?\d+)px$/.exec(raw ?? '');
+        if (!match) {
+            throw new Error(`WrMarqueeHarness.${method}(): \`${property}\` reads "${raw}" rather than a px length. The stylesheet ` +
+                'uses this value as a raw CSS length, so anything without the unit is an invalid declaration and the ' +
+                'strip silently falls back to the default in the stylesheet.');
+        }
+        return Number(match[1]);
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrMarqueeHarness, WrMarqueeItemHarness };
+//# sourceMappingURL=ngwr-marquee-testing.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-marquee-testing.mjs","sources":["../../../projects/lib/marquee/testing/wr-marquee-item-harness.ts","../../../projects/lib/marquee/testing/wr-marquee-harness.ts","../../../projects/lib/marquee/testing/ngwr-marquee-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 { WrMarqueeItemHarnessFilters } from './interfaces';\n\n/**\n * Test harness for one entry of a `<wr-marquee>`.\n *\n * **Reach these through `WrMarqueeHarness.getItems()`, which scopes them to the first\n * copy.** The strip duplicates its whole sequence to make the loop seamless, so asking\n * the document loader for all of these returns one per entry per copy — at least twice\n * everything, and a count assertion that quietly multiplies. The parent harness is the\n * only place that knows which copy is the original.\n *\n * An entry is built from an image or from a projected template, and it may or may not be\n * a link. That is the reason to ask a harness rather than the DOM: the same question —\n * what does this announce, is it decoration — is answered from a different attribute in\n * each of those shapes, and {@link getAccessibleName} and {@link isDecorative} pick the\n * right one.\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrMarqueeItemHarness extends ComponentHarness {\n  static hostSelector = '.wr-marquee__item';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrMarqueeItemHarnessFilters = {}): HarnessPredicate<WrMarqueeItemHarness> {\n    return new HarnessPredicate(WrMarqueeItemHarness, options)\n      .addOption('name', options.name, (harness, name) =>\n        HarnessPredicate.stringMatches(harness.getAccessibleName(), name)\n      )\n      .addOption('link', options.link, async (harness, link) => (await harness.isLink()) === link);\n  }\n\n  private readonly link = this.locatorForOptional('a.wr-marquee__link');\n  private readonly image = this.locatorForOptional('img');\n  private readonly node = this.locatorForOptional('.wr-marquee__node');\n\n  /**\n   * What this entry announces, without the caller needing to know how it was built.\n   *\n   * A linked entry answers with the link's own name, which is the end of a four-step\n   * ladder — the item's `ariaLabel`, then its `title`, then an image's `alt`, then the\n   * catalog's `marquee.link`. An unlinked image answers with its `alt`, where `''` means\n   * the logo is decoration and announces nothing. Anything else answers with its text.\n   */\n  async getAccessibleName(): Promise<string | null> {\n    const link = await this.link();\n    if (link) return link.getAttribute('aria-label');\n\n    const image = await this.image();\n    if (image) return image.getAttribute('alt');\n\n    return (await this.host()).text();\n  }\n\n  /** Whether this entry became a link — `[items]` carries `href` per entry, optionally. */\n  async isLink(): Promise<boolean> {\n    return (await this.link()) !== null;\n  }\n\n  /** The `href` exactly as the entry declared it, unresolved, or `null` when it is not a link. */\n  async getHref(): Promise<string | null> {\n    const link = await this.link();\n    return link ? link.getAttribute('href') : null;\n  }\n\n  /**\n   * Whether the link opens in a new tab AND says so safely: `target=\"_blank\"` with both\n   * `noreferrer` and `noopener` in `rel`.\n   *\n   * One question rather than two, because half of it is a reverse-tabnabbing hole that\n   * nothing visual would ever show. The library hard-codes the safe pair, so this is a\n   * regression check on the template rather than on the caller's data.\n   *\n   * Throws for an entry that is not a link, where a `false` would read as \"it opens in\n   * this tab\" — an answer about safety that is not true of anything.\n   */\n  async opensInNewTab(): Promise<boolean> {\n    const link = await this.link();\n    if (!link) {\n      throw new Error(\n        `WrMarqueeItemHarness.opensInNewTab(): \"${await this.getAccessibleName()}\" is not a link — its entry in ` +\n          '[items] carries no `href`, so there is no target or rel to check. Ask isLink() first.'\n      );\n    }\n\n    const rel = (await link.getAttribute('rel')) ?? '';\n    return (await link.getAttribute('target')) === '_blank' && rel.includes('noreferrer') && rel.includes('noopener');\n  }\n\n  /**\n   * Whether this entry's content is kept out of the accessible tree, leaving whatever\n   * wraps it to do the announcing.\n   *\n   * The marker depends on how the entry was built, which is the whole reason to ask here:\n   * a projected template inside a named link carries `aria-hidden`, so the link's own name\n   * is not read twice, while an image says the same thing with `alt=\"\"`. It describes the\n   * CONTENT — a decorative logo inside a link is still announced, by the link, and that\n   * name is {@link getAccessibleName}.\n   *\n   * Throws for an entry that rendered neither, which should not happen — every entry of\n   * `[items]` is one or the other.\n   */\n  async isDecorative(): Promise<boolean> {\n    const node = await this.node();\n    if (node) return (await node.getAttribute('aria-hidden')) === 'true';\n\n    const image = await this.image();\n    if (image) return (await image.getAttribute('alt')) === '';\n\n    throw new Error(\n      'WrMarqueeItemHarness.isDecorative(): this entry rendered neither a projected node nor an image, so there ' +\n        'is nothing carrying a decorative marker. Every entry of [items] is one or the other.'\n    );\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 { WrMarqueeHarnessFilters, WrMarqueeLink } from './interfaces';\nimport { WrMarqueeItemHarness } from './wr-marquee-item-harness';\n\n/** Copy 0 is the original sequence; every other `.wr-marquee__list` is a clone of it. */\nconst FIRST_COPY = '.wr-marquee__list[data-copy=\"0\"]';\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-marquee>`.\n *\n * **Almost everything worth asserting about a marquee is structural, not animated.** The\n * strip duplicates its sequence so the loop has no seam, and only the first copy is left\n * in the accessible tree — {@link getAnnouncedCopyCount} is the assertion that catches\n * the regression that matters, because a duplicate leaking in makes a screen reader read\n * the whole logo strip twice and changes nothing on screen. The other half is the naming\n * ladder on linked entries, which is real logic with a real bug in its history: the\n * fallback used to be the hard-coded English word \"link\".\n *\n * **Every list query is scoped to the first copy**, and that is the reason to use\n * {@link getItems} rather than a raw `.wr-marquee__item` query, which returns at least\n * twice as many elements as there are entries.\n *\n * Nothing about the motion is offered. The track's `translate3d` is written only when the\n * measured sequence is wider than zero, so it never appears in a test at all, and in a\n * browser it is one frame of a loop that is already stale by the time an assertion reads\n * it. `[speed]` and `[direction]` reach the DOM in no form. Neither does the hover state:\n * pausing flips a private signal with no class, attribute or property behind it, so a\n * `hover()` here would fire events that provably change nothing readable. And the\n * reduced-motion freeze is a CSS `!important` rule with no counterpart in TypeScript,\n * which means the DOM is identical either way — see `getGap` for what a harness can\n * honestly read off a stylesheet-driven component, and why it reads it where it does.\n *\n * @example\n * ```ts\n * const loader = TestbedHarnessEnvironment.loader(fixture);\n * const strip = await loader.getHarness(WrMarqueeHarness);\n *\n * expect(await strip.getAnnouncedCopyCount()).toBe(1);\n * expect(await strip.getItemCount()).toBe(logos.length);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrMarqueeHarness extends ComponentHarness {\n  static hostSelector = 'wr-marquee';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrMarqueeHarnessFilters = {}): HarnessPredicate<WrMarqueeHarness> {\n    return new HarnessPredicate(WrMarqueeHarness, options).addOption('ariaLabel', options.ariaLabel, (harness, label) =>\n      HarnessPredicate.stringMatches(harness.getAccessibleName(), label)\n    );\n  }\n\n  private readonly copies = this.locatorForAll('.wr-marquee__list');\n\n  /**\n   * The name the region announces.\n   *\n   * Pins the i18n ladder end to end: `'Marquee'` with no catalog loaded, the consumer's\n   * `[ariaLabel]` when one is given, the localized string under a catalog. A landmark\n   * with no name is an axe failure, so this is what keeps the `region` legitimate rather\n   * than a decoration a screen-reader user is invited to jump to and finds unnamed.\n   */\n  async getAccessibleName(): Promise<string | null> {\n    return (await this.host()).getAttribute('aria-label');\n  }\n\n  /**\n   * The landmark role the strip claims.\n   *\n   * Static in the template and one attribute away from being dropped in a refactor, which\n   * is exactly why a consumer asserting their page's landmark structure should be able to\n   * see it from here.\n   */\n  async getRole(): Promise<string | null> {\n    return (await this.host()).getAttribute('role');\n  }\n\n  /**\n   * How many copies of the sequence are rendered.\n   *\n   * The seamless loop is built by repeating the whole list until it covers the container,\n   * so the count is decided by measurement — which means it stays at the floor of 2 in a\n   * test with no layout, whatever the container would really be. Assert `>= 2`; the\n   * growth needs a browser.\n   */\n  async getCopyCount(): Promise<number> {\n    return (await this.copies()).length;\n  }\n\n  /**\n   * How many copies are left in the accessible tree. Must be exactly 1.\n   *\n   * The one assertion here that catches a silent regression: every copy after the first\n   * carries `aria-hidden=\"true\"`, and losing that makes a screen reader read the whole\n   * strip once per copy while the page looks unchanged.\n   *\n   * Note the first copy carries the literal `aria-hidden=\"false\"` rather than no\n   * attribute at all, so this compares against the string `'true'` — testing the\n   * attribute for presence would count nothing at all as announced.\n   */\n  async getAnnouncedCopyCount(): Promise<number> {\n    const copies = await this.copies();\n    const hidden = await Promise.all(copies.map(copy => copy.getAttribute('aria-hidden')));\n    return hidden.filter(value => value !== 'true').length;\n  }\n\n  /** The entries of the first copy, in order — one per entry of `[items]`. */\n  async getItems(): Promise<WrMarqueeItemHarness[]> {\n    return this.locatorForAll(WrMarqueeItemHarness.with({ ancestor: FIRST_COPY }))();\n  }\n\n  /**\n   * How many entries the strip drew, counting the first copy only.\n   *\n   * One per entry of `[items]` — the mapping a consumer's own data pipeline is really\n   * being tested for.\n   */\n  async getItemCount(): Promise<number> {\n    return (await this.locatorForAll(`${FIRST_COPY} .wr-marquee__item`)()).length;\n  }\n\n  /**\n   * The `alt` of each image in the first copy, in order.\n   *\n   * `null` in this list is the thing to look for: it means the attribute is MISSING, which\n   * is a serious axe violation and announces the file name. An empty string is the\n   * opposite — a deliberately decorative logo — and the template's `alt || ''` is what\n   * keeps the two apart. A method typed `string[]` would have had to flatten them.\n   */\n  async getImageAlts(): Promise<(string | null)[]> {\n    const images = await this.locatorForAll(`${FIRST_COPY} img`)();\n    return Promise.all(images.map(image => image.getAttribute('alt')));\n  }\n\n  /**\n   * Every linked entry of the first copy: where it goes and what it announces.\n   *\n   * The name is the interesting half. It walks a ladder ending in the catalog's\n   * `marquee.link`, so an unlabelled logo announces a localized word rather than nothing\n   * — real component logic rather than an echo of the input.\n   */\n  async getLinks(): Promise<WrMarqueeLink[]> {\n    const links = await this.locatorForAll(`${FIRST_COPY} a.wr-marquee__link`)();\n    return Promise.all(\n      links.map(async link => ({ href: await link.getAttribute('href'), name: await link.getAttribute('aria-label') }))\n    );\n  }\n\n  /**\n   * Whether the edge fades are on.\n   *\n   * The fades themselves are `::before` / `::after` gradients, which no unit environment\n   * can see — so the modifier class is the observable, and it is public API a consumer\n   * may be styling against in any case.\n   */\n  async hasFade(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-marquee--fade');\n  }\n\n  /**\n   * The fade colour as the component passed it through — a CSS value such as\n   * `'var(--wr-color-success)'`, not a resolved colour — or `null` when none was given.\n   *\n   * Worth asserting next to {@link hasFade}: a colour with no fade modifier renders\n   * nothing at all, which is a consumer mistake this pairing makes visible.\n   */\n  async getFadeColor(): Promise<string | null> {\n    return this.hostStyle('--wr-marquee-fade-color');\n  }\n\n  /**\n   * Whether entries scale up under the pointer.\n   *\n   * A `:hover` transform, so again the modifier is the only honest read — and it earns\n   * its place by doing more than the name suggests: it also changes the strip's vertical\n   * padding, so a lost class shifts the layout as well as the hover.\n   */\n  async hasScaleOnHover(): Promise<boolean> {\n    return (await this.host()).hasClass('wr-marquee--scale-hover');\n  }\n\n  /** The gap between entries in pixels — the seam width the stylesheet reads. */\n  async getGap(): Promise<number> {\n    return this.pixels('--wr-marquee-gap', 'getGap');\n  }\n\n  /**\n   * The entry height in pixels.\n   *\n   * It drives the image height AND the entry font size, so a binding that stops arriving\n   * collapses the whole strip rather than merely resizing it.\n   */\n  async getItemHeight(): Promise<number> {\n    return this.pixels('--wr-marquee-height', 'getItemHeight');\n  }\n\n  /**\n   * Read a custom property off the host's inline `style`, rather than through\n   * `getCssValue()`.\n   *\n   * Not a jsdom workaround — the opposite. The stylesheet declares its own\n   * `--wr-marquee-gap: 32px` and `--wr-marquee-height: 28px` on `.wr-marquee`, so a\n   * computed read in a real browser answers with the stylesheet's default when the host\n   * binding is the very thing that broke. The inline value is what the component wrote,\n   * and nothing else can forge it.\n   */\n  private async hostStyle(property: string): Promise<string | null> {\n    return inlineStyle(await (await this.host()).getAttribute('style'), property);\n  }\n\n  /**\n   * Parse a `<n>px` custom property, refusing anything that lost its unit.\n   *\n   * The refusal is the point. `[gap]` and `[itemHeight]` are numbers that the host binding\n   * turns into lengths, and the stylesheet uses them raw — a bare `32` is an invalid\n   * declaration, so the property falls back to the stylesheet default and the strip looks\n   * merely a little different. A `parseFloat` would report 32 either way and hide it.\n   */\n  private async pixels(property: string, method: string): Promise<number> {\n    const raw = await this.hostStyle(property);\n    const match = /^(-?\\d*\\.?\\d+)px$/.exec(raw ?? '');\n\n    if (!match) {\n      throw new Error(\n        `WrMarqueeHarness.${method}(): \\`${property}\\` reads \"${raw}\" rather than a px length. The stylesheet ` +\n          'uses this value as a raw CSS length, so anything without the unit is an invalid declaration and the ' +\n          'strip silently falls back to the default in the stylesheet.'\n      );\n    }\n    return Number(match[1]);\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-meter-group-testing.mjs

@@ -0,0 +1,80 @@
+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-meter-group>` — one bar divided into labelled bands.
+ *
+ * **The bar is a single `progressbar`, and its value is the TOTAL.** The bands
+ * themselves announce nothing: they carry a `title` for a mouse and their share as an
+ * inline width, and the legend is where their labels and values are readable. So a
+ * spec that wants "how much of each" reads {@link getLegend} or {@link getSlices},
+ * and one that wants "how full" reads {@link getValue}.
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrMeterGroupHarness extends ComponentHarness {
+    static hostSelector = 'wr-meter-group';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrMeterGroupHarness, options)
+            .addOption('ariaLabel', options.ariaLabel, (harness, label) => HarnessPredicate.stringMatches(harness.getAccessibleName(), label))
+            .addOption('sliceLabel', options.sliceLabel, async (harness, label) => {
+            for (const printed of await harness.getLegendLabels()) {
+                if (await HarnessPredicate.stringMatches(printed, label))
+                    return true;
+            }
+            return false;
+        });
+    }
+    bar = this.locatorFor('.wr-meter-group__bar');
+    /** The role the bar announces — `progressbar`, for the total. */
+    async getRole() {
+        return (await this.bar()).getAttribute('role');
+    }
+    /** The bar's accessible name. */
+    async getAccessibleName() {
+        return (await this.bar()).getAttribute('aria-label');
+    }
+    /** The total the bands add up to, from `aria-valuenow`. */
+    async getValue() {
+        return Number(await (await this.bar()).getAttribute('aria-valuenow'));
+    }
+    /** The full capacity, from `aria-valuemax` — given, or the sum of the bands. */
+    async getMax() {
+        return Number(await (await this.bar()).getAttribute('aria-valuemax'));
+    }
+    /** The bands, in order, with the share of the bar each takes. */
+    async getSlices() {
+        const slices = await this.locatorForAll('.wr-meter-group__slice')();
+        return Promise.all(slices.map(async (slice) => ({
+            label: await slice.getAttribute('title'),
+            percent: Number.parseFloat(await slice.getCssValue('width')),
+        })));
+    }
+    /** Whether the legend is rendered (`showLegend`, and at least one band). */
+    async hasLegend() {
+        return (await this.locatorForOptional('.wr-meter-group__legend')()) !== null;
+    }
+    /** The legend's labels, in order. */
+    async getLegendLabels() {
+        const labels = await this.locatorForAll('.wr-meter-group__legend-label')();
+        return Promise.all(labels.map(label => label.text()));
+    }
+    /** The legend's values, in order — empty when `showValues` is off. */
+    async getLegendValues() {
+        const values = await this.locatorForAll('.wr-meter-group__legend-value')();
+        return Promise.all(values.map(value => value.text()));
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrMeterGroupHarness };
+//# sourceMappingURL=ngwr-meter-group-testing.mjs.map

package/fesm2022/ngwr-meter-group-testing.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-meter-group-testing.mjs","sources":["../../../projects/lib/meter-group/testing/wr-meter-group-harness.ts","../../../projects/lib/meter-group/testing/ngwr-meter-group-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 { WrMeterGroupHarnessFilters, WrMeterGroupSlice } from './interfaces';\n\n/**\n * Test harness for `<wr-meter-group>` — one bar divided into labelled bands.\n *\n * **The bar is a single `progressbar`, and its value is the TOTAL.** The bands\n * themselves announce nothing: they carry a `title` for a mouse and their share as an\n * inline width, and the legend is where their labels and values are readable. So a\n * spec that wants \"how much of each\" reads {@link getLegend} or {@link getSlices},\n * and one that wants \"how full\" reads {@link getValue}.\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrMeterGroupHarness extends ComponentHarness {\n  static hostSelector = 'wr-meter-group';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrMeterGroupHarnessFilters = {}): HarnessPredicate<WrMeterGroupHarness> {\n    return new HarnessPredicate(WrMeterGroupHarness, options)\n      .addOption('ariaLabel', options.ariaLabel, (harness, label) =>\n        HarnessPredicate.stringMatches(harness.getAccessibleName(), label)\n      )\n      .addOption('sliceLabel', options.sliceLabel, async (harness, label) => {\n        for (const printed of await harness.getLegendLabels()) {\n          if (await HarnessPredicate.stringMatches(printed, label)) return true;\n        }\n        return false;\n      });\n  }\n\n  private readonly bar = this.locatorFor('.wr-meter-group__bar');\n\n  /** The role the bar announces — `progressbar`, for the total. */\n  async getRole(): Promise<string | null> {\n    return (await this.bar()).getAttribute('role');\n  }\n\n  /** The bar's accessible name. */\n  async getAccessibleName(): Promise<string | null> {\n    return (await this.bar()).getAttribute('aria-label');\n  }\n\n  /** The total the bands add up to, from `aria-valuenow`. */\n  async getValue(): Promise<number> {\n    return Number(await (await this.bar()).getAttribute('aria-valuenow'));\n  }\n\n  /** The full capacity, from `aria-valuemax` — given, or the sum of the bands. */\n  async getMax(): Promise<number> {\n    return Number(await (await this.bar()).getAttribute('aria-valuemax'));\n  }\n\n  /** The bands, in order, with the share of the bar each takes. */\n  async getSlices(): Promise<WrMeterGroupSlice[]> {\n    const slices = await this.locatorForAll('.wr-meter-group__slice')();\n\n    return Promise.all(\n      slices.map(async slice => ({\n        label: await slice.getAttribute('title'),\n        percent: Number.parseFloat(await slice.getCssValue('width')),\n      }))\n    );\n  }\n\n  /** Whether the legend is rendered (`showLegend`, and at least one band). */\n  async hasLegend(): Promise<boolean> {\n    return (await this.locatorForOptional('.wr-meter-group__legend')()) !== null;\n  }\n\n  /** The legend's labels, in order. */\n  async getLegendLabels(): Promise<string[]> {\n    const labels = await this.locatorForAll('.wr-meter-group__legend-label')();\n    return Promise.all(labels.map(label => label.text()));\n  }\n\n  /** The legend's values, in order — empty when `showValues` is off. */\n  async getLegendValues(): Promise<string[]> {\n    const values = await this.locatorForAll('.wr-meter-group__legend-value')();\n    return Promise.all(values.map(value => value.text()));\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AAMH;;;;;;;;;;AAUG;AACG,MAAO,mBAAoB,SAAQ,gBAAgB,CAAA;AACvD,IAAA,OAAO,YAAY,GAAG,gBAAgB;;AAGtC,IAAA,OAAO,IAAI,CAAC,OAAA,GAAsC,EAAE,EAAA;AAClD,QAAA,OAAO,IAAI,gBAAgB,CAAC,mBAAmB,EAAE,OAAO;aACrD,SAAS,CAAC,WAAW,EAAE,OAAO,CAAC,SAAS,EAAE,CAAC,OAAO,EAAE,KAAK,KACxD,gBAAgB,CAAC,aAAa,CAAC,OAAO,CAAC,iBAAiB,EAAE,EAAE,KAAK,CAAC;AAEnE,aAAA,SAAS,CAAC,YAAY,EAAE,OAAO,CAAC,UAAU,EAAE,OAAO,OAAO,EAAE,KAAK,KAAI;YACpE,KAAK,MAAM,OAAO,IAAI,MAAM,OAAO,CAAC,eAAe,EAAE,EAAE;gBACrD,IAAI,MAAM,gBAAgB,CAAC,aAAa,CAAC,OAAO,EAAE,KAAK,CAAC;AAAE,oBAAA,OAAO,IAAI;YACvE;AACA,YAAA,OAAO,KAAK;AACd,QAAA,CAAC,CAAC;IACN;AAEiB,IAAA,GAAG,GAAG,IAAI,CAAC,UAAU,CAAC,sBAAsB,CAAC;;AAG9D,IAAA,MAAM,OAAO,GAAA;AACX,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,EAAE,YAAY,CAAC,MAAM,CAAC;IAChD;;AAGA,IAAA,MAAM,iBAAiB,GAAA;AACrB,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,EAAE,YAAY,CAAC,YAAY,CAAC;IACtD;;AAGA,IAAA,MAAM,QAAQ,GAAA;AACZ,QAAA,OAAO,MAAM,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,EAAE,YAAY,CAAC,eAAe,CAAC,CAAC;IACvE;;AAGA,IAAA,MAAM,MAAM,GAAA;AACV,QAAA,OAAO,MAAM,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,GAAG,EAAE,EAAE,YAAY,CAAC,eAAe,CAAC,CAAC;IACvE;;AAGA,IAAA,MAAM,SAAS,GAAA;QACb,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,wBAAwB,CAAC,EAAE;AAEnE,QAAA,OAAO,OAAO,CAAC,GAAG,CAChB,MAAM,CAAC,GAAG,CAAC,OAAM,KAAK,MAAK;AACzB,YAAA,KAAK,EAAE,MAAM,KAAK,CAAC,YAAY,CAAC,OAAO,CAAC;AACxC,YAAA,OAAO,EAAE,MAAM,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;SAC7D,CAAC,CAAC,CACJ;IACH;;AAGA,IAAA,MAAM,SAAS,GAAA;AACb,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,kBAAkB,CAAC,yBAAyB,CAAC,EAAE,MAAM,IAAI;IAC9E;;AAGA,IAAA,MAAM,eAAe,GAAA;QACnB,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,+BAA+B,CAAC,EAAE;AAC1E,QAAA,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;IACvD;;AAGA,IAAA,MAAM,eAAe,GAAA;QACnB,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,aAAa,CAAC,+BAA+B,CAAC,EAAE;AAC1E,QAAA,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,EAAE,CAAC,CAAC;IACvD;;;ACxFF;;AAEG;;;;"}

package/fesm2022/ngwr-overlay.mjs

@@ -138,6 +138,7 @@ function containsAcrossShadow(parent, child) {
  *
  * Registration is per subscription: the document listeners go up with the first
  * watcher and come down with the last, so an app with no open overlay has none.
+ * That sentence was aspirational until v11 — see {@link outsidePointerEvents}.
  */
 class WrOutsideClick {
     doc = inject(DOCUMENT);
@@ -148,7 +149,24 @@ class WrOutsideClick {
     pressOrigin = null;
     /**
      * Emits every `click` / `auxclick` / `contextmenu` that lands outside the
-     * given overlay's pane, for as long as the returned observable is subscribed.
+     * given overlay's pane, for as long as the overlay is attached.
+     *
+     * **It completes when the overlay detaches, and that is load-bearing.** Every
+     * one of the ten call sites subscribes inside its own `openOverlay()` and
+     * pipes `takeUntilDestroyed(destroyRef)` — a DIRECTIVE lifetime, not an
+     * overlay one — and none of them unsubscribes on close, because the natural
+     * reading of that idiom is "this ends with the component". Without the
+     * completion below the teardown never ran: one watcher accumulated per OPEN
+     * for the life of the page, each pinning a disposed `OverlayRef` (and through
+     * it a detached pane, its portal outlet and their injectors), the four
+     * capture-phase document listeners could never come down because
+     * `watchers.length` never reached zero, and every click on the page walked a
+     * list that only grew. A `mode="tooltip"` popover made it unbounded — one
+     * permanent watcher per hover.
+     *
+     * Completing here rather than fixing ten call sites is deliberate: the next
+     * component to open an overlay would have made the same reasonable mistake.
+     * It is also what CDK's own `OverlayRef.outsidePointerEvents()` does.
      */
     outsidePointerEvents(overlayRef) {
         return new Observable(subscriber => {
@@ -158,7 +176,16 @@ class WrOutsideClick {
             this.watchers.push(watcher);
             if (this.watchers.length === 1)
                 this.listen();
+            // BOTH handlers, and the second one is not defensive padding. `dispose()`
+            // emits a detachment and then completes the subject, so a live overlay
+            // arrives through `next` — but a ref that was already disposed before
+            // anyone subscribed has nothing left to emit and arrives through
+            // `complete` alone. Listening for `next` only left exactly the watcher
+            // this whole change exists to remove.
+            const ended = () => subscriber.complete();
+            const detached = overlayRef.detachments().subscribe({ next: ended, complete: ended });
             return () => {
+                detached.unsubscribe();
                 const index = this.watchers.indexOf(watcher);
                 if (index > -1)
                     this.watchers.splice(index, 1);