@theseam/ui-common 0.4.13 → 0.4.14

package/fesm2020/theseam-ui-common-menu.mjs

@@ -1,3 +1,6 @@
+import { ContentContainerComponentHarness, HarnessPredicate, TestKey } from '@angular/cdk/testing';
+import { waitOnConditionAsync } from '@theseam/ui-common/utils';
+import { coerceBooleanProperty, coerceNumberProperty } from '@angular/cdk/coercion';
 import { animation, style, group, animate, query, useAnimation, trigger, transition } from '@angular/animations';
 import * as i0 from '@angular/core';
 import { Component, ChangeDetectionStrategy, InjectionToken, Inject, Optional, Input, HostListener, forwardRef, EventEmitter, TemplateRef, ViewChild, Output, inject, ChangeDetectorRef, Directive, Self, HostBinding, NgModule } from '@angular/core';
@@ -14,12 +17,282 @@ import { __decorate } from 'tslib';
 import { UP_ARROW, DOWN_ARROW, END, hasModifierKey, HOME, RIGHT_ARROW, LEFT_ARROW, ESCAPE, ENTER, SPACE } from '@angular/cdk/keycodes';
 import { normalizePassiveListenerOptions } from '@angular/cdk/platform';
 import { TemplatePortal } from '@angular/cdk/portal';
-import { coerceNumberProperty } from '@angular/cdk/coercion';
 import { map, switchMap, startWith, distinctUntilChanged, takeUntil } from 'rxjs/operators';
 import * as i1$1 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
 import * as i4 from '@angular/cdk/bidi';
 
