From 965cf673ec7179d5cc09c656f5508eee4fc71712 Mon Sep 17 00:00:00 2001
From: Derick Montague <derick.montague@ibm.com>
Date: Thu, 23 Jul 2020 17:24:39 -0500
Subject: Add application header test hooks

We are not able to easily pass the data attribute to the markup created
by some of the Bootstrap-vue components. In these cases we are adding
the data attribute to the parent container. Those elements will use the
word container in the data attribute value.

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I5f1cb43aaed9233415e9b7b9a7f71580f27f921d
---
 src/components/AppHeader/AppHeader.vue | 37 ++++++++++++++++++++++++++--------
 1 file changed, 29 insertions(+), 8 deletions(-)

(limited to 'src/components')

diff --git a/src/components/AppHeader/AppHeader.vue b/src/components/AppHeader/AppHeader.vue
index b977b5f9..568f9188 100644
--- a/src/components/AppHeader/AppHeader.vue
+++ b/src/components/AppHeader/AppHeader.vue
@@ -33,33 +33,54 @@
         </b-navbar-nav>
         <!-- Right aligned nav items -->
         <b-navbar-nav class="ml-auto helper-menu">
-          <b-nav-item to="/health/event-logs">
+          <b-nav-item
+            to="/health/event-logs"
+            data-test-id="appHeader-container-health"
+          >
             <status-icon :status="healthStatusIcon" />
             {{ $t('appHeader.health') }}
           </b-nav-item>
-          <b-nav-item to="/control/server-power-operations">
+          <b-nav-item
+            to="/control/server-power-operations"
+            data-test-id="appHeader-container-power"
+          >
             <status-icon :status="hostStatusIcon" />
             {{ $t('appHeader.power') }}
           </b-nav-item>
           <!-- Using LI elements instead of b-nav-item to support semantic button elements -->
           <li class="nav-item">
-            <b-button id="app-header-refresh" variant="link" @click="refresh">
+            <b-button
+              id="app-header-refresh"
+              variant="link"
+              data-test-id="appHeader-button-refresh"
+              @click="refresh"
+            >
               <icon-renew />
               <span class="responsive-text">{{ $t('appHeader.refresh') }}</span>
             </b-button>
           </li>
           <li class="nav-item">
-            <b-dropdown id="app-header-user" variant="link" right>
+            <b-dropdown
+              id="app-header-user"
+              variant="link"
+              right
+              data-test-id="appHeader-container-user"
+            >
               <template v-slot:button-content>
                 <icon-avatar />
                 <span class="responsive-text">{{ username }}</span>
               </template>
-              <b-dropdown-item to="/profile-settings"
+              <b-dropdown-item
+                to="/profile-settings"
+                data-test-id="appHeader-link-profile"
                 >{{ $t('appHeader.profileSettings') }}
               </b-dropdown-item>
-              <b-dropdown-item @click="logout">{{
-                $t('appHeader.logOut')
-              }}</b-dropdown-item>
+              <b-dropdown-item
+                data-test-id="appHeader-link-logout"
+                @click="logout"
+              >
+                {{ $t('appHeader.logOut') }}
+              </b-dropdown-item>
             </b-dropdown>
           </li>
         </b-navbar-nav>
-- 
cgit v1.2.3