[Draft] Component test cases for Services

catalog/ui/jest.config.js

@@ -11,7 +11,6 @@ module.exports = {
     }
   },
   verbose: true,
-
   // Automatically clear mock calls and instances between every test
   clearMocks: true,
 

catalog/ui/package.json

@@ -88,6 +88,8 @@
     "@testing-library/jest-dom": "^5.14.1",
     "@testing-library/react": "^12.1.0",
     "@reduxjs/toolkit": "^1.6.1",
+    "@testing-library/jest-dom": "^5.14.1",
+    "@testing-library/react": "^12.1.0",
     "@types/react-redux": "^7.1.18",
     "asciidoctor": "^2.2.5",
     "classnames": "^2.3.1",

catalog/ui/src/app/Catalog/Catalog.tsx

@@ -129,6 +129,16 @@ const Catalog: React.FunctionComponent<CatalogProps> = ({
     }
   }
 
+  function creationTimestamp(catalogItem: { status: { creationTimestamp: any; }; metadata: { creationTimestamp: any; }; }) {
+     const ts = catalogItem.status && catalogItem.status.creationTimestamp ? catalogItem.status.creationTimestamp : catalogItem.metadata.creationTimestamp;
+     return (<LocalTimestamp timestamp={ts}/>);
+  }
+
+  function updateTimestamp(catalogItem: { status: { updateTimestamp: any; }; metadata: { creationTimestamp: any; }; }) {
+     const ts = catalogItem.status && catalogItem.status.updateTimestamp ? catalogItem.status.updateTimestamp : catalogItem.metadata.creationTimestamp;
+     return (<LocalTimestamp timestamp={ts}/>);
+  }
+
   function description(catalogItem, options={}): string {
     if (catalogItem.metadata?.annotations?.['babylon.gpte.redhat.com/description']) {
       options['format'] = catalogItem.metadata.annotations?.['babylon.gpte.redhat.com/descriptionFormat'] || 'asciidoc';
@@ -161,6 +171,7 @@ const Catalog: React.FunctionComponent<CatalogProps> = ({
         catalogItem: selectedCatalogItem,
         catalogNamespace: catalogItemNamespace,
       });
+      console.log("createServiceRequest", resourceClaim);;
       history.push(`/services/ns/${resourceClaim.metadata.namespace}/item/${resourceClaim.metadata.name}`);
     }
   }

catalog/ui/src/app/Services/DeleteButton.spec.tsx

@@ -0,0 +1,27 @@
+// jest.mock('../api');
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { render, waitFor, queryByAttribute, fireEvent, screen, cleanup } from "@testing-library/react";
+import { Provider } from 'react-redux';
+import user from "@testing-library/user-event"
+
+import {DeleteButton} from "./DeleteButton"
+import { BrowserRouter as Router } from 'react-router-dom';
+// import { getApiSession, listClusterCustomObject } from "@app/api";
+import { store } from '@app/store';
+
+const getById = queryByAttribute.bind(null, 'id');
+
+// test.afterEach(cleanup)
+
+describe("DeleteButton", () => {
+    test("When DeleteButton layout renders, should display Delete Button", async () => {
+        const onClick = jest.fn();
+        const { getByText, debug } = 
+        render(<DeleteButton onClick={onClick}/>);
+
+      const testVar = getByText("Delete");
+      await waitFor(() => expect(testVar).toBeInTheDocument());
+    });
+})

catalog/ui/src/app/Services/Item/DeleteModal/ServicesItemDeleteModal.spec.tsx

