Add more dashboard item tests

Author: kentdr

src/Frontend/src/components/DashboardItem.vue

@@ -7,9 +7,9 @@ const props = defineProps<{
 </script>
 
 <template>
-  <RouterLink role="dashboard-item" class="summary-item" :class="{ 'summary-danger': counter > 0, 'summary-info': counter === 0 || !counter }" :to="url">
+  <RouterLink aria-label="Dashboard Item" class="summary-item" :class="{ 'summary-danger': counter > 0, 'summary-info': counter === 0 || !counter }" :to="url">
     <i class="fa fa-3x" :class="props.iconClass"> </i>
-    <span v-if="counter > 0" role="counter" class="badge badge-important">{{ counter }}</span>
+    <span v-if="counter > 0" aria-label="Alert Count" class="badge badge-important">{{ counter }}</span>
     <h4>
       <slot></slot>
     </h4>

src/Frontend/test/mocks/browser.ts

@@ -2,6 +2,8 @@ import { setupWorker } from "msw/browser";
 import { Driver } from "../driver";
 import { makeMockEndpoint, makeMockEndpointDynamic } from "../mock-endpoint";
 import * as precondition from "../preconditions";
+import { EndpointsView } from "@/resources/EndpointView";
+import { EndpointStatus } from "@/resources/Heartbeat";
 export const worker = setupWorker();
 const mockEndpoint = makeMockEndpoint({ mockServer: worker });
 const mockEndpointDynamic = makeMockEndpointDynamic({ mockServer: worker });
@@ -36,6 +38,11 @@ const driver = makeDriver();
     ])
   );
 
