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

1 files changed, 82 insertions, 21 deletions

diff --git a/src/components/AppNavigation/AppNavigation.vue b/src/components/AppNavigation/AppNavigation.vue
index 2b773a04..dad7b928 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>