Add Heartbeat acceptance tests (#2208)

* Add heartbeat dashboard item test

Author: kentdr

.github/workflows/ci.yml

@@ -24,7 +24,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/[email protected]
         with:
-          node-version: 21.6.x
+          node-version: 22.13.x
       - name: Build Frontend
         run: .\build.ps1
         working-directory: src/ServicePulse.Host

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 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" class="badge badge-important">{{ counter }}</span>
+    <span v-if="counter > 0" aria-label="Alert Count" class="badge badge-important">{{ counter }}</span>
     <h4>
       <slot></slot>
     </h4>

src/Frontend/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>

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>

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;
   }
 }
 

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

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

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,15 +96,15 @@ 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">
               <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/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>