@watermarkinsights/ripple 5.12.0 → 5.14.0-alpha.0

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");
-    });
-});