From 5622f5c23fe8fe08d9cd6f6dd4911400da8a2980 Mon Sep 17 00:00:00 2001
From: Dan Kent <dan.kent@particular.net>
Date: Tue, 7 Jan 2025 16:56:16 -0500
Subject: [PATCH 01/10] Add heartbeat dashboard item test

---
 src/Frontend/src/components/DashboardItem.vue |  4 +--
 .../specs/heartbeats/dashboard-item.spec.ts   | 13 ++++++--
 .../heartbeats/questions/getDashboardItems.ts | 30 +++++++++++++++++++
 .../questions/queryHeartbeatDashboardItem.ts  |  7 +++++
 4 files changed, 50 insertions(+), 4 deletions(-)
 create mode 100644 src/Frontend/test/specs/heartbeats/questions/getDashboardItems.ts
 create mode 100644 src/Frontend/test/specs/heartbeats/questions/queryHeartbeatDashboardItem.ts

diff --git a/src/Frontend/src/components/DashboardItem.vue b/src/Frontend/src/components/DashboardItem.vue
index 924db999fd..35f6d6d1ed 100644
--- a/src/Frontend/src/components/DashboardItem.vue
+++ b/src/Frontend/src/components/DashboardItem.vue
@@ -7,9 +7,9 @@ const props = defineProps<{
 </script>
 
 <template>
-  <RouterLink class="summary-item" :class="{ 'summary-danger': counter > 0, 'summary-info': counter === 0 || !counter }" :to="url">
+  <RouterLink role="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" class="badge badge-important">{{ counter }}</span>
+    <span v-if="counter > 0" role="counter" class="badge badge-important">{{ counter }}</span>
     <h4>
       <slot></slot>
     </h4>
diff --git a/src/Frontend/test/specs/heartbeats/dashboard-item.spec.ts b/src/Frontend/test/specs/heartbeats/dashboard-item.spec.ts
index 77ed6080f4..c5e268181b 100644
--- a/src/Frontend/test/specs/heartbeats/dashboard-item.spec.ts
+++ b/src/Frontend/test/specs/heartbeats/dashboard-item.spec.ts
@@ -1,7 +1,16 @@
 import { test, describe } from "../../drivers/vitest/driver";
+import * as precondition from "../../preconditions";
+import { expect } from "vitest";
+import { queryHeartbeatDashboardItem } from "./questions/queryHeartbeatDashboardItem";
 
 describe("FEATURE: Dashboard item", () => {
-  describe("RULE: The count of inactive endpoints should be displayed", () => {
-    test.todo("Not implemented");
+  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 }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.goTo("dashboard");
+
+      const heartbeatDashboardItem = await queryHeartbeatDashboardItem();
+      expect(heartbeatDashboardItem && !heartbeatDashboardItem.isCounterVisible).toBeTruthy();
+    });
   });
 });
diff --git a/src/Frontend/test/specs/heartbeats/questions/getDashboardItems.ts b/src/Frontend/test/specs/heartbeats/questions/getDashboardItems.ts
new file mode 100644
index 0000000000..8b996b68a7
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/questions/getDashboardItems.ts
@@ -0,0 +1,30 @@
+import { screen, within } from "@testing-library/vue";
+
+export interface DashboardItemData {
+  name: string;
+  isCounterVisible: boolean;
+  counterValue: number;
+  dashboardItem: HTMLElement;
+}
+
+export async function getDashboardItems() {
+  const dashboardItems = await screen.findAllByRole("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");
+
+      return [
+        name,
+        {
+          name: name,
+          isCounterVisible: counterElement !== null,
+          counterValue: counterElement ? Number(counterElement.innerText) : 0,
+          dashboardItem: di,
+        },
+      ];
+    })
+  );
+}
diff --git a/src/Frontend/test/specs/heartbeats/questions/queryHeartbeatDashboardItem.ts b/src/Frontend/test/specs/heartbeats/questions/queryHeartbeatDashboardItem.ts
new file mode 100644
index 0000000000..ddaebc7634
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/questions/queryHeartbeatDashboardItem.ts
@@ -0,0 +1,7 @@
+import { getDashboardItems } from "./getDashboardItems";
+
+export async function queryHeartbeatDashboardItem() {
+  const dashboardItems = await getDashboardItems();
+
+  return dashboardItems ? dashboardItems.get("Heartbeats") : null;
+}

From c70ef657e67a99d01954b5c0c367193b87e785e0 Mon Sep 17 00:00:00 2001
From: Dan Kent <dan.kent@particular.net>
Date: Fri, 10 Jan 2025 13:55:47 -0500
Subject: [PATCH 02/10] Add more dashboard item tests

---
 src/Frontend/src/components/DashboardItem.vue |  4 +-
 .../heartbeats/HeartbeatsMenuItem.vue         |  4 +-
 src/Frontend/test/mocks/browser.ts            |  7 +++
 .../preconditions/hasHeartbeatEndpoints.ts    | 59 +++++++++++++++++++
 .../hasServiceControlMainInstance.ts          |  2 +-
 src/Frontend/test/preconditions/index.ts      |  2 +-
 .../specs/heartbeats/dashboard-item.spec.ts   | 43 +++++++++++++-
 .../test/specs/heartbeats/menu-item.spec.ts   | 47 ++++++++++++++-
 .../heartbeats/questions/getDashboardItems.ts |  9 ++-
 .../questions/queryHeartbeatDashboardItem.ts  |  1 -
 .../questions/queryHeartbeatMenuItem.ts       | 13 ++++
 11 files changed, 174 insertions(+), 17 deletions(-)
 create mode 100644 src/Frontend/test/specs/heartbeats/questions/queryHeartbeatMenuItem.ts

diff --git a/src/Frontend/src/components/DashboardItem.vue b/src/Frontend/src/components/DashboardItem.vue
index 35f6d6d1ed..30ff824832 100644
--- a/src/Frontend/src/components/DashboardItem.vue
+++ b/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>
diff --git a/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue b/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue
index 213adff423..c02261408e 100644
--- a/src/Frontend/src/components/heartbeats/HeartbeatsMenuItem.vue
+++ b/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>
 
diff --git a/src/Frontend/test/mocks/browser.ts b/src/Frontend/test/mocks/browser.ts
index 2481bbc71f..e8dd3bc456 100644
--- a/src/Frontend/test/mocks/browser.ts
+++ b/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",
diff --git a/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts b/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts
index 0bf18f2ff9..984a0432fc 100644
--- a/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts
+++ b/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,62 @@ export const hasHeartbeatsEndpoints =
     return endpoints;
   };
 
+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: `${endpointNamePrefix}_${i}`,
+      monitor_heartbeat: true,
+      host_display_name: "",
+      heartbeat_information: { reported_status: EndpointStatus.Dead, last_report_at: "" },
+    });
+  }
+
+  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: "" },
+    },
+  ]);
+};
diff --git a/src/Frontend/test/preconditions/hasServiceControlMainInstance.ts b/src/Frontend/test/preconditions/hasServiceControlMainInstance.ts
index e7a9eb7e16..e5ba802281 100644
--- a/src/Frontend/test/preconditions/hasServiceControlMainInstance.ts
+++ b/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, {
diff --git a/src/Frontend/test/preconditions/index.ts b/src/Frontend/test/preconditions/index.ts
index 0c20e7a9fe..8951e91bad 100644
--- a/src/Frontend/test/preconditions/index.ts
+++ b/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 * from "../preconditions/hasHeartbeatEndpoints";
 export { serviceControlWithMonitoring } from "./serviceControlWithMonitoring";
 export * from "./recoverability";
 export { hasLicensingReportAvailable } from "../preconditions/hasLicensingReportAvailable";
diff --git a/src/Frontend/test/specs/heartbeats/dashboard-item.spec.ts b/src/Frontend/test/specs/heartbeats/dashboard-item.spec.ts
index c5e268181b..740e88b9a3 100644
--- a/src/Frontend/test/specs/heartbeats/dashboard-item.spec.ts
+++ b/src/Frontend/test/specs/heartbeats/dashboard-item.spec.ts
@@ -2,15 +2,52 @@ import { test, describe } from "../../drivers/vitest/driver";
 import * as precondition from "../../preconditions";
 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: Should not display the counter when there are zero unhealthy endpoints", async ({ driver }) => {
+    test("EXAMPLE: No unhealthy endpoints.", async ({ driver }) => {
       await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasAHealthyEndpoint());
+
+      await driver.goTo("dashboard");
+
+      await waitFor(async () => {
+        const heartbeatDashboardItem = await queryHeartbeatDashboardItem();
+
+        // 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.hasAnUnhealthyEndpoint());
+
       await driver.goTo("dashboard");
 
-      const heartbeatDashboardItem = await queryHeartbeatDashboardItem();
-      expect(heartbeatDashboardItem && !heartbeatDashboardItem.isCounterVisible).toBeTruthy();
+      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.hasUnhealthyEndpoints(numberOfUnhealthyEndpoints));
+
+      await driver.goTo("dashboard");
+
+      await waitFor(async () => {
+        const heartbeatDashboardItem = await queryHeartbeatDashboardItem();
+
+        expect(heartbeatDashboardItem && heartbeatDashboardItem.isCounterVisible).toBeTruthy();
+        expect(heartbeatDashboardItem && heartbeatDashboardItem.counterValue).toBe(numberOfUnhealthyEndpoints);
+      });
     });
   });
 });
diff --git a/src/Frontend/test/specs/heartbeats/menu-item.spec.ts b/src/Frontend/test/specs/heartbeats/menu-item.spec.ts
index 9318662d5f..79d1844761 100644
--- a/src/Frontend/test/specs/heartbeats/menu-item.spec.ts
+++ b/src/Frontend/test/specs/heartbeats/menu-item.spec.ts
@@ -1,8 +1,24 @@
+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
@@ -10,7 +26,34 @@ describe("FEATURE: Menu item", () => {
       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
diff --git a/src/Frontend/test/specs/heartbeats/questions/getDashboardItems.ts b/src/Frontend/test/specs/heartbeats/questions/getDashboardItems.ts
index 8b996b68a7..3c326e4343 100644
--- a/src/Frontend/test/specs/heartbeats/questions/getDashboardItems.ts
+++ b/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,
         },
       ];
diff --git a/src/Frontend/test/specs/heartbeats/questions/queryHeartbeatDashboardItem.ts b/src/Frontend/test/specs/heartbeats/questions/queryHeartbeatDashboardItem.ts
index ddaebc7634..ee13610c1d 100644
--- a/src/Frontend/test/specs/heartbeats/questions/queryHeartbeatDashboardItem.ts
+++ b/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;
 }
