@watermarkinsights/ripple 5.5.0 → 5.5.1

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

@@ -1,163 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { LineChart } from "./wm-line-chart";
-// 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: [LineChart],
-        html: `<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"
-    x-axis-label="Year"
-    y-axis-label="Change Since 2020"
-    line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13, "2023": null, "2024": 20, "2025": 23, "2026": 25, "2027": 32, "2028": 35, "2029": 40, "2030": 42, "2031": 52, "2032": 54, "2033": 61}, "National": {"2020": 8, "2021": 13, "2022": 16, "2023": 21, "2024": 23, "2025": 26, "2026": 28, "2027": 29, "2028": 32, "2029": 35, "2030": 39, "2031": 49, "2032": 51, "2033": 58} }'
-    units="year,%"
-    show-deltas="true"
-    y-range="0,25,50,75,100"
-    highlight-start="2026"
-  >
-  </wm-line-chart>`,
-    });
-}
-describe("Line Chart", () => {
-    let page;
-    it("builds", async () => {
-        page = await createPageHelper();
-        expect(page.root).toMatchSnapshot();
-    });
-    it("has proper aria properties and attributes", async () => {
-        page = await createPageHelper();
-        const componentWrapperEl = await page.root.shadowRoot.querySelector(".component-wrapper");
-        expect(componentWrapperEl).toEqualAttribute("role", "application");
-        expect(componentWrapperEl).toEqualAttribute("aria-roledescription", "Interactive chart");
-        expect(componentWrapperEl).toEqualAttribute("aria-label", "Regional Job Trends");
-        expect(componentWrapperEl).toEqualAttribute("aria-describedby", "chart-description");
-        const firstPointEl = await page.root.shadowRoot.querySelector(".point");
-        expect(firstPointEl).toEqualAttribute("role", "img");
-    });
-    it("plots all non-null data points", async () => {
-        page = await newSpecPage({
-            components: [LineChart],
-            html: `<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"
-      x-axis-label="Year"
-      y-axis-label="Change Since 2020"
-      line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13, "2023": 15, "2024": 20}, "National": {"2020": 8, "2021": 13, "2022": null, "2023": 21, "2024": 23}, "International": {"2020": 8, "2021": null, "2022": null, "2023": 21, "2024": 23} }'
-    >
-    </wm-line-chart>`,
-        });
-        const allPointEls = await page.root.shadowRoot.querySelectorAll(".point");
-        const allLineEls = await page.root.shadowRoot.querySelectorAll(".line");
-        const firstLinePointEls = await allLineEls[0].querySelectorAll(".point");
-        const firstLineLineEls = await allLineEls[0].querySelectorAll("line");
-        const secondLinePointEls = await allLineEls[1].querySelectorAll(".point");
-        const secondLineLineEls = await allLineEls[1].querySelectorAll("line");
-        const thirdLinePointEls = await allLineEls[2].querySelectorAll(".point");
-        const thirdLineLineEls = await allLineEls[2].querySelectorAll("line");
-        // each line has 5 intervals
-        // first line has 0 nulls
-        // second line has 1 null
-        // third line has 2 nulls
-        expect(allPointEls.length).toBe(12);
-        expect(firstLinePointEls.length).toBe(5);
-        expect(firstLineLineEls.length).toBe(4);
-        expect(secondLinePointEls.length).toBe(4);
-        expect(secondLineLineEls.length).toBe(2);
-        expect(thirdLinePointEls.length).toBe(3);
-        expect(thirdLineLineEls.length).toBe(1);
-    });
-    it("calculates deltas correctly", async () => {
-        const component = await new LineChart();
-        let previousPoint = {
-            lineLabel: "fake label",
-            xValue: "2020",
-            yValue: 999,
-            xPositionPercent: 0,
-            yPositionPercent: 10,
-            highlighted: false,
-        };
-        let currentPoint = {
-            lineLabel: "fake label",
-            xValue: "2021",
-            yValue: 999,
-            xPositionPercent: 20,
-            yPositionPercent: 12,
-            highlighted: false,
-        };
-        previousPoint.yValue = 10;
-        currentPoint.yValue = 12;
-        expect(component.calcDelta(currentPoint, previousPoint)).toBe("+20%");
-        previousPoint.yValue = 10;
-        currentPoint.yValue = 7;
-        expect(component.calcDelta(currentPoint, previousPoint)).toBe("-30%");
-        previousPoint.yValue = 12;
-        currentPoint.yValue = 10;
-        expect(component.calcDelta(currentPoint, previousPoint)).toBe("-16.67%");
-        previousPoint.yValue = 0;
-        currentPoint.yValue = 1;
-        expect(component.calcDelta(currentPoint, previousPoint)).toBe("-");
-        previousPoint.yValue = 17;
-        currentPoint.yValue = 0;
-        expect(component.calcDelta(currentPoint, previousPoint)).toBe("-100%");
-    });
-    it("uses label-width to set y-axis label width", async () => {
-        page = await newSpecPage({
-            components: [LineChart],
-            html: `<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"
-      x-axis-label="Year"
-      y-axis-label="Change Since 2020"
-      line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13, "2023": null, "2024": 20, "2025": 23, "2026": 25, "2027": 32, "2028": 35, "2029": 40, "2030": 42, "2031": 52, "2032": 54, "2033": 61}, "National": {"2020": 8, "2021": 13, "2022": 16, "2023": 21, "2024": 23, "2025": 26, "2026": 28, "2027": 29, "2028": 32, "2029": 35, "2030": 39, "2031": 49, "2032": 51, "2033": 58} }'
-    >
-    </wm-line-chart>`,
-        });
-        let yAxisLabel = await page.root.shadowRoot.querySelector(".--y-axis");
-        expect(yAxisLabel.style.cssText).toBe("--labelWidth: 120px;");
-        page = await newSpecPage({
-            components: [LineChart],
-            html: `<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"
-      x-axis-label="Year"
-      y-axis-label="Change Since 2020"
-      line-data='{"Regional": {"2020": 5, "2021": 10, "2022": 13, "2023": null, "2024": 20, "2025": 23, "2026": 25, "2027": 32, "2028": 35, "2029": 40, "2030": 42, "2031": 52, "2032": 54, "2033": 61}, "National": {"2020": 8, "2021": 13, "2022": 16, "2023": 21, "2024": 23, "2025": 26, "2026": 28, "2027": 29, "2028": 32, "2029": 35, "2030": 39, "2031": 49, "2032": 51, "2033": 58} }'
-      label-width="23%"
-    >
-    </wm-line-chart>`,
-        });
-        yAxisLabel = await page.root.shadowRoot.querySelector(".--y-axis");
-        expect(yAxisLabel.style.cssText).toBe("--labelWidth: 23%;");
-    });
-    it("sets custom y-range if provided, abbreviates y-axis numbers of thousands", async () => {
-        page = await newSpecPage({
-            components: [LineChart],
-            html: `<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"
-      x-axis-label="Year"
-      y-axis-label="Change Since 2020"
-      line-data='{"Regional": {"2020": -10000, "2021": 10900, "2022": 40200} }'
-      y-range="-13300,0,100,10000,20945,30099,40520"
-    >
-    </wm-line-chart>`,
-        });
-        const yIntervals = await page.root.shadowRoot.querySelectorAll(".y-interval");
-        expect(yIntervals[0].textContent).toBe("40.5K");
-        expect(yIntervals[1].textContent).toBe("30.1K");
-        expect(yIntervals[2].textContent).toBe("20.9K");
-        expect(yIntervals[3].textContent).toBe("10K");
-        expect(yIntervals[4].textContent).toBe("100");
-        expect(yIntervals[5].textContent).toBe("0");
-        expect(yIntervals[6].textContent).toBe("-13.3K");
-    });
-});

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

