@watermarkinsights/ripple 4.2.0-1 → 4.2.0

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

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

@@ -1,65 +1,65 @@
 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>
+  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("toggles user-is-tabbing class", async () => {
-        await page.setContent("<wm-button></wm-button>");
-        const button = await page.find("wm-button >>> button");
-        await page.keyboard.press("Tab");
-        await page.waitForChanges();
-        expect(button).toHaveClass("user-is-tabbing");
-        await page.mouse.click(-10, -10);
-        await page.waitForChanges();
-        expect(button).not.toHaveClass("user-is-tabbing");
-    });
-    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");
+    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("toggles user-is-tabbing class", async () => {
+    await page.setContent("<wm-button></wm-button>");
+    const button = await page.find("wm-button >>> button");
+    await page.keyboard.press("Tab");
+    await page.waitForChanges();
+    expect(button).toHaveClass("user-is-tabbing");
+    await page.mouse.click(-10, -10);
+    await page.waitForChanges();
+    expect(button).not.toHaveClass("user-is-tabbing");
+  });
+  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");
+  });
 });