Unit tests UI (#1348)

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

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

@@ -290,6 +290,7 @@ describe("SpecEditor", () => {
         loading={false}
         viewType={1}
         allowNonMutatedSubmit={false}
+        mutationKey="45"
       />
     );
     expect(screen.getByTestId("spec-editor")).toBeInTheDocument();

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { StatusBar } from "./index";
+
+describe("StatusBar", () => {
+  it("Renders", () => {
+    render(<StatusBar healthy={1} warning={2} critical={3} />);
+    expect(screen.getByText("Healthy")).toBeInTheDocument();
+    expect(screen.getByText("Warning")).toBeInTheDocument();
+  });
+});

ui/src/components/common/StatusCounts/StatusCounts.test.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { StatusCounts } from "./StatusCounts";
+
+describe("StatusCounts", () => {
+  it("Renders", () => {
+    render(<StatusCounts counts={{ healthy: 1, warning: 2, critical: 3 }} />);
+    expect(screen.getByText("healthy")).toBeInTheDocument();
+    expect(screen.getByText(": 1")).toBeInTheDocument();
+    expect(screen.getByText("warning")).toBeInTheDocument();
+    expect(screen.getByText(": 2")).toBeInTheDocument();
+    expect(screen.getByText("critical")).toBeInTheDocument();
+    expect(screen.getByText(": 3")).toBeInTheDocument();
+  });
+
+  it("Renders when counts are zero", () => {
+    render(<StatusCounts counts={{ healthy: 0, warning: 0, critical: 0 }} />);
+    expect(screen.getByText("healthy")).toBeInTheDocument();
+    expect(screen.getAllByText(": 0").length).toBe(3);
+    expect(screen.getByText("warning")).toBeInTheDocument();
+    expect(screen.getByText("critical")).toBeInTheDocument();
+  });
+});

ui/src/components/common/StatusIndicator/StatusIndicator.test.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { IndicatorStatus, StatusIndicator } from "./StatusIndicator";
+
+describe("StatusIndicator", () => {
+  it("Renders", () => {
+    render(<StatusIndicator status={IndicatorStatus.HEALTHY} />);
+    expect(screen.getByTestId("HEALTHY")).toBeInTheDocument();
+  });
+
+  it("Renders when status is warning", () => {
+    render(<StatusIndicator status={IndicatorStatus.WARNING} />);
+    expect(screen.getByTestId("WARNING")).toBeInTheDocument();
+  });
+
+  it("Renders when status is critical", () => {
+    render(<StatusIndicator status={IndicatorStatus.CRITICAL} />);
+    expect(screen.getByTestId("CRITICAL")).toBeInTheDocument();
+  });
+});

ui/src/components/common/StatusIndicator/StatusIndicator.tsx

@@ -22,7 +22,7 @@ export interface StatusIndicatorProps {
 }
 export function StatusIndicator({ status }: StatusIndicatorProps) {
   return (
-    <svg height="10" width="10">
+    <svg height="10" width="10" data-testid={status}>
       <circle cx="5" cy="5" r="4" fill={IndicatorColorMap[status]} />
     </svg>
   );

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

@@ -0,0 +1,198 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import "@testing-library/jest-dom";
+
+import { SummaryPageLayout } from "./index";
+import { NamespacePipelineListing } from "../../pages/Namespace/partials/NamespacePipelineListing";
+
+window.ResizeObserver = class ResizeObserver {
+  observe() {
+    // do nothing
+  }
+  unobserve() {
+    // do nothing
+  }
+  disconnect() {
+    // do nothing
+  }
+};
+
+const mockSummarySections = [
+  {
+    type: 3,
+    collectionSections: [
+      { type: 0, titledValueProps: { title: "PIPELINES", value: 4 } },
+      {
+        type: 1,
+        statusesProps: {
+          title: "PIPELINES STATUS",
+          active: 3,
+          inActive: 1,
+          healthy: 3,
+          warning: 0,
+          critical: 0,
+          tooltip:
+            "Running pipeline health is determined by backpressure. Non-Running pipelines are failed, pausing, paused, or deleting.",
+        },
+      },
+    ],
+  },
+  {
+    type: 3,
+    collectionSections: [
+      {
+        type: 0,
+        titledValueProps: {
+          title: "ISB SERVICES",
+          value: 5,
+          tooltip:
+            "Inter State Buffer Services are used to transfer data between vertices in a pipeline.",
+        },
+      },
+      {
+        type: 1,
+        statusesProps: {
+          title: "ISB SERVICES STATUS",
+          active: 5,
+          inActive: 0,
+          healthy: 5,
+          warning: 0,
+          critical: 0,
+          tooltip: {
+            key: null,
+            ref: null,
+            props: {
+              children: {
+                key: null,
+                ref: null,
+                props: {
+                  children: [
+                    {
+                      type: "b",
+                      key: null,
+                      ref: null,
+                      props: { children: "Healthy:" },
+                      _owner: null,
+                      _store: {},
+                    },
+                    "  The ISB service is operating optimally. No issues or anomalies detected.",
+                    {
+                      type: "hr",
+                      key: null,
+                      ref: null,
+                      props: {},
+                      _owner: null,
+                      _store: {},
+                    },
+                    {
+                      type: "b",
+                      key: null,
+                      ref: null,
+                      props: { children: "Warning:" },
+                      _owner: null,
+                      _store: {},
+                    },
+                    "  The ISB service is experiencing minor issues or degradation within the data processing pipeline. Consider monitoring and further investigation.",
+                    {
+                      type: "hr",
+                      key: null,
+                      ref: null,
+                      props: {},
+                      _owner: null,
+                      _store: {},
+                    },
+                    {
+                      type: "b",
+                      key: null,
+                      ref: null,
+                      props: { children: "Critical:" },
+                      _owner: null,
+                      _store: {},
+                    },
+                    "  The ISB service is in a critical state. Immediate attention required.",
+                  ],
+                },
+                _owner: null,
+                _store: {},
+              },
+            },
+            _owner: null,
+            _store: {},
+          },
+        },
+      },
+    ],
+  },
+];
+const mockComponentData = {
+  pipelinesCount: 4,
+  pipelinesActiveCount: 3,
+  pipelinesInactiveCount: 1,
+  pipelinesHealthyCount: 3,
+  pipelinesWarningCount: 0,
+  pipelinesCriticalCount: 0,
+  isbsCount: 5,
+  isbsActiveCount: 5,
+  isbsInactiveCount: 0,
+  isbsHealthyCount: 5,
+  isbsWarningCount: 0,
+  isbsCriticalCount: 0,
+  pipelineSummaries: [
+    {
+      name: "simple-pipeline",
+      status: "healthy",
+    },
+    {
+      name: "simple-pipeline-25",
+      status: "inactive",
+    },
+    {
+      name: "simple-pipeline-3",
+      status: "healthy",
+    },
+    {
+      name: "simple-pipeline-6",
+      status: "healthy",
+    },
+  ],
+};
+
+describe("SummaryPageLayout", () => {
+  it("Renders", () => {
+    render(
+      <SummaryPageLayout
+        summarySections={[]}
+        contentComponent={
+          <NamespacePipelineListing
+            namespace={""}
+            data={mockComponentData}
+            refresh={() => {}}
+          />
+        }
+      />
+    );
+    expect(screen.getByTestId("summary-page-layout")).toBeInTheDocument();
+  });
+
+  it("Renders with summary sections", () => {
+    render(
+      <SummaryPageLayout
+        summarySections={mockSummarySections}
+        contentComponent={undefined}
+      />
+    );
+    expect(screen.getByTestId("summary-page-layout")).toBeInTheDocument();
+  });
+
+  it("Renders when collapsible and collapsed is true", () => {
+    render(
+      <SummaryPageLayout
+        summarySections={mockSummarySections}
+        contentComponent={undefined}
+        collapsable={true}
+        defaultCollapsed={true}
+      />
+    );
+    expect(screen.getByTestId("summary-page-layout")).toBeInTheDocument();
+  });
+});

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

@@ -167,6 +167,7 @@ const getSummaryComponent = (summarySections: SummarySection[]) => {
             flexDirection: "row",
             flexGrow: "1",
           }}
+          key={key}
         >
           {component}
           <div
@@ -321,6 +322,7 @@ export function SummaryPageLayout({
           ? { height: "100%", overflow: "hidden" }
           : { height: "100%" }
       }
+      data-testid="summary-page-layout"
     >
       {summary}
       <Box

ui/src/components/pages/Namespace/partials/NamespacePipelineListing/ISBServiceCard/ISBServiceCard.test.tsx

@@ -190,8 +190,6 @@ describe("ISBServiceCard", () => {
         </AppContext.Provider>
       </BrowserRouter>
     );
-    expect(screen.getByText("Active")).toBeInTheDocument();
-    expect(screen.getByText("Healthy")).toBeInTheDocument();
     expect(screen.getByText("jetstream")).toBeInTheDocument();
     expect(screen.getByText("3")).toBeInTheDocument();
   });

ui/src/components/pages/Pipeline/partials/PipelineISBStatus/index.test.tsx

@@ -173,8 +173,6 @@ describe("PipelineISBStatus", () => {
       </AppContext.Provider>
     );
     expect(screen.getByText("ISB SERVICES STATUS")).toBeInTheDocument();
-    expect(screen.getByText("Active")).toBeInTheDocument();
-    expect(screen.getByText("Healthy")).toBeInTheDocument();
   });
 
   it("Should render correctly when isbData is null", () => {