@ni/nimble-components 29.4.2 → 29.5.0

package/dist/esm/menu-button/testing/menu-button.pageobject.d.ts

@@ -0,0 +1,56 @@
+import type { MenuButton } from '..';
+/**
+ * Page object for `nimble-menu-button` component to provide consistent ways
+ * of querying and interacting with the component during tests.
+ *
+ * This page object is intended to be used to interact with a `nimble-menu-button`,
+ * not the menu slotted into the button or the menu items.
+ */
+export declare class MenuButtonPageObject {
+    protected readonly menuButtonElement: MenuButton;
+    constructor(menuButtonElement: MenuButton);
+    /**
+     * @returns Whether or not the menu is open.
+     */
+    isOpen(): boolean;
+    /**
+     * Opens the menu.
+     * @returns A promise that resolves when the menu opens.
+     */
+    openMenu(): Promise<void>;
+    /**
+     * Closes the menu by pressing Escape.
+     * Throws an error if the menu is not open.
+     */
+    closeMenuWithEscape(): void;
+    /**
+     * Gets the text in the menu button.
+     * @returns The trimmed text that is slotted into the menu button.
+     */
+    getLabelText(): string;
+    /**
+     * @internal
+     * Focuses and clicks the menu button.
+     */
+    clickMenuButton(): void;
+    /**
+     * @internal
+     * Presses the Enter key on the menu button.
+     */
+    pressEnterKey(): void;
+    /**
+     * @internal
+     * Presses the Space key on the menu button.
+     */
+    pressSpaceKey(): void;
+    /**
+     * @internal
+     * Presses the Arrow Up key on the menu button.
+     */
+    pressArrowUpKey(): void;
+    /**
+     * @internal
+     * Presses the Arrow Down key on the menu button.
+     */
+    pressArrowDownKey(): void;
+}

package/dist/esm/menu-button/testing/menu-button.pageobject.js

@@ -0,0 +1,103 @@
+import { keyArrowDown, keyArrowUp, keyEnter, keyEscape, keySpace } from '@microsoft/fast-web-utilities';
+import { waitForEventAsync } from '../../utilities/tests/component';
+/**
+ * Page object for `nimble-menu-button` component to provide consistent ways
+ * of querying and interacting with the component during tests.
+ *
+ * This page object is intended to be used to interact with a `nimble-menu-button`,
+ * not the menu slotted into the button or the menu items.
+ */
+export class MenuButtonPageObject {
+    constructor(menuButtonElement) {
+        this.menuButtonElement = menuButtonElement;
+    }
+    /**
+     * @returns Whether or not the menu is open.
+     */
+    isOpen() {
+        return this.menuButtonElement.open;
+    }
+    /**
+     * Opens the menu.
+     * @returns A promise that resolves when the menu opens.
+     */
+    async openMenu() {
+        if (this.isOpen()) {
+            return;
+        }
+        const toggleEventPromise = waitForEventAsync(this.menuButtonElement, 'toggle');
+        this.clickMenuButton();
+        await toggleEventPromise;
+    }
+    /**
+     * Closes the menu by pressing Escape.
+     * Throws an error if the menu is not open.
+     */
+    closeMenuWithEscape() {
+        if (!this.isOpen()) {
+            throw new Error('Cannot close menu when it is not open');
+        }
+        const event = new KeyboardEvent('keydown', {
+            key: keyEscape
+        });
+        this.menuButtonElement.region.dispatchEvent(event);
+    }
+    /**
+     * Gets the text in the menu button.
+     * @returns The trimmed text that is slotted into the menu button.
+     */
+    getLabelText() {
+        return this.menuButtonElement.textContent?.trim() ?? '';
+    }
+    /**
+     * @internal
+     * Focuses and clicks the menu button.
+     */
+    clickMenuButton() {
+        // Focus the menu button before calling click() because ordinarily a mouse click
+        // would bring focus to the button, but calling click() directly does not.
+        this.menuButtonElement.focus();
+        this.menuButtonElement.toggleButton.control.click();
+    }
+    /**
+     * @internal
+     * Presses the Enter key on the menu button.
+     */
+    pressEnterKey() {
+        const event = new KeyboardEvent('keypress', {
+            key: keyEnter
+        });
+        this.menuButtonElement.toggleButton.control.dispatchEvent(event);
+    }
+    /**
+     * @internal
+     * Presses the Space key on the menu button.
+     */
+    pressSpaceKey() {
+        const event = new KeyboardEvent('keypress', {
+            key: keySpace
+        });
+        this.menuButtonElement.toggleButton.control.dispatchEvent(event);
+    }
+    /**
+     * @internal
+     * Presses the Arrow Up key on the menu button.
+     */
+    pressArrowUpKey() {
+        const event = new KeyboardEvent('keydown', {
+            key: keyArrowUp
+        });
+        this.menuButtonElement.toggleButton.dispatchEvent(event);
+    }
+    /**
+     * @internal
+     * Presses the Arrow Down key on the menu button.
+     */
+    pressArrowDownKey() {
+        const event = new KeyboardEvent('keydown', {
+            key: keyArrowDown
+        });
+        this.menuButtonElement.toggleButton.dispatchEvent(event);
+    }
+}
+//# sourceMappingURL=menu-button.pageobject.js.map

