Add tests for the heartbeats filter box

Author: kentdr

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">

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]">

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">

src/Frontend/test/mocks/heartbeat-endpoint-template.ts

@@ -3,16 +3,16 @@ 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() },
 };
 
 export const unHealthyEndpointTemplate = <EndpointsView>{
   is_sending_heartbeats: true,
-  id: "",
+  id: "UnHealthyEndpoint",
   name: `UnHealthyEndpoint`,
   monitor_heartbeat: true,
   host_display_name: "UnHealhtyEndpoint.Hostname",

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

src/Frontend/test/specs/heartbeats/actions/navigateToHeartbeatsConfiguration.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" });
+}

src/Frontend/test/specs/heartbeats/actions/navigateToHeartbeatsTabs.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);
+  }
+}

src/Frontend/test/specs/heartbeats/actions/setHeartbeatFilter.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();
+}