diff --git a/src/Frontend/test/specs/heartbeats/questions/queryHeartbeatMenuItem.ts b/src/Frontend/test/specs/heartbeats/questions/queryHeartbeatMenuItem.ts
new file mode 100644
index 0000000000..9b8a71bd05
--- /dev/null
+++ b/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,
+  };
+}

From 29f62e3615820de529108c132891d7f2820308ea Mon Sep 17 00:00:00 2001
From: Dan Kent <dan.kent@particular.net>
Date: Tue, 21 Jan 2025 14:02:25 -0500
Subject: [PATCH 03/10] Add heartbeat menu item tests

---
 .../preconditions/hasHeartbeatEndpoints.ts    |  2 +-
 .../test/specs/heartbeats/menu-item.spec.ts   | 26 +++++++++++--------
 2 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts b/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts
index 984a0432fc..4660524537 100644
--- a/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts
+++ b/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts
@@ -64,7 +64,7 @@ export const hasAnUnhealthyUnMonitoredEndpoint = () => {
       is_sending_heartbeats: true,
       id: "",
       name: `Unhealthy_UnmonitoredEndpoint`,
-      monitor_heartbeat: true,
+      monitor_heartbeat: false,
       host_display_name: "",
       heartbeat_information: { reported_status: EndpointStatus.Dead, last_report_at: "" },
     },
diff --git a/src/Frontend/test/specs/heartbeats/menu-item.spec.ts b/src/Frontend/test/specs/heartbeats/menu-item.spec.ts
index 79d1844761..dd3e8a02a0 100644
--- a/src/Frontend/test/specs/heartbeats/menu-item.spec.ts
+++ b/src/Frontend/test/specs/heartbeats/menu-item.spec.ts
@@ -21,11 +21,10 @@ describe("FEATURE: Menu item", () => {
     });
 
     /* 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
+      Given a monitored endpoint instance sending heartbeats
+      When the endpoint instance stops sending heartbeats
+      Then the menu item in the page header updates to include a badge indicating it has stopped
     */
-
     test("EXAMPLE: An instance starts sending heartbeats, the menu item should remove the badge", async ({ driver }) => {
       vi.useFakeTimers();
       await driver.setUp(precondition.serviceControlWithMonitoring);
@@ -54,19 +53,24 @@ describe("FEATURE: Menu item", () => {
 
       vi.restoreAllMocks();
     });
+
     /* SCENARIO
       Given a set of monitored endpoint instances
       When all instances are sending heartbeats
       Then the menu item in the page header does not include a badge
     */
+    test("EXAMPLE: An unmonitored instance stops sending heartbeats, the menu item should not show a badge with a count", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasAnUnhealthyUnMonitoredEndpoint());
 
-    test.todo("EXAMPLE: An unmonitored instance stops sending heartbeats, the menu item should not show a badge with a count");
+      await driver.goTo("dashboard");
 
-    /* SCENARIO
-      Given a set of monitored endpoint instances
-      And 1 unmonitored endpoint instance
-      When the unmonitored endpoint instance is not sending heartbeats
-      Then the menu item badge is not displayed
-    */
+      await waitFor(async () => {
+        const heartbeatMenuItem = await queryHeartbeatMenuItem();
+
+        expect(heartbeatMenuItem && !heartbeatMenuItem.isCounterVisible).toBeTruthy();
+        expect(heartbeatMenuItem && heartbeatMenuItem.counterValue).toBe(0);
+      });
+    });
   });
 });

From bcb1676e6691794f6f6b0efaf96c6fbc2a7c9a2f Mon Sep 17 00:00:00 2001
From: Dan Kent <dan.kent@particular.net>
Date: Wed, 22 Jan 2025 15:25:04 -0500
Subject: [PATCH 04/10] Add flush-promises to avoid error after tests run

---
 src/Frontend/test/specs/heartbeats/menu-item.spec.ts | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/Frontend/test/specs/heartbeats/menu-item.spec.ts b/src/Frontend/test/specs/heartbeats/menu-item.spec.ts
index dd3e8a02a0..df3c68420f 100644
--- a/src/Frontend/test/specs/heartbeats/menu-item.spec.ts
+++ b/src/Frontend/test/specs/heartbeats/menu-item.spec.ts
@@ -3,6 +3,7 @@ import { test, describe } from "../../drivers/vitest/driver";
 import * as precondition from "../../preconditions";
 import { queryHeartbeatMenuItem } from "./questions/queryHeartbeatMenuItem";
 import { waitFor } from "@testing-library/vue";
