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-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

@@ -183,7 +183,7 @@ export class Button {
         }
     }
     render() {
-        return (h(Host, { key: 'c35425fa7bb6a6ee1c22582581872c391e23d2fa', class: `${this.isDisabled ? "button-disabled" : ""} -${this.buttonType}` }, h("button", { key: 'fda9104d4017f219b7ecaf128649dba958cbd32c', 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: '648c49b91afca7d9461f32716df7ee01f04e4d19', class: "button-text" }, h("slot", { key: '23e124d4a4519df0f1f825018efe11a3e0584aef' })))));
+        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"; }

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