ngwr 10.2.0 → 11.0.0

package/fesm2022/ngwr-collapse-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
+ */
+/**
+ * Test harness for one `<wr-collapse>` — a disclosure: a header button, and the region
+ * it opens. {@link WrCollapseGroupHarness} is the container several of them sit in.
+ *
+ * Open and closed are read from the header's `aria-expanded`, never from the panel's
+ * size, and that is not merely a jsdom workaround. The body animates through
+ * `grid-template-rows: 0fr → 1fr`, so a measured box answers with whatever frame the
+ * transition happens to be on; a unit test has no layout at all, which makes every box
+ * 0×0 and every such answer wrong in the same direction. The attribute is also the only
+ * thing a screen-reader user gets — a panel that slides open without flipping it is
+ * closed as far as they are concerned.
+ *
+ * The body stays in the DOM while the panel is closed. It has to: there would be no
+ * height to animate otherwise. So its text is READABLE from a spec long before it is
+ * visible on screen, which is why {@link getContentText} refuses to answer for a closed
+ * panel instead of handing back invisible text, and why {@link isContentHidden} exists
+ * to assert that a closed panel really is out of reach.
+ *
+ * The region itself is a plain `<div>` — the component gives it no `role="region"` — so
+ * `aria-expanded` plus `aria-controls` is the whole of the wiring, and
+ * {@link isRegionBound} is how a spec checks it still points at this panel's own body.
+ *
+ * @example
+ * ```ts
+ * const loader = TestbedHarnessEnvironment.loader(fixture);
+ * const shipping = await loader.getHarness(WrCollapseHarness.with({ title: 'Shipping' }));
+ *
+ * await shipping.open();
+ * expect(await shipping.getContentText()).toContain('Ships Monday');
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrCollapseHarness extends ComponentHarness {
+    static hostSelector = 'wr-collapse';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrCollapseHarness, options)
+            .addOption('title', options.title, (harness, title) => HarnessPredicate.stringMatches(harness.getTitle(), title))
+            .addOption('open', options.open, async (harness, open) => (await harness.isOpen()) === open)
+            .addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled);
+    }
+    header = this.locatorFor('button.wr-collapse__header');
+    body = this.locatorFor('.wr-collapse__body');
+    /**
+     * The header text, trimmed.
+     *
+     * Read from `.wr-collapse__title` rather than from the header button. Reading the
+     * button would return the same string today — the chevron beside the title is an
+     * `<svg>`, and an `<svg>` contributes no text — but the title element is the thing that
+     * holds the name, so an icon that ever grows a `<text>` node or a label, or a badge
+     * added next to the title, cannot leak into it.
+     */
+    async getTitle() {
+        return (await this.locatorFor('.wr-collapse__title')()).text();
+    }
+    /**
+     * Whether the panel is open, from the header's `aria-expanded`.
+     *
+     * The `wr-collapse--open` modifier on the host is equally public and says the same
+     * thing today, but the attribute is the one a screen reader acts on: a panel that
+     * looks open while announcing `false` is the bug worth catching, and reading the class
+     * would agree with the animation and miss it.
+     */
+    async isOpen() {
+        return (await (await this.header()).getAttribute('aria-expanded')) === 'true';
+    }
+    /**
+     * Whether the panel refuses interaction.
+     *
+     * From the header's own `disabled` property — the thing that actually turns a click
+     * away, and what the CDK consults before dispatching one — rather than from the
+     * `wr-collapse--disabled` modifier the host also carries. Both are public, but the
+     * class is styling: a panel could lose it and still refuse every click, and what a
+     * spec wants to know is whether the control is inert.
+     */
+    async isDisabled() {
+        return (await this.header()).getProperty('disabled');
+    }
+    /**
+     * The id the header's `aria-controls` names, or `null` when it names nothing.
+     *
+     * Per-instance and generated, so a spec cannot predict it — what it can do is check
+     * that two panels do not share one, and {@link isRegionBound} does the rest.
+     */
+    async getRegionId() {
+        return (await this.header()).getAttribute('aria-controls');
+    }
+    /**
+     * Whether the header points at THIS panel's body, and at nothing else on the page.
+     *
+     * Both halves matter, and neither is provable from the header alone. The id is
+     * resolved inside the host first, so a header naming a SIBLING panel's body — which
+     * resolves perfectly well from the document and would look correctly wired — fails
+     * here. Then it is counted across the document, because two bodies answering to one
+     * id hand every reference to whichever comes first, and the second panel's region
+     * becomes unreachable to anything that follows the reference.
+     */
+    async isRegionBound() {
+        const id = await this.getRegionId();
+        if (id === null)
+            return false;
+        const own = await this.locatorForOptional(`.wr-collapse__body#${id}`)();
+        if (!own)
+            return false;
+        const everywhere = await this.documentRootLocatorFactory().locatorForAll(`#${id}`)();
+        return everywhere.length === 1;
+    }
+    /**
+     * Whether the region is hidden from assistive tech AND from the keyboard.
+     *
+     * Two attributes, because a closed panel needs both and they cover different people:
+     * `aria-hidden` keeps the content out of the screen reader's document, `inert` keeps
+     * Tab from landing on a link inside a panel nobody can see. The body is never removed
+     * from the DOM — the height animation needs it — so these are the only thing standing
+     * between a collapsed panel and a keyboard user, and losing either is invisible on
+     * screen.
+     *
+     * They are asserted together on purpose: this answers "is the closed content actually
+     * out of reach", and half of it is not.
+     */
+    async isContentHidden() {
+        const body = await this.body();
+        const hiddenFromAt = (await body.getAttribute('aria-hidden')) === 'true';
+        const inert = (await body.getAttribute('inert')) !== null;
+        return hiddenFromAt && inert;
+    }
+    /**
+     * The text of an OPEN panel's region, trimmed.
+     *
+     * Throws while the panel is closed rather than answering, because the body is still in
+     * the DOM and the text would come back exactly as it does when open — a spec asserting
+     * it would be pinning content the user cannot see, and would keep passing if the panel
+     * stopped opening at all.
+     */
+    async getContentText() {
+        if (!(await this.isOpen())) {
+            throw new Error(`WrCollapseHarness.getContentText(): "${await this.getTitle()}" is closed. Its content stays in the ` +
+                'DOM while collapsed — the body has to be there for the height to animate — so reading it now would ' +
+                'assert text nobody can see. Open the panel first, or ask isContentHidden().');
+        }
+        return (await this.locatorFor('.wr-collapse__inner')()).text();
+    }
+    /** Open the panel. An already-open one is left alone; a disabled one throws. */
+    async open() {
+        if (await this.isOpen())
+            return;
+        await this.toggle();
+        if (!(await this.isOpen())) {
+            throw new Error(`WrCollapseHarness.open(): "${await this.getTitle()}" did not open. A disabled panel refuses its own ` +
+                'header — the button carries `disabled`, and the component checks it again before toggling.');
+        }
+    }
+    /** Close the panel. An already-closed one is left alone; a disabled one throws. */
+    async close() {
+        if (!(await this.isOpen()))
+            return;
+        await this.toggle();
+        if (await this.isOpen()) {
+            throw new Error(`WrCollapseHarness.close(): "${await this.getTitle()}" did not close. A disabled panel that was opened ` +
+                'through `[open]` cannot be closed from the page at all: the toggle refuses while `disabled` is set, ' +
+                'whichever direction the click would have gone.');
+        }
+    }
+    /**
+     * Click the header — the panel's entire interactive surface.
+     *
+     * A click rather than Enter / Space, and nothing is lost by it: the header is a native
+     * `<button>`, so a real keyboard activation is the BROWSER synthesising a click from
+     * the key press, and jsdom synthesises none. The click is dispatched onto the header
+     * itself, so it needs no coordinate and cannot miss in a test that has no layout.
+     *
+     * A disabled panel ignores this and stays as it was, twice over: the CDK withholds the
+     * `click` from an element carrying `disabled`, and the component checks `disabled`
+     * again inside its own toggle. Assert rather than assume, or reach for {@link open} /
+     * {@link close}, which say so.
+     */
+    async toggle() {
+        return (await this.header()).click();
+    }
+    /**
+     * Move keyboard focus to the header — the only focusable element the component itself
+     * renders. Projected content can of course hold its own (which is why a closed panel is
+     * `inert`), but that belongs to the consumer, not to this harness.
+     */
+    async focus() {
+        return (await this.header()).focus();
+    }
+    /** Whether the header currently holds focus. */
+    async isFocused() {
+        return (await this.header()).isFocused();
+    }
+}
+
+/**
+ * @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-collapse-group>` and `<wr-accordion>` — the container a set of
+ * {@link WrCollapseHarness} panels sits in, matched in both of its element shapes.
+ *
+ * There is deliberately no `isAccordion()`, and the reason is worth knowing before a
+ * spec goes looking for one: single-open behaviour is not written down anywhere on the
+ * page. `<wr-accordion>` carries the marker class `wr-collapse-group--accordion`, but
+ * `<wr-collapse-group [accordion]="true">` enforces exactly the same rule and carries
+ * nothing — a bound input reaches the component without touching the DOM, and even the
+ * literal `accordion` attribute survives only because Angular leaves a static attribute
+ * alone. So the class answers "which element did the template use", not "does this group
+ * close siblings", and a harness reporting it would call the group form false. Assert the
+ * BEHAVIOUR instead: open two panels and read {@link getOpenTitles} — the assertion that
+ * would catch a broken accordion anyway.
+ *
+ * A collapse group is also not a composite widget. Every header is a native `<button>`
+ * in the normal tab order, with no roving `tabindex` and no arrow-key navigation (the
+ * APG lists both as optional for an accordion), so there is no "active" panel to tell
+ * apart from the open one — {@link getFocusedTitle} is the only cursor there is.
+ *
+ * @example
+ * ```ts
+ * const settings = await loader.getHarness(WrCollapseGroupHarness.with({ panelTitle: 'Profile' }));
+ *
+ * await settings.openPanel({ title: 'Security' });
+ * expect(await settings.getOpenTitles()).toEqual(['Security']);
+ * ```
+ *
+ * @see https://ngwr.dev/guides/testing
+ */
+class WrCollapseGroupHarness extends ComponentHarness {
+    /** Both shapes the container ships in: the plain group, and the always-accordion one. */
+    static hostSelector = 'wr-collapse-group, wr-accordion';
+    /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */
+    static with(options = {}) {
+        return new HarnessPredicate(WrCollapseGroupHarness, options)
+            .addOption('panelTitle', options.panelTitle, async (harness, title) => {
+            for (const panel of await harness.getPanelTitles()) {
+                if (await HarnessPredicate.stringMatches(panel, title))
+                    return true;
+            }
+            return false;
+        })
+            .addOption('openPanelTitle', options.openPanelTitle, async (harness, title) => {
+            for (const open of await harness.getOpenTitles()) {
+                if (await HarnessPredicate.stringMatches(open, title))
+                    return true;
+            }
+            return false;
+        });
+    }
+    /**
+     * The group's panels, in DOM order.
+     *
+     * Every `<wr-collapse>` inside the host, which includes one nested in another panel's
+     * content and every panel of a nested group — the group scopes no more tightly than
+     * the DOM does, and a nested accordion's children are still descendants of this one.
+     */
+    async getPanels(filters = {}) {
+        return this.locatorForAll(WrCollapseHarness.with(filters))();
+    }
+    /** The header text of every panel, in DOM order. */
+    async getPanelTitles() {
+        const panels = await this.getPanels();
+        return Promise.all(panels.map(panel => panel.getTitle()));
+    }
+    /** The first panel matching the filters, or a failure naming the panels that exist. */
+    async getPanel(filters) {
+        const [panel] = await this.getPanels(filters);
+        if (!panel) {
+            throw new Error(`WrCollapseGroupHarness.getPanel(): no panel matched ${JSON.stringify(filters)}. This group holds: ` +
+                `${(await this.getPanelTitles()).join(', ')}.`);
+        }
+        return panel;
+    }
+    /**
+     * The panel at a 0-based position in DOM order — the other half of "by text or by
+     * index", and the only way to address a panel whose title is not unique.
+     *
+     * Throws for an index past the end rather than resolving to nothing, and says how many
+     * panels there are: an out-of-range index is a mistake in the spec, and a `undefined`
+     * handed back would surface three lines later as a failure about something else.
+     */
+    async getPanelAt(index) {
+        const panels = await this.getPanels();
+        const panel = panels[index];
+        if (!panel) {
+            throw new Error(`WrCollapseGroupHarness.getPanelAt(): index ${index} is out of range — this group holds ` +
+                `${panels.length} panel(s), so the last index is ${panels.length - 1}.`);
+        }
+        return panel;
+    }
+    /** The panels that are open, in DOM order. In accordion mode there is at most one. */
+    async getOpenPanels() {
+        return this.getPanels({ open: true });
+    }
+    /**
+     * The header text of every open panel, in DOM order.
+     *
+     * The assertion an accordion is worth pinning with: opening a second panel has to leave
+     * this a list of ONE, and it reads the state from each header's `aria-expanded`, so a
+     * sibling that collapsed on screen while still announcing itself open fails here.
+     */
+    async getOpenTitles() {
+        const open = await this.getOpenPanels();
+        return Promise.all(open.map(panel => panel.getTitle()));
+    }
+    /**
+     * Open the first panel matching the filters.
+     *
+     * In accordion mode this is also what CLOSES the siblings — the group is told by the
+     * panel that opened, not by the click — so a spec that opens two panels in a row is
+     * asserting the mode, and {@link getOpenTitles} is where the answer shows up. Throws
+     * when nothing matched, and again when the panel refused to open (it is disabled).
+     */
+    async openPanel(filters) {
+        await (await this.getPanel(filters)).open();
+    }
+    /** Close the first panel matching the filters. */
+    async closePanel(filters) {
+        await (await this.getPanel(filters)).close();
+    }
+    /**
+     * Close every open panel.
+     *
+     * The open panels are resolved first and then closed one at a time. Every click a
+     * harness makes already awaits its own change detection, so closing them concurrently
+     * would work too — this reads in the order a user would click, and keeps each failure
+     * attributable to the panel that caused it. A disabled panel that was opened through
+     * `[open]` cannot be closed from the page and throws — the same failure
+     * {@link WrCollapseHarness.close} reports, for the same reason.
+     */
+    async closeAll() {
+        for (const panel of await this.getOpenPanels()) {
+            await panel.close();
+        }
+    }
+    /**
+     * The header text of the panel whose header holds focus, or `null` when focus is
+     * elsewhere.
+     *
+     * Every header is its own tab stop here, so this reports where focus actually IS
+     * rather than where the group would send it — there is no roving tab stop to diverge
+     * from.
+     */
+    async getFocusedTitle() {
+        for (const panel of await this.getPanels()) {
+            if (await panel.isFocused())
+                return panel.getTitle();
+        }
+        return null;
+    }
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WrCollapseGroupHarness, WrCollapseHarness };
+//# sourceMappingURL=ngwr-collapse-testing.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ngwr-collapse-testing.mjs","sources":["../../../projects/lib/collapse/testing/wr-collapse-harness.ts","../../../projects/lib/collapse/testing/wr-collapse-group-harness.ts","../../../projects/lib/collapse/testing/ngwr-collapse-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 { WrCollapseHarnessFilters } from './interfaces';\n\n/**\n * Test harness for one `<wr-collapse>` — a disclosure: a header button, and the region\n * it opens. {@link WrCollapseGroupHarness} is the container several of them sit in.\n *\n * Open and closed are read from the header's `aria-expanded`, never from the panel's\n * size, and that is not merely a jsdom workaround. The body animates through\n * `grid-template-rows: 0fr → 1fr`, so a measured box answers with whatever frame the\n * transition happens to be on; a unit test has no layout at all, which makes every box\n * 0×0 and every such answer wrong in the same direction. The attribute is also the only\n * thing a screen-reader user gets — a panel that slides open without flipping it is\n * closed as far as they are concerned.\n *\n * The body stays in the DOM while the panel is closed. It has to: there would be no\n * height to animate otherwise. So its text is READABLE from a spec long before it is\n * visible on screen, which is why {@link getContentText} refuses to answer for a closed\n * panel instead of handing back invisible text, and why {@link isContentHidden} exists\n * to assert that a closed panel really is out of reach.\n *\n * The region itself is a plain `<div>` — the component gives it no `role=\"region\"` — so\n * `aria-expanded` plus `aria-controls` is the whole of the wiring, and\n * {@link isRegionBound} is how a spec checks it still points at this panel's own body.\n *\n * @example\n * ```ts\n * const loader = TestbedHarnessEnvironment.loader(fixture);\n * const shipping = await loader.getHarness(WrCollapseHarness.with({ title: 'Shipping' }));\n *\n * await shipping.open();\n * expect(await shipping.getContentText()).toContain('Ships Monday');\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrCollapseHarness extends ComponentHarness {\n  static hostSelector = 'wr-collapse';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrCollapseHarnessFilters = {}): HarnessPredicate<WrCollapseHarness> {\n    return new HarnessPredicate(WrCollapseHarness, options)\n      .addOption('title', options.title, (harness, title) => HarnessPredicate.stringMatches(harness.getTitle(), title))\n      .addOption('open', options.open, async (harness, open) => (await harness.isOpen()) === open)\n      .addOption('disabled', options.disabled, async (harness, disabled) => (await harness.isDisabled()) === disabled);\n  }\n\n  private readonly header = this.locatorFor('button.wr-collapse__header');\n  private readonly body = this.locatorFor('.wr-collapse__body');\n\n  /**\n   * The header text, trimmed.\n   *\n   * Read from `.wr-collapse__title` rather than from the header button. Reading the\n   * button would return the same string today — the chevron beside the title is an\n   * `<svg>`, and an `<svg>` contributes no text — but the title element is the thing that\n   * holds the name, so an icon that ever grows a `<text>` node or a label, or a badge\n   * added next to the title, cannot leak into it.\n   */\n  async getTitle(): Promise<string> {\n    return (await this.locatorFor('.wr-collapse__title')()).text();\n  }\n\n  /**\n   * Whether the panel is open, from the header's `aria-expanded`.\n   *\n   * The `wr-collapse--open` modifier on the host is equally public and says the same\n   * thing today, but the attribute is the one a screen reader acts on: a panel that\n   * looks open while announcing `false` is the bug worth catching, and reading the class\n   * would agree with the animation and miss it.\n   */\n  async isOpen(): Promise<boolean> {\n    return (await (await this.header()).getAttribute('aria-expanded')) === 'true';\n  }\n\n  /**\n   * Whether the panel refuses interaction.\n   *\n   * From the header's own `disabled` property — the thing that actually turns a click\n   * away, and what the CDK consults before dispatching one — rather than from the\n   * `wr-collapse--disabled` modifier the host also carries. Both are public, but the\n   * class is styling: a panel could lose it and still refuse every click, and what a\n   * spec wants to know is whether the control is inert.\n   */\n  async isDisabled(): Promise<boolean> {\n    return (await this.header()).getProperty<boolean>('disabled');\n  }\n\n  /**\n   * The id the header's `aria-controls` names, or `null` when it names nothing.\n   *\n   * Per-instance and generated, so a spec cannot predict it — what it can do is check\n   * that two panels do not share one, and {@link isRegionBound} does the rest.\n   */\n  async getRegionId(): Promise<string | null> {\n    return (await this.header()).getAttribute('aria-controls');\n  }\n\n  /**\n   * Whether the header points at THIS panel's body, and at nothing else on the page.\n   *\n   * Both halves matter, and neither is provable from the header alone. The id is\n   * resolved inside the host first, so a header naming a SIBLING panel's body — which\n   * resolves perfectly well from the document and would look correctly wired — fails\n   * here. Then it is counted across the document, because two bodies answering to one\n   * id hand every reference to whichever comes first, and the second panel's region\n   * becomes unreachable to anything that follows the reference.\n   */\n  async isRegionBound(): Promise<boolean> {\n    const id = await this.getRegionId();\n    if (id === null) return false;\n\n    const own = await this.locatorForOptional(`.wr-collapse__body#${id}`)();\n    if (!own) return false;\n\n    const everywhere = await this.documentRootLocatorFactory().locatorForAll(`#${id}`)();\n    return everywhere.length === 1;\n  }\n\n  /**\n   * Whether the region is hidden from assistive tech AND from the keyboard.\n   *\n   * Two attributes, because a closed panel needs both and they cover different people:\n   * `aria-hidden` keeps the content out of the screen reader's document, `inert` keeps\n   * Tab from landing on a link inside a panel nobody can see. The body is never removed\n   * from the DOM — the height animation needs it — so these are the only thing standing\n   * between a collapsed panel and a keyboard user, and losing either is invisible on\n   * screen.\n   *\n   * They are asserted together on purpose: this answers \"is the closed content actually\n   * out of reach\", and half of it is not.\n   */\n  async isContentHidden(): Promise<boolean> {\n    const body = await this.body();\n    const hiddenFromAt = (await body.getAttribute('aria-hidden')) === 'true';\n    const inert = (await body.getAttribute('inert')) !== null;\n    return hiddenFromAt && inert;\n  }\n\n  /**\n   * The text of an OPEN panel's region, trimmed.\n   *\n   * Throws while the panel is closed rather than answering, because the body is still in\n   * the DOM and the text would come back exactly as it does when open — a spec asserting\n   * it would be pinning content the user cannot see, and would keep passing if the panel\n   * stopped opening at all.\n   */\n  async getContentText(): Promise<string> {\n    if (!(await this.isOpen())) {\n      throw new Error(\n        `WrCollapseHarness.getContentText(): \"${await this.getTitle()}\" is closed. Its content stays in the ` +\n          'DOM while collapsed — the body has to be there for the height to animate — so reading it now would ' +\n          'assert text nobody can see. Open the panel first, or ask isContentHidden().'\n      );\n    }\n    return (await this.locatorFor('.wr-collapse__inner')()).text();\n  }\n\n  /** Open the panel. An already-open one is left alone; a disabled one throws. */\n  async open(): Promise<void> {\n    if (await this.isOpen()) return;\n    await this.toggle();\n\n    if (!(await this.isOpen())) {\n      throw new Error(\n        `WrCollapseHarness.open(): \"${await this.getTitle()}\" did not open. A disabled panel refuses its own ` +\n          'header — the button carries `disabled`, and the component checks it again before toggling.'\n      );\n    }\n  }\n\n  /** Close the panel. An already-closed one is left alone; a disabled one throws. */\n  async close(): Promise<void> {\n    if (!(await this.isOpen())) return;\n    await this.toggle();\n\n    if (await this.isOpen()) {\n      throw new Error(\n        `WrCollapseHarness.close(): \"${await this.getTitle()}\" did not close. A disabled panel that was opened ` +\n          'through `[open]` cannot be closed from the page at all: the toggle refuses while `disabled` is set, ' +\n          'whichever direction the click would have gone.'\n      );\n    }\n  }\n\n  /**\n   * Click the header — the panel's entire interactive surface.\n   *\n   * A click rather than Enter / Space, and nothing is lost by it: the header is a native\n   * `<button>`, so a real keyboard activation is the BROWSER synthesising a click from\n   * the key press, and jsdom synthesises none. The click is dispatched onto the header\n   * itself, so it needs no coordinate and cannot miss in a test that has no layout.\n   *\n   * A disabled panel ignores this and stays as it was, twice over: the CDK withholds the\n   * `click` from an element carrying `disabled`, and the component checks `disabled`\n   * again inside its own toggle. Assert rather than assume, or reach for {@link open} /\n   * {@link close}, which say so.\n   */\n  async toggle(): Promise<void> {\n    return (await this.header()).click();\n  }\n\n  /**\n   * Move keyboard focus to the header — the only focusable element the component itself\n   * renders. Projected content can of course hold its own (which is why a closed panel is\n   * `inert`), but that belongs to the consumer, not to this harness.\n   */\n  async focus(): Promise<void> {\n    return (await this.header()).focus();\n  }\n\n  /** Whether the header currently holds focus. */\n  async isFocused(): Promise<boolean> {\n    return (await this.header()).isFocused();\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 { WrCollapseGroupHarnessFilters, WrCollapseHarnessFilters } from './interfaces';\nimport { WrCollapseHarness } from './wr-collapse-harness';\n\n/**\n * Test harness for `<wr-collapse-group>` and `<wr-accordion>` — the container a set of\n * {@link WrCollapseHarness} panels sits in, matched in both of its element shapes.\n *\n * There is deliberately no `isAccordion()`, and the reason is worth knowing before a\n * spec goes looking for one: single-open behaviour is not written down anywhere on the\n * page. `<wr-accordion>` carries the marker class `wr-collapse-group--accordion`, but\n * `<wr-collapse-group [accordion]=\"true\">` enforces exactly the same rule and carries\n * nothing — a bound input reaches the component without touching the DOM, and even the\n * literal `accordion` attribute survives only because Angular leaves a static attribute\n * alone. So the class answers \"which element did the template use\", not \"does this group\n * close siblings\", and a harness reporting it would call the group form false. Assert the\n * BEHAVIOUR instead: open two panels and read {@link getOpenTitles} — the assertion that\n * would catch a broken accordion anyway.\n *\n * A collapse group is also not a composite widget. Every header is a native `<button>`\n * in the normal tab order, with no roving `tabindex` and no arrow-key navigation (the\n * APG lists both as optional for an accordion), so there is no \"active\" panel to tell\n * apart from the open one — {@link getFocusedTitle} is the only cursor there is.\n *\n * @example\n * ```ts\n * const settings = await loader.getHarness(WrCollapseGroupHarness.with({ panelTitle: 'Profile' }));\n *\n * await settings.openPanel({ title: 'Security' });\n * expect(await settings.getOpenTitles()).toEqual(['Security']);\n * ```\n *\n * @see https://ngwr.dev/guides/testing\n */\nexport class WrCollapseGroupHarness extends ComponentHarness {\n  /** Both shapes the container ships in: the plain group, and the always-accordion one. */\n  static hostSelector = 'wr-collapse-group, wr-accordion';\n\n  /** Build a predicate that narrows the query — pass to `getHarness` / `getAllHarnesses`. */\n  static with(options: WrCollapseGroupHarnessFilters = {}): HarnessPredicate<WrCollapseGroupHarness> {\n    return new HarnessPredicate(WrCollapseGroupHarness, options)\n      .addOption('panelTitle', options.panelTitle, async (harness, title) => {\n        for (const panel of await harness.getPanelTitles()) {\n          if (await HarnessPredicate.stringMatches(panel, title)) return true;\n        }\n        return false;\n      })\n      .addOption('openPanelTitle', options.openPanelTitle, async (harness, title) => {\n        for (const open of await harness.getOpenTitles()) {\n          if (await HarnessPredicate.stringMatches(open, title)) return true;\n        }\n        return false;\n      });\n  }\n\n  /**\n   * The group's panels, in DOM order.\n   *\n   * Every `<wr-collapse>` inside the host, which includes one nested in another panel's\n   * content and every panel of a nested group — the group scopes no more tightly than\n   * the DOM does, and a nested accordion's children are still descendants of this one.\n   */\n  async getPanels(filters: WrCollapseHarnessFilters = {}): Promise<WrCollapseHarness[]> {\n    return this.locatorForAll(WrCollapseHarness.with(filters))();\n  }\n\n  /** The header text of every panel, in DOM order. */\n  async getPanelTitles(): Promise<string[]> {\n    const panels = await this.getPanels();\n    return Promise.all(panels.map(panel => panel.getTitle()));\n  }\n\n  /** The first panel matching the filters, or a failure naming the panels that exist. */\n  async getPanel(filters: WrCollapseHarnessFilters): Promise<WrCollapseHarness> {\n    const [panel] = await this.getPanels(filters);\n    if (!panel) {\n      throw new Error(\n        `WrCollapseGroupHarness.getPanel(): no panel matched ${JSON.stringify(filters)}. This group holds: ` +\n          `${(await this.getPanelTitles()).join(', ')}.`\n      );\n    }\n    return panel;\n  }\n\n  /**\n   * The panel at a 0-based position in DOM order — the other half of \"by text or by\n   * index\", and the only way to address a panel whose title is not unique.\n   *\n   * Throws for an index past the end rather than resolving to nothing, and says how many\n   * panels there are: an out-of-range index is a mistake in the spec, and a `undefined`\n   * handed back would surface three lines later as a failure about something else.\n   */\n  async getPanelAt(index: number): Promise<WrCollapseHarness> {\n    const panels = await this.getPanels();\n    const panel = panels[index];\n    if (!panel) {\n      throw new Error(\n        `WrCollapseGroupHarness.getPanelAt(): index ${index} is out of range — this group holds ` +\n          `${panels.length} panel(s), so the last index is ${panels.length - 1}.`\n      );\n    }\n    return panel;\n  }\n\n  /** The panels that are open, in DOM order. In accordion mode there is at most one. */\n  async getOpenPanels(): Promise<WrCollapseHarness[]> {\n    return this.getPanels({ open: true });\n  }\n\n  /**\n   * The header text of every open panel, in DOM order.\n   *\n   * The assertion an accordion is worth pinning with: opening a second panel has to leave\n   * this a list of ONE, and it reads the state from each header's `aria-expanded`, so a\n   * sibling that collapsed on screen while still announcing itself open fails here.\n   */\n  async getOpenTitles(): Promise<string[]> {\n    const open = await this.getOpenPanels();\n    return Promise.all(open.map(panel => panel.getTitle()));\n  }\n\n  /**\n   * Open the first panel matching the filters.\n   *\n   * In accordion mode this is also what CLOSES the siblings — the group is told by the\n   * panel that opened, not by the click — so a spec that opens two panels in a row is\n   * asserting the mode, and {@link getOpenTitles} is where the answer shows up. Throws\n   * when nothing matched, and again when the panel refused to open (it is disabled).\n   */\n  async openPanel(filters: WrCollapseHarnessFilters): Promise<void> {\n    await (await this.getPanel(filters)).open();\n  }\n\n  /** Close the first panel matching the filters. */\n  async closePanel(filters: WrCollapseHarnessFilters): Promise<void> {\n    await (await this.getPanel(filters)).close();\n  }\n\n  /**\n   * Close every open panel.\n   *\n   * The open panels are resolved first and then closed one at a time. Every click a\n   * harness makes already awaits its own change detection, so closing them concurrently\n   * would work too — this reads in the order a user would click, and keeps each failure\n   * attributable to the panel that caused it. A disabled panel that was opened through\n   * `[open]` cannot be closed from the page and throws — the same failure\n   * {@link WrCollapseHarness.close} reports, for the same reason.\n   */\n  async closeAll(): Promise<void> {\n    for (const panel of await this.getOpenPanels()) {\n      await panel.close();\n    }\n  }\n\n  /**\n   * The header text of the panel whose header holds focus, or `null` when focus is\n   * elsewhere.\n   *\n   * Every header is its own tab stop here, so this reports where focus actually IS\n   * rather than where the group would send it — there is no roving tab stop to diverge\n   * from.\n   */\n  async getFocusedTitle(): Promise<string | null> {\n    for (const panel of await this.getPanels()) {\n      if (await panel.isFocused()) return panel.getTitle();\n    }\n    return null;\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-collapse.mjs