+import flushPromises from "flush-promises";
 
 describe("FEATURE: Menu item", () => {
   describe("RULE: The count of inactive endpoints should be displayed in the navigation menu", () => {
@@ -18,6 +19,8 @@ describe("FEATURE: Menu item", () => {
         expect(heartbeatMenuItem && heartbeatMenuItem.isCounterVisible).toBeTruthy();
         expect(heartbeatMenuItem && heartbeatMenuItem.counterValue).toBe(1);
       });
+
+      await flushPromises();
     });
 
     /* SCENARIO
@@ -52,6 +55,7 @@ describe("FEATURE: Menu item", () => {
       });
 
       vi.restoreAllMocks();
+      await flushPromises();
     });
 
     /* SCENARIO
@@ -71,6 +75,8 @@ describe("FEATURE: Menu item", () => {
         expect(heartbeatMenuItem && !heartbeatMenuItem.isCounterVisible).toBeTruthy();
         expect(heartbeatMenuItem && heartbeatMenuItem.counterValue).toBe(0);
       });
+
+      await flushPromises();
     });
   });
 });

From 3b78472d16608970af8a1e2e53d194a05c17890e Mon Sep 17 00:00:00 2001
From: Dan Kent <dan.kent@particular.net>
Date: Tue, 4 Feb 2025 11:54:28 -0500
Subject: [PATCH 05/10] Add heartbeat configuration tests

---
 src/Frontend/src/components/NoData.vue        |   2 +-
 src/Frontend/src/components/OnOffSwitch.vue   |   2 +-
 src/Frontend/src/components/TimeSince.vue     |   7 +-
 .../heartbeats/EndpointInstances.vue          |   4 +-
 .../heartbeats/HeartbeatConfiguration.vue     |   2 +-
 .../components/heartbeats/HeartbeatsList.vue  |   4 +-
 .../components/heartbeats/LastHeartbeat.vue   |   4 +-
 src/Frontend/src/views/HeartbeatsView.vue     |   8 +-
 src/Frontend/test/mocks/browser.ts            |  29 +----
 .../test/mocks/heartbeat-endpoint-template.ts |  20 +++
 .../preconditions/hasHeartbeatEndpoints.ts    | 121 ++++++++++++++----
 .../navigateToHeartbeatsConfiguration.ts      |  12 ++
 .../heartbeats/configuring-heartbeats.spec.ts |  59 +++++----
 .../questions/getEndpointInstance.ts          |  15 +++
 .../questions/getEndpointsForConfiguration.ts |  37 ++++++
 .../questions/getNothingToConfigureStatus.ts  |   5 +
 16 files changed, 241 insertions(+), 90 deletions(-)
 create mode 100644 src/Frontend/test/mocks/heartbeat-endpoint-template.ts
 create mode 100644 src/Frontend/test/specs/heartbeats/actions/navigateToHeartbeatsConfiguration.ts
 create mode 100644 src/Frontend/test/specs/heartbeats/questions/getEndpointInstance.ts
 create mode 100644 src/Frontend/test/specs/heartbeats/questions/getEndpointsForConfiguration.ts
 create mode 100644 src/Frontend/test/specs/heartbeats/questions/getNothingToConfigureStatus.ts

diff --git a/src/Frontend/src/components/NoData.vue b/src/Frontend/src/components/NoData.vue
index b8929b1544..8725df681e 100644
--- a/src/Frontend/src/components/NoData.vue
+++ b/src/Frontend/src/components/NoData.vue
@@ -11,7 +11,7 @@ const props = defineProps<{
         <div class="col-sm-12">
           <div class="row box-header">
             <div class="col-sm-12">
-              <p class="lead hard-wrap">{{ props.message }}</p>
+              <p class="lead hard-wrap" role="status">{{ props.message }}</p>
               <slot>
                 <p>&nbsp;</p>
               </slot>
diff --git a/src/Frontend/src/components/OnOffSwitch.vue b/src/Frontend/src/components/OnOffSwitch.vue
index dd494359ee..04e6cfa298 100644
--- a/src/Frontend/src/components/OnOffSwitch.vue
+++ b/src/Frontend/src/components/OnOffSwitch.vue
@@ -9,7 +9,7 @@ const emit = defineEmits<{ toggle: [] }>();
 
 <template>
   <div class="onoffswitch">
-    <input type="checkbox" :id="`onoffswitch${id}`" :name="`onoffswitch${id}`" class="onoffswitch-checkbox" @click="emit('toggle')" :checked="value ?? false" />
+    <input type="checkbox" :id="`onoffswitch${id}`" :name="`onoffswitch${id}`" :aria-label="`onoffswitch${id}`" class="onoffswitch-checkbox" @click="emit('toggle')" :checked="value ?? false" />
     <label class="onoffswitch-label" :for="`onoffswitch${id}`">
       <span class="onoffswitch-inner"></span>
       <span class="onoffswitch-switch"></span>
diff --git a/src/Frontend/src/components/TimeSince.vue b/src/Frontend/src/components/TimeSince.vue
index 56d62e17ed..85583ddd46 100644
--- a/src/Frontend/src/components/TimeSince.vue
+++ b/src/Frontend/src/components/TimeSince.vue
@@ -4,7 +4,7 @@ import moment from "moment";
 
 const emptyDate = "0001-01-01T00:00:00";
 
-const props = withDefaults(defineProps<{ dateUtc?: string; defaultTextOnFailure?: string }>(), { dateUtc: emptyDate, defaultTextOnFailure: "n/a" });
+const props = withDefaults(defineProps<{ dateUtc?: string; defaultTextOnFailure?: string; titleValue?: string }>(), { dateUtc: emptyDate, defaultTextOnFailure: "n/a", titleValue: undefined });
 
 let interval: number | undefined = undefined;
 
@@ -15,9 +15,10 @@ function updateText() {
   if (props.dateUtc != null && props.dateUtc !== emptyDate) {
     const m = moment.utc(props.dateUtc);
     text.value = m.fromNow();
-    title.value = m.local().format("LLLL") + " (local)\n" + m.utc().format("LLLL") + " (UTC)";
+    title.value = props.titleValue ?? m.local().format("LLLL") + " (local)\n" + m.utc().format("LLLL") + " (UTC)";
   } else {
-    text.value = title.value = props.defaultTextOnFailure;
+    text.value = props.defaultTextOnFailure;
+    title.value = props.titleValue ?? props.defaultTextOnFailure;
   }
 }
 
diff --git a/src/Frontend/src/components/heartbeats/EndpointInstances.vue b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
index 9b3742111d..9853305a44 100644
--- a/src/Frontend/src/components/heartbeats/EndpointInstances.vue
+++ b/src/Frontend/src/components/heartbeats/EndpointInstances.vue
@@ -207,12 +207,12 @@ async function toggleAlerts(instance: EndpointsView) {
         <template #data="{ pageData }">
           <div role="rowgroup" aria-label="endpoints">
             <div role="row" :aria-label="instance.name" class="row grid-row" v-for="instance in pageData" :key="instance.id">
-              <div role="cell" aria-label="instance-name" class="col-6 host-name">
+              <div role="cell" class="col-6 host-name">
                 <span role="status" class="status-icon">
                   <i v-if="instance.heartbeat_information?.reported_status !== EndpointStatus.Alive" aria-label="instance dead" class="fa fa-heartbeat text-danger" />
                   <i v-else aria-label="instance alive" class="fa fa-heartbeat text-success" />
                 </span>
-                <span class="lead">{{ instance.host_display_name }}</span>
+                <span class="lead" aria-label="instance-name">{{ instance.host_display_name }}</span>
               </div>
               <div role="cell" aria-label="last-heartbeat" class="col-2 last-heartbeat">
                 <LastHeartbeat :date="instance.heartbeat_information?.last_report_at" tooltip-target="instance" />
diff --git a/src/Frontend/src/components/heartbeats/HeartbeatConfiguration.vue b/src/Frontend/src/components/heartbeats/HeartbeatConfiguration.vue
index 6342f2d647..73e2529b16 100644
--- a/src/Frontend/src/components/heartbeats/HeartbeatConfiguration.vue
+++ b/src/Frontend/src/components/heartbeats/HeartbeatConfiguration.vue
@@ -91,7 +91,7 @@ async function toggleDefaultSetting() {
     <div class="row">
       <ResultsCount :displayed="filteredEndpoints.length" :total="sortedEndpoints.length" />
     </div>
-    <section name="endpoint_configuration">
+    <section name="endpoint_configuration" aria-label="Endpoint Configuration">
       <div class="row">
         <div class="col-9 no-side-padding">
           <no-data v-if="sortedEndpoints.length === 0" message="Nothing to configure" />
diff --git a/src/Frontend/src/components/heartbeats/HeartbeatsList.vue b/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
index de47e72ad6..6d59f740f6 100644
--- a/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
+++ b/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
@@ -81,7 +81,7 @@ function endpointHealth(endpoint: LogicalEndpoint) {
                 </tippy>
               </div>
             </div>
-            <div v-if="columns.includes(ColumnNames.InstancesTotal) || columns.includes(ColumnNames.InstancesDown)" role="cell" aria-label="instance-count" class="col-2">
+            <div v-if="columns.includes(ColumnNames.InstancesTotal) || columns.includes(ColumnNames.InstancesDown)" role="cell" class="col-2">
               <tippy :delay="[300, 0]">
                 <template #content>
                   <template v-if="endpoint.track_instances">
@@ -96,7 +96,7 @@ function endpointHealth(endpoint: LogicalEndpoint) {
                 </template>
                 <i v-if="endpoint.track_instances" class="fa fa-server" :class="endpointHealth(endpoint)"></i>
                 <i v-else class="fa fa-sellsy" :class="endpointHealth(endpoint)"></i>&nbsp;
-                <span class="endpoint-count">{{ store.instanceDisplayText(endpoint) }}</span>
+                <span class="endpoint-count" aria-label="instance-count">{{ store.instanceDisplayText(endpoint) }}</span>
               </tippy>
             </div>
             <div v-if="columns.includes(ColumnNames.LastHeartbeat)" role="cell" aria-label="last-heartbeat" class="col-2 last-heartbeat">
diff --git a/src/Frontend/src/components/heartbeats/LastHeartbeat.vue b/src/Frontend/src/components/heartbeats/LastHeartbeat.vue
index 52ce096ffd..bc60b02a02 100644
--- a/src/Frontend/src/components/heartbeats/LastHeartbeat.vue
+++ b/src/Frontend/src/components/heartbeats/LastHeartbeat.vue
@@ -6,14 +6,14 @@ defineProps<{ date?: string; tooltipTarget: string }>();
 </script>
 
 <template>
-  <p v-if="date"><time-since :date-utc="date" default-text-on-failure="unknown" /></p>
+  <p v-if="date"><time-since :date-utc="date" default-text-on-failure="unknown" title-value="Last Heartbeat" /></p>
   <p v-else>
     <tippy :delay="[1000, 300]" :interactive="true">
       <template #content>
         <p>No heartbeat data received for this {{ tooltipTarget }}.</p>
         <p>Have you installed and configured the <a target="_blank" href="https://docs.particular.net/monitoring/heartbeats/install-plugin">heartbeats plugin</a> for this {{ tooltipTarget }}?</p>
       </template>
-      <div>No data available</div>
+      <span title="Last Heartbeat">No data available</span>
     </tippy>
   </p>
 </template>
diff --git a/src/Frontend/src/views/HeartbeatsView.vue b/src/Frontend/src/views/HeartbeatsView.vue
index d7494040e7..270af27156 100644
--- a/src/Frontend/src/views/HeartbeatsView.vue
+++ b/src/Frontend/src/views/HeartbeatsView.vue
@@ -29,21 +29,21 @@ const isMassTransitConnected = useIsMassTransitConnected();
         </div>
         <div class="row">
           <div class="col-sm-12">
-            <div class="tabs">
+            <div class="tabs" role="tablist">
               <div>
                 <!--Inactive Endpoints-->
                 <h5 :class="{ active: isRouteSelected(routeLinks.heartbeats.unhealthy.link) }">
-                  <RouterLink :to="routeLinks.heartbeats.unhealthy.link"> Unhealthy Endpoints ({{ unhealthyEndpoints.length }}) </RouterLink>
+                  <RouterLink role="tab" :aria-selected="isRouteSelected(routeLinks.heartbeats.unhealthy.link)" :to="routeLinks.heartbeats.unhealthy.link"> Unhealthy Endpoints ({{ unhealthyEndpoints.length }}) </RouterLink>
                 </h5>
 
                 <!--Active Endpoints-->
                 <h5 :class="{ active: isRouteSelected(routeLinks.heartbeats.healthy.link) }">
-                  <RouterLink :to="routeLinks.heartbeats.healthy.link"> Healthy Endpoints ({{ healthyEndpoints.length }}) </RouterLink>
+                  <RouterLink role="tab" :aria-selected="isRouteSelected(routeLinks.heartbeats.healthy.link)" :to="routeLinks.heartbeats.healthy.link"> Healthy Endpoints ({{ healthyEndpoints.length }}) </RouterLink>
                 </h5>
 
                 <!--Configuration-->
                 <h5 :class="{ active: isRouteSelected(routeLinks.heartbeats.configuration.link) }">
-                  <RouterLink :to="routeLinks.heartbeats.configuration.link"> Configuration </RouterLink>
+                  <RouterLink role="tab" :aria-selected="isRouteSelected(routeLinks.heartbeats.configuration.link)" :to="routeLinks.heartbeats.configuration.link"> Configuration </RouterLink>
                 </h5>
               </div>
               <div class="filter-group">
diff --git a/src/Frontend/test/mocks/browser.ts b/src/Frontend/test/mocks/browser.ts
index e8dd3bc456..079ef6b155 100644
--- a/src/Frontend/test/mocks/browser.ts
+++ b/src/Frontend/test/mocks/browser.ts
@@ -2,8 +2,7 @@ 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 });
@@ -26,29 +25,5 @@ const driver = makeDriver();
 
 (async () => {
   await driver.setUp(precondition.serviceControlWithMonitoring);
-  //override the default mocked endpoints with a custom list
-  await driver.setUp(
-    precondition.monitoredEndpointsNamed([
-      "Universe.Solarsystem.Mercury.Endpoint1",
-      "Universe.Solarsystem.Mercury.Endpoint2",
-      "Universe.Solarsystem.Venus.Endpoint3",
-      "Universe.Solarsystem.Venus.Endpoint4",
-      "Universe.Solarsystem.Earth.Endpoint5",
-      "Universe.Solarsystem.Earth.Endpoint6",
-    ])
-  );
-
-  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",
-      withMessageId: "40134401-bab9-41aa-9acb-b19c0066f22d",
-      withContentType: "application/json",
-      withBody: { Index: 0, Data: "" },
-    })
-  );
+  await driver.setUp(precondition.HasHealthyAndUnHealthyEndpoints(1, 1));
 })();
diff --git a/src/Frontend/test/mocks/heartbeat-endpoint-template.ts b/src/Frontend/test/mocks/heartbeat-endpoint-template.ts
new file mode 100644
index 0000000000..fc9d78afa7
--- /dev/null
+++ b/src/Frontend/test/mocks/heartbeat-endpoint-template.ts
@@ -0,0 +1,20 @@
+import { EndpointsView } from "@/resources/EndpointView";
+import { EndpointStatus } from "@/resources/Heartbeat";
+
+export const healthyEndpointTemplate = <EndpointsView>{
+  is_sending_heartbeats: true,
+  id: "",
+  name: `HealthyEndpoint`,
+  monitor_heartbeat: true,
+  host_display_name: "HealhtyEndpoint.Hostname",
+  heartbeat_information: { reported_status: EndpointStatus.Alive, last_report_at: new Date().toISOString() },
+};
+
+export const unHealthyEndpointTemplate = <EndpointsView>{
+  is_sending_heartbeats: true,
+  id: "",
+  name: `UnHealthyEndpoint`,
+  monitor_heartbeat: true,
+  host_display_name: "UnHealhtyEndpoint.Hostname",
+  heartbeat_information: { reported_status: EndpointStatus.Dead, last_report_at: new Date().toISOString() },
+};
diff --git a/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts b/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts
index 4660524537..876bfc5da6 100644
--- a/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts
+++ b/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts
@@ -1,27 +1,65 @@
-import { EndpointStatus } from "@/resources/Heartbeat";
-import { SetupFactoryOptions } from "../driver";
+import { MockEndpointDynamicOptions, SetupFactoryOptions } from "../driver";
 import { EndpointsView } from "@/resources/EndpointView";
+import { healthyEndpointTemplate, unHealthyEndpointTemplate } from "../mocks/heartbeat-endpoint-template";
+import { DefaultBodyType, PathParams, StrictRequest } from "msw";
+import { EndpointSettings } from "@/resources/EndpointSettings";
 
-export const hasHeartbeatsEndpoints =
-  (endpoints: EndpointsView[]) =>
-  ({ driver }: SetupFactoryOptions) => {
-    driver.mockEndpoint(`${window.defaultConfig.service_control_url}endpoints`, {
-      body: endpoints,
+interface ChangeTracking {
+  track_instances: boolean;
+}
+
+export const hasHeartbeatsEndpoints = (endpoints: EndpointsView[]) => {
+  const endpointSettingsList: EndpointSettings[] = [
+    {
+      name: "",
+      track_instances: true,
+    },
+  ];
+
+  return ({ driver }: SetupFactoryOptions) => {
+    driver.mockEndpointDynamic(`${window.defaultConfig.service_control_url}endpoints`, "get", () => {
+      return Promise.resolve({
+        body: endpoints,
+      });
+    });
+
+    driver.mockEndpointDynamic(`${window.defaultConfig.service_control_url}endpointssettings`, "get", () => {
+      return Promise.resolve({
+        body: endpointSettingsList,
+      });
+    });
+
+    endpoints.forEach((e) => {
+      driver.mockEndpointDynamic(`${window.defaultConfig.service_control_url}endpointssettings/${e.name}`, "patch", async (url: URL, params: PathParams, request: StrictRequest<DefaultBodyType>) => {
+        const requestBody = <ChangeTracking>await request.json();
+
+        let endpointSettings = endpointSettingsList.find((setting) => setting.name === e.name);
+
+        if (!endpointSettings) {
+          endpointSettings = {
+            name: e.name,
+            track_instances: requestBody.track_instances,
+          };
+          endpointSettingsList.push(endpointSettings);
+        } else {
+          endpointSettings.track_instances = requestBody.track_instances;
+        }
+
+        return <MockEndpointDynamicOptions>{
+          status: 200,
+        };
+      });
     });
-    return endpoints;
   };
+};
 
 export const hasUnhealthyHeartbeatsEndpoints = (numberOfUnhealthyEndpoints: number, endpointNamePrefix: string) => {
   const unhealthyEndpoints = [];
 
   for (let i = 0; i < numberOfUnhealthyEndpoints; i++) {
     unhealthyEndpoints.push(<EndpointsView>{
-      is_sending_heartbeats: true,
-      id: "",
+      ...unHealthyEndpointTemplate,
       name: `${endpointNamePrefix}_${i}`,
-      monitor_heartbeat: true,
-      host_display_name: "",
-      heartbeat_information: { reported_status: EndpointStatus.Dead, last_report_at: "" },
     });
   }
 
@@ -39,12 +77,8 @@ export const hasHealthyHeartbeatsEndpoints = (numberOfHealthyEndpoints: number,
 
   for (let i = 0; i < numberOfHealthyEndpoints; i++) {
     healthyEndpoints.push(<EndpointsView>{
-      is_sending_heartbeats: true,
-      id: "",
+      ...healthyEndpointTemplate,
       name: `${endpointNamePrefix}_${i}`,
-      monitor_heartbeat: true,
-      host_display_name: "",
-      heartbeat_information: { reported_status: EndpointStatus.Alive, last_report_at: "" },
     });
   }
   return hasHeartbeatsEndpoints(healthyEndpoints);
@@ -61,12 +95,55 @@ export const hasNoHeartbeatsEndpoints = hasHeartbeatsEndpoints([]);
 export const hasAnUnhealthyUnMonitoredEndpoint = () => {
   return hasHeartbeatsEndpoints([
     <EndpointsView>{
-      is_sending_heartbeats: true,
-      id: "",
+      ...unHealthyEndpointTemplate,
       name: `Unhealthy_UnmonitoredEndpoint`,
       monitor_heartbeat: false,
-      host_display_name: "",
-      heartbeat_information: { reported_status: EndpointStatus.Dead, last_report_at: "" },
     },
   ]);
 };
+
+export const HasHealthyAndUnHealthyNamedEndpoints = (numberOfHealthyEndpoints: number, numberOfUnhealthyEndpoints: number, endpointNamePrefix: string) => {
+  const endpoints: EndpointsView[] = [];
+
+  const repeat = (action: (count: number) => void, count: number) => {
+    if (count) {
+      repeat(action, count - 1);
+      action(count);
+    }
+  };
+
+  repeat(
+    (count) =>
+      endpoints.push(<EndpointsView>{
+        ...healthyEndpointTemplate,
+        name: `${endpointNamePrefix}_${count}`,
+      }),
+    numberOfHealthyEndpoints
+  );
+
+  repeat(
+    (count) =>
+      endpoints.push(<EndpointsView>{
+        ...unHealthyEndpointTemplate,
+        name: `${endpointNamePrefix}_${numberOfHealthyEndpoints + count}`,
+      }),
+    numberOfUnhealthyEndpoints
+  );
+
+  return hasHeartbeatsEndpoints(endpoints);
+  // for (let i = 0; i < numberOfHealthyEndpoints; i++) {
+  //   endpoints.push(<EndpointsView>{
+  //     ...healthyEndpointTemplate,
+  //     name: `${endpointNamePrefix}_${i}`,
+  //   });
+  // }
+
+  // for (let i = 0; i < numberOfUnhealthyEndpoints; i++) {
+  //   endpoints.push(<EndpointsView>{
+  //     ...unHealthyEndpointTemplate,
+  //     name: `${endpointNamePrefix}_${i}`,
+  //   });
+  // }
+};
+
+export const HasHealthyAndUnHealthyEndpoints = (numberOfHealthyEndpoints: number, numberOfUnhealthyEndpoints: number) => HasHealthyAndUnHealthyNamedEndpoints(numberOfHealthyEndpoints, numberOfUnhealthyEndpoints, "TestEndpoint");
diff --git a/src/Frontend/test/specs/heartbeats/actions/navigateToHeartbeatsConfiguration.ts b/src/Frontend/test/specs/heartbeats/actions/navigateToHeartbeatsConfiguration.ts
new file mode 100644
index 0000000000..ffd6a55995
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/actions/navigateToHeartbeatsConfiguration.ts
@@ -0,0 +1,12 @@
+import { screen } from "@testing-library/vue";
+
+export async function navigateToHeartbeatsConfiguration() {
+  const heartbeatsMenuItem = await screen.findByRole("link", { name: "Heartbeats Menu Item" });
+  heartbeatsMenuItem.click();
+
+  const configurationTab = await screen.findByRole("tab", { name: "Configuration" });
+  configurationTab.click();
+
+  // Wait for the tab to switch
+  await screen.findByRole("region", { name: "Endpoint Configuration" });
+}
diff --git a/src/Frontend/test/specs/heartbeats/configuring-heartbeats.spec.ts b/src/Frontend/test/specs/heartbeats/configuring-heartbeats.spec.ts
index a5f35bf505..de32ef1404 100644
--- a/src/Frontend/test/specs/heartbeats/configuring-heartbeats.spec.ts
+++ b/src/Frontend/test/specs/heartbeats/configuring-heartbeats.spec.ts
@@ -1,39 +1,48 @@
 import { test, describe } from "../../drivers/vitest/driver";
+import * as precondition from "../../preconditions";
+import { expect } from "vitest";
+import { getNothingToConfigureStatus } from "./questions/getNothingToConfigureStatus";
+import { navigateToHeartbeatsConfiguration } from "./actions/navigateToHeartbeatsConfiguration";
+import { getEndpointsForConfiguration } from "./questions/getEndpointsForConfiguration";
+import { getEndpointInstance } from "./questions/getEndpointInstance";
 
 describe("FEATURE: Heartbeats configuration", () => {
   describe("RULE: A list of all endpoints with the heartbeats plug-in installed should be displayed", () => {
-    test.todo("EXAMPLE: With no endpoints, the text 'Nothing to configure' should be displayed");
+    test("EXAMPLE: With no endpoints, the text 'Nothing to configure' should be displayed", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.goTo("dashboard");
 
-    /* SCENARIO
-      No endpoints
+      await navigateToHeartbeatsConfiguration();
 
-      Given no endpoint instances
-      When the configuration screen is loaded
-      Then the text "Nothing to configure" should be displayed
-    */
+      const nothingToConfigureElement = await getNothingToConfigureStatus();
 
-    test.todo("EXAMPLE: 3 endpoints should be displayed in the list");
-    /* SCENARIO
-      Some endpoints
+      expect(nothingToConfigureElement).toBeTruthy();
+      expect(nothingToConfigureElement.textContent).toBe("Nothing to configure");
+    });
 
-      Given 3 endpoint instances
-        Name |
-        Foo1
-        Foo2
-        Foo3
-      When the configuration screen is loaded
-      Then All 3 endpoints should be displayed
-    */
+    test("EXAMPLE: 3 endpoints should be displayed in the list", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasHealthyEndpoints(3));
+      await driver.goTo("dashboard");
 
-    /* NOTES
-      Endpoint name
-      Host id
-      last reported heartbeat
-      Monitoring status
-    */
+      await navigateToHeartbeatsConfiguration();
+
+      const endpointRows = await getEndpointsForConfiguration();
+
+      expect(endpointRows.size).toBe(3);
+    });
   });
