add no data and failing cutom checks

Author: soujay

src/Frontend/src/views/CustomChecksView.vue

@@ -20,11 +20,11 @@ const { pageNumber, failingCount, failedChecks } = storeToRefs(store);
 
     <section name="custom_checks">
       <NoData v-if="failingCount === 0" message="No failed custom checks" role="note" aria-label="customcheck-message" />
-      <div v-else class="row">
+      <div v-else class="row" role="table" aria-label="custom-check-list">
         <div class="col-sm-12">
           <CustomCheckView v-for="item of failedChecks" :key="item.id" :custom-check="item" />
           <div class="row">
-            <PaginationStrip :items-per-page="10" :total-count="failingCount" v-model="pageNumber" />
+            <PaginationStrip :items-per-page="10" :total-count="failingCount" v-model="pageNumber" role="row" aria-label="custom-check-pagination" />
           </div>
         </div>
       </div>

src/Frontend/test/mocks/browser.ts

@@ -25,7 +25,7 @@ const driver = makeDriver();
 (async () => {
   await driver.setUp(precondition.serviceControlWithMonitoring);
   //override the default mocked endpoints with a custom list
-  await driver.setUp(precondition.hasCustomChecks);
+  await driver.setUp(precondition.hasCustomChecks(49, 2));
 
   await driver.setUp(
     precondition.monitoredEndpointsNamed([

src/Frontend/test/mocks/custom-checks-template.ts

@@ -1,6 +1,5 @@
+import CustomCheck from "@/resources/CustomCheck";
 import { SetupFactoryOptions } from "../driver";
-import { passedCustomCheckItems, customCheckItems } from "../mocks/custom-checks-template";
-
 const emptyContent = JSON.stringify([]);
 
 export const hasCustomChecksEmpty = ({ driver }: SetupFactoryOptions) => {
@@ -13,35 +12,75 @@ export const hasCustomChecksEmpty = ({ driver }: SetupFactoryOptions) => {
   });
 };
 
-export const hasCustomChecksPassing = ({ driver }: SetupFactoryOptions) => {
-  const serviceControlInstanceUrl = window.defaultConfig.service_control_url;
-  driver.mockEndpointDynamic(`${serviceControlInstanceUrl}customchecks`, (url) => {
-    const status = url.searchParams.get("status");
-    let dataForCustomCheckItems = passedCustomCheckItems;
-
-    if (status === "fail") {
-      dataForCustomCheckItems = dataForCustomCheckItems.filter((check) => check.status === "Fail");
-    }
-
-    return {
-      body: dataForCustomCheckItems,
-      headers: { "Total-Count": dataForCustomCheckItems.length.toString() },
-    };
-  });
+const generateGuid = () => {
+  return crypto.randomUUID();
 };
-export const hasCustomChecks = ({ driver }: SetupFactoryOptions) => {
-  const serviceControlInstanceUrl = window.defaultConfig.service_control_url;
-  driver.mockEndpointDynamic(`${serviceControlInstanceUrl}customchecks`, (url) => {
-    const status = url.searchParams.get("status");
-    let dataForCustomCheckItems = customCheckItems;
-
-    if (status === "fail") {
-      dataForCustomCheckItems = dataForCustomCheckItems.filter((check) => check.status === "Fail");
-    }
-
-    return {
-      body: dataForCustomCheckItems,
-      headers: { "Total-Count": dataForCustomCheckItems.length.toString() },
-    };
-  });
+const customCheckTemplate = <CustomCheck>{
+  id: "CustomChecks/6131fa95-9414-1898-9c83-c5b18587945b",
+  custom_check_id: "Audit Message Ingestion",
+  category: "ServiceControl.Audit Health",
+  status: "Pass",
+  failure_reason: "I don't know the reason",
+  reported_at: "2025-01-10T05:06:30.4074087Z",
+  originating_endpoint: {
+    name: "Particular.ServiceControl.Audit",
+    host_id: "ff605b55-6fbb-af56-5753-73c1ff73e601",
+    host: "ABC",
+  },
 };
+
+export const hasCustomChecks =
+  (failingCount: number, passingCount: number) =>
+  ({ driver }: SetupFactoryOptions) => {
+    const serviceControlInstanceUrl = window.defaultConfig.service_control_url;
+
+    // Calculate total count
+    const totalCount = failingCount + passingCount;
+
+    // Create checks (both failing and passing)
+    const customChecks = Array.from({ length: totalCount }).map((_, index) => {
+      // Generate the date based on the index
+      const date = new Date();
+      date.setDate(date.getDate() - index); // Subtract `index` days from the current date
+      const reportedAt = date.toISOString(); // Convert to ISO string format
+
+      // Determine status and failure reason
+      const status = index < failingCount ? "Fail" : "Pass";
+      const failureReason = status === "Fail" ? `configured to fail on endpoint ${index}` : "";
+
+      // Generate a new GUID for the ID and host_id
+      const newGuid = generateGuid();
+      const originatingEndpointName = `endpoint ${index}`;
+      const originatingHost = `ABC ${index}`;
+
+      return {
+        ...customCheckTemplate,
+        id: `customcheck/${newGuid}`, // New GUID for ID
+        status, // Fail or Pass based on index
+        failure_reason: failureReason, // Failure reason or empty for passing
+        reported_at: reportedAt, // Autogenerated reported_at based on index
+        originating_endpoint: {
+          name: originatingEndpointName, // Endpoint name based on index
+          host_id: newGuid, // New GUID for host_id
+          host: originatingHost, // Host name based on index
+        },
+      };
+    });
+
+    const failedCustomChecks = customChecks.filter((check) => check.status === "Fail");
+
+    driver.mockEndpointDynamic(`${serviceControlInstanceUrl}customchecks`, (url) => {
+      const status = url.searchParams.get("status");
+      if (status === "fail") {
+        return {
+          body: failedCustomChecks,
+          headers: { "Total-Count": failedCustomChecks.length.toString() },
+        };
+      }
+
+      return {
+        body: customChecks,
+        headers: { "Total-Count": customChecks.length.toString() },
+      };
+    });
+  };

src/Frontend/test/preconditions/customChecks.ts

@@ -5,7 +5,7 @@ export { hasServiceControlMonitoringInstanceUrl } from "../preconditions/hasServ
 export { hasUpToDateServiceControl } from "../preconditions/hasUpToDateServiceControl";
 export { hasUpToDateServicePulse } from "../preconditions/hasUpToDateServicePulse";
 export { errorsDefaultHandler } from "../preconditions/hasNoErrors";
-export { hasCustomChecksEmpty, hasCustomChecks, hasCustomChecksPassing } from "./customChecks";
+export { hasCustomChecksEmpty, hasCustomChecks } from "./customChecks";
 export { hasNoDisconnectedEndpoints } from "../preconditions/hasNoDisconnectedEndpoints";
 export { hasNoMonitoredEndpoints, hasMonitoredEndpointsList, monitoredEndpointsNamed } from "../preconditions/hasMonitoredEndpoints";
 export { hasEventLogItems } from "../preconditions/hasEventLogItems";

src/Frontend/test/preconditions/index.ts

@@ -1,14 +1,26 @@
 import { screen } from "@testing-library/vue";
 
-export async function customChecksMessageElement() {
-  const messageElement = await screen.findByRole("note", { name: "customcheck-message" });
-  return messageElement;
+export function customChecksMessage() {
+  const customCheckNoDataMessage = screen.queryByRole("note", { name: "customcheck-message" });
+  return customCheckNoDataMessage?.textContent?.trim();
 }
-export async function customChecksList() {
+export function customChecksMessageElement() {
+  const customCheckNoDataElement = screen.queryByRole("note", { name: "customcheck-message" });
+  return customCheckNoDataElement;
+}
+export function customChecksListElement() {
+  const customChecksListElement = screen.queryByRole("table", { name: "custom-check-list" });
+  return customChecksListElement;
+}
+export async function customChecksFailedRowsList() {
   const failedCustomChecksRows = await screen.findAllByRole("row", { name: "custom-check-failed-row" });
   return failedCustomChecksRows;
 }
 export async function customChecksFailedReasonList() {
   const failedCustomChecksReasons = await screen.findAllByRole("note", { name: "custom-check-failed-reason" });
   return failedCustomChecksReasons;
 }
+export function customChecksListPaginationElement() {
+  const customChecksListPaginationElement = screen.queryByRole("row", { name: "custom-check-pagination" });
+  return customChecksListPaginationElement;
+}

src/Frontend/test/specs/customchecks/questions/failedCustomChecks.ts

@@ -1,34 +1,66 @@
 import { test, describe } from "../../drivers/vitest/driver";
 import { expect } from "vitest";
 import * as precondition from "../../preconditions";
-import { customChecksFailedReasonList, customChecksList } from "./questions/failedCustomChecks";
+import { customChecksFailedRowsList, customChecksListElement, customChecksMessageElement, customChecksFailedReasonList, customChecksListPaginationElement } from "./questions/failedCustomChecks";
 import { waitFor } from "@testing-library/vue";
-import { customCheckItems } from "../../mocks/custom-checks-template";
 
 describe("FEATURE: Failing custom checks", () => {
-  describe("RULE: Custom checks are displayed", () => {
+  describe("RULE: Failed custom checks should be displayed", () => {
     test("EXAMPLE: All custom checks are in a failed state are displayed in a list on the custom checks tab", async ({ driver }) => {
       await driver.setUp(precondition.serviceControlWithMonitoring);
-      await driver.setUp(precondition.hasCustomChecks);
-      // const response = precondition.hasCustomChecks;
-      // const expectedCount = response.headers["Total-Count"];
-      const expectedCount = customCheckItems.filter((check) => check.status === "Fail").length.toString();
+      await driver.setUp(precondition.hasCustomChecks(5, 3));
+
       await driver.goTo("/custom-checks");
-      //  console.log("resp:" + expectedCount);
+
       await waitFor(async () => {
-        // expect(await customChecksMessageElement()).not.toBeInTheDocument(); //no data message is not vsible
+        expect(await customChecksListElement()).toBeInTheDocument(); //failed list is visisble
+      });
+      expect(customChecksMessageElement()).not.toBeInTheDocument(); //no data message is not vsible
+      await waitFor(async () => {
+        expect(await customChecksFailedRowsList()).toHaveLength(5); //count of failed checks matches failing count set
+
+        const failedReasonList = await customChecksFailedReasonList();
+        expect(failedReasonList).toHaveLength(5); //count of failed reasons matches failing count set
 
-        expect(await customChecksList()).toHaveLength(Number(expectedCount)); //count of failed checks matches the response received
-        const failedCustomChecksReasonsList = await customChecksFailedReasonList();
-        expect(failedCustomChecksReasonsList).toHaveLength(Number(expectedCount)); //count of failed reasons matches the response received
-        // Ensure that each reason has non-empty text
-        failedCustomChecksReasonsList.forEach((reason) => {
+        failedReasonList.forEach((reason) => {
           const textContent = reason.textContent?.trim(); // Get the text and trim any surrounding whitespace
-          expect(textContent).not.toBe(""); // Assert the text content is not empty
+          expect(textContent).not.toBe(""); // Assert the failed reason text content is not empty
         });
       });
     });
   });
+
+  describe("RULE: Failed custom checks should have pagination when failed checks count is greater than 50", () => {
+    test("EXAMPLE: 51 failed custom checks is paginated on the custom checks tab", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasCustomChecks(51, 3));
+
+      await driver.goTo("/custom-checks");
+
+      await waitFor(async () => {
+        expect(await customChecksListElement()).toBeInTheDocument(); //failed list is visisble
+      });
+      expect(customChecksListPaginationElement()).toBeInTheDocument(); //pagination vsible
+      await waitFor(async () => {
+        expect(await customChecksFailedRowsList()).toHaveLength(51); //count of failed checks matches failing count set
+      });
+    });
+
+    test("EXAMPLE: 49 failed custom checks is not paginated on the custom checks tab", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasCustomChecks(49, 3));
+
+      await driver.goTo("/custom-checks");
+
+      await waitFor(async () => {
+        expect(await customChecksListElement()).toBeInTheDocument(); //failed list is visisble
+      });
+      expect(customChecksListPaginationElement()).not.toBeInTheDocument(); //pagination vsible
+      await waitFor(async () => {
+        expect(await customChecksFailedRowsList()).toHaveLength(49); //count of failed checks matches failing count set
+      });
+    });
+  });
   describe("RULE: Failed custom checks should be shown in descending order of last checked", () => {
     test.todo("EXAMPLE: Three failed custom checks is  displayed in descending order of last checked on the custom checks tab");
 
@@ -39,25 +71,6 @@ describe("FEATURE: Failing custom checks", () => {
           Then the custom checks are shown in descending order of last checked
         */
   });
-  describe("RULE: Failed custom checks should have pagination", () => {
-    test.todo("EXAMPLE: 51 failed custom checks is paginated on the custom checks tab");
-
-    /* SCENARIO
-          Given there are 51 failed custom checks
-          When navigating to the custom checks tab
-          Then the pagination controls should be visible
-          And the page number should be 1
-          And only the first 50 custom checks should be rendered
-          And page 2 should be available to click on
-        */
-
-    test.todo("EXAMPLE: 49 failed custom checks is not paginated on the custom checks tab");
-    /* SCENARIO
-          Given there are 49 failed custom checks
-          When navigating to the custom checks tab
-          Then the pagination controls should not be visible
-        */
-  });
   describe("RULE: Custom checks should auto-refresh", () => {
     test.todo("EXAMPLE: When a custom check fails, the custom checks tab is auto-refreshed with the new failed custom check");