From 9a886d2ab5a24a584fa2542d7c53433c19e1ecc2 Mon Sep 17 00:00:00 2001 From: Darshan Simha Date: Thu, 2 Nov 2023 10:53:57 -0400 Subject: [PATCH] chore: added unit tests for components Signed-off-by: Darshan Simha --- .../DebouncedSearchInput/index.test.tsx | 40 +++++++++ .../common/DebouncedSearchInput/index.tsx | 1 + .../common/ErrorDisplay/index.test.tsx | 15 ++++ .../partials/Buffers/index.test.tsx | 60 +++++++++++++ .../partials/ProcessingRates/index.test.tsx | 86 +++++++++++++++++++ .../partials/ProcessingRates/index.tsx | 2 +- 6 files changed, 203 insertions(+), 1 deletion(-) create mode 100644 ui/src/components/common/DebouncedSearchInput/index.test.tsx create mode 100644 ui/src/components/common/ErrorDisplay/index.test.tsx create mode 100644 ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/Buffers/index.test.tsx create mode 100644 ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/ProcessingRates/index.test.tsx diff --git a/ui/src/components/common/DebouncedSearchInput/index.test.tsx b/ui/src/components/common/DebouncedSearchInput/index.test.tsx new file mode 100644 index 0000000000..4d6f56d35b --- /dev/null +++ b/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(); + await waitFor(() => { + expect(screen.getByTestId("debounced-search-input")).toBeInTheDocument(); + }); + }); + + it("calls onChange when input changes", async () => { + const mockOnChange = jest.fn(); + render(); + 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"); + }); +}); diff --git a/ui/src/components/common/DebouncedSearchInput/index.tsx b/ui/src/components/common/DebouncedSearchInput/index.tsx index c64f7f2988..ffe4408851 100644 --- a/ui/src/components/common/DebouncedSearchInput/index.tsx +++ b/ui/src/components/common/DebouncedSearchInput/index.tsx @@ -64,6 +64,7 @@ export function DebouncedSearchInput({ ), }} onChange={handleInputChange} + data-testid="debounced-search-input" /> ); } diff --git a/ui/src/components/common/ErrorDisplay/index.test.tsx b/ui/src/components/common/ErrorDisplay/index.test.tsx new file mode 100644 index 0000000000..608b7575df --- /dev/null +++ b/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(); + await waitFor(() => { + expect(screen.getByText("test")).toBeInTheDocument(); + expect(screen.getByText("test error")).toBeInTheDocument(); + }); + }); +}); diff --git a/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/Buffers/index.test.tsx b/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/Buffers/index.test.tsx new file mode 100644 index 0000000000..a287b75fda --- /dev/null +++ b/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(); + 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(); + 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); + }); + }); +}); diff --git a/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/ProcessingRates/index.test.tsx b/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/ProcessingRates/index.test.tsx new file mode 100644 index 0000000000..3a3a0e20da --- /dev/null +++ b/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( + + ); + await waitFor(() => { + expect(screen.getByText("Partition")).toBeInTheDocument(); + expect(screen.getByText("No metrics found")).toBeInTheDocument(); + }); + }); + + it("renders with processing rates", async () => { + render( + + ); + 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( + + ); + await waitFor(() => { + expect(screen.getByText("No metrics found")).toBeInTheDocument(); + }); + }); +}); diff --git a/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/ProcessingRates/index.tsx b/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/ProcessingRates/index.tsx index 4ff00b555e..254d42e752 100644 --- a/ui/src/components/common/SlidingSidebar/partials/VertexDetails/partials/ProcessingRates/index.tsx +++ b/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({