Add test hooks to primary navigation
The button elements will be labeled using the word button. The data
attribute for the anchor elements will be added to the parent
container and will use the word container in the data attribute value.
Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I7967b3ac659b1363a07b7686b874cf044a1a48ad
diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 2b773a0..dad7b92 100644
--- a/src/components/AppNavigation/AppNavigation.vue
+++ b/src/components/AppNavigation/AppNavigation.vue
@@ -3,94 +3,155 @@
<div class="nav-container" :class="{ open: isNavigationOpen }">
<nav ref="nav" :aria-label="$t('appNavigation.primaryNavigation')">
<b-nav vertical>
- <b-nav-item to="/">
+ <b-nav-item to="/" data-test-id="nav-container-overview">
<icon-overview />
{{ $t('appNavigation.overview') }}
</b-nav-item>
<li class="nav-item">
- <b-button v-b-toggle.health-menu variant="link">
+ <b-button
+ v-b-toggle.health-menu
+ variant="link"
+ data-test-id="nav-button-health"
+ >
<icon-health />
{{ $t('appNavigation.health') }}
<icon-expand class="icon-expand" />
</b-button>
<b-collapse id="health-menu" tag="ul" class="nav-item__nav">
- <b-nav-item to="/health/event-logs">
+ <b-nav-item
+ to="/health/event-logs"
+ data-test-id="nav-container-event-logs"
+ >
{{ $t('appNavigation.eventLogs') }}
</b-nav-item>
- <b-nav-item to="/health/hardware-status">
+ <b-nav-item
+ to="/health/hardware-status"
+ data-test-id="nav-container-hardware-status"
+ >
{{ $t('appNavigation.hardwareStatus') }}
</b-nav-item>
- <b-nav-item to="/health/sensors">
+ <b-nav-item
+ to="/health/sensors"
+ data-test-id="nav-container-sensors"
+ >
{{ $t('appNavigation.sensors') }}
</b-nav-item>
</b-collapse>
</li>
<li class="nav-item">
- <b-button v-b-toggle.control-menu variant="link">
+ <b-button
+ v-b-toggle.control-menu
+ variant="link"
+ data-test-id="nav-button-control"
+ >
<icon-control />
{{ $t('appNavigation.control') }}
<icon-expand class="icon-expand" />
</b-button>
<b-collapse id="control-menu" tag="ul" class="nav-item__nav">
- <b-nav-item to="/control/kvm">
+ <b-nav-item to="/control/kvm" data-test-id="nav-container-kvm">
{{ $t('appNavigation.kvm') }}
</b-nav-item>
- <b-nav-item to="/control/manage-power-usage">
+ <b-nav-item
+ to="/control/manage-power-usage"
+ data-test-id="nav-container-manage-power-usage"
+ >
{{ $t('appNavigation.managePowerUsage') }}
</b-nav-item>
- <b-nav-item to="/control/reboot-bmc">
+ <b-nav-item
+ to="/control/reboot-bmc"
+ data-test-id="nav-container-reboot-bmc"
+ >
{{ $t('appNavigation.rebootBmc') }}
</b-nav-item>
- <b-nav-item to="/control/serial-over-lan">
+ <b-nav-item
+ to="/control/serial-over-lan"
+ data-test-id="nav-container-sol"
+ >
{{ $t('appNavigation.serialOverLan') }}
</b-nav-item>
- <b-nav-item to="/control/server-led">
+ <b-nav-item
+ to="/control/server-led"
+ data-test-id="nav-container-server-led"
+ >
{{ $t('appNavigation.serverLed') }}
</b-nav-item>
- <b-nav-item to="/control/server-power-operations">
+ <b-nav-item
+ to="/control/server-power-operations"
+ data-test-id="nav-container-server-power-operations"
+ >
{{ $t('appNavigation.serverPowerOperations') }}
</b-nav-item>
</b-collapse>
</li>
<li class="nav-item">
- <b-button v-b-toggle.configuration-menu variant="link">
+ <b-button
+ v-b-toggle.configuration-menu
+ variant="link"
+ data-test-id="nav-button-configuration"
+ >
<icon-configuration />
{{ $t('appNavigation.configuration') }}
<icon-expand class="icon-expand" />
</b-button>
<b-collapse id="configuration-menu" tag="ul" class="nav-item__nav">
- <b-nav-item to="/configuration/date-time-settings">
+ <b-nav-item
+ to="/configuration/date-time-settings"
+ data-test-id="nav-container-date-time-settings"
+ >
{{ $t('appNavigation.dateTimeSettings') }}
</b-nav-item>
- <b-nav-item href="javascript:void(0)">
+ <b-nav-item
+ href="javascript:void(0)"
+ data-test-id="nav-container-firmware"
+ >
{{ $t('appNavigation.firmware') }}
</b-nav-item>
- <b-nav-item to="/configuration/network-settings">
+ <b-nav-item
+ to="/configuration/network-settings"
+ data-test-id="nav-container-network-settings"
+ >
{{ $t('appNavigation.networkSettings') }}
</b-nav-item>
- <b-nav-item href="javascript:void(0)">
+ <b-nav-item
+ href="javascript:void(0)"
+ data-test-id="nav-container-snmp"
+ >
{{ $t('appNavigation.snmpSettings') }}
</b-nav-item>
</b-collapse>
</li>
<li class="nav-item">
- <b-button v-b-toggle.access-control-menu variant="link">
+ <b-button
+ v-b-toggle.access-control-menu
+ variant="link"
+ data-test-id="nav-button-access-control"
+ >
<icon-access-control />
{{ $t('appNavigation.accessControl') }}
<icon-expand class="icon-expand" />
</b-button>
<b-collapse id="access-control-menu" tag="ul" class="nav-item__nav">
- <b-nav-item to="/access-control/ldap">
+ <b-nav-item
+ to="/access-control/ldap"
+ data-test-id="nav-container-ldap"
+ >
{{ $t('appNavigation.ldap') }}
</b-nav-item>
- <b-nav-item to="/access-control/local-user-management">
+ <b-nav-item
+ to="/access-control/local-user-management"
+ data-test-id="nav-container-local-user-management"
+ >
{{ $t('appNavigation.localUserManagement') }}
</b-nav-item>
- <b-nav-item to="/access-control/ssl-certificates">
+ <b-nav-item
+ to="/access-control/ssl-certificates"
+ data-test-id="nav-container-ssl-certificates"
+ >
{{ $t('appNavigation.sslCertificates') }}
</b-nav-item>
</b-collapse>