npm - @watermarkinsights/ripple - Versions diffs - 5.11.0-0 → 5.11.0-10 - Mend

@watermarkinsights/ripple 5.11.0-0 → 5.11.0-10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (430) hide show

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

@@ -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 CHANGED Viewed

@@ -190,7 +190,7 @@ export class ActionMenu {
         return null;
     }
     render() {
-        return (h(Host, { key: '36e8155b6296f8ff6e311de6c2c2069398b5da23', onBlur: () => this.close(false) }, h("div", { key: 'aa3a2fbdf09dd977d396b85f340bf7a675a97651', class: getTextDir() }, h("wm-button", { key: '634a8db4b695741c3c4903e3804b601ca2d27e88', "button-type": this.internalButtonType, tooltip: this.tooltip, "custom-background": this.darkMode ? "dark" : undefined, "label-for-identical-buttons": this.labelForIdenticalButtons, icon: this.actionMenuType === "icon" ? "f1d9" : "", 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: '7e2c9491304f64e432ac4c996aa8651f81969a3a', 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: '17f025a5c4a9bfcbb2471044aa9b27750f16d4a0' })))));
+        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 ADDED Viewed

@@ -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'");
+        });
+    });
+});