From d01c51b6bfc616df53798f6b9f5270f312925078 Mon Sep 17 00:00:00 2001
From: wajahat5 <t-wajahat.yusuf@ocltp.com>
Date: Sun, 26 May 2024 23:44:30 +0530
Subject: [PATCH 1/2] uts for areaChart, barChart, sparkAreaChart, Legend

---
 src/tests/chart-elements/AreaChart.test.tsx   | 111 +++++++++++++++
 src/tests/chart-elements/BarChart.test.tsx    |  37 +++++
 .../spark-elements/SparkAreaChart.test.tsx    | 126 ++++++++++++++++++
 src/tests/text-elements/Legend.test.tsx       |  22 ++-
 4 files changed, 295 insertions(+), 1 deletion(-)
 create mode 100644 src/tests/chart-elements/AreaChart.test.tsx
 create mode 100644 src/tests/chart-elements/BarChart.test.tsx
 create mode 100644 src/tests/spark-elements/SparkAreaChart.test.tsx

diff --git a/src/tests/chart-elements/AreaChart.test.tsx b/src/tests/chart-elements/AreaChart.test.tsx
new file mode 100644
index 000000000..3ceb8f002
--- /dev/null
+++ b/src/tests/chart-elements/AreaChart.test.tsx
@@ -0,0 +1,111 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import AreaChart from "components/chart-elements/AreaChart/AreaChart";
+
+//  28 |    39.02 |      20 |   29.16 | 97-138,149-285,354-451
+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} />,
+    );
+    //console.log("test ut");
+    //screen.debug();
+    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();
+  });
+});
diff --git a/src/tests/chart-elements/BarChart.test.tsx b/src/tests/chart-elements/BarChart.test.tsx
new file mode 100644
index 000000000..b4bc334b0
--- /dev/null
+++ b/src/tests/chart-elements/BarChart.test.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+import { render, screen } 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();
+  });
+});
diff --git a/src/tests/spark-elements/SparkAreaChart.test.tsx b/src/tests/spark-elements/SparkAreaChart.test.tsx
new file mode 100644
index 000000000..4a3bd2fb4
--- /dev/null
+++ b/src/tests/spark-elements/SparkAreaChart.test.tsx
@@ -0,0 +1,126 @@
+import React, { useRef } 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();
+  });
+});
diff --git a/src/tests/text-elements/Legend.test.tsx b/src/tests/text-elements/Legend.test.tsx
index 81b934872..fcab6cb1e 100644
--- a/src/tests/text-elements/Legend.test.tsx
+++ b/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,24 @@ 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", () => {
+    const { container, getByRole } = render(
+      <Legend categories={["Category A"]} enableLegendSlider={true} />,
+    );
+    const event = new KeyboardEvent("keydown", { key: "ArrowLeft" });
+    document.dispatchEvent(event);
+  });
 });

From 9494475163fb8b9f518ccff7fd6d0a3ee361587a Mon Sep 17 00:00:00 2001
From: wajahat5 <t-wajahat.yusuf@ocltp.com>
Date: Mon, 27 May 2024 00:50:45 +0530
Subject: [PATCH 2/2] removed test code

---
 src/tests/chart-elements/AreaChart.test.tsx | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/src/tests/chart-elements/AreaChart.test.tsx b/src/tests/chart-elements/AreaChart.test.tsx
index 3ceb8f002..57e062090 100644
--- a/src/tests/chart-elements/AreaChart.test.tsx
+++ b/src/tests/chart-elements/AreaChart.test.tsx
@@ -2,7 +2,6 @@ import React from "react";
 import { render, screen } from "@testing-library/react";
 import AreaChart from "components/chart-elements/AreaChart/AreaChart";
 
-//  28 |    39.02 |      20 |   29.16 | 97-138,149-285,354-451
 describe("AreaChart", () => {
   beforeAll(() => {
     global.ResizeObserver = class MockedResizeObserver {
@@ -30,8 +29,6 @@ describe("AreaChart", () => {
     const { container } = render(
       <AreaChart data={data} categories={["A", "B", "C"]} index="name" ref={ref} />,
     );
-    //console.log("test ut");
-    //screen.debug();
     expect(container.getElementsByClassName("w-full h-80").length).toBe(1);
   });