@@ -0,0 +1,94 @@
+// jest.mock('../api');
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { render, waitFor, queryByAttribute, fireEvent, screen, cleanup } from "@testing-library/react";
+import { Provider } from 'react-redux';
+// import user from "@testing-library/user-event";
+
+import {ServicesItemDeleteModal} from "./ServicesItemDeleteModal"
+import { BrowserRouter as Router } from 'react-router-dom';
+// import { getApiSession, listClusterCustomObject } from "@app/api";
+import { store } from '@app/store';
+
+const getById = queryByAttribute.bind(null, 'id');
+
+// test.afterEach(cleanup)
+
+describe("ServicesItemDeleteModal", () => {
+    test("When ServicesItemDeleteModal layout renders, should display 'Confirm' option", async () => {
+        const closeModal = jest.fn();
+        const handleDelete = jest.fn();
+        const { getByText, debug } = 
+        render(<ServicesItemDeleteModal key="delete"
+        isOpen={true}
+        onClose={closeModal}
+        onConfirm={handleDelete}
+        resourceClaim= {"ServiceCatalogName"}/>
+      );
+
+      const testVar = getByText("Confirm");
+      await waitFor(() => expect(testVar).toBeInTheDocument());
+    });
+
+    test("When ServicesItemDeleteModal layout renders, should display 'Cancle' option", async () => {
+        const closeModal = jest.fn();
+        const handleDelete = jest.fn();
+        const { getByText, debug } = 
+        render(<ServicesItemDeleteModal key="delete"
+        isOpen={true}
+        onClose={closeModal}
+        onConfirm={handleDelete}
+        resourceClaim= {"ServiceCatalogName"}/>
+      );
+
+      const testVar = getByText("Cancel");
+      await waitFor(() => expect(testVar).toBeInTheDocument());
+    });
+
+    test("When ServicesItemDeleteModal layout renders, should display 'Delete ServiceName?' option", async () => {
+        const closeModal = jest.fn();
+        const handleDelete = jest.fn();
+        const catalogItemDisplayName = "Service";
+        const { getByText, debug } = 
+        render(<ServicesItemDeleteModal key="delete"
+        isOpen={true}
+        onClose={closeModal}
+        onConfirm={handleDelete}
+        resourceClaim= {"ServiceCatalogName"}/>
+      );
+
+      const testVar = getByText(`Delete ${catalogItemDisplayName}?`);
+      await waitFor(() => expect(testVar).toBeInTheDocument());
+    });
+
+    test("When ServicesItemDeleteModal layout renders, should Confirm button click once", async () => {
+        const closeModal = jest.fn();
+        const handleDelete = jest.fn();
+
+        const { getByText, debug } = render(<ServicesItemDeleteModal key="delete"
+        isOpen={true}
+        onClose={closeModal}
+        onConfirm={handleDelete}
+        resourceClaim={"ServiceCatalogName"}/>
+      );
+      const button = screen.getByText("Confirm");
+      fireEvent.click(button);
+        await waitFor(() => expect(handleDelete).toBeCalledTimes(1));
+    });
+
+    test("When ServicesItemDeleteModal layout renders, should Cancle button click once", async () => {
+        const closeModal = jest.fn();
+        const handleDelete = jest.fn();
+
+        const { getByText, debug } = render(<ServicesItemDeleteModal key="delete"
+        isOpen={true}
+        onClose={closeModal}
+        onConfirm={handleDelete}
+        resourceClaim={"ServiceCatalogName"}/>
+      );
+      const button = screen.getByText("Cancel");
+      fireEvent.click(button);
+        await waitFor(() => expect(closeModal).toBeCalledTimes(1));
+    });
+})

catalog/ui/src/app/Services/Item/OpenStackConsole.spec.tsx

@@ -0,0 +1,46 @@
+// jest.mock('../api');
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { render, waitFor, queryByAttribute, fireEvent, screen, cleanup } from "@testing-library/react";
+import { Provider } from 'react-redux';
+import user from "@testing-library/user-event"
+
+import {OpenStackConsole} from "./OpenStackConsole"
+import { BrowserRouter as Router } from 'react-router-dom';
+// import { getApiSession, listClusterCustomObject } from "@app/api";
+import { store } from '@app/store';
+
+const getById = queryByAttribute.bind(null, 'id');
+
+// test.afterEach(cleanup)
+
+describe("OpenStackConsole", () => {
+    test("When OpenStackConsole layout renders, should display 'start' option", async () => {
+        const { getByText, debug } = 
+        render(<OpenStackConsole 
+        resourceClaim= {"A Practical Introduction to Container Security"}/>
+      );
+      const testVar = getByText("Start");
+      await waitFor(() => expect(testVar).toBeInTheDocument());
+    });
+
+    test("When OpenStackConsole layout renders, should display 'Reconnect' option", async () => {
+        const { getByText, debug } = 
+        render(<OpenStackConsole 
+        resourceClaim= {"A Practical Introduction to Container Security"}/>
+      );
+      const testVar = getByText("Reconnect");
+      await waitFor(() => expect(testVar).toBeInTheDocument());
+    });
+
+    test("When OpenStackConsole layout renders, should display 'Reboot' option", async () => {
+        const { getByText, debug } = 
+        render(<OpenStackConsole 
+        resourceClaim= {"A Practical Introduction to Container Security"}/>
+      );
+      const testVar = getByText("Reboot");
+      await waitFor(() => expect(testVar).toBeInTheDocument());
+    });
+
+})

