test for dismissing a custom check

Author: soujay

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(49, 2));
+  await driver.setUp(precondition.hasCustomChecks(3, 2));
 
   await driver.setUp(
     precondition.monitoredEndpointsNamed([

src/Frontend/test/preconditions/customChecks.ts

@@ -16,7 +16,7 @@ const generateGuid = () => {
   return crypto.randomUUID();
 };
 const customCheckTemplate = <CustomCheck>{
-  id: "CustomChecks/6131fa95-9414-1898-9c83-c5b18587945b",
+  id: "customchecks/6131fa95-9414-1898-9c83-c5b18587945b",
   custom_check_id: "SampleCustomeCheck",
   category: "SomeCategory",
   status: "Pass",
@@ -57,7 +57,7 @@ export const hasCustomChecks =
 
       return {
         ...customCheckTemplate,
-        id: `customcheck/${newGuid}`, // New GUID for ID
+        id: `customchecks/${newGuid}`, // New GUID for ID
         category: customCategory,
         custom_check_id: customeCheckId,
         status, // Fail or Pass based on index
@@ -113,7 +113,7 @@ export const setCustomChecksData = (failingCount: number, passingCount: number)
 
     return {
       ...customCheckTemplate,
-      id: `customcheck/${newGuid}`, // New GUID for ID
+      id: `customchecks/${newGuid}`, // New GUID for ID
       category: customCategory,
       custom_check_id: customeCheckId,
       status, // Fail or Pass based on index
@@ -152,11 +152,11 @@ export const getCustomChecks =
     });
   };
 
-export const updateCustomCheckItem = (data: CustomCheck[], status: string) => {
+export const updateCustomCheckItem = (data: CustomCheck[], statusToUpdate: string) => {
   const itemToUpdate = data.find((item) => item.status === status);
 
   if (itemToUpdate) {
-    if (status === "Pass") {
+    if (statusToUpdate === "Pass") {
       itemToUpdate.status = Status.Fail;
       itemToUpdate.failure_reason = "Some reason I dont know";
     } else {

src/Frontend/test/preconditions/index.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, setCustomChecksData, getCustomChecks,updateCustomCheckItem } from "./customChecks";
+export { hasCustomChecksEmpty, hasCustomChecks, setCustomChecksData, getCustomChecks, updateCustomCheckItem } from "./customChecks";
 export { hasNoDisconnectedEndpoints } from "../preconditions/hasNoDisconnectedEndpoints";
 export { hasNoMonitoredEndpoints, hasMonitoredEndpointsList, monitoredEndpointsNamed } from "../preconditions/hasMonitoredEndpoints";
 export { hasEventLogItems } from "../preconditions/hasEventLogItems";

src/Frontend/test/specs/customchecks/dismissing-custom-checks.spec.ts

@@ -1,23 +1,55 @@
 import { test, describe } from "../../drivers/vitest/driver";
+import { expect } from "vitest";
+import * as precondition from "../../preconditions";
+import { customChecksListElement, customChecksDismissButtonList } 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 }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasCustomChecks(9, 3));
 
-    /* SCENARIO
-          Given 2 failing custom checks
-          And the custom checks page is open
-          Then each should render a dismiss button
-        */
+      await driver.goTo("/custom-checks");
+
+      await waitFor(async () => {
+        expect(await customChecksListElement()).toBeInTheDocument();
+      });
+
+      await waitFor(async () => {
+        expect(await customChecksDismissButtonList()).toHaveLength(9); //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 }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasCustomChecks(3, 2));
 
-    /* SCENARIO
-          Given 2 failing custom checks
-          When the dismiss button is clicked
-          Then the dismissed custom check should be removed from the list
-        */
+      await driver.goTo("/custom-checks");
+
+      await waitFor(async () => {
+        expect(await customChecksListElement()).toBeInTheDocument(); //failed list is visisble
+      });
+
+      //await waitFor(async () => {
+      // const dismissButtonList = await customChecksDismissButtonList();
+      // expect(dismissButtonList).toHaveLength(3); //count of dismiss button
+      // const dismissButton = dismissButtonList[0];
+      // await userEvent.click(dismissButton);
+      //  });
+      //get  one of the dismiss button
+      // const dismissButton = await screen.getAllByRole("button", { name: /custom-check-dismiss/i })[0];
+
+      // Simulate user click event
+
+      //list count should decrease by one -
+      //make sure that the id is notvisible on the page
+      // await waitFor(async () => {
+      //   expect(await customChecksDismissButtonList()).toHaveLength(2); //count of dismiss button
+      // });
+    });
   });
   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");

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

@@ -40,3 +40,7 @@ export async function customChecksReportedDateList() {
 
   return timeStamps;
 }
+export async function customChecksDismissButtonList() {
+  const dismissButtonList = await screen.findAllByRole("button", { name: "custom-check-dismiss" });
+  return dismissButtonList;
+}

src/Frontend/test/specs/customchecks/viewing-failing-custom-checks.spec.ts

@@ -123,7 +123,7 @@ describe("FEATURE: Failing custom checks", () => {
         expect(await customChecksFailedRowsList()).toHaveLength(3); //count of failed checks matches failing count set
       });
 
-      updateCustomCheckItem(customCheckItems, "Fail"); // Pass an existing item that is failing
+      updateCustomCheckItem(customCheckItems, "Fail"); // an existing item that is failing
 
       await driver.setUp(precondition.getCustomChecks(customCheckItems));