+  const unhealthyEndpoint = <EndpointsView>{ is_sending_heartbeats: true, id: "", name: "Dashboard.Item.Test", monitor_heartbeat: true, host_display_name: "", heartbeat_information: { reported_status: EndpointStatus.Dead, last_report_at: "" } };
+
+  await driver.setUp(precondition.serviceControlWithMonitoring);
+  await driver.setUp(precondition.hasHeartbeatsEndpoints([unhealthyEndpoint]));
+
   await driver.setUp(
     precondition.hasFailedMessage({
       withGroupId: "81dca64e-76fc-e1c3-11a2-3069f51c58c8",

src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts

@@ -1,3 +1,4 @@
+import { EndpointStatus } from "@/resources/Heartbeat";
 import { SetupFactoryOptions } from "../driver";
 import { EndpointsView } from "@/resources/EndpointView";
 
@@ -10,4 +11,21 @@ export const hasHeartbeatsEndpoints =
     return endpoints;
   };
 
+export const hasUnhealthyHeartbeatsEndpoints = (numberOfUnhealthyEndpoints: number = 1) => {
+  const unhealthyEndpoints = [];
+
+  for (let i = 0; i < numberOfUnhealthyEndpoints; i++) {
+    unhealthyEndpoints.push(<EndpointsView>{
+      is_sending_heartbeats: true,
+      id: "",
+      name: `UnhealthyHeartbeatEndpoint_${i}`,
+      monitor_heartbeat: true,
+      host_display_name: "",
+      heartbeat_information: { reported_status: EndpointStatus.Dead, last_report_at: "" },
+    });
+  }
+
+  return hasHeartbeatsEndpoints(unhealthyEndpoints);
+};
+
 export const hasNoHeartbeatsEndpoints = hasHeartbeatsEndpoints([]);

src/Frontend/test/preconditions/index.ts

@@ -12,7 +12,7 @@ export { hasEventLogItems } from "../preconditions/hasEventLogItems";
 export { hasRecoverabilityGroups } from "../preconditions/hasEmptyRecoverabilityGroups";
 export * from "./hasEndpointsWithHistoryPeriodData";
 export * from "./hasMonitoredEndpointDetails";
-export { hasNoHeartbeatsEndpoints, hasHeartbeatsEndpoints } from "../preconditions/hasHeartbeatEndpoints";
+export { hasNoHeartbeatsEndpoints, hasHeartbeatsEndpoints, hasUnhealthyHeartbeatsEndpoints } from "../preconditions/hasHeartbeatEndpoints";
 export { serviceControlWithMonitoring } from "./serviceControlWithMonitoring";
 export * from "./recoverability";
 export { hasLicensingReportAvailable } from "../preconditions/hasLicensingReportAvailable";

src/Frontend/test/specs/heartbeats/dashboard-item.spec.ts

@@ -1,16 +1,54 @@
 import { test, describe } from "../../drivers/vitest/driver";
 import * as precondition from "../../preconditions";
-import { expect } from "vitest";
+import { expect, vi } from "vitest";
 import { queryHeartbeatDashboardItem } from "./questions/queryHeartbeatDashboardItem";
+import { waitFor } from "@testing-library/vue";
 
 describe("FEATURE: Dashboard item", () => {
   describe("RULE: The count of unhealthy endpoints should be displayed", () => {
-    test("EXAMPLE: Should not display the counter when there are zero unhealthy endpoints", async ({ driver }) => {
+    test("EXAMPLE: No unhealthy endpoints.", async ({ driver }) => {
+      vi.useFakeTimers();
       await driver.setUp(precondition.serviceControlWithMonitoring);
+
       await driver.goTo("dashboard");
 
+      vi.advanceTimersByTime(5000);
       const heartbeatDashboardItem = await queryHeartbeatDashboardItem();
+
+      // Reverse logic here to make sure the heartbeatDashboardItem is defined but the flag is falsey.
       expect(heartbeatDashboardItem && !heartbeatDashboardItem.isCounterVisible).toBeTruthy();
+
+      vi.useRealTimers();
+    });
+
+    test("EXAMPLE: One unhealthy endpoint.", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasUnhealthyHeartbeatsEndpoints());
+
+      await driver.goTo("dashboard");
+
+      await waitFor(async () => {
+        const heartbeatDashboardItem = await queryHeartbeatDashboardItem();
+        // check the endpoint data has been updated immediately
+        expect(heartbeatDashboardItem && heartbeatDashboardItem.isCounterVisible).toBeTruthy();
+        expect(heartbeatDashboardItem && heartbeatDashboardItem.counterValue).toBe(1);
+      });
+    });
+
+    test("EXAMPLE: Three unhealthy endpoints.", async ({ driver }) => {
+      const numberOfUnhealthyEndpoints = 3;
+
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasUnhealthyHeartbeatsEndpoints(numberOfUnhealthyEndpoints));
+
+      await driver.goTo("dashboard");
+
+      await waitFor(async () => {
+        const heartbeatDashboardItem = await queryHeartbeatDashboardItem();
+
+        expect(heartbeatDashboardItem && heartbeatDashboardItem.isCounterVisible).toBeTruthy();
+        expect(heartbeatDashboardItem && heartbeatDashboardItem.counterValue).toBe(numberOfUnhealthyEndpoints);
+      });
     });
   });
 });

src/Frontend/test/specs/heartbeats/questions/getDashboardItems.ts

@@ -8,20 +8,19 @@ export interface DashboardItemData {
 }
 
 export async function getDashboardItems() {
-  const dashboardItems = await screen.findAllByRole("dashboard-item");
+  const dashboardItems = await screen.findAllByRole("link", { name: "Dashboard Item" });
 
   return new Map<string, DashboardItemData>(
     dashboardItems.map((di) => {
-      const nameHeading = within(di).getByRole("heading");
-      const name = String(nameHeading.textContent);
-      const counterElement = within(di).queryByRole("counter");
+      const name = String(within(di).getByRole("heading").textContent);
+      const counterElement = within(di).queryByLabelText("Alert Count");
 
       return [
         name,
         {
           name: name,
           isCounterVisible: counterElement !== null,
-          counterValue: counterElement ? Number(counterElement.innerText) : 0,
+          counterValue: counterElement ? Number(counterElement.textContent) : 0,
           dashboardItem: di,
         },
       ];

src/Frontend/test/specs/heartbeats/questions/queryHeartbeatDashboardItem.ts

@@ -2,6 +2,5 @@ import { getDashboardItems } from "./getDashboardItems";
 
 export async function queryHeartbeatDashboardItem() {
   const dashboardItems = await getDashboardItems();
-
   return dashboardItems ? dashboardItems.get("Heartbeats") : null;
 }