catalog/ui/src/app/Services/Item/StartModal/ServicesItemStartModal.spec.tsx

@@ -0,0 +1,113 @@
+// jest.mock('../api');
+import "@testing-library/jest-dom";
+
+import React from "react";
+import { render, waitFor, queryByAttribute, fireEvent, screen, cleanup } from "@testing-library/react";
+import { Provider } from 'react-redux';
+import user from "@testing-library/user-event"
+
+import {ServicesItemStartModal} from "./ServicesItemStartModal"
+import { BrowserRouter as Router } from 'react-router-dom';
+// import { getApiSession, listClusterCustomObject } from "@app/api";
+import { store } from '@app/store';
+
+const getById = queryByAttribute.bind(null, 'id');
+
+// test.afterEach(cleanup)
+
+describe("ServicesItemStartModal", () => {
+    test("When ServicesItemStartModal layout renders, should display 'Confirm' option", async () => {
+        const closeModal = jest.fn();
+        const handleStart = jest.fn();
+        const { getByText, debug } = 
+        render(<ServicesItemStartModal key="start"
+        isOpen={true}
+        onClose={closeModal}
+        onConfirm={handleStart}
+        resourceClaim= {"ServiceCatalogName"}/>
+      );
+
+      const testVar = getByText("Confirm");
+      await waitFor(() => expect(testVar).toBeInTheDocument());
+    });
+
+    test("When ServicesItemStartModal layout renders, should display 'Cancle' option", async () => {
+        const closeModal = jest.fn();
+        const handleStart = jest.fn();
+        const { getByText, debug } = 
+        render(<ServicesItemStartModal key="start"
+        isOpen={true}
+        onClose={closeModal}
+        onConfirm={handleStart}
+        resourceClaim= {"ServiceCatalogName"}/>
+      );
+
+      const testVar = getByText("Cancel");
+      await waitFor(() => expect(testVar).toBeInTheDocument());
+    });
+
+    test("When ServicesItemStartModal layout renders, should display 'Start Service?' option", async () => {
+        const closeModal = jest.fn();
+        const handleStart = jest.fn();
+        const catalogItemDisplayName = "Service";
+        const { getByText, debug } = 
+        render(<ServicesItemStartModal key="start"
+        isOpen={true}
+        onClose={closeModal}
+        onConfirm={handleStart}
+        resourceClaim= {"ServiceCatalogName"}/>
+      );
+
+      const testVar = getByText(`Start ${catalogItemDisplayName}?`);
+      await waitFor(() => expect(testVar).toBeInTheDocument());
+    });
+
+    test("When ServicesItemStartModal layout renders, should Confirm button click once", async () => {
+        const closeModal = jest.fn();
+        const handleStart = jest.fn();
+
+        const { getByText, debug } = render(<ServicesItemStartModal key="start"
+        isOpen={true}
+        onClose={closeModal}
+        onConfirm={handleStart}
+        resourceClaim={"ServiceCatalogName"}/>
+      );
+      const button = screen.getByText("Confirm");
+      fireEvent.click(button);
+        await waitFor(() => expect(handleStart).toBeCalledTimes(1));
+    });
+
+    test("When ServicesItemStartModal layout renders, should Cancle button click once", async () => {
+        const closeModal = jest.fn();
+        const handleStart = jest.fn();
+
+        const { getByText, debug } = render(<ServicesItemStartModal key="start"
+        isOpen={true}
+        onClose={closeModal}
+        onConfirm={handleStart}
+        resourceClaim={"ServiceCatalogName"}/>
+      );
+      const button = screen.getByText("Cancel");
+      fireEvent.click(button);
+        await waitFor(() => expect(closeModal).toBeCalledTimes(1));
+    });
+
+
+    // test.only("When ServicesItemStartModal layout renders, should display selected service will stop in ", async () => {
+    //     const closeModal = jest.fn();
+    //     const handleStart = jest.fn();
+
+    //     const { getByText, debug } = render(<ServicesItemStartModal key="start"
+    //     isOpen={"true"}
+    //     onClose={closeModal}
+    //     onConfirm={handleStart}
+    //     resourceClaim={"ServiceCatalogName"}>
+    //     service will stop in
+    //      {/* <TimeInterval interval={defaultRuntime} />.  */}
+    //     </ServicesItemStartModal>
+    //   );
+
+    //   const testVar = getByText(`service will stop in`);
+    //   await waitFor(() => expect(testVar).toBeInTheDocument());
+    // });
+})