@@ -94,10 +94,10 @@ class WrCollapse {
             return;
         this.open.update(v => !v);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCollapse, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrCollapse, isStandalone: true, selector: "wr-collapse", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"wr-collapse__header\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"bodyId\"\n  [disabled]=\"disabled()\"\n  (click)=\"toggle()\"\n>\n  <span class=\"wr-collapse__title\">{{ title() }}</span>\n  <svg\n    class=\"wr-icon__svg wr-collapse__chevron\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m6 9 6 6 6-6\" />\n  </svg>\n</button>\n\n<div\n  class=\"wr-collapse__body\"\n  [attr.id]=\"bodyId\"\n  [class.wr-collapse__body--open]=\"open()\"\n  [attr.aria-hidden]=\"!open()\"\n  [attr.inert]=\"!open() ? '' : null\"\n>\n  <div class=\"wr-collapse__content\">\n    <div class=\"wr-collapse__inner\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrCollapse, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: WrCollapse, isStandalone: true, selector: "wr-collapse", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: true, transformFunction: null }, open: { classPropertyName: "open", publicName: "open", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { open: "openChange" }, host: { properties: { "class": "classes()" } }, ngImport: i0, template: "<button\n  type=\"button\"\n  class=\"wr-collapse__header\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"bodyId\"\n  [disabled]=\"disabled()\"\n  (click)=\"toggle()\"\n>\n  <span class=\"wr-collapse__title\">{{ title() }}</span>\n  <svg\n    class=\"wr-icon__svg wr-collapse__chevron\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m6 9 6 6 6-6\" />\n  </svg>\n</button>\n\n<div\n  class=\"wr-collapse__body\"\n  [attr.id]=\"bodyId\"\n  [class.wr-collapse__body--open]=\"open()\"\n  [attr.aria-hidden]=\"!open()\"\n  [attr.inert]=\"!open() ? '' : null\"\n>\n  <div class=\"wr-collapse__content\">\n    <div class=\"wr-collapse__inner\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n", encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCollapse, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrCollapse, decorators: [{
             type: Component,
             args: [{ selector: 'wr-collapse', encapsulation: ViewEncapsulation.None, host: { '[class]': 'classes()' }, template: "<button\n  type=\"button\"\n  class=\"wr-collapse__header\"\n  [attr.aria-expanded]=\"open()\"\n  [attr.aria-controls]=\"bodyId\"\n  [disabled]=\"disabled()\"\n  (click)=\"toggle()\"\n>\n  <span class=\"wr-collapse__title\">{{ title() }}</span>\n  <svg\n    class=\"wr-icon__svg wr-collapse__chevron\"\n    xmlns=\"http://www.w3.org/2000/svg\"\n    viewBox=\"0 0 24 24\"\n    fill=\"none\"\n    stroke=\"currentColor\"\n    stroke-width=\"2\"\n    stroke-linecap=\"round\"\n    stroke-linejoin=\"round\"\n    aria-hidden=\"true\"\n  >\n    <path d=\"m6 9 6 6 6-6\" />\n  </svg>\n</button>\n\n<div\n  class=\"wr-collapse__body\"\n  [attr.id]=\"bodyId\"\n  [class.wr-collapse__body--open]=\"open()\"\n  [attr.aria-hidden]=\"!open()\"\n  [attr.inert]=\"!open() ? '' : null\"\n>\n  <div class=\"wr-collapse__content\">\n    <div class=\"wr-collapse__inner\">\n      <ng-content />\n    </div>\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [], propDecorators: { title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], open: [{ type: i0.Input, args: [{ isSignal: true, alias: "open", required: false }] }, { type: i0.Output, args: ["openChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }] } });
