Tenant Monitoring Screen TestCafe UI tests (#2161)

portal-ui/src/screens/Console/Common/FormComponents/CodeMirrorWrapper/CodeMirrorWrapper.tsx

@@ -78,6 +78,7 @@ const CodeMirrorWrapper = ({
           onChange={(evn) => {
             onBeforeChange(null, null, evn.target.value);
           }}
+          id={"code_wrapper"}
           padding={15}
           style={{
             fontSize: 12,

portal-ui/src/screens/Console/Tenants/TenantDetails/EditTenantMonitoringScreen.tsx

@@ -562,6 +562,7 @@ const TenantMonitoring = ({ classes }: ITenantMonitoring) => {
           <Grid item xs={12} textAlign={"right"}>
             <Button
               type="submit"
+              id={"submit_button"}
               variant="contained"
               color="primary"
               disabled={!checkValid()}

portal-ui/src/screens/Console/Tenants/TenantDetails/TenantDetails.tsx

@@ -325,6 +325,7 @@ const TenantDetails = ({ classes }: ITenantDetailsProps) => {
                   }}
                   tooltip={"Edit YAML"}
                   color="primary"
+                  id={"yaml_button"}
                   variant="outlined"
                   aria-label="Edit YAML"
                   onClick={() => {

portal-ui/tests/operator/tenants.ts

@@ -25,6 +25,7 @@ import {
   goToPodSection,
   goToPvcInTenant,
   goToPvcSection,
+  checkMonitoringFieldsAcceptValues,
 } from "./utils";
 
 fixture("For user with default permissions").page("http://localhost:9090");
@@ -94,3 +95,9 @@ const checkPvcDescribeHasSections = async () => {
     .expect(Selector("#pvc-describe-labels").exists)
     .ok();
 };
+
+test("Test Prometheus config fields can be edited and submitted", async (t) => {
+  const tenantName = `storage-lite`;
+  await loginToOperator();
+  await checkMonitoringFieldsAcceptValues(tenantName);
+});

portal-ui/tests/operator/utils.ts

@@ -111,6 +111,11 @@ export const goToPvcSection = async (index: number) => {
     .click(Selector(`#simple-tab-${index}`));
 };
 
+export const goToMonitoringSection = async (tenantName: string) => {
+  await t.click(`#list-tenant-${tenantName}`).wait(2000);
+  await t.click(Selector(`a[href$="/monitoring"]`));
+};
+
 export const redirectToTenantsList = async () => {
   await redirectToPath(`${host}/tenants`);
 };
@@ -118,3 +123,69 @@ export const redirectToTenantsList = async () => {
 export const redirectToPath = async (path: string) => {
   await t.navigateTo(path);
 };
+
+export const checkMonitoringFieldsAcceptValues = async (tenantName: string) => {
+  await goToMonitoringSection(tenantName);
+  await t
+    .typeText("#image", "quay.io/prometheus/prometheus:latest", {
+      replace: true,
+    })
+    .typeText("#sidecarImage", "library/alpine:latest", { replace: true })
+    .typeText("#initImage", "library/busybox:1.33.1", { replace: true })
+    .typeText("#diskCapacityGB", "1", { replace: true })
+    .typeText("#cpuRequest", "1", { replace: true })
+    .typeText("#memRequest", "1", { replace: true })
+    .typeText("#serviceAccountName", "monitoringTestServiceAccountName", {
+      replace: true,
+    })
+    .typeText("#storageClassName", "monitoringTestStorageClassName", {
+      replace: true,
+    })
+    .click("#submit_button")
+    .click("#yaml_button")
+    .expect(Selector("#code_wrapper").exists)
+    .ok();
+  await t
+    .expect(
+      (
+        await Selector("#code_wrapper").textContent
+      ).includes("image: quay.io/prometheus/prometheus:latest")
+    )
+    .ok()
+    .expect(
+      (
+        await Selector("#code_wrapper").textContent
+      ).includes("initimage: library/busybox:1.33.1")
+    )
+    .ok()
+    .expect(
+      (
+        await Selector("#code_wrapper").textContent
+      ).includes("diskCapacityGB: 1")
+    )
+    .ok()
+    .expect((await Selector("#code_wrapper").textContent).includes('cpu: "1"'))
+    .ok()
+    .expect(
+      (await Selector("#code_wrapper").textContent).includes("memory: 1Gi")
+    )
+    .ok()
+    .expect(
+      (
+        await Selector("#code_wrapper").textContent
+      ).includes("serviceAccountName: monitoringTestServiceAccountName")
+    )
+    .ok()
+    .expect(
+      (
+        await Selector("#code_wrapper").textContent
+      ).includes("sidecarimage: library/alpine:latest")
+    )
+    .ok()
+    .expect(
+      (
+        await Selector("#code_wrapper").textContent
+      ).includes("storageClassName: monitoringTestStorageClassName")
+    )
+    .ok();
+};