@watermarkinsights/ripple 4.2.0-0 → 4.2.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,7 +30,8 @@
    (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");
+  });
 });