@watermarkinsights/ripple 4.3.0 → 4.4.0-0

package/dist/collection/components/charts/wm-chart/wm-chart.spec.js

@@ -6,32 +6,32 @@ globalFuncs.generateId.mockImplementation(() => "random-id");
 import { Chart } from "./wm-chart";
 // mock ResizeObserver
 global.ResizeObserver = jest.fn().mockImplementation(() => ({
-  observe: jest.fn(),
-  unobserve: jest.fn(),
-  disconnect: jest.fn(),
+    observe: jest.fn(),
+    unobserve: jest.fn(),
+    disconnect: jest.fn(),
 }));
 describe("wm-chart", () => {
-  it("builds", async () => {
-    const page = await newSpecPage({ components: [Chart], html: '<wm-chart label="charty"></wm-chart>' });
-    expect(page.root).toMatchSnapshot();
-  });
-  it("properties and attributes", async () => {
-    const page = await newSpecPage({ components: [Chart], html: '<wm-chart label="charty"></wm-chart>' });
-    const componentWrapper = page.root.shadowRoot.querySelector(".component-wrapper");
-    expect(componentWrapper).toEqualAttribute("role", "application");
-    expect(componentWrapper).toEqualAttribute("aria-label", "charty");
-    expect(componentWrapper).toEqualAttribute("aria-roledescription", "Interactive chart");
-    expect(componentWrapper).toEqualAttribute("aria-describedby", "chart-instructions");
-  });
-  // needs refactoring before it can be tested
-  // it("generates the svg path", () => {
-  //   const chart = new Chart();
-  //   expect(chart.getPathData(122, 23)).toEqual("thing");
-  // })
-  // needs refactoring before it can be tested
-  // it("outputs the svg arc syntax", () => {
-  //   const chart = new Chart();
-  //   // the 2nd arc is set according to whether we're drawing the inner or outer arc, and whether it's concave or convex
-  //   expect(chart.getArc(23, "0 1", 34, 66)).toEqual("nene");
-  // })
+    it("builds", async () => {
+        const page = await newSpecPage({ components: [Chart], html: '<wm-chart label="charty"></wm-chart>' });
+        expect(page.root).toMatchSnapshot();
+    });
+    it("properties and attributes", async () => {
+        const page = await newSpecPage({ components: [Chart], html: '<wm-chart label="charty"></wm-chart>' });
+        const componentWrapper = page.root.shadowRoot.querySelector(".component-wrapper");
+        expect(componentWrapper).toEqualAttribute("role", "application");
+        expect(componentWrapper).toEqualAttribute("aria-label", "charty");
+        expect(componentWrapper).toEqualAttribute("aria-roledescription", "Interactive chart");
+        expect(componentWrapper).toEqualAttribute("aria-describedby", "chart-instructions");
+    });
+    // needs refactoring before it can be tested
+    // it("generates the svg path", () => {
+    //   const chart = new Chart();
+    //   expect(chart.getPathData(122, 23)).toEqual("thing");
+    // })
+    // needs refactoring before it can be tested
+    // it("outputs the svg arc syntax", () => {
+    //   const chart = new Chart();
+    //   // the 2nd arc is set according to whether we're drawing the inner or outer arc, and whether it's concave or convex
+    //   expect(chart.getArc(23, "0 1", 34, 66)).toEqual("nene");
+    // })
 });

package/dist/collection/components/charts/wm-line-chart/wm-line-chart.css

