ngwr 11.0.0 → 11.2.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-splitter-testing.mjs","sources":["../../../projects/lib/splitter/testing/wr-splitter-harness.ts","../../../projects/lib/splitter/testing/ngwr-splitter-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, TestKey } from '@angular/cdk/testing';\n\nimport type { WrSplitterHarnessFilters, WrSplitterPaneSizes } from './interfaces';\n\n/** The four arrow keys, by the direction a user would say out loud. */\ntype Arrow = 'left' | 'right' | 'up' | 'down';\n\nconst ARROWS: Record<Arrow, TestKey> = {\n  left: TestKey.LEFT_ARROW,\n  right: TestKey.RIGHT_ARROW,\n  up: TestKey.UP_ARROW,\n  down: TestKey.DOWN_ARROW,\n};\n\n/**\n * Test harness for `<wr-splitter>` — two panes and the divider between them.\n *\n * **Everything here is the keyboard, and that is not a workaround.** The divider is\n * dragged with a pointer in a browser, but the drag reads\n * `getBoundingClientRect()` and turns a client coordinate into a percentage; jsdom\n * lays nothing out, so every rect is 0×0 and a synthetic drag writes `NaN` into the\n * position. The arrow keys reach the same state, are the accessible path anyway, and\n * are what the WAI-ARIA separator pattern is judged on.\n *\n * **Two words for the axis, and they are opposites.** The component's\n * `orientation=\"horizontal\"` means the panes sit side by side, which needs a\n * VERTICAL divider — so that is what `aria-orientation` says. {@link getOrientation}\n * answers the component's word and {@link getDividerOrientation} the divider's; both\n * are here because a spec that conflated them would look right and assert nothing.\n *\n * **Arrows follow the VISUAL axis.** Under `dir=\"rtl\"` the start pane is the one on\n * the right, so ArrowRight SHRINKS the position. {@link pressArrow} takes the key a\n * user presses rather than a semantic direction, which is the only way a spec can\n * pin that mirroring; {@link setPosition} walks with whichever key currently grows\n * the number, and reports where it landed.\n *\n * @example\n * ```ts\n * const splitter = await loader.getHarness(WrSplitterHarness);\n *\n * expect(await splitter.getPosition()).toBe(50);\n * await splitter.setPosition(70);\n * expect(await splitter.getPaneSizes()).toEqual({ start: 70, end: 30 });\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrSplitterHarness extends ComponentHarness {\n  static hostSelector = 'wr-splitter';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrSplitterHarnessFilters = {}): HarnessPredicate<WrSplitterHarness> {\n    return new HarnessPredicate(WrSplitterHarness, options)\n      .addOption(\n        'orientation',\n        options.orientation,\n        async (harness, orientation) => (await harness.getOrientation()) === orientation\n      )\n      .addOption('dividerLabel', options.dividerLabel, (harness, label) =>\n        HarnessPredicate.stringMatches(harness.getDividerLabel(), label)\n      )\n      .addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled);\n  }\n\n  private readonly divider = this.locatorFor('.wr-splitter__divider');\n\n  /**\n   * The splitter's own axis: `horizontal` when the panes sit side by side.\n   *\n   * Read from the host modifier rather than from `aria-orientation`, which says the\n   * opposite thing about the same layout — see {@link getDividerOrientation}.\n   */\n  async getOrientation(): Promise<'horizontal' | 'vertical'> {\n    return (await (await this.host()).hasClass('wr-splitter--vertical')) ? 'vertical' : 'horizontal';\n  }\n\n  /**\n   * What the divider announces — the INVERSE of {@link getOrientation}, and correct:\n   * a separator's orientation is the line it draws, not the axis it travels along.\n   */\n  async getDividerOrientation(): Promise<string | null> {\n    return (await this.divider()).getAttribute('aria-orientation');\n  }\n\n  /** The divider's position as a percentage, from `aria-valuenow`. */\n  async getPosition(): Promise<number> {\n    return this.numeric('aria-valuenow');\n  }\n\n  /** The lowest position the divider will accept, from `aria-valuemin`. */\n  async getMinPosition(): Promise<number> {\n    return this.numeric('aria-valuemin');\n  }\n\n  /** The highest position the divider will accept, from `aria-valuemax`. */\n  async getMaxPosition(): Promise<number> {\n    return this.numeric('aria-valuemax');\n  }\n\n  /**\n   * What each pane is asking for, in percent, from the `flex-basis` the component\n   * writes inline.\n   *\n   * This is the only evidence a spec without layout has that the panes followed the\n   * divider — a measured width is zero for both. They should always sum to 100:\n   * the end pane is `100 - position`, so a pair that does not is a component bug\n   * rather than a rounding artefact.\n   */\n  async getPaneSizes(): Promise<WrSplitterPaneSizes> {\n    const start = await this.locatorFor('.wr-splitter__pane--start')();\n    const end = await this.locatorFor('.wr-splitter__pane--end')();\n\n    return {\n      start: Number.parseFloat(await start.getCssValue('flex-basis')),\n      end: Number.parseFloat(await end.getCssValue('flex-basis')),\n    };\n  }\n\n  /** The start pane's projected text, trimmed. */\n  async getStartText(): Promise<string> {\n    return (await this.locatorFor('.wr-splitter__pane--start')()).text();\n  }\n\n  /** The end pane's projected text, trimmed. */\n  async getEndText(): Promise<string> {\n    return (await this.locatorFor('.wr-splitter__pane--end')()).text();\n  }\n\n  /** The divider's accessible name — a focusable separator is a widget and needs one. */\n  async getDividerLabel(): Promise<string | null> {\n    return (await this.divider()).getAttribute('aria-label');\n  }\n\n  /**\n   * Whether the splitter refuses to resize.\n   *\n   * From the divider's `aria-disabled`, which is the half a screen reader acts on.\n   * The component also drops the divider out of the tab order and paints a modifier\n   * on the host, and {@link isDividerFocusable} answers the first of those — worth\n   * asking separately, because a divider that is announced as disabled and still a\n   * tab stop is a control the keyboard can reach and not use.\n   */\n  async isDisabled(): Promise<boolean> {\n    return (await (await this.divider()).getAttribute('aria-disabled')) === 'true';\n  }\n\n  /** Whether the divider is a tab stop (`tabindex=\"0\"`). */\n  async isDividerFocusable(): Promise<boolean> {\n    return (await (await this.divider()).getAttribute('tabindex')) === '0';\n  }\n\n  /** Move keyboard focus to the divider. */\n  async focusDivider(): Promise<void> {\n    return (await this.divider()).focus();\n  }\n\n  /** Whether the divider currently holds focus. */\n  async isDividerFocused(): Promise<boolean> {\n    return (await this.divider()).isFocused();\n  }\n\n  /**\n   * Press one arrow key on the divider.\n   *\n   * The key rather than a direction, deliberately: which way the position moves is a\n   * function of the key AND the reading direction, and a `grow()` / `shrink()` pair\n   * would hide exactly the behaviour worth asserting. An arrow off the splitter's own\n   * axis does nothing at all — the horizontal splitter ignores Up and Down.\n   *\n   * `shift` is the coarse step: 10 instead of 1.\n   */\n  async pressArrow(arrow: Arrow, options: { shift?: boolean } = {}): Promise<void> {\n    const divider = await this.divider();\n    await (options.shift ? divider.sendKeys({ shift: true }, ARROWS[arrow]) : divider.sendKeys(ARROWS[arrow]));\n  }\n\n  /** Press Home — jumping to `minPosition`, whatever the reading direction. */\n  async pressHome(): Promise<void> {\n    return (await this.divider()).sendKeys(TestKey.HOME);\n  }\n\n  /** Press End — jumping to `maxPosition`. Semantic, so it never mirrors under RTL. */\n  async pressEnd(): Promise<void> {\n    return (await this.divider()).sendKeys(TestKey.END);\n  }\n\n  /**\n   * Walk the divider to a position with the keyboard, and assert it landed there.\n   *\n   * Ten-unit hops first, then single steps — the same two strides a user has. It\n   * walks rather than assigning, because assigning would prove the harness can write\n   * a signal and nothing about the component: the clamp, the min / max and the\n   * mirroring all live on this path.\n   *\n   * Throws rather than half-arriving. A target outside `[min, max]` is unreachable by\n   * construction, and so is any target the walk cannot hit exactly — the position is a\n   * float that a previous drag may have left mid-step, and whole-unit keys cannot get\n   * off a fractional offset. Both say so, with where it actually stopped.\n   */\n  async setPosition(target: number): Promise<void> {\n    const [min, max] = [await this.getMinPosition(), await this.getMaxPosition()];\n    if (target < min || target > max) {\n      throw new Error(\n        `WrSplitterHarness.setPosition(${target}): out of range — this splitter accepts ${min}–${max}. ` +\n          'The component clamps, so the walk would stop at the bound and never reach the number asked for.'\n      );\n    }\n\n    if (target === min) return this.pressHome();\n    if (target === max) return this.pressEnd();\n\n    await this.focusDivider();\n    // The block axis never mirrors, so only the horizontal splitter needs the probe.\n    const vertical = (await this.getOrientation()) === 'vertical';\n    const [grow, shrink]: [Arrow, Arrow] = vertical\n      ? ['down', 'up']\n      : (await this.growsWithRight())\n        ? ['right', 'left']\n        : ['left', 'right'];\n\n    for (const shift of [true, false]) {\n      const step = shift ? 10 : 1;\n      // Recomputed each pass: the coarse hops clamp at the bounds, so the remaining\n      // distance is not what simple arithmetic on the starting point would predict.\n      let delta = target - (await this.getPosition());\n\n      while (Math.abs(delta) >= step) {\n        const before = await this.getPosition();\n        await this.pressArrow(delta > 0 ? grow : shrink, { shift });\n        const now = await this.getPosition();\n\n        if (now === before) {\n          throw new Error(\n            `WrSplitterHarness.setPosition(${target}): the divider stopped moving at ${now}. A disabled ` +\n              'splitter ignores its arrows, which is the usual reason this happens.'\n          );\n        }\n        delta = target - now;\n      }\n    }\n\n    const landed = await this.getPosition();\n    if (landed !== target) {\n      throw new Error(\n        `WrSplitterHarness.setPosition(${target}): the walk stopped at ${landed}. The arrows move in whole ` +\n          'units, so a position left on a fraction by a drag cannot be walked onto a whole number.'\n      );\n    }\n  }\n\n  /**\n   * Whether ArrowRight is currently the key that GROWS the position — true in LTR,\n   * false in RTL, where the start pane is the one on the right.\n   *\n   * Probed rather than read off `Directionality`, which a harness has no access to:\n   * press, look, and put it back. At the top of the range a growing press is clamped\n   * and would prove nothing, so the probe presses the other way there instead. The\n   * undo is conditional — a press that moved nothing has nothing to undo, and undoing\n   * it anyway would move the divider by one in the direction the probe was testing.\n   */\n  private async growsWithRight(): Promise<boolean> {\n    const before = await this.getPosition();\n    const atCeiling = before >= (await this.getMaxPosition());\n    const [probe, undo]: [Arrow, Arrow] = atCeiling ? ['left', 'right'] : ['right', 'left'];\n\n    await this.pressArrow(probe);\n    const after = await this.getPosition();\n    if (after !== before) await this.pressArrow(undo);\n\n    return atCeiling ? after < before : after > before;\n  }\n\n  private async numeric(attribute: string): Promise<number> {\n    const raw = await (await this.divider()).getAttribute(attribute);\n    return raw === null ? Number.NaN : Number(raw);\n  }\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":";;AAAA;;;;;AAKG;AASH,MAAM,MAAM,GAA2B;IACrC,IAAI,EAAE,OAAO,CAAC,UAAU;IACxB,KAAK,EAAE,OAAO,CAAC,WAAW;IAC1B,EAAE,EAAE,OAAO,CAAC,QAAQ;IACpB,IAAI,EAAE,OAAO,CAAC,UAAU;CACzB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCG;AACG,MAAO,iBAAkB,SAAQ,gBAAgB,CAAA;AACrD,IAAA,OAAO,YAAY,GAAG,aAAa;;AAGnC,IAAA,OAAO,IAAI,CAAC,OAAA,GAAoC,EAAE,EAAA;AAChD,QAAA,OAAO,IAAI,gBAAgB,CAAC,iBAAiB,EAAE,OAAO;aACnD,SAAS,CACR,aAAa,EACb,OAAO,CAAC,WAAW,EACnB,OAAO,OAAO,EAAE,WAAW,KAAK,CAAC,MAAM,OAAO,CAAC,cAAc,EAAE,MAAM,WAAW;aAEjF,SAAS,CAAC,cAAc,EAAE,OAAO,CAAC,YAAY,EAAE,CAAC,OAAO,EAAE,KAAK,KAC9D,gBAAgB,CAAC,aAAa,CAAC,OAAO,CAAC,eAAe,EAAE,EAAE,KAAK,CAAC;aAEjE,SAAS,CAAC,UAAU,EAAE,OAAO,CAAC,QAAQ,EAAE,OAAO,OAAO,EAAE,QAAQ,KAAK,CAAC,MAAM,OAAO,CAAC,UAAU,EAAE,MAAM,QAAQ,CAAC;IACpH;AAEiB,IAAA,OAAO,GAAG,IAAI,CAAC,UAAU,CAAC,uBAAuB,CAAC;AAEnE;;;;;AAKG;AACH,IAAA,MAAM,cAAc,GAAA;QAClB,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,EAAE,QAAQ,CAAC,uBAAuB,CAAC,IAAI,UAAU,GAAG,YAAY;IAClG;AAEA;;;AAGG;AACH,IAAA,MAAM,qBAAqB,GAAA;AACzB,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,YAAY,CAAC,kBAAkB,CAAC;IAChE;;AAGA,IAAA,MAAM,WAAW,GAAA;AACf,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;IACtC;;AAGA,IAAA,MAAM,cAAc,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;IACtC;;AAGA,IAAA,MAAM,cAAc,GAAA;AAClB,QAAA,OAAO,IAAI,CAAC,OAAO,CAAC,eAAe,CAAC;IACtC;AAEA;;;;;;;;AAQG;AACH,IAAA,MAAM,YAAY,GAAA;QAChB,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,2BAA2B,CAAC,EAAE;QAClE,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,UAAU,CAAC,yBAAyB,CAAC,EAAE;QAE9D,OAAO;AACL,YAAA,KAAK,EAAE,MAAM,CAAC,UAAU,CAAC,MAAM,KAAK,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;AAC/D,YAAA,GAAG,EAAE,MAAM,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;SAC5D;IACH;;AAGA,IAAA,MAAM,YAAY,GAAA;AAChB,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,2BAA2B,CAAC,EAAE,EAAE,IAAI,EAAE;IACtE;;AAGA,IAAA,MAAM,UAAU,GAAA;AACd,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,UAAU,CAAC,yBAAyB,CAAC,EAAE,EAAE,IAAI,EAAE;IACpE;;AAGA,IAAA,MAAM,eAAe,GAAA;AACnB,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,YAAY,CAAC,YAAY,CAAC;IAC1D;AAEA;;;;;;;;AAQG;AACH,IAAA,MAAM,UAAU,GAAA;AACd,QAAA,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,YAAY,CAAC,eAAe,CAAC,MAAM,MAAM;IAChF;;AAGA,IAAA,MAAM,kBAAkB,GAAA;AACtB,QAAA,OAAO,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,YAAY,CAAC,UAAU,CAAC,MAAM,GAAG;IACxE;;AAGA,IAAA,MAAM,YAAY,GAAA;QAChB,OAAO,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,KAAK,EAAE;IACvC;;AAGA,IAAA,MAAM,gBAAgB,GAAA;QACpB,OAAO,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,SAAS,EAAE;IAC3C;AAEA;;;;;;;;;AASG;AACH,IAAA,MAAM,UAAU,CAAC,KAAY,EAAE,UAA+B,EAAE,EAAA;AAC9D,QAAA,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,OAAO,EAAE;AACpC,QAAA,OAAO,OAAO,CAAC,KAAK,GAAG,OAAO,CAAC,QAAQ,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,EAAE,MAAM,CAAC,KAAK,CAAC,CAAC,GAAG,OAAO,CAAC,QAAQ,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC;IAC5G;;AAGA,IAAA,MAAM,SAAS,GAAA;AACb,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC;IACtD;;AAGA,IAAA,MAAM,QAAQ,GAAA;AACZ,QAAA,OAAO,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,QAAQ,CAAC,OAAO,CAAC,GAAG,CAAC;IACrD;AAEA;;;;;;;;;;;;AAYG;IACH,MAAM,WAAW,CAAC,MAAc,EAAA;AAC9B,QAAA,MAAM,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE,EAAE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QAC7E,IAAI,MAAM,GAAG,GAAG,IAAI,MAAM,GAAG,GAAG,EAAE;YAChC,MAAM,IAAI,KAAK,CACb,CAAA,8BAAA,EAAiC,MAAM,CAAA,wCAAA,EAA2C,GAAG,CAAA,CAAA,EAAI,GAAG,CAAA,EAAA,CAAI;AAC9F,gBAAA,iGAAiG,CACpG;QACH;QAEA,IAAI,MAAM,KAAK,GAAG;AAAE,YAAA,OAAO,IAAI,CAAC,SAAS,EAAE;QAC3C,IAAI,MAAM,KAAK,GAAG;AAAE,YAAA,OAAO,IAAI,CAAC,QAAQ,EAAE;AAE1C,QAAA,MAAM,IAAI,CAAC,YAAY,EAAE;;QAEzB,MAAM,QAAQ,GAAG,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE,MAAM,UAAU;AAC7D,QAAA,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,GAAmB;AACrC,cAAE,CAAC,MAAM,EAAE,IAAI;AACf,cAAE,CAAC,MAAM,IAAI,CAAC,cAAc,EAAE;AAC5B,kBAAE,CAAC,OAAO,EAAE,MAAM;AAClB,kBAAE,CAAC,MAAM,EAAE,OAAO,CAAC;QAEvB,KAAK,MAAM,KAAK,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE;YACjC,MAAM,IAAI,GAAG,KAAK,GAAG,EAAE,GAAG,CAAC;;;YAG3B,IAAI,KAAK,GAAG,MAAM,IAAI,MAAM,IAAI,CAAC,WAAW,EAAE,CAAC;YAE/C,OAAO,IAAI,CAAC,GAAG,CAAC,KAAK,CAAC,IAAI,IAAI,EAAE;AAC9B,gBAAA,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE;gBACvC,MAAM,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,CAAC,GAAG,IAAI,GAAG,MAAM,EAAE,EAAE,KAAK,EAAE,CAAC;AAC3D,gBAAA,MAAM,GAAG,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE;AAEpC,gBAAA,IAAI,GAAG,KAAK,MAAM,EAAE;AAClB,oBAAA,MAAM,IAAI,KAAK,CACb,iCAAiC,MAAM,CAAA,iCAAA,EAAoC,GAAG,CAAA,aAAA,CAAe;AAC3F,wBAAA,sEAAsE,CACzE;gBACH;AACA,gBAAA,KAAK,GAAG,MAAM,GAAG,GAAG;YACtB;QACF;AAEA,QAAA,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE;AACvC,QAAA,IAAI,MAAM,KAAK,MAAM,EAAE;AACrB,YAAA,MAAM,IAAI,KAAK,CACb,iCAAiC,MAAM,CAAA,uBAAA,EAA0B,MAAM,CAAA,2BAAA,CAA6B;AAClG,gBAAA,yFAAyF,CAC5F;QACH;IACF;AAEA;;;;;;;;;AASG;AACK,IAAA,MAAM,cAAc,GAAA;AAC1B,QAAA,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE;QACvC,MAAM,SAAS,GAAG,MAAM,KAAK,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;QACzD,MAAM,CAAC,KAAK,EAAE,IAAI,CAAC,GAAmB,SAAS,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,GAAG,CAAC,OAAO,EAAE,MAAM,CAAC;AAEvF,QAAA,MAAM,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;AAC5B,QAAA,MAAM,KAAK,GAAG,MAAM,IAAI,CAAC,WAAW,EAAE;QACtC,IAAI,KAAK,KAAK,MAAM;AAAE,YAAA,MAAM,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;AAEjD,QAAA,OAAO,SAAS,GAAG,KAAK,GAAG,MAAM,GAAG,KAAK,GAAG,MAAM;IACpD;IAEQ,MAAM,OAAO,CAAC,SAAiB,EAAA;AACrC,QAAA,MAAM,GAAG,GAAG,MAAM,CAAC,MAAM,IAAI,CAAC,OAAO,EAAE,EAAE,YAAY,CAAC,SAAS,CAAC;AAChE,QAAA,OAAO,GAAG,KAAK,IAAI,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,GAAG,CAAC;IAChD;;;AC1RF;;AAEG;;;;"}

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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"}