@watermarkinsights/ripple 4.1.0 → 4.2.0-0

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

@@ -6,14 +6,14 @@ import { LineChart } from "./wm-line-chart";
 // globalFuncs.generateId.mockImplementation(() => "random-id");
 // 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(),
 }));
 async function createPageHelper() {
-  return await newSpecPage({
-    components: [LineChart],
-    html: `<wm-line-chart
+    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"
@@ -25,28 +25,28 @@ async function createPageHelper() {
     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
+    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"
@@ -54,65 +54,65 @@ describe("Line Chart", () => {
       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);
     });
-    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
+    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"
@@ -120,12 +120,12 @@ describe("Line Chart", () => {
       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
+        });
+        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"
@@ -134,14 +134,14 @@ describe("Line Chart", () => {
       label-width="23%"
     >
     </wm-line-chart>`,
+        });
+        yAxisLabel = await page.root.shadowRoot.querySelector(".--y-axis");
+        expect(yAxisLabel.style.cssText).toBe("--labelWidth: 23%;");
     });
-    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
+    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"
@@ -150,14 +150,14 @@ describe("Line Chart", () => {
       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");
     });
-    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");
-  });
 });