npm - @watermarkinsights/ripple - Versions diffs - 5.2.1-2 → 5.2.1 - Mend

@watermarkinsights/ripple 5.2.1-2 → 5.2.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 (374) 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: 'b7837795e21f17c3dd39b07a7793fb6618ea4266', onBlur: () => this.close(false) }, h("div", { key: 'cf91d1c9c4d219f9a5a4e8515bd65a8e6be6f66e', class: getTextDir() }, h("wm-button", { key: 'e3a96d49020444b6e144f076b21d330c0b51f8a4', "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: 'bc01f9c3df76416f41be0dffbd4413ef462e1c26', 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: 'ab2d540947baccd6ed16fa6d1cc32bc61e8c847c' })))));
+        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" ? "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", { 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'");
+        });
+    });
+});

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

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

@@ -166,7 +166,7 @@ export class Button {
         }
     }
     render() {
-        return (h(Host, { key: 'b0a1fc9ed2ba71f10e6829bd92552edf4cc61713', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: '2d7f90caad6311d35fc61be079d5492c0da77b8e', 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 && (h("span", { key: 'eebe3af5e1105a5adb3939a2fa9cc7cbb09ded38', class: "mdi", style: this.iconStyles, "aria-hidden": "true" }, String.fromCodePoint(parseInt(`0x${this.icon}`)))), h("span", { key: 'ea3115ae0ffa964e69e58f125bedf5e7dbd334c0', class: "button-text" }, h("slot", { key: '184b3d077d4bc2c5d37ae9fb119178783776672a' })))));
+        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 && (h("span", { class: "mdi", style: this.iconStyles, "aria-hidden": "true" }, String.fromCodePoint(parseInt(`0x${this.icon}`)))), h("span", { class: "button-text" }, h("slot", null)))));
     }
     static get is() { return "wm-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/wm-button/wm-button.spec.js ADDED Viewed

@@ -0,0 +1,74 @@
+import { newSpecPage } from "@stencil/core/testing";
+import * as globalFunctions from "../../global/functions";
+jest.spyOn(globalFunctions, "generateId").mockReturnValue("random-id");
+import { Button } from "./wm-button";
+describe("button", () => {
+    it("builds", async () => {
+        const page = await newSpecPage({
+            components: [Button],
+            html: "<wm-button></wm-button>",
+        });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("has style and an icon type props with default values", async () => {
+        const page = await newSpecPage({
+            components: [Button],
+            html: "<wm-button></wm-button>",
+        });
+        const button = page.root;
+        const buttonEl = page.root.shadowRoot.querySelector("button");
+        expect(button).toHaveProperty("buttonType");
+        expect(button.buttonType).toEqual("secondary");
+        expect(buttonEl).toHaveClass("-secondary");
+        expect(button).toHaveProperty("icon");
+        expect(button.icon).toEqual(undefined);
+        expect(button).toHaveProperty("iconSize");
+        expect(button.iconSize).toBeUndefined;
+    });
+    it("has a method that validates the style property and resets an invalid property to a button type of secondary", async () => {
+        const page = await newSpecPage({
+            components: [Button],
+            html: "<wm-button></wm-button>",
+        });
+        const button = page.root;
+        expect(button).toHaveProperty("buttonType");
+        button.setAttribute("button-type", "foobar");
+        expect(button.buttonType).toEqual("secondary");
+    });
+    it("sets the aria label if the property labelForIdenticalButtons is passed", async () => {
+        const page = await newSpecPage({
+            components: [Button],
+            html: "<wm-button label-for-identical-buttons='read this instead of the text'>Button</wm-button>",
+        });
+        const button = page.root.shadowRoot.querySelector("button");
+        expect(button).toEqualAttribute("aria-label", "read this instead of the text");
+    });
+    // TOOLTIP
+    describe("error throwing", () => {
+        it("throws error when icononly or navigational button used without tooltip", async () => {
+            const mockFunc = jest.fn();
+            console.error = mockFunc;
+            await newSpecPage({
+                components: [Button],
+                html: "<wm-button icon='f1c0' button-type='icononly'></wm-button>",
+            });
+            expect(mockFunc).toHaveBeenCalledWith("wm-button should have a valid 'tooltip' property when button-type is set to 'icononly' or 'navigational'.");
+            const mockFunc2 = jest.fn();
+            console.error = mockFunc2;
+            await newSpecPage({
+                components: [Button],
+                html: "<wm-button icon='f1c0' button-type='navigational'></wm-button>",
+            });
+            expect(mockFunc2).toHaveBeenCalledWith("wm-button should have a valid 'tooltip' property when button-type is set to 'icononly' or 'navigational'.");
+        });
+        it("throws error when icononly button used without icon", async () => {
+            const mockFunc = jest.fn();
+            console.error = mockFunc;
+            await newSpecPage({
+                components: [Button],
+                html: "<wm-button button-type='icononly' tooltip='edit'></wm-button>",
+            });
+            expect(mockFunc).toHaveBeenCalledWith("wm-button should have a valid 'icon' property when button-type is set to 'icononly' or 'navigational'.");
+        });
+    });
+});

package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.js CHANGED Viewed

@@ -534,11 +534,11 @@ export class PrivDatepicker {
     }
     render() {
         const dates = this.getCalendarDates(this.monthInFocus, this.yearInFocus);
-        return (h("div", { key: '63dd17051b10d920b9763c2b63c7118afa864893', class: "container", id: "wm-container" }, h("button", { key: 'a627ca7a362da89e6459e29d16c6a186a2abab16', disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "date-input", ref: (el) => (this.buttonEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { key: 'b8fe448b71923d162da3255122b9691d4079b69a', class: "calendar", title: intl.formatMessage({
+        return (h("div", { class: "container", id: "wm-container" }, h("button", { disabled: this.disabled, onClick: this.togglePopup.bind(this), "aria-describedby": "date-input", ref: (el) => (this.buttonEl = el), "aria-expanded": `${this.isExpanded}`, class: "toggle", id: "toggle" }, h("span", { class: "calendar", title: intl.formatMessage({
                 id: "date.calendarView",
                 defaultMessage: "Calendar View",
                 description: "Calendar button",
-            }) })), h("div", { key: '7c63c85d3683903cd8557f2412acdccf2b349d09', class: `popup ${this.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true), role: "application", "aria-describedby": "application" }, this.view === "day" ? (h("div", { class: "day-view" }, h("div", { class: "calendar-header" }, h("button", { onClick: () => {
+            }) })), h("div", { class: `popup ${this.view}-view ${this.openUp ? "expand-upwards" : ""}`, id: "popup", ref: (el) => (this.popupEl = el), onClick: () => (this.popupClicked = true), role: "application", "aria-describedby": "application" }, this.view === "day" ? (h("div", { class: "day-view" }, h("div", { class: "calendar-header" }, h("button", { onClick: () => {
                 this.prevClicked = true;
                 this.popupClicked = true;
                 this.backOneMonth();
@@ -623,15 +623,15 @@ export class PrivDatepicker {
             .slice(6, 9)
             .map((month, index) => this.renderMonths(month, index + 6))), h("div", { role: "row", class: "month-row" }, this.calendar_months
             .slice(9)
-            .map((month, index) => this.renderMonths(month, index + 9))))))), this.isExpanded && h("div", { key: 'd6498e254f33356e698b38fc803e6c7dd8dc754b', id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { key: '023003cea63532f55a674d6e75aad6d2efca5d32', id: "month-title", class: "sr-only" }, intl.formatMessage({
+            .map((month, index) => this.renderMonths(month, index + 9))))))), this.isExpanded && h("div", { id: "live-region", "aria-live": "polite", "aria-relevant": "text", class: "sr-only" }), h("div", { id: "month-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectMonth",
             defaultMessage: "Activate to select a month.",
             description: "Calendar button",
-        })), h("div", { key: '0c6358445c65906e90e3b97d560a8efa558849e0', id: "year-title", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { id: "year-title", class: "sr-only" }, intl.formatMessage({
             id: "date.selectYear",
             defaultMessage: "Activate to select a year.",
             description: "Calendar button",
-        })), h("div", { key: '86ce610bb1f0b5ecf202ed7009aaf24d1d8fff90', id: "application", class: "sr-only" }, intl.formatMessage({
+        })), h("div", { id: "application", class: "sr-only" }, intl.formatMessage({
             id: "date.instructions",
             defaultMessage: "Use arrows to select a date in the table. Tab left or right to buttons for selecting previous month, next month, or the month selection table.",
         }))));

package/dist/collection/components/wm-datepicker/priv-datepicker/priv-datepicker.spec.js ADDED Viewed

@@ -0,0 +1,76 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { PrivDatepicker } from "./priv-datepicker";
+describe("priv-datepicker", () => {
+    // ts erroneously prints a warning (unused var)
+    // @ts-ignore
+    let page, privDatepicker;
+    beforeEach(async () => {
+        page = await newSpecPage({
+            components: [PrivDatepicker],
+            html: "<priv-datepicker></priv-datepicker>",
+        });
+        privDatepicker = page.root;
+    });
+    it("gets the number of days in a month", async () => {
+        const pd = new PrivDatepicker();
+        expect(pd.getMonthDays(1, 2021)).toBe(31);
+        expect(pd.getMonthDays(2, 2021)).toBe(28);
+        expect(pd.getMonthDays(2, 2020)).toBe(29);
+        expect(pd.getMonthDays(11, 2067)).toBe(30);
+        expect(pd.getMonthDays(13, 2)).toBe(31); // returns 31 by default
+    });
+    it("pads numbers", async () => {
+        const pd = new PrivDatepicker();
+        expect(pd.zeroPad(3, 1)).toBe("3");
+        expect(pd.zeroPad(3, 2)).toBe("03");
+        expect(pd.zeroPad(3, 3)).toBe("003");
+        expect(pd.zeroPad("003", 3)).toBe("003");
+        expect(pd.zeroPad("12345", 3)).toBe("12345");
+        expect(pd.zeroPad("12345.34", 3)).toBe("12345.34");
+    });
+    it("removes leading zeroes", async () => {
+        const pd = new PrivDatepicker();
+        expect(pd.removeZeroes("12")).toBe(12);
+        expect(pd.removeZeroes("01")).toBe(1);
+        expect(pd.removeZeroes("0001312")).toBe(1312);
+        // note that the function only works for integers
+        // the following would fail
+        // expect(pd.removeZeroes("3.1415")).toBe(3.1415);
+    });
+    it("finds the first weekday of the month", async () => {
+        // 1 = Sunday, 7 = Saturday
+        const pd = new PrivDatepicker();
+        expect(pd.getMonthFirstDay(2, 2021)).toBe(2); // Mon
+        expect(pd.getMonthFirstDay(7, 1986)).toBe(3); // Tue
+        expect(pd.getMonthFirstDay(12, 2030)).toBe(1); // Sun
+    });
+    it("finds the previous month", async () => {
+        const pd = new PrivDatepicker();
+        expect(pd.getPreviousMonth(12, 2000)).toStrictEqual({ month: 11, year: 2000 });
+        expect(pd.getPreviousMonth(1, 2000)).toStrictEqual({ month: 12, year: 1999 });
+    });
+    it("finds the next month", async () => {
+        const pd = new PrivDatepicker();
+        expect(pd.getNextMonth(12, 2000)).toStrictEqual({ month: 1, year: 2001 });
+        expect(pd.getNextMonth(1, 2000)).toStrictEqual({ month: 2, year: 2000 });
+    });
+    it("generates the calendar dates", async () => {
+        const pd = new PrivDatepicker();
+        expect(pd.getCalendarDates(8, 2021)).toMatchSnapshot();
+    });
+    it("checks if the date is today", async () => {
+        // format is array with year, month, day
+        const pd = new PrivDatepicker();
+        expect(pd.isDateToday(["2012", "12", "12"])).toBe(false);
+        expect(pd.isDateToday(["2021", "9", "13"])).toBe(false);
+        const today = new Date();
+        let todayDateArray = [
+            today.getFullYear().toString(),
+            (today.getMonth() + 1).toString(),
+            today.getDate().toString(),
+        ];
+        todayDateArray[1] = pd.zeroPad(todayDateArray[1], 2);
+        todayDateArray[2] = pd.zeroPad(todayDateArray[2], 2);
+        expect(pd.isDateToday(todayDateArray)).toBe(true);
+    });
+});