+
   describe("RULE: Toggling on/off heartbeat monitoring for endpoints should be possible", () => {
-    test.todo("EXAMPLE: Heartbeat monitoring toggle should be off by default");
+    test("EXAMPLE: Heartbeat monitoring toggle should be off by default", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.HasHealthyAndUnHealthyEndpoints(1, 1));
+      await driver.goTo("heartbeats/instances/TestEndpoint_2");
+
+      const endpointInstance = await getEndpointInstance("TestEndpoint_2");
+
+      expect(endpointInstance.muted).toBeFalsy();
+    });
 
     /* SCENARIO
       Given a monitored endpoint instance
diff --git a/src/Frontend/test/specs/heartbeats/questions/getEndpointInstance.ts b/src/Frontend/test/specs/heartbeats/questions/getEndpointInstance.ts
new file mode 100644
index 0000000000..618582c2b0
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/questions/getEndpointInstance.ts
@@ -0,0 +1,15 @@
+import { screen, within } from "@testing-library/vue";
+
+export async function getEndpointInstance(instanceName: string) {
+  const endpointRow = await screen.findByRole("row", { name: instanceName });
+  const hostName = within(endpointRow).getByLabelText("instance-name").textContent;
+  const lastHeartbeat = within(endpointRow).getByTitle("Last Heartbeat").textContent;
+  const muted = (<HTMLInputElement>within(endpointRow).getByRole("checkbox", { hidden: true })).checked;
+
+  return {
+    hostName,
+    lastHeartbeat,
+    muted,
+    endpointRow,
+  };
+}
diff --git a/src/Frontend/test/specs/heartbeats/questions/getEndpointsForConfiguration.ts b/src/Frontend/test/specs/heartbeats/questions/getEndpointsForConfiguration.ts
new file mode 100644
index 0000000000..b963dce8de
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/questions/getEndpointsForConfiguration.ts
@@ -0,0 +1,37 @@
+import { screen, within } from "@testing-library/vue";
+
+export interface EndpointConfigurationItem {
+  endpointName: string;
+  instances: string;
+  lastHeartbeat: string;
+  trackingEnabled: boolean;
+  endpointRow: HTMLElement;
+}
+
+export async function getEndpointsForConfiguration() {
+  const endpointList = await screen.findByRole("rowgroup", { name: "endpoints" });
+  const endpointRows = await within(endpointList).findAllByRole("row");
+
+  const map = new Map<string, EndpointConfigurationItem>(
+    endpointRows.map((row) => {
+      const endpointName = String(within(row).getByRole("link", { name: "details-link" }).textContent);
+      const instances = String(within(row).getByLabelText("instance-count").textContent);
+      const lastHeartbeat = String(within(row).getByTitle("Last Heartbeat").textContent);
+      const trackingCheckbox = <HTMLInputElement>within(row).getByRole("checkbox", { hidden: true });
+      const trackingEnabled = trackingCheckbox.ariaLabel === `onoffswitch${endpointName}` && trackingCheckbox.checked;
+
+      return [
+        endpointName,
+        {
+          endpointName: endpointName,
+          instances: instances,
+          lastHeartbeat: lastHeartbeat,
+          trackingEnabled: trackingEnabled,
+          endpointRow: row,
+        },
+      ];
+    })
+  );
+
+  return map;
+}
diff --git a/src/Frontend/test/specs/heartbeats/questions/getNothingToConfigureStatus.ts b/src/Frontend/test/specs/heartbeats/questions/getNothingToConfigureStatus.ts
new file mode 100644
index 0000000000..d1b80bdbdb
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/questions/getNothingToConfigureStatus.ts
@@ -0,0 +1,5 @@
+import { screen } from "@testing-library/vue";
+
+export async function getNothingToConfigureStatus() {
+  return await screen.findByRole("status");
+}

From 8da0b827338590eeb461511111a6081f8b7213a3 Mon Sep 17 00:00:00 2001
From: Dan Kent <dan.kent@particular.net>
Date: Wed, 5 Feb 2025 09:35:14 -0500
Subject: [PATCH 06/10] Fix licensing test by adding flush promises

---
 .../test/specs/licensing/trial-license-notifications.spec.ts | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/src/Frontend/test/specs/licensing/trial-license-notifications.spec.ts b/src/Frontend/test/specs/licensing/trial-license-notifications.spec.ts
index 2e5df8cd9d..3a7ff95a10 100644
--- a/src/Frontend/test/specs/licensing/trial-license-notifications.spec.ts
+++ b/src/Frontend/test/specs/licensing/trial-license-notifications.spec.ts
@@ -3,6 +3,7 @@ import { expect } from "vitest";
 import { test, describe } from "../../drivers/vitest/driver";
 import * as precondition from "../../preconditions";
 import { getTrialBar } from "./questions/trialLicenseBar";
+import flushPromises from "flush-promises";
 
 describe("FEATURE: Trial license notifications", () => {
   describe("RULE: The user should know they are using a trial license at all times", () => {
@@ -17,6 +18,8 @@ describe("FEATURE: Trial license notifications", () => {
         const trialBar = await getTrialBar();
         expect(trialBar.textMatches(/non-production use only/i)).toBeTruthy();
         expect(trialBar.hasLinkWithCaption("Trial license").address).toBe("#/configuration/license");
+
+        await flushPromises();
       });
     });
   });
@@ -31,6 +34,8 @@ describe("FEATURE: Trial license notifications", () => {
 
         //This has to use waitFor because of shared state between test runs. See issue documented issue and proposed solution https://github.com/Particular/ServicePulse/issues/1905
         await waitFor(() => expect(screen.queryByRole("status", { name: /trial license bar information/i })).toBeNull());
+
+        await flushPromises();
       });
     });
   });

From 7d8c794ce9a3ebcfbbdb59fd0296bf975f674375 Mon Sep 17 00:00:00 2001
From: Dan Kent <dan.kent@particular.net>
Date: Thu, 6 Feb 2025 15:37:28 -0500
Subject: [PATCH 07/10] Add tests for the heartbeats filter box

---
 .../heartbeats/HealthyEndpoints.vue           |   2 +-
 .../components/heartbeats/HeartbeatsList.vue  |   6 +-
 .../heartbeats/UnhealthyEndpoints.vue         |   2 +-
 .../test/mocks/heartbeat-endpoint-template.ts |   6 +-
 .../preconditions/hasHeartbeatEndpoints.ts    |  38 ++++-
 .../navigateToHeartbeatsConfiguration.ts      |  12 --
 .../actions/navigateToHeartbeatsTabs.ts       |  25 ++++
 .../heartbeats/actions/setHeartbeatFilter.ts  |  12 ++
 .../actions/toggleHeartbeatMonitoring.ts      |   7 +
 .../heartbeats/configuring-heartbeats.spec.ts | 135 ++++++++++++++++--
 .../questions/getEndpointInstance.ts          |   1 +
 .../questions/getHeartbeatEndpointRecord.ts   |  36 +++++
 .../questions/getHeartbeatFilterValue.ts      |   7 +
 13 files changed, 251 insertions(+), 38 deletions(-)
 delete mode 100644 src/Frontend/test/specs/heartbeats/actions/navigateToHeartbeatsConfiguration.ts
 create mode 100644 src/Frontend/test/specs/heartbeats/actions/navigateToHeartbeatsTabs.ts
 create mode 100644 src/Frontend/test/specs/heartbeats/actions/setHeartbeatFilter.ts
 create mode 100644 src/Frontend/test/specs/heartbeats/actions/toggleHeartbeatMonitoring.ts
 create mode 100644 src/Frontend/test/specs/heartbeats/questions/getHeartbeatEndpointRecord.ts
 create mode 100644 src/Frontend/test/specs/heartbeats/questions/getHeartbeatFilterValue.ts

diff --git a/src/Frontend/src/components/heartbeats/HealthyEndpoints.vue b/src/Frontend/src/components/heartbeats/HealthyEndpoints.vue
index 943cc1819e..b36e356d48 100644
--- a/src/Frontend/src/components/heartbeats/HealthyEndpoints.vue
+++ b/src/Frontend/src/components/heartbeats/HealthyEndpoints.vue
@@ -13,7 +13,7 @@ const { healthyEndpoints, filteredHealthyEndpoints } = storeToRefs(store);
   <div class="row">
     <ResultsCount :displayed="filteredHealthyEndpoints.length" :total="healthyEndpoints.length" />
   </div>
-  <section name="healthy_endpoints">
+  <section name="healthy_endpoints" aria-label="Healthy Endpoints">
     <no-data v-if="healthyEndpoints.length === 0" message="No healthy endpoints"></no-data>
     <div v-if="healthyEndpoints.length > 0" class="row">
       <div class="col-sm-12 no-side-padding">
diff --git a/src/Frontend/src/components/heartbeats/HeartbeatsList.vue b/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
index 6d59f740f6..7a59e29570 100644
--- a/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
+++ b/src/Frontend/src/components/heartbeats/HeartbeatsList.vue
@@ -103,8 +103,8 @@ function endpointHealth(endpoint: LogicalEndpoint) {
               <LastHeartbeat :date="endpoint.heartbeat_information?.last_report_at" tooltip-target="endpoint" />
             </div>
             <div v-if="columns.includes(ColumnNames.Tracked)" role="cell" aria-label="tracked-instances" class="col-1 centre">
-              <tippy v-if="endpoint.track_instances" content="Instances are being tracked" :delay="[1000, 0]">
-                <i class="fa fa-check text-success"></i>
+              <tippy v-if="endpoint.track_instances" id="tracked-instance-desc" content="Instances are being tracked" :delay="[1000, 0]">
+                <i class="fa fa-check text-success" aria-title="Instances are being tracked"></i>
               </tippy>
             </div>
             <div v-if="columns.includes(ColumnNames.TrackToggle)" role="cell" aria-label="tracked-instances" class="col-2 centre">
@@ -117,7 +117,7 @@ function endpointHealth(endpoint: LogicalEndpoint) {
                 <tippy content="All instances have alerts muted" :delay="[300, 0]">
                   <i class="fa fa-bell-slash text-danger" />
                 </tippy>
-                <span class="instances-muted">{{ endpoint.muted_count }}</span>
+                <span class="instances-muted" aria-label="Muted instance count">{{ endpoint.muted_count }}</span>
               </template>
               <template v-else-if="endpoint.muted_count > 0">
                 <tippy :content="`${endpoint.muted_count} instance(s) have alerts muted`" :delay="[300, 0]">
diff --git a/src/Frontend/src/components/heartbeats/UnhealthyEndpoints.vue b/src/Frontend/src/components/heartbeats/UnhealthyEndpoints.vue
index 4c4c8c2a28..0f494d928c 100644
--- a/src/Frontend/src/components/heartbeats/UnhealthyEndpoints.vue
+++ b/src/Frontend/src/components/heartbeats/UnhealthyEndpoints.vue
@@ -13,7 +13,7 @@ const { unhealthyEndpoints, filteredUnhealthyEndpoints } = storeToRefs(store);
   <div class="row">
     <ResultsCount :displayed="filteredUnhealthyEndpoints.length" :total="unhealthyEndpoints.length" />
   </div>
-  <section name="unhealthy_endpoints">
+  <section name="unhealthy_endpoints" aria-label="Unhealthy Endpoints">
     <no-data v-if="unhealthyEndpoints.length === 0" message="No unhealthy endpoints"></no-data>
     <div v-else class="row">
       <div class="col-sm-12 no-side-padding">
diff --git a/src/Frontend/test/mocks/heartbeat-endpoint-template.ts b/src/Frontend/test/mocks/heartbeat-endpoint-template.ts
index fc9d78afa7..35978b1612 100644
--- a/src/Frontend/test/mocks/heartbeat-endpoint-template.ts
+++ b/src/Frontend/test/mocks/heartbeat-endpoint-template.ts
@@ -3,8 +3,8 @@ import { EndpointStatus } from "@/resources/Heartbeat";
 
 export const healthyEndpointTemplate = <EndpointsView>{
   is_sending_heartbeats: true,
-  id: "",
-  name: `HealthyEndpoint`,
+  id: "HealthyEndpoint",
+  name: "HealthyEndpoint",
   monitor_heartbeat: true,
   host_display_name: "HealhtyEndpoint.Hostname",
   heartbeat_information: { reported_status: EndpointStatus.Alive, last_report_at: new Date().toISOString() },
@@ -12,7 +12,7 @@ export const healthyEndpointTemplate = <EndpointsView>{
 
 export const unHealthyEndpointTemplate = <EndpointsView>{
   is_sending_heartbeats: true,
-  id: "",
+  id: "UnHealthyEndpoint",
   name: `UnHealthyEndpoint`,
   monitor_heartbeat: true,
   host_display_name: "UnHealhtyEndpoint.Hostname",
diff --git a/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts b/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts
index 876bfc5da6..5b6225608d 100644
--- a/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts
+++ b/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts
@@ -8,6 +8,10 @@ interface ChangeTracking {
   track_instances: boolean;
 }
 
+interface MonitorHeartbeat {
+  monitor_heartbeat: boolean;
+}
+
 export const hasHeartbeatsEndpoints = (endpoints: EndpointsView[]) => {
   const endpointSettingsList: EndpointSettings[] = [
     {
@@ -16,10 +20,12 @@ export const hasHeartbeatsEndpoints = (endpoints: EndpointsView[]) => {
     },
   ];
 
+  const endpointsList = [...endpoints];
+
   return ({ driver }: SetupFactoryOptions) => {
     driver.mockEndpointDynamic(`${window.defaultConfig.service_control_url}endpoints`, "get", () => {
       return Promise.resolve({
-        body: endpoints,
+        body: endpointsList,
       });
     });
 
@@ -29,8 +35,18 @@ export const hasHeartbeatsEndpoints = (endpoints: EndpointsView[]) => {
       });
     });
 
-    endpoints.forEach((e) => {
-      driver.mockEndpointDynamic(`${window.defaultConfig.service_control_url}endpointssettings/${e.name}`, "patch", async (url: URL, params: PathParams, request: StrictRequest<DefaultBodyType>) => {
+    endpointsList.forEach((e) => {
+      driver.mockEndpointDynamic(`${window.defaultConfig.service_control_url}endpoints/${e.id}`, "patch", async (_url: URL, _params: PathParams, request: StrictRequest<DefaultBodyType>) => {
+        const requestBody = <MonitorHeartbeat>await request.json();
+
+        e.monitor_heartbeat = requestBody.monitor_heartbeat;
+
+        return Promise.resolve(<MockEndpointDynamicOptions>{
+          status: 200,
+        });
+      });
+
+      driver.mockEndpointDynamic(`${window.defaultConfig.service_control_url}endpointssettings/${e.id}`, "patch", async (url: URL, params: PathParams, request: StrictRequest<DefaultBodyType>) => {
         const requestBody = <ChangeTracking>await request.json();
 
         let endpointSettings = endpointSettingsList.find((setting) => setting.name === e.name);
@@ -59,6 +75,7 @@ export const hasUnhealthyHeartbeatsEndpoints = (numberOfUnhealthyEndpoints: numb
   for (let i = 0; i < numberOfUnhealthyEndpoints; i++) {
     unhealthyEndpoints.push(<EndpointsView>{
       ...unHealthyEndpointTemplate,
+      id: `${endpointNamePrefix}_${i}`,
       name: `${endpointNamePrefix}_${i}`,
     });
   }
@@ -78,6 +95,7 @@ export const hasHealthyHeartbeatsEndpoints = (numberOfHealthyEndpoints: number,
   for (let i = 0; i < numberOfHealthyEndpoints; i++) {
     healthyEndpoints.push(<EndpointsView>{
       ...healthyEndpointTemplate,
+      id: `${endpointNamePrefix}_${i}`,
       name: `${endpointNamePrefix}_${i}`,
     });
   }
@@ -96,12 +114,24 @@ export const hasAnUnhealthyUnMonitoredEndpoint = () => {
   return hasHeartbeatsEndpoints([
     <EndpointsView>{
       ...unHealthyEndpointTemplate,
+      id: `Unhealthy_UnmonitoredEndpoint`,
       name: `Unhealthy_UnmonitoredEndpoint`,
       monitor_heartbeat: false,
     },
   ]);
 };
 
+export const hasAHealthyButUnMonitoredEndpoint = () => {
+  return hasHeartbeatsEndpoints([
+    <EndpointsView>{
+      ...healthyEndpointTemplate,
+      id: `Healthy_UnmonitoredEndpoint`,
+      name: `Healthy_UnmonitoredEndpoint`,
+      monitor_heartbeat: false,
+    },
+  ]);
+};
+
 export const HasHealthyAndUnHealthyNamedEndpoints = (numberOfHealthyEndpoints: number, numberOfUnhealthyEndpoints: number, endpointNamePrefix: string) => {
   const endpoints: EndpointsView[] = [];
 
@@ -116,6 +146,7 @@ export const HasHealthyAndUnHealthyNamedEndpoints = (numberOfHealthyEndpoints: n
     (count) =>
       endpoints.push(<EndpointsView>{
         ...healthyEndpointTemplate,
+        id: `${endpointNamePrefix}_${count}`,
         name: `${endpointNamePrefix}_${count}`,
       }),
     numberOfHealthyEndpoints
@@ -125,6 +156,7 @@ export const HasHealthyAndUnHealthyNamedEndpoints = (numberOfHealthyEndpoints: n
     (count) =>
       endpoints.push(<EndpointsView>{
         ...unHealthyEndpointTemplate,
+        id: `${endpointNamePrefix}_${numberOfHealthyEndpoints + count}`,
         name: `${endpointNamePrefix}_${numberOfHealthyEndpoints + count}`,
       }),
     numberOfUnhealthyEndpoints
diff --git a/src/Frontend/test/specs/heartbeats/actions/navigateToHeartbeatsConfiguration.ts b/src/Frontend/test/specs/heartbeats/actions/navigateToHeartbeatsConfiguration.ts
deleted file mode 100644
index ffd6a55995..0000000000
--- a/src/Frontend/test/specs/heartbeats/actions/navigateToHeartbeatsConfiguration.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { screen } from "@testing-library/vue";
-
-export async function navigateToHeartbeatsConfiguration() {
-  const heartbeatsMenuItem = await screen.findByRole("link", { name: "Heartbeats Menu Item" });
-  heartbeatsMenuItem.click();
-
-  const configurationTab = await screen.findByRole("tab", { name: "Configuration" });
-  configurationTab.click();
-
-  // Wait for the tab to switch
-  await screen.findByRole("region", { name: "Endpoint Configuration" });
-}
diff --git a/src/Frontend/test/specs/heartbeats/actions/navigateToHeartbeatsTabs.ts b/src/Frontend/test/specs/heartbeats/actions/navigateToHeartbeatsTabs.ts
new file mode 100644
index 0000000000..20a1b84734
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/actions/navigateToHeartbeatsTabs.ts
@@ -0,0 +1,25 @@
+import { screen } from "@testing-library/vue";
+
+export async function navigateToHeartbeatsConfiguration() {
+  const configurationTab = await screen.findByRole("tab", { name: "Configuration" });
+  configurationTab.click();
+
+  // Wait for the tab to switch
+  await screen.findByRole("region", { name: "Endpoint Configuration" });
+}
+
+export async function navigateToHealthyHeartbeats() {
+  const healthyHeartbeatsTab = await screen.findByRole("tab", { name: /Healthy Endpoints \(\d+\)/i });
+  healthyHeartbeatsTab.click();
+
+  // Wait for the tab to switch
+  await screen.findByRole("region", { name: "Healthy Endpoints" });
+}
+
+export async function navigateToUnHealthyHeartbeats() {
+  const unhealthyHeartbeatsTab = await screen.findByRole("tab", { name: /Unhealthy Endpoints \(\d+\)/i });
+  unhealthyHeartbeatsTab.click();
+
+  // Wait for the tab to switch
+  await screen.findByRole("region", { name: "Unhealthy Endpoints" });
+}
diff --git a/src/Frontend/test/specs/heartbeats/actions/setHeartbeatFilter.ts b/src/Frontend/test/specs/heartbeats/actions/setHeartbeatFilter.ts
new file mode 100644
index 0000000000..00ec01cd37
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/actions/setHeartbeatFilter.ts
@@ -0,0 +1,12 @@
+import { screen } from "@testing-library/vue";
+import UserEvent from "@testing-library/user-event";
+
+export async function setHeartbeatFilter(filterText: string) {
+  const filterBox = <HTMLInputElement>await screen.findByRole("searchbox", { name: "filter by name" });
+
+  if (filterText.length > 0) {
+    await UserEvent.type(filterBox, filterText);
+  } else {
+    await UserEvent.clear(filterBox);
+  }
+}
diff --git a/src/Frontend/test/specs/heartbeats/actions/toggleHeartbeatMonitoring.ts b/src/Frontend/test/specs/heartbeats/actions/toggleHeartbeatMonitoring.ts
new file mode 100644
index 0000000000..1f4a5f3b9e
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/actions/toggleHeartbeatMonitoring.ts
@@ -0,0 +1,7 @@
+import { screen, within } from "@testing-library/vue";
+
+export async function toggleHeartbeatMonitoring(instanceName: string) {
+  const endpointRow = await screen.findByRole("row", { name: instanceName });
+
+  (<HTMLInputElement>within(endpointRow).getByRole("checkbox", { hidden: true })).click();
+}
diff --git a/src/Frontend/test/specs/heartbeats/configuring-heartbeats.spec.ts b/src/Frontend/test/specs/heartbeats/configuring-heartbeats.spec.ts
index de32ef1404..4a2065c723 100644
--- a/src/Frontend/test/specs/heartbeats/configuring-heartbeats.spec.ts
+++ b/src/Frontend/test/specs/heartbeats/configuring-heartbeats.spec.ts
@@ -2,15 +2,21 @@ import { test, describe } from "../../drivers/vitest/driver";
 import * as precondition from "../../preconditions";
 import { expect } from "vitest";
 import { getNothingToConfigureStatus } from "./questions/getNothingToConfigureStatus";
-import { navigateToHeartbeatsConfiguration } from "./actions/navigateToHeartbeatsConfiguration";
+import { navigateToHeartbeatsConfiguration, navigateToUnHealthyHeartbeats } from "./actions/navigateToHeartbeatsTabs";
 import { getEndpointsForConfiguration } from "./questions/getEndpointsForConfiguration";
 import { getEndpointInstance } from "./questions/getEndpointInstance";
+import { toggleHeartbeatMonitoring } from "./actions/toggleHeartbeatMonitoring";
+import { getAllHeartbeatEndpointRecords, getHeartbeatEndpointRecord } from "./questions/getHeartbeatEndpointRecord";
+import flushPromises from "flush-promises";
+import { healthyEndpointTemplate } from "../../mocks/heartbeat-endpoint-template";
+import { setHeartbeatFilter } from "./actions/setHeartbeatFilter";
+import { getHeartbeatFilterValue } from "./questions/getHeartbeatFilterValue";
 
 describe("FEATURE: Heartbeats configuration", () => {
   describe("RULE: A list of all endpoints with the heartbeats plug-in installed should be displayed", () => {
     test("EXAMPLE: With no endpoints, the text 'Nothing to configure' should be displayed", async ({ driver }) => {
       await driver.setUp(precondition.serviceControlWithMonitoring);
-      await driver.goTo("dashboard");
+      await driver.goTo("heartbeats/unhealthy");
 
       await navigateToHeartbeatsConfiguration();
 
@@ -23,7 +29,7 @@ describe("FEATURE: Heartbeats configuration", () => {
     test("EXAMPLE: 3 endpoints should be displayed in the list", async ({ driver }) => {
       await driver.setUp(precondition.serviceControlWithMonitoring);
       await driver.setUp(precondition.hasHealthyEndpoints(3));
-      await driver.goTo("dashboard");
+      await driver.goTo("heartbeats/unhealthy");
 
       await navigateToHeartbeatsConfiguration();
 
@@ -41,34 +47,86 @@ describe("FEATURE: Heartbeats configuration", () => {
 
       const endpointInstance = await getEndpointInstance("TestEndpoint_2");
 
-      expect(endpointInstance.muted).toBeFalsy();
+      expect(endpointInstance.muted).toBe(false);
+      await flushPromises();
     });
 
     /* SCENARIO
       Given a monitored endpoint instance
       When the monitoring toggle is clicked
       Then the endpoint instance is no longer monitored
-      And should not appear in the inactive endpoints list
-      And should not appear in the active endpoints list
+      And should appear in the unhealthy endpoints list
+      And should indicate the number of untracked instances.
     */