package/dist/esm/menu-button/testing/menu-button.pageobject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-button.pageobject.js","sourceRoot":"","sources":["../../../../src/menu-button/testing/menu-button.pageobject.ts"],"names":[],"mappings":"AAAA,OAAO,EACH,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,SAAS,EACT,QAAQ,EACX,MAAM,+BAA+B,CAAC;AAEvC,OAAO,EAAE,iBAAiB,EAAE,MAAM,iCAAiC,CAAC;AAEpE;;;;;;GAMG;AACH,MAAM,OAAO,oBAAoB;IAC7B,YAAsC,iBAA6B;QAA7B,sBAAiB,GAAjB,iBAAiB,CAAY;IAAG,CAAC;IAEvE;;OAEG;IACI,MAAM;QACT,OAAO,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;IACvC,CAAC;IAED;;;OAGG;IACI,KAAK,CAAC,QAAQ;QACjB,IAAI,IAAI,CAAC,MAAM,EAAE,EAAE;YACf,OAAO;SACV;QAED,MAAM,kBAAkB,GAAG,iBAAiB,CACxC,IAAI,CAAC,iBAAiB,EACtB,QAAQ,CACX,CAAC;QACF,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,MAAM,kBAAkB,CAAC;IAC7B,CAAC;IAED;;;OAGG;IACI,mBAAmB;QACtB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,EAAE;YAChB,MAAM,IAAI,KAAK,CAAC,uCAAuC,CAAC,CAAC;SAC5D;QAED,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG,EAAE,SAAS;SACjB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,MAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACxD,CAAC;IAED;;;OAGG;IACI,YAAY;QACf,OAAO,IAAI,CAAC,iBAAiB,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IAC5D,CAAC;IAED;;;OAGG;IACI,eAAe;QAClB,gFAAgF;QAChF,0EAA0E;QAC1E,IAAI,CAAC,iBAAiB,CAAC,KAAK,EAAE,CAAC;QAC/B,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;IACzD,CAAC;IAED;;;OAGG;IACI,aAAa;QAChB,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,UAAU,EAAE;YACxC,GAAG,EAAE,QAAQ;SAChB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACtE,CAAC;IAED;;;OAGG;IACI,aAAa;QAChB,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,UAAU,EAAE;YACxC,GAAG,EAAE,QAAQ;SAChB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,OAAO,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACtE,CAAC;IAED;;;OAGG;IACI,eAAe;QAClB,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG,EAAE,UAAU;SAClB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9D,CAAC;IAED;;;OAGG;IACI,iBAAiB;QACpB,MAAM,KAAK,GAAG,IAAI,aAAa,CAAC,SAAS,EAAE;YACvC,GAAG,EAAE,YAAY;SACpB,CAAC,CAAC;QACH,IAAI,CAAC,iBAAiB,CAAC,YAAa,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC9D,CAAC;CACJ","sourcesContent":["import {\n    keyArrowDown,\n    keyArrowUp,\n    keyEnter,\n    keyEscape,\n    keySpace\n} from '@microsoft/fast-web-utilities';\nimport type { MenuButton } from '..';\nimport { waitForEventAsync } from '../../utilities/tests/component';\n\n/**\n * Page object for `nimble-menu-button` component to provide consistent ways\n * of querying and interacting with the component during tests.\n *\n * This page object is intended to be used to interact with a `nimble-menu-button`,\n * not the menu slotted into the button or the menu items.\n */\nexport class MenuButtonPageObject {\n    public constructor(protected readonly menuButtonElement: MenuButton) {}\n\n    /**\n     * @returns Whether or not the menu is open.\n     */\n    public isOpen(): boolean {\n        return this.menuButtonElement.open;\n    }\n\n    /**\n     * Opens the menu.\n     * @returns A promise that resolves when the menu opens.\n     */\n    public async openMenu(): Promise<void> {\n        if (this.isOpen()) {\n            return;\n        }\n\n        const toggleEventPromise = waitForEventAsync(\n            this.menuButtonElement,\n            'toggle'\n        );\n        this.clickMenuButton();\n        await toggleEventPromise;\n    }\n\n    /**\n     * Closes the menu by pressing Escape.\n     * Throws an error if the menu is not open.\n     */\n    public closeMenuWithEscape(): void {\n        if (!this.isOpen()) {\n            throw new Error('Cannot close menu when it is not open');\n        }\n\n        const event = new KeyboardEvent('keydown', {\n            key: keyEscape\n        });\n        this.menuButtonElement.region!.dispatchEvent(event);\n    }\n\n    /**\n     * Gets the text in the menu button.\n     * @returns The trimmed text that is slotted into the menu button.\n     */\n    public getLabelText(): string {\n        return this.menuButtonElement.textContent?.trim() ?? '';\n    }\n\n    /**\n     * @internal\n     * Focuses and clicks the menu button.\n     */\n    public clickMenuButton(): void {\n        // Focus the menu button before calling click() because ordinarily a mouse click\n        // would bring focus to the button, but calling click() directly does not.\n        this.menuButtonElement.focus();\n        this.menuButtonElement.toggleButton!.control.click();\n    }\n\n    /**\n     * @internal\n     * Presses the Enter key on the menu button.\n     */\n    public pressEnterKey(): void {\n        const event = new KeyboardEvent('keypress', {\n            key: keyEnter\n        });\n        this.menuButtonElement.toggleButton!.control.dispatchEvent(event);\n    }\n\n    /**\n     * @internal\n     * Presses the Space key on the menu button.\n     */\n    public pressSpaceKey(): void {\n        const event = new KeyboardEvent('keypress', {\n            key: keySpace\n        });\n        this.menuButtonElement.toggleButton!.control.dispatchEvent(event);\n    }\n\n    /**\n     * @internal\n     * Presses the Arrow Up key on the menu button.\n     */\n    public pressArrowUpKey(): void {\n        const event = new KeyboardEvent('keydown', {\n            key: keyArrowUp\n        });\n        this.menuButtonElement.toggleButton!.dispatchEvent(event);\n    }\n\n    /**\n     * @internal\n     * Presses the Arrow Down key on the menu button.\n     */\n    public pressArrowDownKey(): void {\n        const event = new KeyboardEvent('keydown', {\n            key: keyArrowDown\n        });\n        this.menuButtonElement.toggleButton!.dispatchEvent(event);\n    }\n}\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "29.4.2",
+  "version": "29.5.0",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss",