Add custom checks acceptance tests (#2216)

* Testing

* raw testing of mock data Frontend custom checks

* dynamic precondition function hasCustomChecks

* No data custom checks tests

* wip Failing custom checks tests

* All custom checks are in a failed state TODOs

* precondition.hasCustomChecks params rename

* WIP All custom checks are in a failed state asserts

* Revert "WIP All custom checks are in a failed state asserts"

This reverts commit dca2eb7.

* Revert "precondition.hasCustomChecks params rename"

This reverts commit a337eb2.

* Revert "All custom checks are in a failed state TODOs"

This reverts commit 44edfad.

* Revert "wip Failing custom checks tests"

This reverts commit 300bfd1.

* Revert "No data custom checks tests"

This reverts commit fcfd091.

* Revert "dynamic precondition function hasCustomChecks"

This reverts commit 07ade85.

* wip : add mocks for custom checks data, add test to check for "no failed custom checks message" -

* add driver set up for servicecontrolwithmonitoring to fix the tests

* refactor files and code

* add a template for custom check items and use it for tests

* use mockEndpointDynamic to add customchecks url by querystring

* remove extra space

* added some console.log for testing

* Update src/Frontend/test/specs/customchecks/viewing-no-data.spec.ts

Co-authored-by: Christian <[email protected]>

* Update src/Frontend/test/specs/customchecks/viewing-no-data.spec.ts

Co-authored-by: Christian <[email protected]>

* add test for no custom check data scenario

* set up mock data for custom check and write tests for empty and failed custom check listing

* add no data and failing cutom checks

* fix custom check pagination test

* generate custom check items

* add test for custom checks to be displayed in descending order of last checked on the custom checks tab

* Added the following tests- When a custom check fails, the custom checks tab is auto-refreshed with the new failed custom check, A failing custom check that begins passing is auto-refreshed and removed from the list on the custom checks tab

* test for dismissing a custom check

* add test for dismissbutton

* refactor code

---------

Co-authored-by: Christian <[email protected]>
Co-authored-by: Christian <[email protected]>

Author: soujay

src/Frontend/src/components/customchecks/CustomCheckView.vue

@@ -11,27 +11,27 @@ const store = useCustomChecksStore();
 <template>
   <div class="row box box-warning box-no-click">
     <div class="col-sm-12 no-side-padding">
-      <div class="custom-check-row">
+      <div class="custom-check-row" role="row" aria-label="custom-check-failed-row">
         <div class="custom-check-row-detail">
           <div class="row box-header">
             <div class="col-sm-12 no-side-padding">
-              <p class="lead">{{ customCheck.failure_reason }}</p>
+              <p class="lead" role="note" aria-label="custom-check-failed-reason">{{ customCheck.failure_reason }}</p>
               <div class="row">
                 <div class="col-sm-12 no-side-padding">
                   <p class="metadata">
                     <span class="metadata"><i aria-hidden="true" class="fa fa-check"></i> Check: {{ customCheck.custom_check_id }}</span>
                     <span class="metadata"><i aria-hidden="true" class="fa fa-list"></i> Category: {{ customCheck.category }}</span>
                     <span class="metadata"><i aria-hidden="true" class="fa pa-endpoint"></i> Endpoint: {{ customCheck.originating_endpoint.name }}</span>
                     <span class="metadata"><i aria-hidden="true" class="fa fa-server"></i> Host: {{ customCheck.originating_endpoint.host }}</span>
-                    <span class="metadata"><i aria-hidden="true" class="fa fa-clock-o"></i> Last checked: <TimeSince :date-utc="customCheck.reported_at"></TimeSince></span>
+                    <span class="metadata"><i aria-hidden="true" class="fa fa-clock-o"></i> Last checked: <TimeSince :date-utc="customCheck.reported_at" role="note" aria-label="custom-check-reported-date"></TimeSince></span>
                   </p>
                 </div>
               </div>
             </div>
           </div>
         </div>
         <div>
-          <button type="button" class="btn btn-default" title="Dismiss this custom check so it doesn't show up as an alert" @click="store.dismissCustomCheck(customCheck.id)">Dismiss</button>
+          <button type="button" class="btn btn-default" title="Dismiss this custom check so it doesn't show up as an alert" role="button" aria-label="custom-check-dismiss" @click="store.dismissCustomCheck(customCheck.id)">Dismiss</button>
         </div>
       </div>
     </div>

src/Frontend/src/components/heartbeats/serviceControlWithHeartbeats.ts

@@ -6,7 +6,7 @@ export const serviceControlWithHeartbeats = async ({ driver }: SetupFactoryOptio
   await driver.setUp(precondition.hasUpToDateServicePulse);
   await driver.setUp(precondition.hasUpToDateServiceControl);
   await driver.setUp(precondition.errorsDefaultHandler);
-  await driver.setUp(precondition.hasNoFailingCustomChecks);
+  await driver.setUp(precondition.hasCustomChecksEmpty);
   await driver.setUp(precondition.hasEventLogItems);
   await driver.setUp(precondition.hasServiceControlMainInstance(minimumSCVersionForEndpointSettings));
   await driver.setUp(precondition.hasNoDisconnectedEndpoints);

src/Frontend/src/views/CustomChecksView.vue

@@ -19,12 +19,12 @@ const { pageNumber, failingCount, failedChecks } = storeToRefs(store);
     </div>
 
     <section name="custom_checks">
-      <NoData v-if="failingCount === 0" message="No failed custom checks" />
-      <div v-else class="row">
+      <NoData v-if="failingCount === 0" message="No failed custom checks" role="note" aria-label="customcheck-message" />
+      <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/src/views/throughputreport/serviceControlWithThroughput.ts

@@ -6,7 +6,7 @@ export const serviceControlWithThroughput = async ({ driver }: SetupFactoryOptio
   await driver.setUp(precondition.hasUpToDateServicePulse);
   await driver.setUp(precondition.hasUpToDateServiceControl);
   await driver.setUp(precondition.errorsDefaultHandler);
-  await driver.setUp(precondition.hasNoFailingCustomChecks);
+  await driver.setUp(precondition.hasCustomChecksEmpty);
   await driver.setUp(precondition.hasEventLogItems);
   await driver.setUp(precondition.hasNoHeartbeatsEndpoints);
   await driver.setUp(precondition.hasServiceControlMainInstance(minimumSCVersionForThroughput));

src/Frontend/test/mocks/browser.ts

@@ -25,6 +25,8 @@ const driver = makeDriver();
 (async () => {
   await driver.setUp(precondition.serviceControlWithMonitoring);
   //override the default mocked endpoints with a custom list
+  await driver.setUp(precondition.hasCustomChecks(3, 2));
+
   await driver.setUp(
     precondition.monitoredEndpointsNamed([
       "Universe.Solarsystem.Mercury.Endpoint1",
@@ -35,7 +37,6 @@ const driver = makeDriver();
       "Universe.Solarsystem.Earth.Endpoint6",
     ])
   );
-
   await driver.setUp(
     precondition.hasFailedMessage({
       withGroupId: "81dca64e-76fc-e1c3-11a2-3069f51c58c8",

src/Frontend/test/preconditions/customChecks.ts

@@ -0,0 +1,138 @@
+import CustomCheck, { Status } from "@/resources/CustomCheck";
+import { SetupFactoryOptions } from "../driver";
+const emptyContent = JSON.stringify([]);
+
+export const hasCustomChecksEmpty = ({ driver }: SetupFactoryOptions) => {
+  const serviceControlInstanceUrl = window.defaultConfig.service_control_url;
+  driver.mockEndpoint(`${serviceControlInstanceUrl}customchecks`, {
+    body: emptyContent,
+    headers: {
+      "Total-Count": "0", //count of failing custom checks
+    },
+  });
+};
+
+const generateGuid = () => {
+  return crypto.randomUUID();
+};
+const customCheckTemplate = <CustomCheck>{
+  id: "customchecks/6131fa95-9414-1898-9c83-c5b18587945b",
+  custom_check_id: "SampleCustomeCheck",
+  category: "SomeCategory",
+  status: "Pass",
+  failure_reason: "I don't know the reason",
+  reported_at: "2025-01-10T05:06:30.4074087Z",
+  originating_endpoint: {
+    name: "EndpointX",
+    host_id: "ff605b55-6fbb-af56-5753-73c1ff73e601",
+    host: "ABC",
+  },
+};
+
+export const hasCustomChecks =
+  (failingCount: number, passingCount: number) =>
+  ({ driver }: SetupFactoryOptions) => {
+    const customChecksData = generateCustomChecksData(failingCount, passingCount)();
+
+    // Call getCustomChecks to mock the endpoints with the generated data
+    getCustomChecks(customChecksData)({ driver });
+  };
+
+export const generateCustomChecksData = (failingCount: number, passingCount: number) => () => {
+  // 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 ? Status.Fail : Status.Pass;
+    const failureReason = status === 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}`;
+    const customCategory = `Some Category ${index}`;
+    const customeCheckId = `SampleCustomeCheck ${index}`;
+
+    return {
+      ...customCheckTemplate,
+      id: `customchecks/${newGuid}`, // New GUID for ID
+      category: customCategory,
+      custom_check_id: customeCheckId,
+      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
+      },
+    };
+  });
+  return customChecks;
+};
+
+export const getCustomChecks =
+  (customChecks: CustomCheck[]) =>
+  ({ driver }: SetupFactoryOptions) => {
+    const serviceControlInstanceUrl = window.defaultConfig.service_control_url;
+
+    const failedCustomChecks = customChecks.filter((check) => check.status === "Fail");
+
+    driver.mockEndpointDynamic(`${serviceControlInstanceUrl}customchecks`, "get", (url) => {
+      const status = url.searchParams.get("status");
+      if (status === "fail") {
+        return Promise.resolve({
+          body: failedCustomChecks,
+          headers: { "Total-Count": failedCustomChecks.length.toString() },
+        });
+      }
+
+      return Promise.resolve({
+        body: customChecks,
+        headers: { "Total-Count": customChecks.length.toString() },
+      });
+    });
+    driver.mockEndpointDynamic(`${serviceControlInstanceUrl}customchecks/:id`, "delete", (url, params) => {
+      const status = url.searchParams.get("status");
+      console.log(status + ", " + params.id);
+
+      return Promise.resolve({
+        body: { message: "Successfully deleted" },
+        status: 200,
+        headers: { "Content-Type": "application/json" },
+      });
+    });
+  };
+
+export const updateCustomCheckItemByStatus = (data: CustomCheck[], statusToUpdate: string) => {
+  const itemToUpdate = data.find((item) => item.status === statusToUpdate);
+
+  if (itemToUpdate) {
+    if (statusToUpdate === "Pass") {
+      itemToUpdate.status = Status.Fail;
+      itemToUpdate.failure_reason = "Some reason I dont know";
+    } else {
+      itemToUpdate.status = Status.Pass;
+      itemToUpdate.failure_reason = "";
+    }
+  }
+};
+export const updateCustomCheckItemByItem = (data: CustomCheck[], itemToUpdate: CustomCheck, statusToUpdate: string) => {
+  const itemFound = data.find((item) => item.id === itemToUpdate.id);
+  if (itemFound != null) {
+    if (statusToUpdate === "Fail") {
+      itemToUpdate.status = Status.Fail;
+      itemToUpdate.failure_reason = "Some reason I dont know";
+    } else {
+      itemToUpdate.status = Status.Pass;
+      itemToUpdate.failure_reason = "";
+    }
+  }
+};

src/Frontend/test/preconditions/hasNoFailingCustomChecks.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 { hasNoFailingCustomChecks } from "../preconditions/hasNoFailingCustomChecks";
+export { hasCustomChecksEmpty, hasCustomChecks, generateCustomChecksData, getCustomChecks, updateCustomCheckItemByStatus, updateCustomCheckItemByItem } 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

@@ -23,7 +23,7 @@ export const serviceControlWithMonitoring = async ({ driver }: SetupFactoryOptio
   await driver.setUp(precondition.errorsDefaultHandler);
 
   //http://localhost:33333/api/customchecks
-  await driver.setUp(precondition.hasNoFailingCustomChecks);
+  await driver.setUp(precondition.hasCustomChecksEmpty);
 
   //http://localhost:33633/monitored-endpoints/disconnected
   await driver.setUp(precondition.hasNoDisconnectedEndpoints);

src/Frontend/test/preconditions/serviceControlWithMonitoring.ts

@@ -1,32 +1,85 @@
 import { test, describe } from "../../drivers/vitest/driver";
+import { expect } from "vitest";
+import * as precondition from "../../preconditions";
+import { customChecksListElement, customChecksDismissButtonList, customChecksFailedRowsList } from "./questions/failedCustomChecks";
+import { waitFor } from "@testing-library/vue";
+import userEvent from "@testing-library/user-event";
 
 describe("FEATURE: Dismiss custom checks", () => {
   describe("RULE: Dismiss button should be visible", () => {
-    test.todo("EXAMPLE: Dismiss button should be visible on each failing custom check");
+    test("EXAMPLE: Dismiss button is visible on each failing custom check", async ({ driver }) => {
+      const failingCustomCheckCount = 4;
+      const passingCustomCheckCount = 2;
 
-    /* SCENARIO
-          Given 2 failing custom checks
-          And the custom checks page is open
-          Then each should render a dismiss button
-        */
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasCustomChecks(failingCustomCheckCount, passingCustomCheckCount));
+
+      await driver.goTo("/custom-checks");
+
+      await waitFor(async () => {
+        expect(await customChecksListElement()).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        expect(await customChecksDismissButtonList()).toHaveLength(failingCustomCheckCount); //count of dismiss button
+      });
+    });
   });
+
   describe("RULE: Dismissing a custom check should remove from the list", () => {
-    test.todo("EXAMPLE: The dismiss button should remove the custom check from the list when clicked");
+    test("EXAMPLE: The dismiss button removes the custom check from the list when clicked", async ({ driver }) => {
+      const failingCustomCheckCount = 4;
+      const passingCustomCheckCount = 2;
+
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasCustomChecks(failingCustomCheckCount, passingCustomCheckCount));
+
+      await driver.goTo("/custom-checks");
+
+      await waitFor(async () => {
+        expect(await customChecksListElement()).toBeInTheDocument(); //failed list is visisble
+        expect(await customChecksFailedRowsList()).toHaveLength(failingCustomCheckCount); //count of failed checks matches failing count set
+      });
+
+      let dismissButtonList = await customChecksDismissButtonList();
+      expect(dismissButtonList).toHaveLength(failingCustomCheckCount); //count of dismiss button matches the failed custom check count
 
-    /* SCENARIO
-          Given 2 failing custom checks
-          When the dismiss button is clicked
-          Then the dismissed custom check should be removed from the list
-        */
+      //click the dismiss button
+      await userEvent.click(dismissButtonList[0]);
+
+      //get the new  dismiss button list
+      dismissButtonList = await customChecksDismissButtonList();
+      expect(dismissButtonList).toHaveLength(failingCustomCheckCount - 1); //count of dismss button is decreased by 1
+    });
   });
   describe("RULE: Failing after a dismiss should cause the failed check to reappear", () => {
-    test.todo("EXAMPLE: Dismissed custom check should reappear in the list when it fails");
-
-    /* SCENARIO
-          Given 2 failed custom checks
-          And one of them is dismissed
-          When the dismissed custom check fails
-          Then the custom check should appear in the list
-        */
+    test("EXAMPLE: Dismissed custom check should reappear in the list when it fails", async ({ driver }) => {
+      const failingCustomCheckCount = 4;
+      const passingCustomCheckCount = 0;
+
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+
+      const customCheckItems = precondition.generateCustomChecksData(failingCustomCheckCount, passingCustomCheckCount)();
+      await driver.setUp(precondition.getCustomChecks(customCheckItems));
+      await driver.goTo("/custom-checks");
+
+      await waitFor(async () => {
+        expect(await customChecksListElement()).toBeInTheDocument(); //failed list is visisble
+        expect(await customChecksFailedRowsList()).toHaveLength(failingCustomCheckCount); //count of failed checks matches failing count set
+      });
+
+      const dismissButtonList = await customChecksDismissButtonList();
+      expect(dismissButtonList).toHaveLength(failingCustomCheckCount); //count of dismiss button
+
+      //click  dismiss button
+      await userEvent.click(dismissButtonList[0]);
+      expect(await customChecksDismissButtonList()).toHaveLength(failingCustomCheckCount - 1); //count of dismiss button
+      expect(await customChecksFailedRowsList()).toHaveLength(failingCustomCheckCount - 1); //count of failed checks matches failing count set
+
+      //re-add the dismissed custom check Item
+      await driver.setUp(precondition.getCustomChecks(customCheckItems));
+      await driver.goTo("/custom-checks");
+      expect(await customChecksFailedRowsList()).toHaveLength(failingCustomCheckCount); //count of failed checks matches failing count set
+    });
   });
 });