@watermarkinsights/ripple 5.11.1 → 5.11.2

package/dist/collection/components/selects/wm-select/wm-select.spec.js

@@ -0,0 +1,271 @@
+import { newSpecPage } from "@stencil/core/testing";
+import * as globalFuncs from "../../../global/functions";
+jest.spyOn(globalFuncs, "getTextDir").mockImplementation(() => "rtl");
+import { Select } from "./wm-select";
+import { Option } from "../wm-option/wm-option";
+// mock MutationObserver
+global.MutationObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+describe("wm-select", () => {
+    it("builds", async () => {
+        const comp = await newSpecPage({
+            components: [Select, Option],
+            html: '<wm-select label="mock label"><wm-option selected></wm-option></wm-select>',
+        });
+        expect(comp.root).toMatchSnapshot();
+    });
+    it("has the right props", () => {
+        const select = new Select();
+        expect(select).toHaveProperty("label");
+        expect(select).toHaveProperty("labelPosition");
+        expect(select).toHaveProperty("maxHeight");
+        expect(select).toHaveProperty("requiredField");
+        expect(select).toHaveProperty("errorMessage");
+        expect(select).toHaveProperty("disabled");
+        expect(select).toHaveProperty("multiple");
+        expect(select).toHaveProperty("search");
+        expect(select).toHaveProperty("selectAll");
+        expect(select).toHaveProperty("placeholder");
+        expect(select).toHaveProperty("isExpanded");
+        expect(select).toHaveProperty("childOptions");
+        expect(select).toHaveProperty("keysSoFar");
+        expect(select).toHaveProperty("searchIndex");
+    });
+    it("has the right roles", async () => {
+        const page = await newSpecPage({
+            components: [Select, Option],
+            html: '<wm-select id="random-id" search label="mock label"><wm-option selected>First option</wm-option></wm-select>',
+        });
+        const searchFieldEl = await page.root.shadowRoot.querySelector(".searchfield");
+        const listboxEl = await page.root.shadowRoot.querySelector("#list");
+        expect(listboxEl).toEqualAttribute("role", "listbox");
+        expect(listboxEl).not.toHaveAttribute("aria-multiselectable"); // only multiselect
+        expect(searchFieldEl).toEqualAttribute("role", "combobox");
+    });
+    it("multiselect has multiselectable aria attr", async () => {
+        const page = await newSpecPage({
+            components: [Select, Option],
+            html: '<wm-select multiple label="mock label"><wm-option>1</wm-option></wm-select>',
+        });
+        const listboxEl = await page.root.shadowRoot.querySelector("#list");
+        expect(listboxEl).toHaveAttribute("aria-multiselectable");
+    });
+    it("displays error message", async () => {
+        const page = await newSpecPage({
+            components: [Select, Option],
+            html: '<wm-select error-message="test error" label="mock label"><wm-option selected></wm-option></wm-select>',
+        });
+        const errorMessage = await page.root.shadowRoot.querySelector(".error-message");
+        expect(errorMessage.textContent).toBe("test error");
+    });
+    it("adapts options correctly - multiselect", async () => {
+        const page = await newSpecPage({
+            components: [Select, Option],
+            html: '<wm-select multiple label="mock label"><wm-option></wm-option></wm-select>',
+        });
+        const option = await page.root.querySelector("wm-option");
+        expect(option === null || option === void 0 ? void 0 : option.classList.contains("multi-option")).toBe(true);
+    });
+    describe("reacts to wm-option events", () => {
+        it("handles option Enter", () => {
+            // handleChildEnter
+            const component = new Select();
+            const mockClose = (component.close = jest.fn());
+            component.handleChildEnter();
+            expect(mockClose).toHaveBeenCalledTimes(1);
+            jest.restoreAllMocks();
+        });
+        // it("handles option Up", () => {
+        //   // handleChildUp
+        //   const component = new Select();
+        //   const mockMoveUp = (component.moveUp = jest.fn());
+        //   const optionEl = document.createElement("option");
+        //   const event = { detail: optionEl } as unknown;
+        //   component.handleChildUp(event as CustomEvent);
+        //   expect(mockMoveUp).toHaveBeenCalledTimes(1);
+        //   expect(mockMoveUp).toHaveBeenCalledWith(optionEl);
+        //   jest.restoreAllMocks();
+        // });
+        // it("handles option Down", () => {
+        //   // handleChildDown
+        //   const component = new Select();
+        //   const mockMoveDown = (component.moveDown = jest.fn());
+        //   const optionEl = document.createElement("option");
+        //   const event = { detail: optionEl } as unknown;
+        //   component.handleChildDown(event as CustomEvent);
+        //   expect(mockMoveDown).toHaveBeenCalledTimes(1);
+        //   expect(mockMoveDown).toHaveBeenCalledWith(optionEl);
+        //   jest.restoreAllMocks();
+        // });
+        // it("handles option Home", () => {
+        //   // moveToFirstOption
+        //   const component = new Select();
+        //   const mockFocusOption = (component.focusOption = jest.fn());
+        //   const option1 = document.createElement("option");
+        //   option1.textContent = "1";
+        //   const option2 = document.createElement("option");
+        //   option2.textContent = "2";
+        //   const option3 = document.createElement("option");
+        //   option3.textContent = "3";
+        //   jest
+        //     .spyOn(component, "visibleOptionEls", "get")
+        //     // @ts-ignore
+        //     .mockReturnValue([option1, option2, option3]);
+        //   component.moveToFirstOption();
+        //   expect(mockFocusOption).toHaveBeenCalledTimes(1);
+        //   expect(mockFocusOption).toHaveBeenCalledWith(option1);
+        //   jest.restoreAllMocks();
+        // });
+        // it("handles option End", () => {
+        //   // moveToLastOption
+        //   const component = new Select();
+        //   const mockFocusOption = (component.focusOption = jest.fn());
+        //   const option1 = document.createElement("option");
+        //   option1.textContent = "1";
+        //   const option2 = document.createElement("option");
+        //   option2.textContent = "2";
+        //   const option3 = document.createElement("option");
+        //   option3.textContent = "3";
+        //   jest
+        //     .spyOn(component, "visibleOptionEls", "get")
+        //     // @ts-ignore
+        //     .mockReturnValue([option1, option2, option3]);
+        //   component.moveToLastOption();
+        //   expect(mockFocusOption).toHaveBeenCalledTimes(1);
+        //   expect(mockFocusOption).toHaveBeenCalledWith(option3);
+        //   jest.restoreAllMocks();
+        // });
+        it("handles option Escape", () => {
+            // closePopupOnEscape
+            const component = new Select();
+            const mockClose = (component.close = jest.fn());
+            component.closePopupOnEscape();
+            expect(mockClose).toHaveBeenCalledTimes(1);
+            expect(mockClose).toHaveBeenCalledWith();
+            jest.restoreAllMocks();
+        });
+        it("handles option Blur", () => {
+            // handleOptionBlur
+            const component = new Select();
+            const blurObserver = jest.fn();
+            const fakeTarget = document.createElement("div");
+            component.el.addEventListener("blur", blurObserver);
+            component.handleOptionBlur({ detail: { relatedTarget: component.el } });
+            expect(blurObserver).toHaveBeenCalledTimes(0);
+            jest.clearAllMocks();
+            component.handleOptionBlur({ detail: { relatedTarget: fakeTarget } });
+            expect(blurObserver).toHaveBeenCalledTimes(1);
+            expect(blurObserver.mock.calls[0][0].relatedTarget).toStrictEqual(fakeTarget);
+            jest.clearAllMocks();
+            jest.restoreAllMocks();
+        });
+    });
+    it("prevent button blur", () => {
+        const component = new Select();
+        const mockStopPropagation = jest.fn();
+        const event = { stopPropagation: mockStopPropagation };
+        const fakeTarget = document.createElement("div");
+        // @ts-ignore
+        event.relatedTarget = fakeTarget;
+        component.handleButtonBlur(event);
+        expect(mockStopPropagation).toHaveBeenCalledTimes(0);
+        jest.clearAllMocks();
+        // @ts-ignore
+        event.relatedTarget = component.el;
+        component.handleButtonBlur(event);
+        expect(mockStopPropagation).toHaveBeenCalledTimes(1);
+        jest.clearAllMocks();
+        jest.restoreAllMocks();
+    });
+    it("handles keydowns", () => {
+        const component = new Select();
+        const mockPreventDefault = jest.fn();
+        const event = { preventDefault: mockPreventDefault, key: "" };
+        const mockOpen = (component.open = jest.fn());
+        // @ts-ignore
+        event.key = "ArrowDown";
+        component.isExpanded = false;
+        component.handleKey(event);
+        expect(mockPreventDefault).toHaveBeenCalledTimes(1);
+        expect(mockOpen).toHaveBeenCalledTimes(1);
+        expect(mockOpen).toHaveBeenCalledWith("next");
+        jest.clearAllMocks();
+        component.isExpanded = true;
+        component.handleKey(event);
+        expect(mockPreventDefault).toHaveBeenCalledTimes(0);
+        expect(mockOpen).toHaveBeenCalledTimes(0);
+        jest.clearAllMocks();
+        // @ts-ignore
+        event.key = "ArrowUp";
+        component.isExpanded = false;
+        component.handleKey(event);
+        expect(mockPreventDefault).toHaveBeenCalledTimes(1);
+        expect(mockOpen).toHaveBeenCalledTimes(1);
+        expect(mockOpen).toHaveBeenCalledWith("previous");
+        jest.clearAllMocks();
+        component.isExpanded = true;
+        component.handleKey(event);
+        expect(mockPreventDefault).toHaveBeenCalledTimes(0);
+        expect(mockOpen).toHaveBeenCalledTimes(0);
+        jest.clearAllMocks();
+        // any other key
+        // @ts-ignore
+        event.key = "f";
+        component.handleKey(event);
+        expect(mockPreventDefault).toHaveBeenCalledTimes(0);
+        expect(mockOpen).toHaveBeenCalledTimes(0);
+        jest.clearAllMocks();
+        jest.restoreAllMocks();
+    });
+    describe("select-all option", () => {
+        it("shows select-all button when prop is set and multiple is set", async () => {
+            const page = await newSpecPage({
+                components: [Select, Option],
+                html: '<wm-select multiple select-all label="mock label"><wm-option></wm-option></wm-select>',
+            });
+            const btn = page.root.shadowRoot.querySelector(".select-all");
+            expect(btn).not.toBeNull();
+        });
+        it("doesn't show select-all button when prop is not set", async () => {
+            const page = await newSpecPage({
+                components: [Select, Option],
+                html: '<wm-select label="mock label"><wm-option selected></wm-option></wm-select>',
+            });
+            const btn = page.root.shadowRoot.querySelector(".select-all");
+            expect(btn).toBeNull();
+        });
+        it("doesn't show select-all button when prop is set but multiple is not", async () => {
+            const page = await newSpecPage({
+                components: [Select, Option],
+                html: '<wm-select select-all label="mock label"><wm-option selected></wm-option></wm-select>',
+            });
+            const btn = page.root.shadowRoot.querySelector(".select-all");
+            expect(btn).toBeNull();
+        });
+        it("button text is 'Select all'", async () => {
+            const page = await newSpecPage({
+                components: [Select, Option],
+                html: `<wm-select multiple select-all label="mock label">
+        <wm-option>first</wm-option>
+        <wm-option>second</wm-option>
+        </wm-select>`,
+            });
+            const btn = page.root.shadowRoot.querySelector(".select-all");
+            expect(btn.textContent).toBe("Select All");
+        });
+        it("button text is 'Deselect all' when all options are selected", async () => {
+            const page = await newSpecPage({
+                components: [Select, Option],
+                html: `<wm-select multiple select-all label="mock label">
+        <wm-option selected>first</wm-option>
+        <wm-option selected>second</wm-option>
+        </wm-select>`,
+            });
+            const btn = page.root.shadowRoot.querySelector(".select-all");
+            expect(btn.textContent).toBe("Deselect All");
+        });
+    });
+});