+/**
+ * Workaround to wait on the animation to finish in browser, until a generic
+ * broswer-based solution is added, for Storybook interactions.
+ */
+async function animatingWait() {
+    const selectAnimating = () => document.querySelectorAll('.seam-menu-container .ng-animating');
+    if (selectAnimating().length === 0) {
+        return;
+    }
+    await waitOnConditionAsync(() => selectAnimating().length === 0, 1000);
+}
+
+class TheSeamMenuFooterHarness extends ContentContainerComponentHarness {
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a menu item with specific attributes.
+     * @param options Options for filtering which menu item instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(this, options)
+            .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text));
+    }
+    /** Gets the text of the menu item. */
+    async getText() {
+        return (await this.host()).text();
+    }
+    /** Clicks the menu item. */
+    async click() {
+        return (await this.host()).click().then(() => animatingWait());
+    }
+    /** Hovers the menu item. */
+    async hover() {
+        return (await this.host()).hover().then(() => animatingWait());
+    }
+}
+/** The selector for the host element of a `MenuFooterComponent` instance. */
+TheSeamMenuFooterHarness.hostSelector = 'seam-menu-footer';
+
+class TheSeamMenuHeaderHarness extends ContentContainerComponentHarness {
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a menu item with specific attributes.
+     * @param options Options for filtering which menu item instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(this, options);
+    }
+    /** Clicks the menu item. */
+    async click() {
+        return (await this.host()).click().then(() => animatingWait());
+    }
+    /** Hovers the menu item. */
+    async hover() {
+        return (await this.host()).hover().then(() => animatingWait());
+    }
+}
+/** The selector for the host element of a `MenuHeaderComponent` instance. */
+TheSeamMenuHeaderHarness.hostSelector = 'seam-menu-header';
+
+class TheSeamMenuHarness extends ContentContainerComponentHarness {
+    constructor() {
+        super(...arguments);
+        this._documentRootLocator = this.documentRootLocatorFactory();
+    }
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a menu with specific attributes.
+     * @param options Options for filtering which menu instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(this, options).addOption('triggerText', options.triggerText, (harness, text) => HarnessPredicate.stringMatches(harness.getTriggerText(), text));
+    }
+    /** Whether the menu is disabled. */
+    async isDisabled() {
+        const disabled = (await this.host()).getAttribute('disabled');
+        return coerceBooleanProperty(await disabled);
+    }
+    /** Whether the menu is open. */
+    async isOpen() {
+        return !!(await this._getMenuPanel());
+    }
+    /** Gets the text of the menu's trigger element. */
+    async getTriggerText() {
+        return (await this.host()).text();
+    }
+    /** Focuses the menu. */
+    async focus() {
+        return (await this.host()).focus().then(() => animatingWait());
+    }
+    /** Blurs the menu. */
+    async blur() {
+        return (await this.host()).blur().then(() => animatingWait());
+    }
+    /** Whether the menu is focused. */
+    async isFocused() {
+        return (await this.host()).isFocused();
+    }
+    /** Opens the menu. */
+    async open() {
+        if (!(await this.isOpen())) {
+            return (await this.host()).click().then(() => animatingWait());
+        }
+    }
+    /** Closes the menu. */
+    async close() {
+        const panel = await this._getMenuPanel();
+        if (panel) {
+            return panel.sendKeys(TestKey.ESCAPE).then(() => animatingWait());
+        }
+    }
+    /**
+     * Gets a list of `TheSeamMenuItemHarness` representing the items in the menu.
+     * @param filters Optionally filters which menu items are included.
+     */
+    async getItems(filters) {
+        const panelId = await this._getPanelId();
+        if (panelId) {
+            return this._documentRootLocator.locatorForAll(TheSeamMenuItemHarness.with({
+                ...(filters || {}),
+                ancestor: `#${panelId}`,
+            }))();
+        }
+        return [];
+    }
+    /**
+     * Clicks an item in the menu, and optionally continues clicking items in subsequent sub-menus.
+     * @param itemFilter A filter used to represent which item in the menu should be clicked. The
+     *     first matching menu item will be clicked.
+     * @param subItemFilters A list of filters representing the items to click in any subsequent
+     *     sub-menus. The first item in the sub-menu matching the corresponding filter in
+     *     `subItemFilters` will be clicked.
+     */
+    async clickItem(itemFilter, ...subItemFilters) {
+        await this.open();
+        const items = await this.getItems(itemFilter);
+        if (!items.length) {
+            throw Error(`Could not find item matching ${JSON.stringify(itemFilter)}`);
+        }
+        if (!subItemFilters.length) {
+            return items[0].click();
+        }
+        const menu = await items[0].getSubmenu();
+        if (!menu) {
+            throw Error(`Item matching ${JSON.stringify(itemFilter)} does not have a submenu`);
+        }
+        return menu.clickItem(...subItemFilters);
+    }
+    /**
+     * Hovers an item in the menu, and optionally continues hovering items in subsequent sub-menus.
+     * @param itemFilter A filter used to represent which item in the menu should be hovered. The
+     *     first matching menu item will be hovered.
+     * @param subItemFilters A list of filters representing the items to hover in any subsequent
+     *     sub-menus. The first item in the sub-menu matching the corresponding filter in
+     *     `subItemFilters` will be hovered.
+     */
+    async hoverItem(itemFilter, ...subItemFilters) {
+        await this.open();
+        const items = await this.getItems(itemFilter);
+        if (!items.length) {
+            throw Error(`Could not find item matching ${JSON.stringify(itemFilter)}`);
+        }
+        if (!subItemFilters.length) {
+            return items[0].hover();
+        }
+        const menu = await items[0].getSubmenu();
+        if (!menu) {
+            throw Error(`Item matching ${JSON.stringify(itemFilter)} does not have a submenu`);
+        }
+        return menu.hoverItem(...subItemFilters);
+    }
+    /**
+     * Gets a `TheSeamMenuHeaderHarness` representing the header in the menu.
+     * @param filters Optionally filters which menu items are included.
+     */
+    async getHeader(filters) {
+        const panelId = await this._getPanelId();
+        if (panelId) {
+            return this._documentRootLocator.locatorForOptional(TheSeamMenuHeaderHarness.with({
+                ...(filters || {}),
+                ancestor: `#${panelId}`,
+            }))();
+        }
+        return null;
+    }
+    /**
+     * Gets a `TheSeamMenuFooterHarness` representing the footer in the menu.
+     * @param filters Optionally filters which menu items are included.
+     */
+    async getFooter(filters) {
+        const panelId = await this._getPanelId();
+        if (panelId) {
+            return this._documentRootLocator.locatorForOptional(TheSeamMenuFooterHarness.with({
+                ...(filters || {}),
+                ancestor: `#${panelId}`,
+            }))();
+        }
+        return null;
+    }
+    async getRootHarnessLoader() {
+        const panelId = await this._getPanelId();
+        return this.documentRootLocatorFactory().harnessLoaderFor(`#${panelId}`);
+    }
+    /** Gets the menu panel associated with this menu. */
+    async _getMenuPanel() {
+        const panelId = await this._getPanelId();
+        return panelId ? this._documentRootLocator.locatorForOptional(`#${panelId}`)() : null;
+    }
+    /** Gets the id of the menu panel associated with this menu. */
+    async _getPanelId() {
+        const panelId = await (await this.host()).getAttribute('aria-controls');
+        return panelId || null;
+    }
+}
+/** The selector for the host element of a `MenuComponent` instance. */
+TheSeamMenuHarness.hostSelector = '.seam-menu-toggle';
+
+class TheSeamMenuItemHarness extends ContentContainerComponentHarness {
+    /**
+     * Gets a `HarnessPredicate` that can be used to search for a menu item with specific attributes.
+     * @param options Options for filtering which menu item instances are considered a match.
+     * @return a `HarnessPredicate` configured with the given options.
+     */
+    static with(options = {}) {
+        return new HarnessPredicate(this, options)
+            .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text))
+            .addOption('hasSubmenu', options.hasSubmenu, async (harness, hasSubmenu) => (await harness.hasSubmenu()) === hasSubmenu);
+    }
+    /** Whether the menu is disabled. */
+    async isDisabled() {
+        const disabled = (await this.host()).getAttribute('disabled');
+        return coerceBooleanProperty(await disabled);
+    }
+    /** Gets the text of the menu item. */
+    async getText() {
+        return (await this.host()).text();
+    }
+    /** Focuses the menu item. */
+    async focus() {
+        return (await this.host()).focus().then(() => animatingWait());
+    }
+    /** Blurs the menu item. */
+    async blur() {
+        return (await this.host()).blur().then(() => animatingWait());
+    }
+    /** Whether the menu item is focused. */
+    async isFocused() {
+        return (await this.host()).isFocused();
+    }
+    /** Clicks the menu item. */
+    async click() {
+        return (await this.host()).click().then(() => animatingWait());
+    }
+    /** Hovers the menu item. */
+    async hover() {
+        return (await this.host()).hover().then(() => animatingWait());
+    }
+    /** Whether this item has a submenu. */
+    async hasSubmenu() {
+        return (await this.host()).matchesSelector(TheSeamMenuHarness.hostSelector);
+    }
+    /** Gets the submenu associated with this menu item, or null if none. */
+    async getSubmenu() {
+        if (await this.hasSubmenu()) {
+            return new TheSeamMenuHarness(this.locatorFactory);
+        }
+        return null;
+    }
+}
+/** The selector for the host element of a `MenuItemComponent` instance. */
+TheSeamMenuItemHarness.hostSelector = '.seam-menu-item';
+
 const menuDropdownPanelSlideIn = animation([
     style({
         opacity: 0,
@@ -1006,5 +1279,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.7", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { LIB_MENU, MenuComponent, MenuDividerComponent, MenuFooterActionComponent, MenuFooterComponent, MenuHeaderComponent, MenuItemComponent, MenuToggleDirective, THESEAM_MENU_PANEL, TheSeamMenuModule, menuDropdownPanelExpandIn, menuDropdownPanelExpandOut, menuDropdownPanelFadeIn, menuDropdownPanelFadeOut, menuDropdownPanelIn, menuDropdownPanelOut, menuDropdownPanelSlideIn, menuDropdownPanelSlideOut };
+export { LIB_MENU, MenuComponent, MenuDividerComponent, MenuFooterActionComponent, MenuFooterComponent, MenuHeaderComponent, MenuItemComponent, MenuToggleDirective, THESEAM_MENU_PANEL, TheSeamMenuFooterHarness, TheSeamMenuHarness, TheSeamMenuHeaderHarness, TheSeamMenuItemHarness, TheSeamMenuModule, menuDropdownPanelExpandIn, menuDropdownPanelExpandOut, menuDropdownPanelFadeIn, menuDropdownPanelFadeOut, menuDropdownPanelIn, menuDropdownPanelOut, menuDropdownPanelSlideIn, menuDropdownPanelSlideOut };
 //# sourceMappingURL=theseam-ui-common-menu.mjs.map