@@ -30,8 +30,7 @@
    (they can't be aligned on the baseline because of possible description text and error message)
    -------------------------------------- */
 :host {
-  --wmcolor-linechart-currentposition: var(--wmcolor-lavender);
-  /* EXCEPTION */
+  --wmcolor-linechart-currentposition: var(--wmcolor-lavender); /* EXCEPTION */
   --wmcolor-linechart-delta-text-negative: var(--wmcolor-text-negative);
   --wmcolor-linechart-delta-text-positive: var(--wmcolor-text-positive);
   --wmcolor-linechart-gridline: var(--wmcolor-chart-gridline);

package/dist/collection/components/charts/wm-line-chart/wm-line-chart.e2e.js

@@ -1,10 +1,10 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { AxePuppeteer } from "@axe-core/puppeteer";
 describe("wm-line-chart", () => {
-  let page;
-  async function createPageHelper() {
-    page = await newE2EPage();
-    await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+    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-line-chart
           label="Regional Job Trends"
           description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
@@ -19,46 +19,46 @@ describe("wm-line-chart", () => {
         >
         </wm-line-chart>
   </main></body></html>`);
-  }
-  it("passes Axe tests", async () => {
-    await createPageHelper();
-    const results = await new AxePuppeteer(page).analyze();
-    expect(results.violations.length).toBe(0);
-  });
-  it("has keyboard navigation for legend", async () => {
-    await createPageHelper();
-    // first focus goes to first button
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    await page.waitForChanges();
-    expect(activeElId).toBe("visibility-button-0");
-    // wraps right
-    await page.keyboard.press("ArrowLeft");
-    await page.waitForChanges();
-    activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    await page.waitForChanges();
-    expect(activeElId).toBe("visibility-button-1");
-    await page.keyboard.press("ArrowLeft");
-    await page.waitForChanges();
-    activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    await page.waitForChanges();
-    expect(activeElId).toBe("visibility-button-0");
-    await page.keyboard.press("ArrowRight");
-    await page.waitForChanges();
-    activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    await page.waitForChanges();
-    expect(activeElId).toBe("visibility-button-1");
-    // wraps left
-    await page.keyboard.press("ArrowRight");
-    await page.waitForChanges();
-    activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    await page.waitForChanges();
-    expect(activeElId).toBe("visibility-button-0");
-  });
-  it("has keyboard navigation for data points", async () => {
-    page = await newE2EPage();
-    await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+    }
+    it("passes Axe tests", async () => {
+        await createPageHelper();
+        const results = await new AxePuppeteer(page).analyze();
+        expect(results.violations.length).toBe(0);
+    });
+    it("has keyboard navigation for legend", async () => {
+        await createPageHelper();
+        // first focus goes to first button
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-0");
+        // wraps right
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-1");
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-0");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-1");
+        // wraps left
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("visibility-button-0");
+    });
+    it("has keyboard navigation for data points", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
     <wm-line-chart
           label="Regional Job Trends"
           description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
@@ -69,65 +69,65 @@ describe("wm-line-chart", () => {
         >
         </wm-line-chart>
   </main></body></html>`);
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    expect(activeElId).toBe("Regional-0");
-    await page.keyboard.press("ArrowRight");
-    await page.waitForChanges();
-    activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    await page.waitForChanges();
-    expect(activeElId).toBe("Regional-1");
-    await page.keyboard.press("ArrowRight");
-    await page.waitForChanges();
-    activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    expect(activeElId).toBe("Regional-2");
-    // wraps left
-    await page.keyboard.press("ArrowRight");
-    await page.waitForChanges();
-    activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    expect(activeElId).toBe("Regional-0");
-    // wraps Left
-    await page.keyboard.press("ArrowLeft");
-    await page.waitForChanges();
-    activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    expect(activeElId).toBe("Regional-2");
-    await page.keyboard.press("ArrowLeft");
-    await page.waitForChanges();
-    activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    expect(activeElId).toBe("Regional-1");
-    // next line
-    await page.keyboard.press("ArrowLeft");
-    await page.waitForChanges();
-    await page.keyboard.press("ArrowDown");
-    await page.waitForChanges();
-    activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    expect(activeElId).toBe("National-0");
-    // skips null data point
-    await page.keyboard.press("ArrowLeft");
-    await page.waitForChanges();
-    activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    expect(activeElId).toBe("National-2");
-    // wraps to first line
-    await page.keyboard.press("ArrowLeft");
-    await page.waitForChanges();
-    await page.keyboard.press("ArrowDown");
-    await page.waitForChanges();
-    activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    expect(activeElId).toBe("Regional-0");
-    // wraps to last line
-    await page.keyboard.press("ArrowUp");
-    await page.waitForChanges();
-    activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    expect(activeElId).toBe("National-0");
-    await page.keyboard.press("ArrowUp");
-    await page.waitForChanges();
-    activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    expect(activeElId).toBe("Regional-0");
-  });
-  it("visibility toggle hides lines, data points are skipped by navigation", async () => {
-    page = await newE2EPage();
-    await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-0");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        await page.waitForChanges();
+        expect(activeElId).toBe("Regional-1");
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-2");
+        // wraps left
+        await page.keyboard.press("ArrowRight");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-0");
+        // wraps Left
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-2");
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-1");
+        // next line
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-0");
+        // skips null data point
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-2");
+        // wraps to first line
+        await page.keyboard.press("ArrowLeft");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-0");
+        // wraps to last line
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-0");
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("Regional-0");
+    });
+    it("visibility toggle hides lines, data points are skipped by navigation", async () => {
+        page = await newE2EPage();
+        await page.setContent(`<html lang='en'><head><title>Page</title></head><body><main><h1>Title</h1>
     <wm-line-chart
           label="Regional Job Trends"
           description="View job trends for your region compared to national tends from the past 3 years with a 3 year projection"
@@ -138,39 +138,39 @@ describe("wm-line-chart", () => {
         >
         </wm-line-chart>
   </main></body></html>`);
-    const allLineEls = await page.findAll("wm-line-chart >>> .line");
-    expect(allLineEls[0]).not.toHaveClass("hidden");
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    // Enter key toggles button
-    await page.keyboard.press("Enter");
-    await page.waitForChanges();
-    expect(allLineEls[0]).toHaveClass("hidden");
-    // Space key toggles button
-    await page.keyboard.press("Space");
-    await page.waitForChanges();
-    expect(allLineEls[0]).not.toHaveClass("hidden");
-    await page.keyboard.press("Space");
-    await page.waitForChanges();
-    expect(allLineEls[0]).toHaveClass("hidden");
-    // tab focuses first visible data point
-    await page.keyboard.press("Tab");
-    await page.waitForChanges();
-    let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    expect(activeElId).toBe("National-0");
-    await page.keyboard.press("ArrowDown");
-    await page.waitForChanges();
-    activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    expect(activeElId).toBe("International-0");
-    // data point nav skips hidden line
-    await page.keyboard.press("ArrowDown");
-    await page.waitForChanges();
-    activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    expect(activeElId).toBe("National-0");
-    // data point nav skips hidden line
-    await page.keyboard.press("ArrowUp");
-    await page.waitForChanges();
-    activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
-    expect(activeElId).toBe("International-0");
-  });
+        const allLineEls = await page.findAll("wm-line-chart >>> .line");
+        expect(allLineEls[0]).not.toHaveClass("hidden");
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        // Enter key toggles button
+        await page.keyboard.press("Enter");
+        await page.waitForChanges();
+        expect(allLineEls[0]).toHaveClass("hidden");
+        // Space key toggles button
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        expect(allLineEls[0]).not.toHaveClass("hidden");
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        expect(allLineEls[0]).toHaveClass("hidden");
+        // tab focuses first visible data point
+        await page.keyboard.press("Tab");
+        await page.waitForChanges();
+        let activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-0");
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("International-0");
+        // data point nav skips hidden line
+        await page.keyboard.press("ArrowDown");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("National-0");
+        // data point nav skips hidden line
+        await page.keyboard.press("ArrowUp");
+        await page.waitForChanges();
+        activeElId = await page.evaluate(() => document.activeElement.shadowRoot.activeElement.id);
+        expect(activeElId).toBe("International-0");
+    });
 });