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

@watermarkinsights/ripple 5.11.0-1 → 5.11.0-11

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/priv-chart-popover/priv-chart-popover.e2e.js ADDED Viewed

@@ -0,0 +1,81 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { AxePuppeteer } from "@axe-core/puppeteer";
+describe("priv-chart-popover", () => {
+    let page,
+    // chart: any,
+    // paths: any,
+    host, liveRegion;
+    beforeEach(async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main style="height: 3000px"><h1>Title</h1>
+      <wm-chart label="the label">
+      <wm-chart-slice amount="2" legend="Realized" popover-title="2/10" popover-text="Dreams Realized" popover-button-text="Click for bucket list"></wm-chart-slice>
+      <wm-chart-slice amount="8" legend="Not Realized" popover-title="8/10" popover-text="Dreams Not Realized" popover-button-text="Click for bucket list"></wm-chart-slice>
+      </wm-chart>
+      </main></body></html>`);
+        // chart = await page.find("wm-chart");
+        // paths = await page.findAll("wm-chart >>> path");
+        host = await page.find("wm-chart >>> priv-chart-popover");
+        liveRegion = await page.find("wm-chart >>> .live-region");
+        // firstRect = await page.evaluate(() => {
+        //   document.querySelector("wm-chart")!.shadowRoot!.querySelectorAll("rect")
+        // })
+        await page.waitForChanges();
+    });
+    it("passes Axe checks", async () => {
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("renders", async () => {
+        expect(host).not.toBeNull();
+    });
+    it("is has a live region", async () => {
+        expect(liveRegion).toEqualAttribute("aria-live", "polite");
+    });
+    // keyboard actions are handled from wm-chart. popover never actually receives focus
+    it("shows and hide the popover", async () => {
+        // initially div.popover is not there (content is not rendered when it is closed)
+        let popover = await page.find("wm-chart >>> .popover");
+        expect(popover).toBeNull();
+        // it opens / renders content when path is focused
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        popover = await page.find("wm-chart >>> .popover");
+        expect(popover).not.toBeNull();
+        // closes on click away
+        await page.click("h1"); // click out of the component or slice
+        await page.waitForChanges();
+        popover = await page.find("wm-chart >>> .popover");
+        expect(popover).toBeNull();
+    });
+    it("hides the popover on scroll", async () => {
+        // initially div.popover is not there (content is not rendered when it is closed)
+        let popover = await page.find("wm-chart >>> .popover");
+        expect(popover).toBeNull();
+        // it opens / renders content when path is focused
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        popover = await page.find("wm-chart >>> .popover");
+        expect(popover).not.toBeNull();
+        // closes on scroll
+        page.evaluate(() => {
+            window.scrollBy(0, 2000);
+        });
+        await page.waitForTimeout(300); // waitForChanges alone doesn't always work
+        await page.waitForChanges(); // but somehow both are needed
+        popover = await page.find("wm-chart >>> .popover");
+        expect(popover).toBeNull();
+    });
+    // button fires event wmPopoverButtonClicked when clicked, but I can't figure out how to test if the event has fired
+});
+// Not tested:
+// Screen readers should re-announce the content when the button is clicked a second time (or more). Otherwise the parent element looks interactive but is inert.
+// Sources:
+// https://inclusive-components.design/tooltips-toggletips/
+// https://www.w3.org/WAI/PF/aria/roles#status
+// https://watermarkinsights.atlassian.net/wiki/spaces/WDS/pages/51938711/Popovers
+// https://watermarkinsights.atlassian.net/secure/RapidBoard.jspa?rapidView=26&projectKey=DS&modal=detail&selectedIssue=DS-12

package/dist/collection/components/charts/priv-chart-popover/priv-chart-popover.js CHANGED Viewed

@@ -111,11 +111,11 @@ export class ChartPopover {
         const titleAffordance = this.sliceDetails &&
             this.sliceDetails.title &&
             (this.sliceDetails.title[0] === "-" ? "negative" : this.sliceDetails.title[0] === "+" ? "positive" : "");
-        return (h(Host, { key: 'd62b06c6554267fda571e17ec1cab1f38e9749cd' }, !!this.open && this.sliceDetails ? (h("div", { "aria-hidden": "true", class: "popover" }, h("h1", { class: `title ${titleAffordance}` }, this.sliceDetails.title), h("p", { class: "text" }, this.sliceDetails.text), this.sliceDetails.buttonText ? (
+        return (h(Host, null, !!this.open && this.sliceDetails ? (h("div", { "aria-hidden": "true", class: "popover" }, h("h1", { class: `title ${titleAffordance}` }, this.sliceDetails.title), h("p", { class: "text" }, this.sliceDetails.text), this.sliceDetails.buttonText ? (
         // @ts-ignore
         h("button", { tabindex: "-1",
             // @ts-ignore
-            focusable: "false", class: "popover-button", onClick: () => this.handleButtonClick() }, h("svg", { class: "btn-icon", height: "9", width: "9" }, h("path", { fill: "#575195", d: "M0 3.38v2.25h9V3.38H0zM0 0v2.25h4.5V0H0zm6.19 6.75H0V9h6.19V6.75z" })), h("span", { class: "button-text" }, this.sliceDetails.buttonText))) : (""))) : (""), h("div", { key: 'fb7f82f2ea6b6b37a6c25fdc542792244aeb3975', ref: (el) => (this.liveRegion = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.open && this.renderLiveRegion())));
+            focusable: "false", class: "popover-button", onClick: () => this.handleButtonClick() }, h("svg", { class: "btn-icon", height: "9", width: "9" }, h("path", { fill: "#575195", d: "M0 3.38v2.25h9V3.38H0zM0 0v2.25h4.5V0H0zm6.19 6.75H0V9h6.19V6.75z" })), h("span", { class: "button-text" }, this.sliceDetails.buttonText))) : (""))) : (""), h("div", { ref: (el) => (this.liveRegion = el), class: "live-region sr-only", "aria-live": "polite", "aria-atomic": "true" }, this.open && this.renderLiveRegion())));
     }
     static get is() { return "priv-chart-popover"; }
     static get originalStyleUrls() {
@@ -153,7 +153,7 @@ export class ChartPopover {
                 "mutable": false,
                 "complexType": {
                     "original": "SliceDetails",
-                    "resolved": "undefined | { amount: number; perc: number; legend: string | null; color: string; offset: number; id: string; title: string | null; text: string | null; buttonText: string | null; sliceRef: Element; inSmallCluster: boolean; index: number; coords?: { x: number; y: number; } | undefined; }",
+                    "resolved": "undefined | { amount: number; visualAmount: number; perc: number; legend: string | null; color: string; offset: number; id: string; title: string | null; text: string | null; buttonText: string | null; sliceRef: Element; inSmallCluster: boolean; index: number; coords?: { x: number; y: number; } | undefined; }",
                     "references": {
                         "SliceDetails": {
                             "location": "import",

package/dist/collection/components/charts/screenshots.e2e.js ADDED Viewed

@@ -0,0 +1,96 @@
+import { newE2EPage } from "@stencil/core/testing";
+// split into different tests because screenshot functionality currently has a non-customizable, 600x600px viewport
+// see https://stenciljs.com/docs/screenshot-visual-diff
+describe("wm-chart", () => {
+    it("doughnut1 doesn't change", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<wm-chart id="doughnut1" chart-type="doughnut1" label="Type: doughnut1">
+      <wm-chart-slice amount="9" legend="Direct" popover-title="9/10" popover-text="Direct Measures"></wm-chart-slice>
+      <wm-chart-slice amount="1" legend="Indirect" popover-title="1/10" popover-text="Indirect Measures"></wm-chart-slice>
+      <wm-chart-slice amount="0" legend="Unspecified" popover-title="0/10" popover-text="Unspecified Measures"></wm-chart-slice>
+    </wm-chart>`);
+        const results = await page.compareScreenshot();
+        expect(results).toMatchScreenshot({ allowableMismatchedPixels: 10 });
+    });
+    it("doughnut2 & doughnut2b don't change", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<wm-chart id="doughnut2" chart-type="doughnut2" label="Type: doughnut2">
+      <wm-chart-slice amount="4" legend="Met" popover-title="4/15" popover-text="Objectives Met" popover-button-text="Direct Details"></wm-chart-slice>
+      <wm-chart-slice amount="5" legend="Not Met" popover-title="5/15" popover-text="Objectives Not Met" popover-button-text="Indirect Details"></wm-chart-slice>
+      <wm-chart-slice amount="6" legend="Not started" popover-title="6/15" popover-text="Objectives Not Started"></wm-chart-slice>
+    </wm-chart>
+    <wm-chart id="doughnut2b" chart-type="doughnut2" label="Type: doughnut2">
+      <wm-chart-slice amount="10" legend="Low Risk" popover-title="10/200" popover-text="Students at Low Risk"></wm-chart-slice>
+      <wm-chart-slice amount="115" legend="Medium Risk" popover-title="115/200" popover-text="Students at Medium Risk"></wm-chart-slice>
+      <wm-chart-slice amount="35" legend="High Risk" popover-title="35/200" popover-text="Students at High Risk"></wm-chart-slice>
+      <wm-chart-slice amount="40" legend="Not Indicated" popover-title="40/200" popover-text="Students Not Indicated"></wm-chart-slice>
+    </wm-chart>`);
+        const results = await page.compareScreenshot();
+        expect(results).toMatchScreenshot({ allowableMismatchedPixels: 10 });
+    });
+    it("doughnut3 doesn't change", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<wm-chart id="doughnut3" chart-type="doughnut3" label="Type: doughnut3">
+      <wm-chart-slice amount="1" legend="Non risus" popover-title="1/15" popover-text="Lorem"></wm-chart-slice>
+      <wm-chart-slice amount="2" legend="Non mi mattis" popover-title="2/15" popover-text="Ispum"></wm-chart-slice>
+      <wm-chart-slice amount="3" legend="Pulvinar" popover-title="3/15" popover-text="Dolor sit amet"></wm-chart-slice>
+      <wm-chart-slice amount="4" legend="Cras ut" popover-title="4/15" popover-text="Consectetur"></wm-chart-slice>
+      <wm-chart-slice amount="1" legend="Dui congue" popover-title="1/15" popover-text="Adipiscing elit"></wm-chart-slice>
+      <wm-chart-slice amount="2" legend="Ante faucibus" popover-title="2/15" popover-text="Duis vitae dapidus erat"></wm-chart-slice>
+      <wm-chart-slice amount="3" legend="Finibus" popover-title="3/15" popover-text="Cras"></wm-chart-slice>
+    </wm-chart>`);
+        const results = await page.compareScreenshot();
+        expect(results).toMatchScreenshot({ allowableMismatchedPixels: 10 });
+    });
+    it("bar2-5 don't change", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+  <wm-chart chart-type="bar2" label="An Example of a bar2 Chart" value-format="percentage">
+    <wm-chart-slice amount="4" legend="Not Started" popover-title="4/10" popover-text="Outcomes Not Started"></wm-chart-slice>
+    <wm-chart-slice amount="3" legend="In Progress" popover-title="3/10" popover-text="Outcomes In Progress"></wm-chart-slice>
+    <wm-chart-slice amount="1" legend="Met" popover-title="1/10" popover-text="Outcomes Met"></wm-chart-slice>
+    <wm-chart-slice amount="2" legend="Not Met" popover-title="2/10" popover-text="Outcomes Not Met"></wm-chart-slice>
+  </wm-chart>
+  <wm-chart chart-type="bar3" label="An Example of a bar3 Chart" value-format="percentage">
+    <wm-chart-slice amount="1" legend="Exceeded" popover-title="1/10" popover-text="Outcomes Exceeded" popover-button-text="Exceeded Details"></wm-chart-slice>
+    <wm-chart-slice amount="2" legend="Met" popover-title="2/10" popover-text="Outcomes Met" popover-button-text="Met Details"></wm-chart-slice>
+    <wm-chart-slice amount="3" legend="Approached" popover-title="3/10" popover-text="Outcomes Approached"></wm-chart-slice>
+    <wm-chart-slice amount="4" legend="Not Met" popover-title="4/10" popover-text="Outcomes Not Met"></wm-chart-slice>
+  </wm-chart>
+  <wm-chart chart-type="bar4" label="An Example of a bar4 Chart" value-format="none">
+    <wm-chart-slice amount="1" legend="Not started" popover-title="1/10" popover-text="Outcomes Not Started"></wm-chart-slice>
+    <wm-chart-slice amount="3" legend="In Progress" popover-title="3/10" popover-text="Outcomes In Progress"></wm-chart-slice>
+    <wm-chart-slice amount="6" legend="Completed" popover-title="6/10" popover-text="Completed Outcomes"></wm-chart-slice>
+  </wm-chart>
+  <wm-chart chart-type="bar5" label="An Example of a bar5 Chart" value-format="amount">
+    <wm-chart-slice amount="1" legend="Non risus" popover-title="1/15" popover-text="Lorem"></wm-chart-slice>
+    <wm-chart-slice amount="2" legend="Non mi mattis" popover-title="2/15" popover-text="Ispum"></wm-chart-slice>
+    <wm-chart-slice amount="3" legend="Pulvinar" popover-title="3/15" popover-text="Dolor sit amet"></wm-chart-slice>
+    <wm-chart-slice amount="4" legend="Cras ut" popover-title="4/15" popover-text="Consectetur"></wm-chart-slice>
+    <wm-chart-slice amount="1" legend="Dui congue" popover-title="1/15" popover-text="Adipiscing elit"></wm-chart-slice>
+    <wm-chart-slice amount="2" legend="Ante faucibus" popover-title="2/15" popover-text="Duis vitae dapidus erat"></wm-chart-slice>
+    <wm-chart-slice amount="3" legend="Finibus" popover-title="3/15" popover-text="Cras"></wm-chart-slice>
+  </wm-chart>`);
+        const results = await page.compareScreenshot();
+        expect(results).toMatchScreenshot({ allowableMismatchedPixels: 10 });
+    });
+    it("progress monitor doesn't change", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<wm-progress-monitor id="organization-progress" group-legend="Complete,Incomplete">
+  <wm-progress-indicator label="Learning Outcomes">
+    <wm-progress-slice amount="12" popover-title="12/20" popover-text="Organizations with outcomes" legend="Created"></wm-progress-slice>
+    <wm-progress-slice amount="8" popover-title="8/20" popover-text="Organizations without outcomes" legend="Not created"></wm-progress-slice>
+  </wm-progress-indicator>
+  <wm-progress-indicator label="Mapped to ILOs" completion-message="All mapped!">
+    <wm-progress-slice amount="20" popover-title="20/20" popover-text="Programs with a curriculum map" legend="Mapped"></wm-progress-slice>
+    <wm-progress-slice amount="0" popover-title="0/20" popover-text="Programs without a curriculum map" legend="Not mapped"></wm-progress-slice>
+  </wm-progress-indicator>
+</wm-progress-monitor>`);
+        const results = await page.compareScreenshot();
+        expect(results).toMatchScreenshot({ allowableMismatchedPixels: 10 });
+    });
+});