Finish the test

komodorio · Jan 23, 2024 · e959dec · e959dec
1 parent 7f63ff1
commit e959dec
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 37 deletions.
diff --git a/frontend/src/components/ClustersList.cy.tsx b/frontend/src/components/ClustersList.cy.tsx
@@ -2,44 +2,68 @@ import { AppContextProvider } from "../context/AppContext";
 import ClustersList from "./ClustersList";
 import { BrowserRouter } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { Release } from "../data/types";
 
-describe("<ClustersList />", () => {
-  it("renders", () => {
-    const queryClient = new QueryClient();
-    cy.mount(
-      <AppContextProvider>
-        <BrowserRouter>
-          <QueryClientProvider client={queryClient}>
-            <ClustersList
-              selectedCluster={"minikube"}
-              filteredNamespaces={["default"]}
-              onClusterChange={() => {}}
-              installedReleases={[
-                {
-                  id: "id",
-                  name: "helm-dashboard",
-                  namespace: "default",
-                  revision: 1,
-                  updated: "2024-01-23T15:37:35.0992836+02:00",
-                  status: "deployed",
-                  chart: "helm-dashboard-0.1.10",
-                  chart_name: "helm-dashboard",
-                  chart_ver: "0.1.10",
-                  app_version: "1.3.3",
-                  icon: "https://raw.githubusercontent.com/komodorio/helm-dashboard/main/pkg/dashboard/static/logo.svg",
-                  description: "A GUI Dashboard for Helm by Komodor",
-                  has_tests: true,
-                  chartName: "helm-dashboard",
-                  chartVersion: "0.1.10",
-                },
-              ]}
-            />
-          </QueryClientProvider>
-        </BrowserRouter>
-      </AppContextProvider>
-    );
+type ClustersListProps = {
+  onClusterChange: (clusterName: string) => void;
+  selectedCluster: string;
+  filteredNamespaces: string[];
+  installedReleases?: Release[];
+};
 
-    cy.get(".data-cy-clusterName").should("exist");
+const generateTestReleaseData = (): Release => ({
+  id: "id",
+  name: "helm-dashboard",
+  namespace: "default",
+  revision: 1,
+  updated: "2024-01-23T15:37:35.0992836+02:00",
+  status: "deployed",
+  chart: "helm-dashboard-0.1.10",
+  chart_name: "helm-dashboard",
+  chart_ver: "0.1.10",
+  app_version: "1.3.3",
+  icon: "https://raw.githubusercontent.com/komodorio/helm-dashboard/main/pkg/dashboard/static/logo.svg",
+  description: "A GUI Dashboard for Helm by Komodor",
+  has_tests: true,
+  chartName: "helm-dashboard",
+  chartVersion: "0.1.10",
+});
+
+const renderClustersList = (props: ClustersListProps) => {
+  const queryClient = new QueryClient();
+  cy.mount(
+    <AppContextProvider>
+      <BrowserRouter>
+        <QueryClientProvider client={queryClient}>
+          <ClustersList {...props} />
+        </QueryClientProvider>
+      </BrowserRouter>
+    </AppContextProvider>
+  );
+};
+
+describe("ClustersList", () => {
+  it("Got one cluster information", () => {
+    renderClustersList({
+      selectedCluster: "minikube",
+      filteredNamespaces: ["default"],
+      onClusterChange: () => {},
+      installedReleases: [generateTestReleaseData()],
+    });
+
+    cy.get(".data-cy-clusterName").contains("minikube");
+    cy.get(".data-cy-clusterList-namespace").contains("default");
     cy.get(".data-cy-clustersInput").should("be.checked");
   });
+
+  it("Dont have a cluster chekced", () => {
+    renderClustersList({
+      selectedCluster: "",
+      filteredNamespaces: [""],
+      onClusterChange: () => {},
+      installedReleases: [generateTestReleaseData()],
+    });
+
+    cy.get(".data-cy-clustersInput").should("not.be.checked");
+  });
 });
diff --git a/frontend/src/components/ClustersList.tsx b/frontend/src/components/ClustersList.tsx
@@ -154,7 +154,7 @@ function ClustersList({
             />
             <label
               htmlFor={namespace.name}
-              className="ml-1"
+              className="data-cy-clusterList-namespace ml-1"
             >{`${namespace.name} [${namespace.amount}]`}</label>
           </span>
         ))}