npm - @watermarkinsights/ripple - Versions diffs - 5.5.0 → 5.5.1 - Mend

@watermarkinsights/ripple 5.5.0 → 5.5.1

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 (350) hide show

package/dist/collection/components/datepickers/wm-datepicker.e2e.js DELETED Viewed

@@ -1,382 +0,0 @@
-import { newE2EPage } from "@stencil/core/testing";
-import { AxePuppeteer } from "@axe-core/puppeteer";
-describe("wm-datepicker", () => {
-    let page, component, input, btn, popup, popupTitleDay;
-    beforeEach(async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
-      <wm-datepicker id="dp" label="label"></wm-datepicker>
-      </main></body></html>`);
-        component = await page.find("wm-datepicker");
-        input = await page.find("wm-datepicker >>> input");
-        btn = await page.find("wm-datepicker >>> #toggle");
-        popup = await page.find("wm-datepicker >>> #popup");
-        popupTitleDay = await page.find("wm-datepicker >>> #popup-title-month");
-        // await page.keyboard.press("Tab");
-        // await page.waitForChanges();
-    });
-    it("passes Axe checks", async () => {
-        const results = await new AxePuppeteer(page).analyze();
-        expect(results.violations.length).toBe(0);
-    });
-    // TODO
-    // see https://dequeuniversity.com/checklists/web/form-validation-feedback
-    // for Dynamic Error Detection / Error messages
-    // see also role="alert"
-    /* INPUT */
-    // See datepicker-input.e2e.ts
-    /* BUTTON */
-    // Opening and closing the date picker
-    it("opens at today's date by default", async () => {
-        const popup = await page.find("wm-datepicker >>> .popup");
-        const today = new Date();
-        const year = today.getUTCFullYear();
-        const month = (today.getUTCMonth() + 1).toString().padStart(2, "0");
-        const day = today.getUTCDate().toString();
-        const dateTable = await popup.find("[role='grid']");
-        // await page.waitForChanges();
-        const selDate = await dateTable.find("[aria-selected='true']");
-        expect(selDate).toEqualAttribute("data-year", year);
-        expect(selDate).toEqualAttribute("data-month", month);
-        expect(selDate.textContent).toBe(day);
-    });
-    it("opens at the date in the input if there is one", async () => {
-        const input = await page.find("wm-datepicker >>> input");
-        const popup = await page.find("wm-datepicker >>> .popup");
-        await input.type("02/01/2030");
-        await component.setProperty("calendarDate", "2030-02-01");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        const dateTable = await popup.find("[role='grid']");
-        const selDate = await dateTable.find("[aria-selected='true']");
-        expect(selDate).toEqualAttribute("data-year", "2030");
-        expect(selDate).toEqualAttribute("data-month", "02");
-        expect(selDate.textContent).toBe("1");
-    });
-    it("Closes the popup when user triggers the calendar button", async () => {
-        const popup = await page.find("wm-datepicker >>> .popup");
-        await page.keyboard.press("Tab"); // in input
-        await page.keyboard.press("Tab"); // on btn
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        expect(popup).toHaveClass("open");
-        await page.keyboard.press("Escape");
-        await page.waitForChanges();
-        expect(popup).not.toHaveClass("open");
-    });
-    /* POPUP */
-    it("closes the calendar popup when the user presses ESCAPE", async () => {
-        await input.type("02/03/2019");
-        await component.setProperty("calendarDate", "2019-02-03");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        await page.keyboard.press("Escape");
-        await page.waitForChanges();
-        expect(popup).not.toHaveClass("open");
-    });
-    it("shows the next month on PAGE DOWN and shows the previous month on PAGE UP", async () => {
-        await input.type("02/03/2019");
-        await component.setProperty("calendarDate", "2019-02-03");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        await page.keyboard.press("PageDown");
-        await page.waitForChanges();
-        expect(popupTitleDay.textContent).toBe("March 2019");
-        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-        expect(activeElId).toEqual("cell-20190303");
-        await page.keyboard.press("PageUp");
-        await page.waitForChanges();
-        await page.keyboard.press("PageUp");
-        await page.waitForChanges();
-        await page.keyboard.press("PageUp");
-        await page.waitForChanges();
-        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-        expect(activeElId).toEqual("cell-20181203");
-    });
-    it("handles HOME and END keys", async () => {
-        await input.type("02/15/2020");
-        await component.setProperty("calendarDate", "2020-02-15");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        await page.keyboard.press("Home");
-        await page.waitForChanges();
-        const firstDayOfMonth = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-        expect(firstDayOfMonth).toEqual("cell-20200201");
-        await page.keyboard.press("End");
-        await page.waitForChanges();
-        const lastDayOfMonth = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-        expect(lastDayOfMonth).toEqual("cell-20200229"); // 2020 is a leap year
-    });
-    it("navigates the calendar with keyboard (day view)", async () => {
-        // left/right: -1 / +1 in the row
-        // up/down
-        await input.type("08/15/2024");
-        await component.setProperty("calendarDate", "2024-08-15");
-        await page.keyboard.press("Tab"); // on the toggle popup btn
-        await page.waitForChanges();
-        await page.keyboard.press("Enter"); // open popup
-        await page.waitForChanges();
-        await page.keyboard.press("ArrowLeft");
-        await page.waitForChanges();
-        let focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
-        await page.waitForChanges();
-        expect(focusedCell).toEqualAttribute("id", "cell-20240814");
-        await page.keyboard.press("ArrowUp");
-        await page.waitForChanges();
-        focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
-        expect(focusedCell).toEqualAttribute("id", "cell-20240807");
-        await page.keyboard.press("ArrowRight");
-        await page.waitForChanges();
-        focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
-        expect(focusedCell).toEqualAttribute("id", "cell-20240808");
-        await page.keyboard.press("ArrowDown");
-        await page.waitForChanges();
-        focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
-        expect(focusedCell).toEqualAttribute("id", "cell-20240815");
-    });
-    it("navigates the calendar with keyboard (month view)", async () => {
-        await input.type("08/15/2024");
-        await component.setProperty("calendarDate", "2024-08-15");
-        await page.keyboard.press("Tab"); // on the toggle popup btn
-        await page.waitForChanges();
-        await page.keyboard.press("Enter"); // open popup
-        await page.keyboard.down("Shift");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab"); // next btn
-        await page.waitForChanges();
-        await page.keyboard.press("Tab"); // popup-title (month + year)
-        await page.waitForChanges();
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        await page.keyboard.up("Shift");
-        await page.waitForChanges();
-        await page.keyboard.press("ArrowLeft");
-        await page.waitForChanges();
-        let focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
-        await page.waitForChanges();
-        expect(focusedCell).toEqualAttribute("id", "month-6"); // month is july (7), 0-indexed
-        await page.keyboard.press("ArrowUp");
-        await page.waitForChanges();
-        focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
-        expect(focusedCell).toEqualAttribute("id", "month-3");
-        await page.keyboard.press("ArrowRight");
-        await page.waitForChanges();
-        focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
-        expect(focusedCell).toEqualAttribute("id", "month-4");
-        await page.keyboard.press("ArrowDown");
-        await page.waitForChanges();
-        focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
-        expect(focusedCell).toEqualAttribute("id", "month-7");
-    });
-    // it("goes to the year view when the month name is clicked", async () => {
-    //  // (i.e. allows selection of a month)
-    // });
-    it("goes to the previous/next month when the arrow button is triggered in day view", async () => {
-        await input.type("11/29/1999");
-        await component.setProperty("calendarDate", "1999-11-29");
-        await page.keyboard.press("Tab"); // on the toggle popup btn
-        await page.waitForChanges();
-        await page.keyboard.press("Enter"); // open popup
-        await page.waitForChanges();
-        await page.keyboard.down("Shift");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab"); // next btn
-        await page.waitForChanges();
-        await page.keyboard.press("Tab"); // popup-title (month + year)
-        await page.waitForChanges();
-        await page.keyboard.press("Tab"); // prev btn
-        await page.waitForChanges();
-        await page.keyboard.up("Shift");
-        await page.waitForChanges();
-        await page.keyboard.press("Enter"); // press prev btn
-        await page.waitForChanges();
-        expect(popup).toHaveClasses(["open", "day-view"]);
-        expect(popupTitleDay.textContent).toBe("October 1999");
-        await page.keyboard.press("Tab"); // popup title btn
-        await page.keyboard.press("Tab"); // next btn
-        await page.keyboard.press("Enter"); // press next btn
-        await page.waitForChanges();
-        await page.keyboard.press("Enter"); // press next btn
-        await page.waitForChanges();
-        expect(popupTitleDay.textContent).toBe("December 1999");
-    });
-    it("goes to the previous/next year when the arrow button is clicked in month view", async () => {
-        await input.type("11/29/1999");
-        await component.setProperty("calendarDate", "1999-11-29");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab"); // on the toggle popup btn
-        await page.waitForChanges();
-        await page.keyboard.press("Enter"); // open popup
-        await page.waitForChanges();
-        await page.keyboard.down("Shift");
-        await page.keyboard.press("Tab"); // next btn
-        await page.waitForChanges();
-        await page.keyboard.press("Tab"); // month view btn
-        await page.waitForChanges();
-        await page.keyboard.up("Shift");
-        await page.waitForChanges();
-        await page.keyboard.press("Enter"); // press month view btn
-        await page.waitForChanges();
-        expect(popup).toHaveClasses(["open", "month-view"]);
-        const title = await popup.find("#popup-title-year");
-        expect(title.textContent).toBe("1999");
-        await page.keyboard.down("Shift");
-        await page.keyboard.press("Tab"); // next btn
-        await page.keyboard.up("Shift");
-        await page.keyboard.press("Enter"); // press next btn
-        await page.waitForChanges();
-        expect(title.textContent).toBe("2000");
-        await page.keyboard.down("Shift");
-        await page.keyboard.press("Tab"); // year btn
-        await page.keyboard.down("Shift");
-        await page.keyboard.press("Tab"); // prev btn
-        await page.keyboard.up("Shift");
-        await page.keyboard.press("Enter"); // press prev btn
-        await page.waitForChanges();
-        expect(title.textContent).toBe("1999");
-        await page.keyboard.press("Enter"); // press prev btn
-        await page.waitForChanges();
-        await page.keyboard.press("Enter"); // press prev btn
-        await page.waitForChanges();
-        expect(title.textContent).toBe("1997");
-    });
-    it("has the aria attributes related to the popup", async () => {
-        // NB "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/TR/wai-aria-1.1/#aria-expanded
-        expect(btn).toHaveAttribute("aria-expanded");
-        // Not sure is aria-haspopup is necessary. If it is present the popup should have a role
-        // if that role is grid (the only role that seems to correspond) then the cells must have
-        // a role of gridcell
-        // https://www.w3.org/TR/wai-aria/#aria-haspopup
-        // expect(btn).toHaveAttribute("aria-haspopup");
-        //Removed aria-controls since the popup comes immediately after the aria-expanded controller:
-        //https://www.heydonworks.com/article/aria-controls-is-poop
-    });
-    it("toggles aria-expanded attribute", async () => {
-        expect(btn).toEqualAttribute("aria-expanded", "false");
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Tab");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        expect(btn).toEqualAttribute("aria-expanded", "true");
-    });
-    it("properly fills the-label on table cells", async () => {
-        // screen reader should read "Thursday, May 10 2018" on focus
-        // screen reader should read "Thursday, May 10 2018, selected" on select
-        await input.type("05/10/2018");
-        await component.setProperty("calendarDate", "2018-05-10");
-        await page.waitForChanges();
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        const focusedCell = await popup.find("[role='gridcell'][tabindex='0']");
-        await page.waitForChanges();
-        // day of the week is read by sr bcse it's the table column
-        expect(focusedCell).toEqualAttribute("aria-label", "Thursday, May 10, 2018");
-        // screen reader should read "Thursday, May 10 2018, selected" on select
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        const selCell = await popup.find("[aria-selected='true']");
-        // day of the week is read by sr bcse it's the table column
-        expect(selCell).toEqualAttribute("aria-label", "Thursday, May 10, 2018");
-    });
-    it("aligns dates properly", async () => {
-        // -> check that both 01/01/1999 and 12/31/2100 are in the Friday column
-        // couldn't figure this one out...
-    });
-    it("emits event on input blur", async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
-      <wm-datepicker id="dp" label="label"></wm-datepicker>
-      <div id="indicator">no event heard</div>
-      </main></body></html>`);
-        component = await page.find("wm-datepicker");
-        input = await page.find("wm-datepicker >>> input");
-        await page.waitForChanges();
-        await page.evaluate(async () => {
-            const indicator = document.querySelector("#indicator");
-            await document.addEventListener("wmDatepickerInputBlurred", () => (indicator.textContent = "event heard"));
-        });
-        await page.waitForChanges;
-        const indicator = await page.find("#indicator");
-        expect(indicator.textContent).toBe("no event heard");
-        await input.type("05/10/2018");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        expect(indicator.textContent).toBe("event heard");
-    });
-    it("emits event on change", async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
-      <wm-datepicker id="dp" label="label"></wm-datepicker>
-      <div id="indicator">events heard: 0</div>
-      </main></body></html>`);
-        component = await page.find("wm-datepicker");
-        input = await page.find("wm-datepicker >>> input");
-        await page.waitForChanges();
-        await page.evaluate(async () => {
-            const indicator = document.querySelector("#indicator");
-            await document
-                .querySelector("wm-datepicker")
-                .addEventListener("change", () => (indicator.textContent =
-                indicator.textContent.slice(0, -1) + (parseInt(indicator.textContent.slice(-1)) + 1)));
-        });
-        await page.waitForChanges;
-        const indicator = await page.find("#indicator");
-        expect(indicator.textContent).toBe("events heard: 0");
-        // user types date
-        await input.type("05/10/2018");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        expect(indicator.textContent).toBe("events heard: 1");
-        // user selects date from calendar
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        await page.keyboard.press("ArrowRight");
-        await page.keyboard.press("Enter");
-        await page.waitForChanges();
-        expect(indicator.textContent).toBe("events heard: 2");
-    });
-    it("emits event with date on cell selection", async () => {
-        page = await newE2EPage();
-        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
-      <wm-datepicker id="dp" value="12/30/1999" label="label"></wm-datepicker>
-      <div id="indicator"></div>
-      </main></body></html>`);
-        component = await page.find("wm-datepicker");
-        input = await page.find("wm-datepicker >>> input");
-        await page.waitForChanges();
-        await page.evaluate(async () => {
-            const indicator = document.querySelector("#indicator");
-            await document.querySelector("wm-datepicker").addEventListener("wmDatepickerDateSelected", (ev) => (indicator.textContent =
-                //@ts-ignore
-                `date received: ${ev.detail.date}`));
-        });
-        await page.waitForChanges;
-        const indicator = await page.find("#indicator");
-        // user types date
-        await page.keyboard.press("Tab");
-        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(indicator.textContent).toBe("date received: 1999-12-30");
-    });
-});
-// Sources:
-// https://watermarkinsights.atlassian.net/browse/DNP-3411
-// https://watermarkinsights.atlassian.net/browse/DNP-4318
-// https://axesslab.com/accessible-datepickers/
-// https://www.w3.org/WAI/PF/HTML/wiki/Datepickers

package/dist/collection/components/datepickers/wm-datepicker.spec.js DELETED Viewed

@@ -1,21 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import * as globalFunctions from "../../global/functions";
-jest.spyOn(globalFunctions, "generateId").mockReturnValue("random-id");
-import { DatePicker } from "./wm-datepicker";
-describe("wm-datepicker", () => {
-    it("builds", async () => {
-        const comp = await newSpecPage({
-            components: [DatePicker],
-            html: '<wm-datepicker label="mock label"></wm-datepicker>',
-        });
-        expect(comp.root).toMatchSnapshot();
-    });
-    it("sets input to required", async () => {
-        const page = await newSpecPage({
-            components: [DatePicker],
-            html: `<wm-datepicker label='datepicker' required-field='true'></wm-datepicker>`,
-        });
-        const input = await page.root.shadowRoot.querySelector("input");
-        expect(input).toEqualAttribute("aria-required", "true");
-    });
-});

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

@@ -1,200 +0,0 @@
-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.spec.js DELETED Viewed

@@ -1,48 +0,0 @@
-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'");
-        });
-    });
-});