[ITEP-24904] fix manual deployment cluster drawer (#3)

Co-authored-by: Fred Cooper <fred.cooper@intel.com>
Co-authored-by: Kalisz <wiktoria.kalisz@intel.com>
Co-authored-by: Gupta <gunjan.gupta@intel.com>
Co-authored-by: guptagunjan <88308027+guptagunjan@users.noreply.github.com>

Author: 4 people

apps/app-orch/src/components/organisms/setup-deployments/ClusterDetails/ClusterDetails.cy.tsx

@@ -3,22 +3,57 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import SelectCluster from "./SelectCluster";
+import { Button } from "@spark-design/react";
+import React from "react";
+import SelectCluster, { SelectClusterMode } from "./SelectCluster";
 import SelectClusterPom from "./SelectCluster.pom";
 
+const ClusterListMock = ({
+  onShowDetails,
+}: {
+  onShowDetails: (clusterId: string) => void;
+}) => {
+  return (
+    <Button
+      data-cy="testShowDrawer"
+      onPress={() => {
+        onShowDetails("cluster1");
+      }}
+    >
+      cluster1
+    </Button>
+  );
+};
+
 const pom = new SelectClusterPom();
 describe("<SelectCluster/>", () => {
   beforeEach(() => {
     cy.mount(
       <SelectCluster
-        onDeploymentNameChange={() => {}}
         selectedIds={[]}
-        onSelect={() => {}}
+        onSelect={cy.stub().as("onSelectStub")}
+        onDeploymentNameChange={cy.stub().as("onDeploymentNameChangeStub")}
+        mode={SelectClusterMode.CREATE}
+        __ClusterListRemote={React.lazy(() =>
+          Promise.resolve({
+            default: () => (
+              <ClusterListMock onShowDetails={cy.stub().as("onShowDetails")} />
+            ),
+          }),
+        )}
       />,
     );
   });
   it("should render component", () => {
     pom.root.should("exist");
     pom.el.title.contains("Enter Deployment Details");
   });
+
+  it("should show cluster details", () => {
+    // This will avoid the error shown when no name is entered
+    pom.el.deploymentNameField.type("test");
+
+    cy.get("[data-cy='testShowDrawer']").click();
+    cy.get("@onShowDetails").should("be.calledWith", "cluster1");
+  });
 });

apps/app-orch/src/components/organisms/setup-deployments/ClusterDetails/ClusterDetails.pom.ts

@@ -5,20 +5,16 @@
 
 import { SiTablePom } from "@orch-ui/poms";
 import { Cy, CyPom } from "@orch-ui/tests";
-import { dataCy as clusterDetailDataCy } from "../ClusterDetails/ClusterDetails";
-import ClusterDetailsPom from "../ClusterDetails/ClusterDetails.pom";
 
 const dataCySelectors = ["title", "deploymentNameField"] as const;
 type Selectors = (typeof dataCySelectors)[number];
 type ApiAliases = "getClusterSuccess";
 
 class SelectClusterPom extends CyPom<Selectors, ApiAliases> {
   public clusterTable: SiTablePom;
-  public clusterDetail: ClusterDetailsPom;
   constructor(public rootCy: string = "selectCluster") {
     super(rootCy, [...dataCySelectors]);
     this.clusterTable = new SiTablePom("table");
-    this.clusterDetail = new ClusterDetailsPom(clusterDetailDataCy);
   }
 
   public selectNthCluster(n: number): Cy {