@@ -132,8 +132,8 @@ class WrCollapseGroup {
                 member.close();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCollapseGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.0", type: WrCollapseGroup, isStandalone: true, selector: "wr-collapse-group", inputs: { accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-collapse-group" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrCollapseGroup, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.1.1", type: WrCollapseGroup, isStandalone: true, selector: "wr-collapse-group", inputs: { accordion: { classPropertyName: "accordion", publicName: "accordion", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "wr-collapse-group" }, providers: [
             {
                 provide: WR_COLLAPSE_GROUP,
                 // eslint-disable-next-line @angular-eslint/no-forward-ref
@@ -141,7 +141,7 @@ class WrCollapseGroup {
             },
         ], ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrCollapseGroup, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrCollapseGroup, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-collapse-group',
@@ -198,8 +198,8 @@ class WrAccordion {
                 member.close();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.0", type: WrAccordion, isStandalone: true, selector: "wr-accordion", host: { classAttribute: "wr-collapse-group wr-collapse-group--accordion" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrAccordion, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.1.1", type: WrAccordion, isStandalone: true, selector: "wr-accordion", host: { classAttribute: "wr-collapse-group wr-collapse-group--accordion" }, providers: [
             {
                 provide: WR_COLLAPSE_GROUP,
                 // eslint-disable-next-line @angular-eslint/no-forward-ref
@@ -207,7 +207,7 @@ class WrAccordion {
             },
         ], ngImport: i0, template: '<ng-content />', isInline: true, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.0", ngImport: i0, type: WrAccordion, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.1", ngImport: i0, type: WrAccordion, decorators: [{
             type: Component,
             args: [{
                     selector: 'wr-accordion',