@watermarkinsights/ripple 4.2.0-1 → 4.2.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);
     });
-    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
+    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"
@@ -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%;");
     });
-    it("sets custom y-range if provided, abbreviates y-axis numbers of thousands", async () => {
-        page = await newSpecPage({
-            components: [LineChart],
-            html: `<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"
@@ -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");
+  });
 });