Skip to content

Commit 7112d7b

Browse files
kentdrkentdr
committed
Add heartbeat configuration tests
1 parent 39f673e commit 7112d7b

16 files changed

+241
-90
lines changed

‎src/Frontend/src/components/NoData.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const props = defineProps<{
1111
<div class="col-sm-12">
1212
<div class="row box-header">
1313
<div class="col-sm-12">
14-
<p class="lead hard-wrap">{{ props.message }}</p>
14+
<p class="lead hard-wrap" role="status">{{ props.message }}</p>
1515
<slot>
1616
<p>&nbsp;</p>
1717
</slot>

‎src/Frontend/src/components/OnOffSwitch.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const emit = defineEmits<{ toggle: [] }>();
99

1010
<template>
1111
<div class="onoffswitch">
12-
<input type="checkbox" :id="`onoffswitch${id}`" :name="`onoffswitch${id}`" class="onoffswitch-checkbox" @click="emit('toggle')" :checked="value ?? false" />
12+
<input type="checkbox" :id="`onoffswitch${id}`" :name="`onoffswitch${id}`" :aria-label="`onoffswitch${id}`" class="onoffswitch-checkbox" @click="emit('toggle')" :checked="value ?? false" />
1313
<label class="onoffswitch-label" :for="`onoffswitch${id}`">
1414
<span class="onoffswitch-inner"></span>
1515
<span class="onoffswitch-switch"></span>

‎src/Frontend/src/components/TimeSince.vue‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import moment from "moment";
44
55
const emptyDate = "0001-01-01T00:00:00";
66
7-
const props = withDefaults(defineProps<{ dateUtc?: string; defaultTextOnFailure?: string }>(), { dateUtc: emptyDate, defaultTextOnFailure: "n/a" });
7+
const props = withDefaults(defineProps<{ dateUtc?: string; defaultTextOnFailure?: string; titleValue?: string }>(), { dateUtc: emptyDate, defaultTextOnFailure: "n/a", titleValue: undefined });
88
99
let interval: number | undefined = undefined;
1010
@@ -15,9 +15,10 @@ function updateText() {
1515
if (props.dateUtc != null && props.dateUtc !== emptyDate) {
1616
const m = moment.utc(props.dateUtc);
1717
text.value = m.fromNow();
18-
title.value = m.local().format("LLLL") + " (local)\n" + m.utc().format("LLLL") + " (UTC)";
18+
title.value = props.titleValue ?? m.local().format("LLLL") + " (local)\n" + m.utc().format("LLLL") + " (UTC)";
1919
} else {
20-
text.value = title.value = props.defaultTextOnFailure;
20+
text.value = props.defaultTextOnFailure;
21+
title.value = props.titleValue ?? props.defaultTextOnFailure;
2122
}
2223
}
2324

‎src/Frontend/src/components/heartbeats/EndpointInstances.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -207,12 +207,12 @@ async function toggleAlerts(instance: EndpointsView) {
207207
<template #data="{ pageData }">
208208
<div role="rowgroup" aria-label="endpoints">
209209
<div role="row" :aria-label="instance.name" class="row grid-row" v-for="instance in pageData" :key="instance.id">
210-
<div role="cell" aria-label="instance-name" class="col-6 host-name">
210+
<div role="cell" class="col-6 host-name">
211211
<span role="status" class="status-icon">
212212
<i v-if="instance.heartbeat_information?.reported_status !== EndpointStatus.Alive" aria-label="instance dead" class="fa fa-heartbeat text-danger" />
213213
<i v-else aria-label="instance alive" class="fa fa-heartbeat text-success" />
214214
</span>
215-
<span class="lead">{{ instance.host_display_name }}</span>
215+
<span class="lead" aria-label="instance-name">{{ instance.host_display_name }}</span>
216216
</div>
217217
<div role="cell" aria-label="last-heartbeat" class="col-2 last-heartbeat">
218218
<LastHeartbeat :date="instance.heartbeat_information?.last_report_at" tooltip-target="instance" />

‎src/Frontend/src/components/heartbeats/HeartbeatConfiguration.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ async function toggleDefaultSetting() {
9191
<div class="row">
9292
<ResultsCount :displayed="filteredEndpoints.length" :total="sortedEndpoints.length" />
9393
</div>
94-
<section name="endpoint_configuration">
94+
<section name="endpoint_configuration" aria-label="Endpoint Configuration">
9595
<div class="row">
9696
<div class="col-9 no-side-padding">
9797
<no-data v-if="sortedEndpoints.length === 0" message="Nothing to configure" />

‎src/Frontend/src/components/heartbeats/HeartbeatsList.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,7 +81,7 @@ function endpointHealth(endpoint: LogicalEndpoint) {
8181
</tippy>
8282
</div>
8383
</div>
84-
<div v-if="columns.includes(ColumnNames.InstancesTotal) || columns.includes(ColumnNames.InstancesDown)" role="cell" aria-label="instance-count" class="col-2">
84+
<div v-if="columns.includes(ColumnNames.InstancesTotal) || columns.includes(ColumnNames.InstancesDown)" role="cell" class="col-2">
8585
<tippy :delay="[300, 0]">
8686
<template #content>
8787
<template v-if="endpoint.track_instances">
@@ -96,7 +96,7 @@ function endpointHealth(endpoint: LogicalEndpoint) {
9696
</template>
9797
<i v-if="endpoint.track_instances" class="fa fa-server" :class="endpointHealth(endpoint)"></i>
9898
<i v-else class="fa fa-sellsy" :class="endpointHealth(endpoint)"></i>&nbsp;
99-
<span class="endpoint-count">{{ store.instanceDisplayText(endpoint) }}</span>
99+
<span class="endpoint-count" aria-label="instance-count">{{ store.instanceDisplayText(endpoint) }}</span>
100100
</tippy>
101101
</div>
102102
<div v-if="columns.includes(ColumnNames.LastHeartbeat)" role="cell" aria-label="last-heartbeat" class="col-2 last-heartbeat">

‎src/Frontend/src/components/heartbeats/LastHeartbeat.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,14 @@ defineProps<{ date?: string; tooltipTarget: string }>();
66
</script>
77

88
<template>
9-
<p v-if="date"><time-since :date-utc="date" default-text-on-failure="unknown" /></p>
9+
<p v-if="date"><time-since :date-utc="date" default-text-on-failure="unknown" title-value="Last Heartbeat" /></p>
1010
<p v-else>
1111
<tippy :delay="[1000, 300]" :interactive="true">
1212
<template #content>
1313
<p>No heartbeat data received for this {{ tooltipTarget }}.</p>
1414
<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>
1515
</template>
16-
<div>No data available</div>
16+
<span title="Last Heartbeat">No data available</span>
1717
</tippy>
1818
</p>
1919
</template>

‎src/Frontend/src/views/HeartbeatsView.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,21 +29,21 @@ const isMassTransitConnected = useIsMassTransitConnected();
2929
</div>
3030
<div class="row">
3131
<div class="col-sm-12">
32-
<div class="tabs">
32+
<div class="tabs" role="tablist">
3333
<div>
3434
<!--Inactive Endpoints-->
3535
<h5 :class="{ active: isRouteSelected(routeLinks.heartbeats.unhealthy.link) }">
36-
<RouterLink :to="routeLinks.heartbeats.unhealthy.link"> Unhealthy Endpoints ({{ unhealthyEndpoints.length }}) </RouterLink>
36+
<RouterLink role="tab" :aria-selected="isRouteSelected(routeLinks.heartbeats.unhealthy.link)" :to="routeLinks.heartbeats.unhealthy.link"> Unhealthy Endpoints ({{ unhealthyEndpoints.length }}) </RouterLink>
3737
</h5>
3838

3939
<!--Active Endpoints-->
4040
<h5 :class="{ active: isRouteSelected(routeLinks.heartbeats.healthy.link) }">
41-
<RouterLink :to="routeLinks.heartbeats.healthy.link"> Healthy Endpoints ({{ healthyEndpoints.length }}) </RouterLink>
41+
<RouterLink role="tab" :aria-selected="isRouteSelected(routeLinks.heartbeats.healthy.link)" :to="routeLinks.heartbeats.healthy.link"> Healthy Endpoints ({{ healthyEndpoints.length }}) </RouterLink>
4242
</h5>
4343

4444
<!--Configuration-->
4545
<h5 :class="{ active: isRouteSelected(routeLinks.heartbeats.configuration.link) }">
46-
<RouterLink :to="routeLinks.heartbeats.configuration.link"> Configuration </RouterLink>
46+
<RouterLink role="tab" :aria-selected="isRouteSelected(routeLinks.heartbeats.configuration.link)" :to="routeLinks.heartbeats.configuration.link"> Configuration </RouterLink>
4747
</h5>
4848
</div>
4949
<div class="filter-group">

‎src/Frontend/test/mocks/browser.ts‎

Lines changed: 2 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@ import { setupWorker } from "msw/browser";
22
import { Driver } from "../driver";
33
import { makeMockEndpoint, makeMockEndpointDynamic } from "../mock-endpoint";
44
import * as precondition from "../preconditions";
5-
import { EndpointsView } from "@/resources/EndpointView";
6-
import { EndpointStatus } from "@/resources/Heartbeat";
5+
76
export const worker = setupWorker();
87
const mockEndpoint = makeMockEndpoint({ mockServer: worker });
98
const mockEndpointDynamic = makeMockEndpointDynamic({ mockServer: worker });
@@ -26,29 +25,5 @@ const driver = makeDriver();
2625

2726
(async () => {
2827
await driver.setUp(precondition.serviceControlWithMonitoring);
29-
//override the default mocked endpoints with a custom list
30-
await driver.setUp(
31-
precondition.monitoredEndpointsNamed([
32-
"Universe.Solarsystem.Mercury.Endpoint1",
33-
"Universe.Solarsystem.Mercury.Endpoint2",
34-
"Universe.Solarsystem.Venus.Endpoint3",
35-
"Universe.Solarsystem.Venus.Endpoint4",
36-
"Universe.Solarsystem.Earth.Endpoint5",
37-
"Universe.Solarsystem.Earth.Endpoint6",
38-
])
39-
);
40-
41-
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: "" } };
42-
43-
await driver.setUp(precondition.serviceControlWithMonitoring);
44-
await driver.setUp(precondition.hasHeartbeatsEndpoints([unhealthyEndpoint]));
45-
46-
await driver.setUp(
47-
precondition.hasFailedMessage({
48-
withGroupId: "81dca64e-76fc-e1c3-11a2-3069f51c58c8",
49-
withMessageId: "40134401-bab9-41aa-9acb-b19c0066f22d",
50-
withContentType: "application/json",
51-
withBody: { Index: 0, Data: "" },
52-
})
53-
);
28+
await driver.setUp(precondition.HasHealthyAndUnHealthyEndpoints(1, 1));
5429
})();

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

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import { EndpointsView } from "@/resources/EndpointView";
2+
import { EndpointStatus } from "@/resources/Heartbeat";
3+
4+
export const healthyEndpointTemplate = <EndpointsView>{
5+
is_sending_heartbeats: true,
6+
id: "",
7+
name: `HealthyEndpoint`,
8+
monitor_heartbeat: true,
9+
host_display_name: "HealhtyEndpoint.Hostname",
10+
heartbeat_information: { reported_status: EndpointStatus.Alive, last_report_at: new Date().toISOString() },
11+
};
12+
13+
export const unHealthyEndpointTemplate = <EndpointsView>{
14+
is_sending_heartbeats: true,
15+
id: "",
16+
name: `UnHealthyEndpoint`,
17+
monitor_heartbeat: true,
18+
host_display_name: "UnHealhtyEndpoint.Hostname",
19+
heartbeat_information: { reported_status: EndpointStatus.Dead, last_report_at: new Date().toISOString() },
20+
};

0 commit comments

Comments
 (0)