chore: added unit tests for components

Signed-off-by: Darshan Simha <[email protected]>

ui/src/components/common/DebouncedSearchInput/index.test.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { DebouncedSearchInput } from "./index";
+
+describe("DebouncedSearchInput", () => {
+  it("renders", async () => {
+    const mockOnChange = jest.fn();
+    render(<DebouncedSearchInput onChange={mockOnChange} />);
+    await waitFor(() => {
+      expect(screen.getByTestId("debounced-search-input")).toBeInTheDocument();
+    });
+  });
+
+  it("calls onChange when input changes", async () => {
+    const mockOnChange = jest.fn();
+    render(<DebouncedSearchInput onChange={mockOnChange} />);
+    await waitFor(() => {
+      expect(screen.getByTestId("debounced-search-input")).toBeInTheDocument();
+    });
+    const field = screen
+      .getByTestId("debounced-search-input")
+      .querySelector("input");
+    expect(field).toBeInTheDocument();
+
+    await act(async () => {
+      fireEvent.change(field, {
+        target: { value: "test" },
+      });
+    });
+    expect(field?.value).toBe("test");
+  });
+});

ui/src/components/common/DebouncedSearchInput/index.tsx

@@ -64,6 +64,7 @@ export function DebouncedSearchInput({
         ),
       }}
       onChange={handleInputChange}
+      data-testid="debounced-search-input"
     />
   );
 }

ui/src/components/common/ErrorDisplay/index.test.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { ErrorDisplay } from "./index";
+
+describe("ErrorDisplay", () => {
+  it("renders", async () => {
+    render(<ErrorDisplay title={"test"} message={"test error"} />);
+    await waitFor(() => {
+      expect(screen.getByText("test")).toBeInTheDocument();
+      expect(screen.getByText("test error")).toBeInTheDocument();
+    });
+  });
+});

ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/Buffers/index.test.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { Buffers } from "./index";
+
+const mockBuffers = [
+  {
+    partition: 1000,
+    isFull: false,
+    ackPending: false,
+    pending: false,
+    bufferLength: 1001,
+    bufferUsage: 1002,
+    totalPendingMessages: 1003,
+  },
+  {
+    partition: 1004,
+    isFull: false,
+    ackPending: false,
+    pending: false,
+    bufferLength: 1005,
+    bufferUsage: 1006,
+    totalPendingMessages: 1007,
+  },
+  {
+    partition: 1008,
+    isFull: true,
+    ackPending: false,
+    pending: false,
+    bufferLength: 1009,
+    bufferUsage: 1010,
+    totalPendingMessages: 1011,
+  },
+];
+
+describe("Buffers", () => {
+  it("renders with empty buffers", async () => {
+    render(<Buffers buffers={[]} />);
+    await waitFor(() => {
+      expect(screen.getByText("Partition")).toBeInTheDocument();
+      expect(screen.getByText("isFull")).toBeInTheDocument();
+      expect(screen.getByText("AckPending")).toBeInTheDocument();
+      expect(
+        screen.getByText("No buffer information found")
+      ).toBeInTheDocument();
+    });
+  });
+
+  it("renders with buffers", async () => {
+    render(<Buffers buffers={mockBuffers} />);
+    await waitFor(() => {
+      expect(screen.getByText("1001")).toBeInTheDocument();
+      expect(screen.getByText("100200.00%")).toBeInTheDocument();
+      expect(screen.getByText("1005")).toBeInTheDocument();
+      expect(screen.getByText("100600.00%")).toBeInTheDocument();
+      expect(screen.getAllByText("no").length).toBeGreaterThan(0);
+    });
+  });
+});

ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/ProcessingRates/index.test.tsx

@@ -0,0 +1,86 @@
+import React from "react";
+import { render, screen, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { ProcessingRates } from "./index";
+
+const mockPipelineId = "simple-pipeline";
+const mockVertexId = "in";
+const mockVertexMetrics = {
+  cat: [
+    {
+      pipeline: "simple-pipeline",
+      vertex: "cat",
+      processingRates: {
+        "15m": 0,
+        "1m": 0,
+        "5m": 0,
+        default: 0,
+      },
+    },
+  ],
+  in: [
+    {
+      pipeline: "simple-pipeline",
+      vertex: "in",
+      processingRates: {
+        "15m": 10,
+        "1m": 20,
+        "5m": 30,
+        default: 0,
+      },
+    },
+  ],
+  out: [
+    {
+      pipeline: "simple-pipeline",
+      vertex: "out",
+      processingRates: {
+        "15m": 0,
+        "1m": 0,
+        "5m": 0,
+        default: 0,
+      },
+    },
+  ],
+};
+
+describe("ProcessingRates", () => {
+  it("renders with empty processing rates", async () => {
+    render(
+      <ProcessingRates vertexId={""} pipelineId={""} vertexMetrics={[]} />
+    );
+    await waitFor(() => {
+      expect(screen.getByText("Partition")).toBeInTheDocument();
+      expect(screen.getByText("No metrics found")).toBeInTheDocument();
+    });
+  });
+
+  it("renders with processing rates", async () => {
+    render(
+      <ProcessingRates
+        vertexId={mockVertexId}
+        pipelineId={mockPipelineId}
+        vertexMetrics={mockVertexMetrics}
+      />
+    );
+    await waitFor(() => {
+      expect(screen.getByText("Partition")).toBeInTheDocument();
+      expect(screen.getByText("20.00")).toBeInTheDocument();
+      expect(screen.getByText("30.00")).toBeInTheDocument();
+      expect(screen.getByText("10.00")).toBeInTheDocument();
+    });
+  });
+  it("Renders when vertexData is null", async () => {
+    render(
+      <ProcessingRates
+        vertexId={"zzz"}
+        pipelineId={mockPipelineId}
+        vertexMetrics={mockVertexMetrics}
+      />
+    );
+    await waitFor(() => {
+      expect(screen.getByText("No metrics found")).toBeInTheDocument();
+    });
+  });
+});

ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/ProcessingRates/index.tsx

@@ -13,7 +13,7 @@ import "./style.css";
 export interface ProcessingRatesProps {
   vertexId: string;
   pipelineId: string;
-  vertexMetrics: any[];
+  vertexMetrics: any;
 }
 
 export function ProcessingRates({