+    test("EXAMPLE: Clicking the monitoring toggle for an active, healthy endpoint deactivates heartbeat monitoring for that instance", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.HasHealthyAndUnHealthyEndpoints(1, 1));
+      await driver.goTo("heartbeats/instances/TestEndpoint_1");
+
+      await toggleHeartbeatMonitoring("TestEndpoint_1");
+
+      await driver.goTo("heartbeats/unhealthy");
+      // Force all the initial pending remote calls on the page to resolve.
+      await flushPromises();
+
+      const unhealthyEndpoint = await getHeartbeatEndpointRecord("TestEndpoint_1");
+
+      expect(unhealthyEndpoint).toBeTruthy();
+      expect(unhealthyEndpoint?.instancesMuted).toBe(1);
+      await flushPromises();
+    });
 
-    test.todo("EXAMPLE: Clicking the monitoring toggle for an endpoint should activate heartbeat monitoring of the endpoint");
     /* SCENARIO
       Given an unmonitored endpoint instance
       And the instance is sending heartbeats
       When the monitoring toggle is clicked
       Then the endpoint instance is monitored
-      And should appear in the Active Endpoints list
+      And should appear in the Healthy Endpoints list
     */
+    test("EXAMPLE: Clicking the monitoring toggle for a unmonitored, healthy endpoint will activate heartbeat monitoring of the endpoint", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasAHealthyButUnMonitoredEndpoint());
+      await driver.goTo("heartbeats/instances/Healthy_UnmonitoredEndpoint");
+
+      await toggleHeartbeatMonitoring("Healthy_UnmonitoredEndpoint");
+
+      await driver.goTo("heartbeats/healthy");
+      // Force all the initial pending remote calls on the page to resolve.
+      await flushPromises();
+
+      const healthyEndpoint = await getHeartbeatEndpointRecord("Healthy_UnmonitoredEndpoint");
+
+      expect(healthyEndpoint).toBeTruthy();
+      expect(healthyEndpoint?.instancesMuted).toBe(0);
+      await flushPromises();
+    });
 
     /* SCENARIO
       Given an unmonitored endpoint instance
       And the instance is not sending heartbeats
       When the monitoring toggle is clicked
       Then the endpoint instance is monitored
-      And should appear in the Inactive Endpoints list
+      And should appear in the Unhealthy Endpoints list
     */
