test: uts for areaChart, barChart, sparkAreaChart, Legend (#1065)

* uts for areaChart, barChart, sparkAreaChart, Legend

* removed test code

* lint

---------

Co-authored-by: wajahat5 <[email protected]>
Co-authored-by: severinlandolt <[email protected]>

src/tests/chart-elements/AreaChart.test.tsx

@@ -0,0 +1,108 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import AreaChart from "components/chart-elements/AreaChart/AreaChart";
+
+describe("AreaChart", () => {
+  beforeAll(() => {
+    global.ResizeObserver = class MockedResizeObserver {
+      observe = jest.fn();
+      unobserve = jest.fn();
+      disconnect = jest.fn();
+    };
+    const mockChildMethod = jest.fn();
+    jest.spyOn(React, "useRef").mockReturnValue({
+      current: {
+        childMethod: mockChildMethod,
+      },
+    });
+  });
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+  it("renders the chart with data", () => {
+    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
+    const data = [
+      { name: "A", value: 10 },
+      { name: "B", value: 20 },
+      { name: "C", value: 30 },
+    ];
+    const { container } = render(
+      <AreaChart data={data} categories={["A", "B", "C"]} index="name" ref={ref} />,
+    );
+    expect(container.getElementsByClassName("w-full h-80").length).toBe(1);
+  });
+
+  it("renders the chart without gradient", () => {
+    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
+    const data = [
+      { name: "A", value: 10 },
+      { name: "B", value: 20 },
+      { name: "C", value: 30 },
+    ];
+    const { container } = render(
+      <AreaChart
+        data={data}
+        categories={["A", "B", "C"]}
+        index="name"
+        showGradient={false}
+        ref={ref}
+      />,
+    );
+    expect(container.getElementsByClassName("w-full h-80").length).toBe(1);
+  });
+
+  it("renders the chart with custom colors", () => {
+    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
+    const data = [
+      { name: "A", value: 10 },
+      { name: "B", value: 20 },
+      { name: "C", value: 30 },
+    ];
+    const { container } = render(
+      <AreaChart
+        data={data}
+        categories={["A", "B", "C"]}
+        index="name"
+        colors={["#ff0000", "#00ff00", "#0000ff"]}
+        ref={ref}
+      />,
+    );
+    expect(container.getElementsByClassName("w-full h-80").length).toBe(1);
+  });
+
+  it("renders the chart with custom curve type", () => {
+    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
+    const data = [
+      { name: "A", value: 10 },
+      { name: "B", value: 20 },
+      { name: "C", value: 30 },
+    ];
+    const { container } = render(
+      <AreaChart
+        data={data}
+        categories={["A", "B", "C"]}
+        index="name"
+        curveType="monotone"
+        ref={ref}
+      />,
+    );
+    expect(container.getElementsByClassName("w-full h-80").length).toBe(1);
+  });
+
+  it("renders the chart with connectNulls", () => {
+    const data = [
+      { name: "A", value: 10 },
+      { name: "B", value: null },
+      { name: "C", value: 30 },
+    ];
+    const { container } = render(
+      <AreaChart data={data} categories={["A", "B", "C"]} index="name" connectNulls />,
+    );
+    expect(container.getElementsByClassName("w-full h-80").length).toBe(1);
+  });
+
+  it("renders the chart with no data", () => {
+    const { getByText } = render(<AreaChart data={[]} categories={[]} index="name" />);
+    expect(getByText("No data")).toBeDefined();
+  });
+});

src/tests/chart-elements/BarChart.test.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import BarChart from "components/chart-elements/BarChart/BarChart";
+
+describe("BarChart", () => {
+  beforeAll(() => {
+    global.ResizeObserver = class MockedResizeObserver {
+      observe = jest.fn();
+      unobserve = jest.fn();
+      disconnect = jest.fn();
+    };
+    const mockChildMethod = jest.fn();
+    jest.spyOn(React, "useRef").mockReturnValue({
+      current: {
+        childMethod: mockChildMethod,
+      },
+    });
+  });
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+  it("renders the chart with data", () => {
+    const data = [
+      { name: "A", value: 10 },
+      { name: "B", value: 20 },
+      { name: "C", value: 30 },
+    ];
+    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
+    render(<BarChart data={data} categories={["A", "B", "C"]} index="name" ref={ref} />);
+  });
+
+  it("renders the chart with no data", () => {
+    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
+    const { getByText } = render(<BarChart data={[]} categories={[]} index="name" ref={ref} />);
+    expect(getByText("No data")).toBeDefined();
+  });
+});

src/tests/spark-elements/SparkAreaChart.test.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import AreaChart from "components/spark-elements/SparkAreaChart/SparkAreaChart";
+
+describe("AreaChart", () => {
+  beforeAll(() => {
+    global.ResizeObserver = class MockedResizeObserver {
+      observe = jest.fn();
+      unobserve = jest.fn();
+      disconnect = jest.fn();
+    };
+    const mockChildMethod = jest.fn();
+    jest.spyOn(React, "useRef").mockReturnValue({
+      current: {
+        childMethod: mockChildMethod,
+      },
+    });
+  });
+  afterAll(() => {
+    jest.restoreAllMocks();
+  });
+  it("renders the chart with data", () => {
+    const data = [
+      { name: "A", value: 10 },
+      { name: "B", value: 20 },
+      { name: "C", value: 30 },
+    ];
+    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
+    const { container } = render(
+      <AreaChart
+        data={data}
+        className="test"
+        categories={["A", "B", "C"]}
+        index="name"
+        ref={ref}
+      />,
+    );
+    expect(container.getElementsByClassName("w-28 h-12 test").length).toBe(1);
+  });
+
+  it("renders the chart without gradient", () => {
+    const data = [
+      { name: "A", value: 10 },
+      { name: "B", value: 20 },
+      { name: "C", value: 30 },
+    ];
+    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
+    const { container } = render(
+      <AreaChart
+        data={data}
+        categories={["A", "B", "C"]}
+        index="name"
+        className="test"
+        showGradient={false}
+        ref={ref}
+      />,
+    );
+    expect(container.getElementsByClassName("w-28 h-12 test").length).toBe(1);
+  });
+
+  it("renders the chart with custom colors", () => {
+    const data = [
+      { name: "A", value: 10 },
+      { name: "B", value: 20 },
+      { name: "C", value: 30 },
+    ];
+    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
+    const { container } = render(
+      <AreaChart
+        data={data}
+        categories={["A", "B", "C"]}
+        index="name"
+        className="test"
+        colors={["#ff0000", "#00ff00", "#0000ff"]}
+        ref={ref}
+      />,
+    );
+    expect(container.getElementsByClassName("w-28 h-12 test").length).toBe(1);
+  });
+
+  it("renders the chart with custom curve type", () => {
+    const data = [
+      { name: "A", value: 10 },
+      { name: "B", value: 20 },
+      { name: "C", value: 30 },
+    ];
+    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
+    const { container } = render(
+      <AreaChart
+        data={data}
+        categories={["A", "B", "C"]}
+        index="name"
+        className="test"
+        curveType="monotone"
+        ref={ref}
+      />,
+    );
+    expect(container.getElementsByClassName("w-28 h-12 test").length).toBe(1);
+  });
+
+  it("renders the chart with connectNulls", () => {
+    const data = [
+      { name: "A", value: 10 },
+      { name: "B", value: null },
+      { name: "C", value: 30 },
+    ];
+    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
+    const { container } = render(
+      <AreaChart
+        data={data}
+        categories={["A", "B", "C"]}
+        index="name"
+        className="test"
+        connectNulls
+        ref={ref}
+      />,
+    );
+    expect(container.getElementsByClassName("w-28 h-12 test").length).toBe(1);
+  });
+
+  it("renders the chart with no data", () => {
+    const ref = React.useRef<HTMLDivElement>() as React.MutableRefObject<HTMLDivElement>;
+    const { getByText } = render(<AreaChart data={[]} categories={[]} index="name" ref={ref} />);
+    expect(getByText("No data")).toBeDefined();
+  });
+});

src/tests/text-elements/Legend.test.tsx

@@ -1,4 +1,4 @@
-import { render } from "@testing-library/react";
+import { fireEvent, render } from "@testing-library/react";
 import React from "react";
 
 import Legend from "components/text-elements/Legend/Legend";
@@ -7,4 +7,22 @@ describe("Legend", () => {
   test("renders the Legend component with default props", () => {
     render(<Legend categories={["Category A", "Category B", "Category C", "Category D"]} />);
   });
+  it("renders the correct legend items", () => {
+    const { getByText } = render(
+      <Legend categories={["Category A", "Category B", "Category C", "Category D"]} />,
+    );
+    expect(getByText("Category A")).toBeDefined();
+    expect(getByText("Category B")).toBeDefined();
+    expect(getByText("Category C")).toBeDefined();
+    expect(getByText("Category D")).toBeDefined();
+  });
+  it("clicks a category item", () => {
+    const { getByText } = render(<Legend categories={["Category A"]} />);
+    fireEvent.click(getByText("Category A"));
+  });
+  it("tests the keydown handler", () => {
+    render(<Legend categories={["Category A"]} enableLegendSlider={true} />);
+    const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
+    document.dispatchEvent(event);
+  });
 });