package/dist/collection/components/wm-action-menu/wm-action-menu.e2e.js

@@ -0,0 +1,200 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-action-menu", () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent("<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1><wm-action-menu id='test' tooltip='menu name'><wm-menuitem id='first' onClick='action()'>First action</wm-menuitem><wm-menuitem id='second'>Second action</wm-menuitem><wm-menuitem id='third'>Third action</wm-menuitem></wm-action-menu><script>function action() {document.getElementById('first').innerHTML = 'Changed text'}</script></main></body></html>");
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    //ATTRIBUTES;
+    it("has the right WAI_ARIA roles, states and properties", async () => {
+        const wmbtn = await page.find("wm-action-menu >>> wm-button");
+        const menu = await page.find("wm-action-menu >>> #menu-test");
+        const second = await page.find("#second");
+        const third = await page.find("#third");
+        await page.waitForChanges();
+        // check aria-expanded attribute
+        expect(wmbtn).toEqualAttribute("aria-expanded", "false");
+        // If the element with the aria-expanded attribute controls the expansion of another grouping container that is not 'owned by' the element, the author SHOULD reference the container by using the aria-controls attribute.
+        // src: https://www.w3.org/WAI/PF/aria/states_and_properties#aria-expanded
+        expect(wmbtn).toEqualAttribute("aria-controls", "menu-test");
+        // An element that contains or owns all the menu items has role menu.
+        expect(menu).toEqualAttribute("role", "menu");
+        expect(menu).toEqualAttribute("tabindex", "-1");
+        // Each menuitem in the menu has role menuitem.
+        expect(second).toEqualAttribute("role", "menuitem"); // just checking one randomly
+        expect(third).toEqualAttribute("tabindex", "-1");
+    });
+    // Down Arrow: Moves focus to the first menuitem. If the dropdown is collapsed, it also expands the list.
+    // Up Arrow: Moves focus to the last menuitem. If the dropdown is collapsed, it also expands the list.
+    it("handles Up and Down Arrow keys", async () => {
+        const wmbtn = await page.find("wm-action-menu >>> wm-button");
+        expect(wmbtn.getAttribute("aria-expanded")).toEqual("false");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        expect(wmbtn.getAttribute("aria-expanded")).toEqual("true");
+        const first = await page.find("wm-menuitem#first >>> div");
+        const second = await page.find("wm-menuitem#second >>> div");
+        expect(first).toHaveClass("focus");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        expect(second).toHaveClass("focus");
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        expect(first).toHaveClass("focus");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.waitForTimeout(500); //allow closing animation and setTimeout to finish
+        expect(wmbtn.getAttribute("aria-expanded")).toEqual("false");
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        // after the action runs the dropdown close and the dev should focus the relevant element.
+        // in case they don't, focus will return to the body. The component checks that and brings focus
+        // back to the button when that's the case.
+        // Things seem to happen differently with headless chrome / puppeteer. Focus stays on the menuitem even after
+        // it has become unable to have focus in normal browsers (after dropdown closes). Focus never gets to body.
+        // So here we simply test that the active el is not the body
+        const activeEl = await page.evaluate(() => document.activeElement.tagName);
+        expect(activeEl).not.toEqual("BODY");
+        expect(wmbtn.getAttribute("aria-expanded")).toEqual("true");
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        expect(second).toHaveClass("focus");
+    });
+    // Home: If the dropdown is displayed, moves focus to first menuitem.
+    // End: If the dropdown is displayed, moves focus to last menuitem.
+    it("handles Home and End keys", async () => {
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForTimeout(40);
+        await page.keyboard.press("ArrowDown");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        const focusedEl = await page.find("wm-menuitem#third >>> div");
+        expect(focusedEl).toHaveClass("focus");
+        await page.keyboard.press("Home");
+        await page.waitForChanges();
+        const homefocusedEl = await page.find("wm-menuitem#first >>> div");
+        expect(focusedEl).not.toHaveClass("focus");
+        expect(homefocusedEl).toHaveClass("focus");
+        await page.keyboard.press("End");
+        await page.waitForChanges();
+        const endfocusedEl = await page.find("wm-menuitem#third >>> div");
+        expect(endfocusedEl).toHaveClass("focus");
+    });
+    // - Type a character: focus moves to the next menuitem with a name that starts with the typed character.
+    // - Type multiple characters in rapid succession: focus moves to the next menuitem with a name that starts with the string of characters typed
+    it("handles typing", async () => {
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("t");
+        await page.waitForChanges();
+        const focusedEl = await page.find("wm-menuitem#third >>> div");
+        expect(focusedEl).toHaveClass("focus");
+    });
+    // OPEN / CLOSE
+    // Spacebar: Should open the popup (we didn't implement, comes for free. Test is to make sure we don't break it)
+    it("handles the Spacebar key", async () => {
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        const wmbtn = await page.find("wm-action-menu >>> wm-button");
+        expect(wmbtn.getAttribute("aria-expanded")).toEqual("true");
+    });
+    // Escape: If the menu is displayed, closes the popup and returns focus to the button.
+    it("handles the Escape key", async () => {
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const wmbtn = await page.find("wm-action-menu >>> wm-button");
+        expect(wmbtn.getAttribute("aria-expanded")).toEqual("true");
+        await page.keyboard.press("ArrowDown");
+        await page.keyboard.press("Escape");
+        await page.waitForChanges();
+        await page.waitForTimeout(500); //allow closing animation and setTimeout to finish
+        expect(wmbtn.getAttribute("aria-expanded")).toEqual("false");
+        const activeElId = await page.evaluate(() => document.activeElement.id);
+        expect(activeElId).toEqual("test");
+        //When dropdown reopens, focus returns to first element
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(wmbtn.getAttribute("aria-expanded")).toEqual("true");
+        const focusedEl = await page.find("wm-menuitem#first >>> div");
+        expect(focusedEl).toHaveClass("focus"); //
+    });
+    // Enter:
+    // - If the focus is on the button, it expands the dropdown and places focuses on the first menuitem.
+    // - If the dropdown is open, it closes the dropdown.
+    it("opens and closes the dropdown when enter key is pressed", async () => {
+        await page.keyboard.press("Tab");
+        const wmbtn = await page.find("wm-action-menu >>> wm-button");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(wmbtn.getAttribute("aria-expanded")).toEqual("true");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(wmbtn.getAttribute("aria-expanded")).toEqual("false");
+    });
+    it("runs the onClick function passed to the menuitem when clicked or key pressed", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-action-menu id='test' tooltip='menu name'>
+      <wm-menuitem id='first' onClick='action()'>First action</wm-menuitem>
+      </wm-action-menu>
+      <div id='changeMe'>default</div>
+      <script>
+      function action() {
+        document.getElementById('changeMe').textContent += "&"
+      }
+      </script></main></body></html>`);
+        const div = await page.find("#changeMe");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(div.textContent).toBe("default&");
+        await page.waitForTimeout(300); // make sure menu is closed before reopening (closes after the 250ms animation)
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        await page.click("#first");
+        await page.waitForChanges();
+        expect(div.textContent).toBe("default&&");
+    });
+    it("doesn't open the dropdown if the dropdown is disabled", async () => {
+        await page.evaluate(() => document.querySelector("wm-action-menu").setAttribute("disabled", "true"));
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        const wmbtn = await page.find("wm-action-menu >>> wm-button");
+        await page.waitForChanges();
+        expect(wmbtn.getAttribute("aria-expanded")).toEqual("false");
+    });
+    // TOOLTIP
+    it("renders a tooltip when type is icon", async () => {
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        const tooltipEl = await page.find("#wm-tooltip");
+        expect(tooltipEl.textContent).toBe("menu name");
+    });
+    it("uses the label instead of tooltip text", async () => {
+        page = await newE2EPage();
+        await page.setContent("<wm-action-menu icon='f1c0' action-menu-type='icon' tooltip='delete' label-for-identical-buttons='delete this particular thing'><wm-menuitem>1</wm-menuitem></wm-action-menu>");
+        // use case: when the tooltip is something like "edit" and there are several buttons on a page, the aria label should be more specific than the tooltip
+        const wmbtn = await page.find("wm-action-menu >>> wm-button");
+        const btn = wmbtn.shadowRoot.querySelector("button");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        const tooltipEl = await page.find("#wm-tooltip");
+        expect(tooltipEl.textContent).toEqual("delete");
+        expect(btn).toEqualAttribute("aria-label", "delete this particular thing");
+    });
+});

package/dist/collection/components/wm-action-menu/wm-action-menu.js

@@ -190,7 +190,7 @@ export class ActionMenu {
         return null;
     }
     render() {
-        return (h(Host, { key: 'c6dfb14c3fe2e1a65238554ca585e94c7a5e8ed8', onBlur: () => this.close(false) }, h("div", { key: 'ae43b9b2e4da167c035ab018620f55f06cfdf17d', class: getTextDir() }, h("wm-button", { key: '22fbc47fb5e2430e2607bce4e820066906959ab7', "button-type": this.internalButtonType, tooltip: this.tooltip, "custom-background": this.darkMode ? "dark" : undefined, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.actionMenuType === "icon" ? "#more-options" : "", iconSize: this.actionMenuType === "icon" ? "24px" : undefined, id: "menubtn", onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": "menu" }, this.buttonText), h("div", { key: '90dd3b0691b50a06eb8cc4c27d2f7febdc6a00a4', class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: "menu", tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) }, h("slot", { key: '5c6eeb1aa8b90c2b679d593d81f90cde7d10ff79' })))));
+        return (h(Host, { onBlur: () => this.close(false) }, h("div", { class: getTextDir() }, h("wm-button", { "button-type": this.internalButtonType, tooltip: this.tooltip, "custom-background": this.darkMode ? "dark" : undefined, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.actionMenuType === "icon" ? "#more-options" : "", iconSize: this.actionMenuType === "icon" ? "24px" : undefined, id: "menubtn", onClick: () => (this.isExpanded ? this.close() : this.open()), onBlur: (ev) => this.handleButtonBlur(ev), disabled: this.disabled, ref: (el) => (this.wmButtonEl = el), "tooltip-position": this.tooltipPosition || this.horizontalPosition, "aria-haspopup": "true", "aria-expanded": this.isExpanded ? "true" : "false", "aria-controls": "menu" }, this.buttonText), h("div", { class: `dropdown ${this.openUp ? "open-up" : ""} ${this.horizontalPosition} ${this.isExpanded ? "open" : ""} hidden`, id: "menu", tabindex: -1, role: "menu", ref: (el) => (this.itemsEl = el) }, h("slot", null)))));
     }
     static get is() { return "wm-action-menu"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-action-menu/wm-action-menu.spec.js

@@ -0,0 +1,48 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ActionMenu } from "./wm-action-menu";
+import { Menuitem } from "../wm-menuitem/wm-menuitem";
+import * as globalFuncs from "../../global/functions";
+jest.spyOn(globalFuncs, "getTextDir").mockImplementation(() => "rtl");
+jest.spyOn(globalFuncs, "generateId");
+// @ts-ignore
+globalFuncs.generateId.mockImplementation(() => "random-id");
+describe("wm-action-menu", () => {
+    it("builds", async () => {
+        const page = await newSpecPage({
+            components: [ActionMenu, Menuitem],
+            html: "<wm-action-menu action-menu-type='icon' tooltip='Menu Name'><wm-menuitem icon='f3eb' onClick='someFunction()'>Menuitem one</wm-menuitem></wm-action-menu>",
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has the right props", () => {
+        const menu = new ActionMenu();
+        expect(menu).toHaveProperty("childItems");
+        expect(menu).toHaveProperty("keysSoFar");
+        expect(menu).toHaveProperty("searchIndex");
+        expect(menu).toHaveProperty("tooltipPosition");
+        expect(menu).toHaveProperty("actionMenuType");
+        expect(menu).toHaveProperty("buttonText");
+        expect(menu).toHaveProperty("tooltip");
+        expect(menu).toHaveProperty("labelForIdenticalButtons");
+    });
+    describe("error throwing", () => {
+        it("throws error when action-menu-type is text/selector but no button-text is passed", async () => {
+            const mockFunc = jest.fn();
+            console.error = mockFunc;
+            await newSpecPage({
+                components: [ActionMenu, Menuitem],
+                html: "<wm-action-menu action-menu-type='text'><wm-menuitem icon='f3eb' onClick='someFunction()'>Menuitem one</wm-menuitem></wm-action-menu>",
+            });
+            expect(mockFunc).toHaveBeenCalledWith("wm-action-menu should have a valid button-text property when action-menu-type is set to 'text' or 'selector'");
+        });
+        it("throws error when action-menu-type is icon but no tooltip is passed", async () => {
+            const mockFunc = jest.fn();
+            console.error = mockFunc;
+            await newSpecPage({
+                components: [ActionMenu, Menuitem],
+                html: "<wm-action-menu action-menu-type='icon'><wm-menuitem icon='f3eb' onClick='someFunction()'>Menuitem one</wm-menuitem></wm-action-menu>",
+            });
+            expect(mockFunc).toHaveBeenCalledWith("wm-action-menu should have a valid tooltip when action-menu-type is set to 'icon'");
+        });
+    });
+});

package/dist/collection/components/wm-button/wm-button.e2e.js

@@ -0,0 +1,55 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("wm-button", () => {
+    let page;
+    beforeEach(async () => {
+        page = await newE2EPage();
+    });
+    it("passes Axe checks", async () => {
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+      <wm-button>Click me</wm-button>
+      </main></body></html>`);
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("renders a button", async () => {
+        await page.setContent("<wm-button></wm-button>");
+        const element = await page.find("wm-button >>> button");
+        expect(element).not.toBeNull();
+    });
+    it("delegates focus", async () => {
+        await page.setContent("<wm-button>click here</wm-button>");
+        const wmButton = await page.find("wm-button");
+        wmButton.focus();
+        let activeEl = await page.evaluate(async () => {
+            let el = await document.activeElement.shadowRoot.activeElement;
+            return el.nodeName;
+        });
+        expect(activeEl).toBe("BUTTON");
+    });
+    it("renders a tooltip for text-only buttons if text is truncated", async () => {
+        await page.setContent("<wm-button text-wrap='false' style='width: 100px' button-type='textonly'>Text-only button with a very long text and text-wrap set to false</wm-button>");
+        await page.waitForChanges();
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        const tooltip = await page.find("#wm-tooltip");
+        expect(tooltip.textContent).toEqual("Text-only button with a very long text and text-wrap set to false");
+    });
+    it("uses the label instead of tooltip text", async () => {
+        // use case: when the tooltip is something like "edit" and there are several buttons on a page, the aria label should be more specific than the tooltip
+        await page.setContent("<wm-button button-type='icononly' icon='f1c0' tooltip='delete' label-for-identical-buttons='Delete item 37' ></wm-button>");
+        await page.waitForChanges();
+        const btn = await page.find("wm-button >>> button");
+        expect(btn.getAttribute("aria-label")).toBe("Delete item 37");
+    });
+    it("renders the passed-in property button type property as a class", async () => {
+        await page.setContent("<wm-button></wm-button>");
+        const component = await page.find("wm-button");
+        const defaultButton = await page.find("wm-button >>> button");
+        expect(defaultButton).toHaveClass("-secondary");
+        component.setProperty("buttonType", "primary");
+        const primaryButton = await page.find("wm-button >>> button");
+        await page.waitForChanges();
+        expect(primaryButton).toHaveClass("-primary");
+    });
+});

