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

@watermarkinsights/ripple 5.11.0-1 → 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/charts/wm-progress-monitor/wm-progress-monitor.e2e.js ADDED Viewed

@@ -0,0 +1,69 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("Progress Monitor", () => {
+    let page;
+    async function createPageHelper() {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+    <wm-progress-monitor id="first-monitor">
+      <wm-progress-indicator label="First Indicator">
+        <wm-progress-slice amount="5" popover-title="5/20 Completed" popover-text="Popover text" popover-button-text="Button text" legend="completed" </wm-progress-slice>
+        <wm-progress-slice amount="15" popover-title="15/20 Not completed" popover-text="Popover text" popover-button-text="Button text" legend="not completed" </wm-progress-slice>
+      </wm-progress-indicator>
+      <wm-progress-indicator label="Second Indicator">
+        <wm-progress-slice amount="3" popover-title="3/20 Completed" popover-text="Popover text" popover-button-text="Button text" legend="completed" </wm-progress-slice>
+        <wm-progress-slice amount="17" popover-title="17/20 Not completed" popover-text="Popover text" popover-button-text="Button text" legend="not completed" </wm-progress-slice>
+      </wm-progress-indicator>
+    </wm-progress-monitor>
+  </main></body></html>`);
+    }
+    it("passes Axe checks", async () => {
+        await createPageHelper();
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    // Monitor toggles Indicator modes
+    it("toggles indicator modes", async () => {
+        await createPageHelper();
+        const indicator = await page.find("wm-progress-indicator");
+        page.setViewport({ width: 500, height: 900 });
+        await page.waitForChanges();
+        let classes = indicator.shadowRoot.querySelector(".component-wrapper").getAttribute("class");
+        expect(classes).toContain("bar");
+        page.setViewport({ width: 700, height: 900 });
+        await page.waitForChanges();
+        classes = indicator.shadowRoot.querySelector(".component-wrapper").getAttribute("class");
+        expect(classes).toContain("doughnut");
+    });
+    /* can't get the popover to show
+    // Slices read x of y {{popover text}}
+    it("announces the slice to SR", async () => {
+      await createPageHelper();
+      const indicator = await page.find("wm-progress-indicator");
+      await page.keyboard.press("Tab");
+      await page.waitForChanges();
+      await page.keyboard.press("ArrowDown");
+      await page.waitForChanges();
+      const popover = indicator.shadowRoot.querySelector("priv-chart-popover");
+      const results = await page.compareScreenshot();
+      expect(results).toMatchScreenshot({ allowableMismatchedPixels: 100 });
+      popover.open = true;
+      const liveRegion = popover.querySelector(".live-region");
+      expect(liveRegion.textContent).toBe("");
+    });
+      */
+    /*** E2E ***/
+    // Doughnuts display in row, bars display in column
+    // Popovers automatically appear when navigating via keyboard
+    // Popovers emit wmProgressIndicatorButtonTriggered
+    // Tab navigates through indicators, no tab stop on Monitor
+    // Clicking a slice opens the popover
+    // Clicking outside or hitting escape closes the popover
+    /*** CAN'T BE TESTED? ***/
+    // Default breakpoint is the width of all children
+    // Breakpoint is customizable
+    //// including "px" makes it px
+    //// # less than 100 refers to # of charts
+    //// # greater than 100 refers to px
+});

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.js CHANGED Viewed

@@ -11,7 +11,7 @@ export class ProgressMonitor {
         this.barLabelsWidth = undefined;
     }
     get parsedBreakpoint() {
-        const asNumber = this.parseToNum(this.breakpoint ? this.breakpoint : this.el.children.length);
+        const asNumber = this.parseToNum(this.breakpoint || this.el.children.length);
         // if number < 20, it is treated as width in terms of # of indicators. Otherwise it is a pixel value
         // e.g. 4 -> 1200px, while 768 -> 768 px
         const asPixels = asNumber >= 20 ? asNumber : asNumber * this.doughnutWidth;
@@ -59,7 +59,7 @@ export class ProgressMonitor {
         }))));
     }
     render() {
-        return (h(Host, { key: 'fc8c83f5b9efcb9a199806192f72d05407c11a55', class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && this.groupLegend && this.mode === "bar" && this.renderLegend(), this.modeInitialized && h("slot", { key: '9dd72db02fb96925e02a97c6e13cd438f1aca36f' })));
+        return (h(Host, { class: this.mode === "doughnut" ? "row" : "column" }, this.modeInitialized && this.groupLegend && this.mode === "bar" && this.renderLegend(), this.modeInitialized && h("slot", null)));
     }
     static get is() { return "wm-progress-monitor"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/charts/wm-progress-monitor/wm-progress-monitor.spec.js ADDED Viewed

@@ -0,0 +1,79 @@
+import { newSpecPage } from "@stencil/core/testing";
+import { ProgressMonitor } from "./wm-progress-monitor";
+import { ProgressIndicator } from "./wm-progress-indicator";
+import { ProgressSlice } from "./wm-progress-slice";
+import * as globalFuncs from "../../../global/functions";
+jest.spyOn(globalFuncs, "generateId");
+// @ts-ignore
+globalFuncs.generateId.mockImplementation(() => "random-id");
+// mock ResizeObserver
+global.ResizeObserver = jest.fn().mockImplementation(() => ({
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
+}));
+async function createPageHelper() {
+    return await newSpecPage({
+        components: [ProgressMonitor, ProgressIndicator, ProgressSlice],
+        html: `<wm-progress-monitor id="first-monitor">
+      <wm-progress-indicator label="First Indicator">
+        <wm-progress-slice
+          amount="5"
+          popover-title="5/20 Completed"
+          popover-text="Popover text"
+          popover-button-text="Button text"
+          legend="completed"
+        ></wm-progress-slice>
+        <wm-progress-slice
+          amount="15"
+          popover-title="15/20 Not completed"
+          popover-text="Popover text"
+          popover-button-text="Button text"
+          legend="not completed"
+        ></wm-progress-slice>
+      </wm-progress-indicator>
+      <wm-progress-indicator label="Second Indicator">
+        <wm-progress-slice
+          amount="3"
+          popover-title="3/20 Completed"
+          popover-text="Popover text"
+          popover-button-text="Button text"
+          legend="completed"
+        ></wm-progress-slice>
+        <wm-progress-slice
+          amount="17"
+          popover-title="17/20 Not completed"
+          popover-text="Popover text"
+          popover-button-text="Button text"
+          legend="not completed"
+        ></wm-progress-slice>
+      </wm-progress-indicator>
+    </wm-progress-monitor>`,
+    });
+}
+describe("Progress Monitor", () => {
+    it("builds", async () => {
+        const page = await createPageHelper();
+        expect(page.root).toMatchSnapshot();
+    });
+    it("properties and attributes", async () => {
+        var _a;
+        const page = await createPageHelper();
+        const indicator = page.root.querySelector("wm-progress-indicator");
+        expect(indicator).toHaveProperty("label");
+        expect(indicator).toHaveProperty("subinfo");
+        expect(indicator).toHaveProperty("completionMessage");
+        expect(indicator).toHaveProperty("showLegend");
+        const indicatorComponentWrapper = (_a = indicator.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(".component-wrapper");
+        expect(indicatorComponentWrapper).toEqualAttribute("role", "application");
+        expect(indicatorComponentWrapper).toEqualAttribute("aria-label", "First Indicator");
+        expect(indicatorComponentWrapper).toEqualAttribute("aria-roledescription", "Interactive chart");
+        expect(indicatorComponentWrapper).toEqualAttribute("aria-describedby", "chart-instructions");
+        const slice = page.root.querySelector("wm-progress-slice");
+        expect(slice).toHaveProperty("amount");
+        expect(slice).toHaveProperty("legend");
+        expect(slice).toHaveProperty("popoverTitle");
+        expect(slice).toHaveProperty("popoverText");
+        expect(slice).toHaveProperty("popoverButtonText");
+    });
+});