Add heartbeat menu item tests

Author: kentdr

src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue

@@ -8,10 +8,10 @@ const { failedHeartbeatsCount } = storeToRefs(useHeartbeatsStore());
 </script>
 
 <template>
-  <RouterLink :to="routeLinks.heartbeats.root">
+  <RouterLink aria-label="Heartbeats Menu Item" :to="routeLinks.heartbeats.root">
     <i class="fa fa-heartbeat icon-white" title="Heartbeats"></i>
     <span class="navbar-label">Heartbeats</span>
-    <span v-if="failedHeartbeatsCount > 0" class="badge badge-important">{{ failedHeartbeatsCount }}</span>
+    <span v-if="failedHeartbeatsCount > 0" class="badge badge-important" aria-label="Alert Count">{{ failedHeartbeatsCount }}</span>
   </RouterLink>
 </template>
 

src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts

@@ -11,14 +11,14 @@ export const hasHeartbeatsEndpoints =
     return endpoints;
   };
 
-export const hasUnhealthyHeartbeatsEndpoints = (numberOfUnhealthyEndpoints: number = 1) => {
+export const hasUnhealthyHeartbeatsEndpoints = (numberOfUnhealthyEndpoints: number, endpointNamePrefix: string) => {
   const unhealthyEndpoints = [];
 
   for (let i = 0; i < numberOfUnhealthyEndpoints; i++) {
     unhealthyEndpoints.push(<EndpointsView>{
       is_sending_heartbeats: true,
       id: "",
-      name: `UnhealthyHeartbeatEndpoint_${i}`,
+      name: `${endpointNamePrefix}_${i}`,
       monitor_heartbeat: true,
       host_display_name: "",
       heartbeat_information: { reported_status: EndpointStatus.Dead, last_report_at: "" },
@@ -28,4 +28,45 @@ export const hasUnhealthyHeartbeatsEndpoints = (numberOfUnhealthyEndpoints: numb
   return hasHeartbeatsEndpoints(unhealthyEndpoints);
 };
 
+export const hasAnUnhealthyEndpoint = () => hasUnhealthyHeartbeatsEndpoints(1, "UnhealthyHeartbeatEndpoint");
+
+export const hasUnhealthyEndpoints = (numberOfUnhealthyHeartbeats: number) => hasUnhealthyHeartbeatsEndpoints(numberOfUnhealthyHeartbeats, "UnhealthyHeartbeatEndpoint");
+
+export const hasAnUnhealthyEndpointWithNamePrefix = (endpointNamePrefix: string) => hasUnhealthyHeartbeatsEndpoints(1, endpointNamePrefix);
+
+export const hasHealthyHeartbeatsEndpoints = (numberOfHealthyEndpoints: number, endpointNamePrefix: string) => {
+  const healthyEndpoints = [];
+
+  for (let i = 0; i < numberOfHealthyEndpoints; i++) {
+    healthyEndpoints.push(<EndpointsView>{
+      is_sending_heartbeats: true,
+      id: "",
+      name: `${endpointNamePrefix}_${i}`,
+      monitor_heartbeat: true,
+      host_display_name: "",
+      heartbeat_information: { reported_status: EndpointStatus.Alive, last_report_at: "" },
+    });
+  }
+  return hasHeartbeatsEndpoints(healthyEndpoints);
+};
+
+export const hasAHealthyEndpoint = () => hasHealthyHeartbeatsEndpoints(1, "HealthyHeartbeatEndpoit");
+
+export const hasHealthyEndpoints = (numberOfUnhealthyHeartbeats: number) => hasHealthyHeartbeatsEndpoints(numberOfUnhealthyHeartbeats, "HealthyHeartbeatEndpoint");
+
+export const hasAHealthyEndpointWithNamePrefix = (endpointNamePrefix: string) => hasHealthyHeartbeatsEndpoints(1, endpointNamePrefix);
+
 export const hasNoHeartbeatsEndpoints = hasHeartbeatsEndpoints([]);
+
+export const hasAnUnhealthyUnMonitoredEndpoint = () => {
+  return hasHeartbeatsEndpoints([
+    <EndpointsView>{
+      is_sending_heartbeats: true,
+      id: "",
+      name: `Unhealthy_UnmonitoredEndpoint`,
+      monitor_heartbeat: true,
+      host_display_name: "",
+      heartbeat_information: { reported_status: EndpointStatus.Dead, last_report_at: "" },
+    },
+  ]);
+};

src/Frontend/test/preconditions/hasServiceControlMainInstance.ts

@@ -2,7 +2,7 @@ import { serviceControlMainInstance } from "../mocks/service-control-instance-te
 import { SetupFactoryOptions } from "../driver";
 
 export const hasServiceControlMainInstance =
-  (serviceControlVersion = "5.0.4") =>
+  (serviceControlVersion = "6.1.1") =>
   ({ driver }: SetupFactoryOptions) => {
     const serviceControlInstanceUrl = window.defaultConfig.service_control_url;
     driver.mockEndpoint(serviceControlInstanceUrl, {

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, hasUnhealthyHeartbeatsEndpoints } from "../preconditions/hasHeartbeatEndpoints";
+export * 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,29 +1,28 @@
 import { test, describe } from "../../drivers/vitest/driver";
 import * as precondition from "../../preconditions";
-import { expect, vi } from "vitest";
+import { expect } 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: No unhealthy endpoints.", async ({ driver }) => {
-      vi.useFakeTimers();
       await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasAHealthyEndpoint());
 
       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();
+      await waitFor(async () => {
+        const heartbeatDashboardItem = await queryHeartbeatDashboardItem();
 
-      vi.useRealTimers();
+        // Reverse logic here to make sure the heartbeatDashboardItem is defined but the flag is falsey.
+        expect(heartbeatDashboardItem && !heartbeatDashboardItem.isCounterVisible).toBeTruthy();
+      });
     });
 
     test("EXAMPLE: One unhealthy endpoint.", async ({ driver }) => {
       await driver.setUp(precondition.serviceControlWithMonitoring);
-      await driver.setUp(precondition.hasUnhealthyHeartbeatsEndpoints());
+      await driver.setUp(precondition.hasAnUnhealthyEndpoint());
 
       await driver.goTo("dashboard");
 
@@ -39,7 +38,7 @@ describe("FEATURE: Dashboard item", () => {
       const numberOfUnhealthyEndpoints = 3;
 
       await driver.setUp(precondition.serviceControlWithMonitoring);
-      await driver.setUp(precondition.hasUnhealthyHeartbeatsEndpoints(numberOfUnhealthyEndpoints));
+      await driver.setUp(precondition.hasUnhealthyEndpoints(numberOfUnhealthyEndpoints));
 
       await driver.goTo("dashboard");
 

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

@@ -1,16 +1,59 @@
+import { expect, vi } from "vitest";
 import { test, describe } from "../../drivers/vitest/driver";
+import * as precondition from "../../preconditions";
+import { queryHeartbeatMenuItem } from "./questions/queryHeartbeatMenuItem";
+import { waitFor } from "@testing-library/vue";
 
 describe("FEATURE: Menu item", () => {
   describe("RULE: The count of inactive endpoints should be displayed in the navigation menu", () => {
-    test.todo("EXAMPLE: An instance stops sending heartbeats, the menu item should show a badge with (1) of inactive endpoints");
+    test("EXAMPLE: One unhealthy endpoint", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasAnUnhealthyEndpoint());
+
+      await driver.goTo("dashboard");
+
+      await waitFor(async () => {
+        const heartbeatMenuItem = await queryHeartbeatMenuItem();
+
+        expect(heartbeatMenuItem && heartbeatMenuItem.isCounterVisible).toBeTruthy();
+        expect(heartbeatMenuItem && heartbeatMenuItem.counterValue).toBe(1);
+      });
+    });
 
     /* SCENARIO
       Given 5 monitored endpoint instances sending heartbeats
       When 1 of the endpoint instances stops sending heartbeats
       Then the menu item in the page header updates to include a badge indicating how many have stopped
     */
 
-    test.todo("EXAMPLE: An instance starts sending heartbeats, the menu item should remove the badge");
+    test("EXAMPLE: An instance starts sending heartbeats, the menu item should remove the badge", async ({ driver }) => {
+      vi.useFakeTimers();
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasAnUnhealthyEndpointWithNamePrefix("ResurrectingEndpoint"));
+
+      await driver.goTo("dashboard");
+
+      vi.advanceTimersByTime(5000);
+
+      await waitFor(async () => {
+        const heartbeatMenuItem = await queryHeartbeatMenuItem();
+
+        expect(heartbeatMenuItem && heartbeatMenuItem.isCounterVisible).toBeTruthy();
+        expect(heartbeatMenuItem && heartbeatMenuItem.counterValue).toBe(1);
+      });
+
+      await driver.setUp(precondition.hasAHealthyEndpointWithNamePrefix("ResurrectingEndpoint"));
+      vi.advanceTimersByTime(5000);
+
+      await waitFor(async () => {
+        const heartbeatMenuItem = await queryHeartbeatMenuItem();
+
+        expect(heartbeatMenuItem && !heartbeatMenuItem.isCounterVisible).toBeTruthy();
+        expect(heartbeatMenuItem && heartbeatMenuItem.counterValue).toBe(0);
+      });
+
+      vi.restoreAllMocks();
+    });
     /* SCENARIO
       Given a set of monitored endpoint instances
       When all instances are sending heartbeats

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

@@ -0,0 +1,13 @@
+import { screen, within } from "@testing-library/vue";
+
+export async function queryHeartbeatMenuItem() {
+  const navBar = await screen.findByRole("navigation");
+  const menuItem = await within(navBar).getByRole("link", { name: "Heartbeats Menu Item" });
+  const counter = within(menuItem).queryByLabelText("Alert Count");
+
+  return {
+    menuItemName: menuItem.ariaLabel,
+    isCounterVisible: counter && true,
+    counterValue: counter ? Number(counter.textContent) : 0,
+  };
+}