@@ -1,69 +0,0 @@
-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.spec.js

@@ -1,79 +0,0 @@
-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");
-    });
-});

package/dist/collection/components/datepickers/priv-calendar/priv-calendar.spec.js

@@ -1,89 +0,0 @@
-import { newSpecPage } from "@stencil/core/testing";
-import { PrivCalendar } from "./priv-calendar";
-import { dateFind, getMonthLength } from "../../../global/functions";
-describe("priv-calendar", () => {
-    // ts erroneously prints a warning (unused var)
-    // @ts-ignore
-    let page, privCalendar;
-    beforeEach(async () => {
-        page = await newSpecPage({
-            components: [PrivCalendar],
-            html: "<priv-calendar></priv-calendar>",
-        });
-        privCalendar = page.root;
-    });
-    it("gets the number of days in a month", async () => {
-        expect(getMonthLength(1, 2021)).toBe(31);
-        expect(getMonthLength(2, 2021)).toBe(28);
-        expect(getMonthLength(2, 2020)).toBe(29);
-        expect(getMonthLength(11, 2067)).toBe(30);
-        expect(getMonthLength(13, 2)).toBe(31); // returns 31 by default
-    });
-    it("removes leading zeroes", async () => {
-        const pd = new PrivCalendar();
-        expect(pd.removeZeroes("12")).toBe(12);
-        expect(pd.removeZeroes("01")).toBe(1);
-        expect(pd.removeZeroes("0001312")).toBe(1312);
-        // note that the function only works for integers
-        // the following would fail
-        // expect(pd.removeZeroes("3.1415")).toBe(3.1415);
-    });
-    it("finds the first weekday of the month", async () => {
-        // 1 = Sunday, 7 = Saturday
-        const pd = new PrivCalendar();
-        expect(pd.getMonthFirstDay(2, 2021)).toBe(2); // Mon
-        expect(pd.getMonthFirstDay(7, 1986)).toBe(3); // Tue
-        expect(pd.getMonthFirstDay(12, 2030)).toBe(1); // Sun
-    });
-    it("generates the calendar dates", async () => {
-        const pd = new PrivCalendar();
-        expect(pd.getCalendarDates("2021-08-14")).toMatchSnapshot();
-    });
-    //  dateFind helper
-    it("gets the right dates", async () => {
-        expect(dateFind.year.asString("2000-03-23")).toStrictEqual("2000");
-        expect(dateFind.year.asInt("2000-03-23")).toStrictEqual(2000);
-        expect(dateFind.month.asString("2000-03-23")).toStrictEqual("03");
-        expect(dateFind.month.asInt("2000-03-23")).toStrictEqual(3);
-        expect(dateFind.day.asString("2000-03-23")).toStrictEqual("23");
-        expect(dateFind.day.asInt("2000-03-23")).toStrictEqual(23);
-        let res;
-        res = dateFind.year.decrease("2000-03-23", 2);
-        expect(res).toStrictEqual("1998-03-23");
-        res = dateFind.year.increase("1998-03-23", 2);
-        expect(res).toStrictEqual("2000-03-23");
-        res = dateFind.month.decrease("2000-03-23", 3);
-        expect(res).toStrictEqual("1999-12-23");
-        res = dateFind.month.increase("2000-11-23", 2);
-        expect(res).toStrictEqual("2001-01-23");
-        res = dateFind.month.increase("2024-10-01", 1);
-        expect(res).toStrictEqual("2024-11-01");
-        res = dateFind.day.decrease("2024-03-03", 3);
-        expect(res).toStrictEqual("2024-02-29");
-        res = dateFind.day.increase("2024-09-29", 5);
-        expect(res).toStrictEqual("2024-10-04");
-    });
-    // _focus accessor
-    it("gets the right focus dates", async () => {
-        const c = new PrivCalendar();
-        c.focusDate = "2000-01-02";
-        expect(c._focus.year.asString()).toStrictEqual("2000");
-        expect(c._focus.year.asInt()).toStrictEqual(2000);
-        expect(c._focus.month.asString()).toStrictEqual("01");
-        expect(c._focus.month.asInt()).toStrictEqual(1);
-        expect(c._focus.day.asString()).toStrictEqual("02");
-        expect(c._focus.day.asInt()).toStrictEqual(2);
-        c._focus.year.decrease(2);
-        expect(c.focusDate).toStrictEqual("1998-01-02");
-        c._focus.year.increase(2);
-        expect(c.focusDate).toStrictEqual("2000-01-02");
-        c._focus.month.decrease(2);
-        expect(c.focusDate).toStrictEqual("1999-11-02");
-        c._focus.month.increase(2);
-        expect(c.focusDate).toStrictEqual("2000-01-02");
-        c._focus.day.decrease(2);
-        expect(c.focusDate).toStrictEqual("1999-12-31");
-        c._focus.day.increase(2);
-        expect(c.focusDate).toStrictEqual("2000-01-02");
-    });
-});