+    test("EXAMPLE: Clicking the monitoring toggle for an unmonitored, unhealthy endpoint will activate heartbeat monitoring of the endpoint", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(precondition.hasAnUnhealthyUnMonitoredEndpoint());
+      await driver.goTo("heartbeats/instances/Unhealthy_UnmonitoredEndpoint");
+
+      await toggleHeartbeatMonitoring("Unhealthy_UnmonitoredEndpoint");
+
+      await driver.goTo("heartbeats/unhealthy");
+      // Force all the initial pending remote calls on the page to resolve.
+      await flushPromises();
+
+      const healthyEndpoint = await getHeartbeatEndpointRecord("Unhealthy_UnmonitoredEndpoint");
+
+      expect(healthyEndpoint).toBeTruthy();
+      expect(healthyEndpoint?.instancesMuted).toBe(0);
+      await flushPromises();
+    });
   });
+
   describe("RULE: Sorting by of the name of an endpoint should be possible in all displays", () => {
     test.todo("EXAMPLE: List of endpoints should be sorted by name in ascending order");
 
@@ -112,9 +170,8 @@ describe("FEATURE: Heartbeats configuration", () => {
       And the Sort By field has the same value on all other Endpoint Heartbeats tabs
     */
   });
-  describe("RULE: Filtering endpoints by name should be possible", () => {
-    test.todo("EXAMPLE: Filter string matches a subset of endpoint names should display only those endpoints");
 
+  describe("RULE: Filtering endpoints by name should be possible", () => {
     /* SCENARIO
       Given 3 endpoint instances
         Name |
@@ -126,8 +183,26 @@ describe("FEATURE: Heartbeats configuration", () => {
        And Foo2 should be shown
       And Bar should not be shown
     */
+    test("EXAMPLE: When the filter string matches a subset of endpoint names, only those endpoints should be displayed", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(
+        precondition.hasHeartbeatsEndpoints([
+          { ...healthyEndpointTemplate, id: "Foo1", name: "Foo1", host_display_name: "Foo1.Hostname" },
+          { ...healthyEndpointTemplate, id: "Bar", name: "Bar", host_display_name: "Bar.Hostname" },
+          { ...healthyEndpointTemplate, id: "Foo2", name: "Foo2", host_display_name: "Foo2.Hostname" },
+        ])
+      );
+      await driver.goTo("heartbeats/healthy");
+
+      await setHeartbeatFilter("Foo");
+
+      const visibleEndpoints = await getAllHeartbeatEndpointRecords();
+      const unexpectedEndpoints = visibleEndpoints.filter((e) => e.name !== "Foo1" && e.name !== "Foo2");
+
+      expect(unexpectedEndpoints.length).toBe(0);
+      expect(visibleEndpoints.length).toBe(2);
+    });
 
-    test.todo("EXAMPLE: Filter string matches no endpoint names should display no endpoints");
     /* SCENARIO
       Given 3 endpoint instances
         Name |
@@ -139,16 +214,46 @@ describe("FEATURE: Heartbeats configuration", () => {
        And Foo2 should not be shown
       And Foo3 should not be shown
     */
+    test("EXAMPLE: Filter string matches no endpoint names should display no endpoints", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+      await driver.setUp(
+        precondition.hasHeartbeatsEndpoints([
+          { ...healthyEndpointTemplate, id: "Foo1", name: "Foo1", host_display_name: "Foo1.Hostname" },
+          { ...healthyEndpointTemplate, id: "Foo2", name: "Foo2", host_display_name: "Foo2.Hostname" },
+          { ...healthyEndpointTemplate, id: "Foo3", name: "Foo3", host_display_name: "Foo3.Hostname" },
+        ])
+      );
+      await driver.goTo("heartbeats/healthy");
+
+      await setHeartbeatFilter("bar");
+
+      const visibleEndpoints = await getAllHeartbeatEndpointRecords();
+      const unexpectedEndpoints = visibleEndpoints.filter((e) => e.name !== "Foo1" && e.name !== "Foo2" && e.name !== "Foo3");
+
+      expect(unexpectedEndpoints.length).toBe(0);
+      expect(visibleEndpoints.length).toBe(0);
+    });
 
-    test.todo("EXAMPLE: The filter string should be persisted on page refresh and across tabs");
     /* SCENARIO
       Given the filter string is ""
       When the text "Foo" is entered into the filter control
       Then the list is filtered (see above)
-      And the filter control on the Active Endpoints tab contains "Foo"
-      And the filter control on the Inactive endpoints tab contains "Foo"
+      And the filter control on the Healthy Endpoints tab contains "Foo"
+      And the filter control on the Unhealthy endpoints tab contains "Foo"
     */
+    test("EXAMPLE: The filter string is persisted on page refresh and across tabs", async ({ driver }) => {
+      await driver.setUp(precondition.serviceControlWithMonitoring);
+
+      await driver.goTo("heartbeats/healthy");
+
+      await setHeartbeatFilter("bar");
+
+      await navigateToUnHealthyHeartbeats();
+
+      expect(await getHeartbeatFilterValue()).toBe("bar");
+    });
   });
+
   describe("RULE: A performance monitoring warning should be displayed", () => {
     test.todo("EXAMPLE: A warning should be displayed when the configuration screen is loaded");
 
diff --git a/src/Frontend/test/specs/heartbeats/questions/getEndpointInstance.ts b/src/Frontend/test/specs/heartbeats/questions/getEndpointInstance.ts
index 618582c2b0..30711c38bd 100644
--- a/src/Frontend/test/specs/heartbeats/questions/getEndpointInstance.ts
+++ b/src/Frontend/test/specs/heartbeats/questions/getEndpointInstance.ts
@@ -1,5 +1,6 @@
 import { screen, within } from "@testing-library/vue";
 
+// Assumes the current page is /heartbeats/instances/{instance name}
 export async function getEndpointInstance(instanceName: string) {
   const endpointRow = await screen.findByRole("row", { name: instanceName });
   const hostName = within(endpointRow).getByLabelText("instance-name").textContent;
diff --git a/src/Frontend/test/specs/heartbeats/questions/getHeartbeatEndpointRecord.ts b/src/Frontend/test/specs/heartbeats/questions/getHeartbeatEndpointRecord.ts
new file mode 100644
index 0000000000..29de4437e6
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/questions/getHeartbeatEndpointRecord.ts
@@ -0,0 +1,36 @@
+import { screen, within, waitFor } from "@testing-library/vue";
+
+export type EndpointRecord = {
+  name: string;
+  instanceCount: string;
+  lastHeartbeat: string;
+  trackInstances: boolean;
+  instancesMuted: number;
+};
+
+export async function getHeartbeatEndpointRecord(endpointName: string) {
+  const endpointRow = await waitFor(() => screen.queryByRole("row", { name: endpointName }));
+
+  if (!endpointRow) {
+    return null;
+  }
+  return createRecordFromRowElement(endpointRow);
+}
+
+export async function getAllHeartbeatEndpointRecords() {
+  const endpointRowgroup = await screen.findByRole("rowgroup", { name: "endpoints" });
+  const endpointRows = within(endpointRowgroup).queryAllByRole("row");
+  return endpointRows ? endpointRows.map((row) => createRecordFromRowElement(row)) : [];
+}
+
+function createRecordFromRowElement(endpointRow: HTMLElement) {
+  const mutedInstanceCountElement = within(endpointRow).queryByLabelText("Muted instance count");
+
+  return <EndpointRecord>{
+    name: within(endpointRow).getByRole("link", { name: "details-link" }).textContent,
+    instanceCount: within(endpointRow).getByLabelText("instance-count").textContent,
+    lastHeartbeat: within(endpointRow).getByTitle("Last Heartbeat").textContent,
+    trackInstances: within(endpointRow).queryByTitle("Instances are being tracked") != null,
+    instancesMuted: mutedInstanceCountElement === null ? 0 : Number(mutedInstanceCountElement.textContent),
+  };
+}
diff --git a/src/Frontend/test/specs/heartbeats/questions/getHeartbeatFilterValue.ts b/src/Frontend/test/specs/heartbeats/questions/getHeartbeatFilterValue.ts
new file mode 100644
index 0000000000..3960250160
--- /dev/null
+++ b/src/Frontend/test/specs/heartbeats/questions/getHeartbeatFilterValue.ts
@@ -0,0 +1,7 @@
+import { screen } from "@testing-library/vue";
+
+export async function getHeartbeatFilterValue() {
+  const filterBox = <HTMLInputElement>await screen.findByRole("searchbox", { name: "filter by name" });
+
+  return filterBox.value;
+}

From 056b70aded485c9ce0ff23a4632ffd635608eb17 Mon Sep 17 00:00:00 2001
From: Dan Kent <dan.kent@particular.net>
Date: Thu, 6 Feb 2025 19:08:50 -0500
Subject: [PATCH 08/10] Fix broken tests

---
 src/Frontend/src/stores/HeartbeatsStore.spec.ts          | 7 +++----
 src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts | 9 ++++++---
 .../test/specs/licensing/license-enforcement.spec.ts     | 6 ++++++
 3 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/Frontend/src/stores/HeartbeatsStore.spec.ts b/src/Frontend/src/stores/HeartbeatsStore.spec.ts
index e78b32606f..703481bdd7 100644
--- a/src/Frontend/src/stores/HeartbeatsStore.spec.ts
+++ b/src/Frontend/src/stores/HeartbeatsStore.spec.ts
@@ -14,13 +14,12 @@ import { EndpointStatus } from "@/resources/Heartbeat";
 import { ColumnNames, useHeartbeatsStore } from "@/stores/HeartbeatsStore";
 
 describe("HeartbeatsStore tests", () => {
-  async function setup(endpoints: EndpointsView[], endpointSettings: EndpointSettings[], preSetup: (driver: Driver) => Promise<void> = () => Promise.resolve()) {
+  async function setup(endpoints: EndpointsView[], endpointSettings: EndpointSettings[] = [{ name: "", track_instances: true }], preSetup: (driver: Driver) => Promise<void> = () => Promise.resolve()) {
     const driver = makeDriverForTests();
 
     await preSetup(driver);
     await driver.setUp(serviceControlWithHeartbeats);
-    await driver.setUp(precondition.hasEndpointSettings(endpointSettings));
-    await driver.setUp(precondition.hasHeartbeatsEndpoints(endpoints));
+    await driver.setUp(precondition.hasHeartbeatsEndpoints(endpoints, endpointSettings));
 
     useServiceControlUrls();
     await useServiceControl();
@@ -34,7 +33,7 @@ describe("HeartbeatsStore tests", () => {
   }
 
   test("no endpoints", async () => {
-    const { filteredHealthyEndpoints, filteredUnhealthyEndpoints } = await setup([], []);
+    const { filteredHealthyEndpoints, filteredUnhealthyEndpoints } = await setup([]);
 
     expect(filteredHealthyEndpoints.value.length).toBe(0);
     expect(filteredUnhealthyEndpoints.value.length).toBe(0);
diff --git a/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts b/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts
index 5b6225608d..ca6a5df548 100644
--- a/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts
+++ b/src/Frontend/test/preconditions/hasHeartbeatEndpoints.ts
@@ -12,13 +12,16 @@ interface MonitorHeartbeat {
   monitor_heartbeat: boolean;
 }
 
-export const hasHeartbeatsEndpoints = (endpoints: EndpointsView[]) => {
-  const endpointSettingsList: EndpointSettings[] = [
+export const hasHeartbeatsEndpoints = (
+  endpoints: EndpointsView[],
+  endpointSettings = [
     {
       name: "",
       track_instances: true,
     },
-  ];
+  ]
+) => {
+  const endpointSettingsList: EndpointSettings[] = [...endpointSettings];
 
   const endpointsList = [...endpoints];
 
diff --git a/src/Frontend/test/specs/licensing/license-enforcement.spec.ts b/src/Frontend/test/specs/licensing/license-enforcement.spec.ts
index ac4e5427d1..4e929a3587 100644
--- a/src/Frontend/test/specs/licensing/license-enforcement.spec.ts
+++ b/src/Frontend/test/specs/licensing/license-enforcement.spec.ts
@@ -5,6 +5,7 @@ import { expiredLicenseMessageWithValue } from "./questions/expiredLicenseMessag
 import { viewYourLicenseButton } from "./questions/viewYourLicenseButton";
 import { extendYourLicenseButton } from "./questions/extendYourLicenseButton";
 import { getAlertNotifications } from "./questions/alertNotifications";
+import flushPromises from "flush-promises";
 
 describe("FEATURE: EXPIRING license detection", () => {
   describe("RULE: The user should be alerted while using the monitoring endpoint list functionality about an EXPIRING license", () => {
@@ -21,6 +22,7 @@ describe("FEATURE: EXPIRING license detection", () => {
         expect(notification).not.toBeUndefined();
         expect(notification?.hasLink({ caption: "Extend your license", address: licenseExtensionUrl })).toBeTruthy();
         expect(notification?.hasLink({ caption: "View license details", address: "#/configuration" })).toBeTruthy();
+        await flushPromises();
       });
     });
 
@@ -39,6 +41,7 @@ describe("FEATURE: EXPIRING license detection", () => {
 
         expect(notification).not.toBeUndefined();
         expect(notification?.hasLink({ caption: "View license details", address: "#/configuration" })).toBeTruthy();
+        await flushPromises();
       });
     });
   });
@@ -64,6 +67,7 @@ describe("FEATURE: EXPIRED license detection", () => {
 
       expect(notification).not.toBeUndefined();
       expect(notification?.hasLink({ caption: "http://particular.net/support", address: "http://particular.net/support" })).toBeTruthy();
+      await flushPromises();
     });
 
     test("EXAMPLE: Expired platform subscription", async ({ driver }) => {
@@ -83,6 +87,7 @@ describe("FEATURE: EXPIRED license detection", () => {
 
       expect(notification).not.toBeUndefined();
       expect(notification?.hasLink({ caption: "http://particular.net/support", address: "http://particular.net/support" })).toBeTruthy();
+      await flushPromises();
     });
 
     test("EXAMPLE: Expired upgrade protection", async ({ driver }) => {
@@ -101,6 +106,7 @@ describe("FEATURE: EXPIRED license detection", () => {
 
       expect(notification).not.toBeUndefined();
       expect(notification?.hasLink({ caption: "http://particular.net/support", address: "http://particular.net/support" })).toBeTruthy();
+      await flushPromises();
     });
   });
 });

From f211f094c9d1c690bb7029423c6160fb915e49e5 Mon Sep 17 00:00:00 2001
From: Dan Kent <dan.kent@particular.net>
Date: Fri, 7 Feb 2025 11:52:08 -0500
Subject: [PATCH 09/10] Update to latest LTS of node in the CI build

---
 .github/workflows/ci.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index c1ba10e96b..2ab7532308 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -24,7 +24,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v4.1.0
         with:
-          node-version: 21.6.x
+          node-version: 22.13.x
       - name: Build Frontend
         run: .\build.ps1
         working-directory: src/ServicePulse.Host

From 7ef214ac85cfa78e9e7151825414ecb2b03203de Mon Sep 17 00:00:00 2001
From: Dan Kent <dan.kent@particular.net>
Date: Fri, 7 Feb 2025 12:17:26 -0500
Subject: [PATCH 10/10] Revert browser.ts

---
 src/Frontend/test/mocks/browser.ts | 22 ++++++++++++++++++++--
 1 file changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/Frontend/test/mocks/browser.ts b/src/Frontend/test/mocks/browser.ts
index 079ef6b155..2481bbc71f 100644
--- a/src/Frontend/test/mocks/browser.ts
+++ b/src/Frontend/test/mocks/browser.ts
@@ -2,7 +2,6 @@ import { setupWorker } from "msw/browser";
 import { Driver } from "../driver";
 import { makeMockEndpoint, makeMockEndpointDynamic } from "../mock-endpoint";
 import * as precondition from "../preconditions";
-
 export const worker = setupWorker();
 const mockEndpoint = makeMockEndpoint({ mockServer: worker });
 const mockEndpointDynamic = makeMockEndpointDynamic({ mockServer: worker });
@@ -25,5 +24,24 @@ const driver = makeDriver();
 
 (async () => {
   await driver.setUp(precondition.serviceControlWithMonitoring);
-  await driver.setUp(precondition.HasHealthyAndUnHealthyEndpoints(1, 1));
+  //override the default mocked endpoints with a custom list
+  await driver.setUp(
+    precondition.monitoredEndpointsNamed([
+      "Universe.Solarsystem.Mercury.Endpoint1",
+      "Universe.Solarsystem.Mercury.Endpoint2",
+      "Universe.Solarsystem.Venus.Endpoint3",
+      "Universe.Solarsystem.Venus.Endpoint4",
+      "Universe.Solarsystem.Earth.Endpoint5",
+      "Universe.Solarsystem.Earth.Endpoint6",
+    ])
+  );
+
+  await driver.setUp(
+    precondition.hasFailedMessage({
+      withGroupId: "81dca64e-76fc-e1c3-11a2-3069f51c58c8",
+      withMessageId: "40134401-bab9-41aa-9acb-b19c0066f22d",
+      withContentType: "application/json",
+      withBody: { Index: 0, Data: "" },
+    })
+  );
 })();