package/dist/collection/components/wm-button/wm-button.js

@@ -183,7 +183,7 @@ export class Button {
         }
     }
     render() {
-        return (h(Host, { key: 'ae038ae6dddcd3220b1c3d027390d743e85ff3bc', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: 'e10a7276c46e73fc93b2e26b6f2f81b37625d08e', id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, this.icon && this.renderIcon(), h("span", { key: '3dbdd426484b9265107fe994c160af6f2bbd6958', class: "button-text" }, h("slot", { key: 'f5e28ec3acb64b330185f9b65d0f221fd95f1399' })), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { key: 'c2b16a69daf975cf6996aa365756574d1f74920f', class: "selector-icon svg-icon svg-expand-more" })))));
+        return (h(Host, { class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { id: this.id, class: `${this.buttonClasses}`, disabled: this.isDisabled, ref: (el) => (this.buttonEl = el), "aria-label": this.getAriaLabel(), "aria-hasPopup": this.ariaPopup ? "menu" : null, onMouseEnter: (ev) => this.handleMouseEnter(ev), onMouseLeave: () => hideTooltip(), onFocus: (ev) => this.handleFocus(ev), onBlur: () => hideTooltip(), onClick: () => hideTooltip() }, this.icon && this.renderIcon(), h("span", { class: "button-text" }, h("slot", null)), (this.buttonType == "selector" || this.buttonType == "selector-primary") && (h("div", { class: "selector-icon svg-icon svg-expand-more" })))));
     }
     static get is() { return "wm-button"; }
     static get encapsulation() { return "shadow"; }