Resolve broken unit tests

- Refactor broke snapshots and the logout functionality test

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I31932b0553a8ca9e6e2a38235b7769fab2061ba6

3 files changed, 320 insertions, 171 deletions

diff --git a/tests/unit/AppHeader.spec.js b/tests/unit/AppHeader.spec.js
index f4e3626b..be52ef8f 100644
--- a/tests/unit/AppHeader.spec.js
+++ b/tests/unit/AppHeader.spec.js
@@ -51,7 +51,7 @@ describe('AppHeader.vue', () => {
   });
 
   it('logout button should dispatch authentication/logout', async () => {
-    wrapper.get('#app-header-logout').trigger('click');
+    wrapper.get('[data-test-id="appHeader-link-logout"]').trigger('click');
     await wrapper.vm.$nextTick();
     expect(store.dispatch).toHaveBeenCalledTimes(1);
   });
diff --git a/tests/unit/__snapshots__/AppHeader.spec.js.snap b/tests/unit/__snapshots__/AppHeader.spec.js.snap
index f8f22140..712353b0 100644
--- a/tests/unit/__snapshots__/AppHeader.spec.js.snap
+++ b/tests/unit/__snapshots__/AppHeader.spec.js.snap
@@ -18,7 +18,6 @@ exports[`AppHeader.vue should render correctly 1`] = `
     <b-navbar
       aria-label="appHeader.applicationHeader"
       type="dark"
-      variant="dark"
     >
       <b-button
         aria-hidden="true"
@@ -47,18 +46,25 @@ exports[`AppHeader.vue should render correctly 1`] = `
       </b-button>
        
       <b-navbar-nav>
-        <b-nav-text>
-          appHeader.bmcSystemManagement
-        </b-nav-text>
+        <b-nav-item
+          data-test-id="appHeader-container-overview"
+          to="/"
+        >
+          <img
+            alt="undefined logo"
+            class="header-logo"
+            src="@/assets/images/logo-header.svg"
+          />
+        </b-nav-item>
       </b-navbar-nav>
        
       <b-navbar-nav
-        class="ml-auto"
+        class="ml-auto helper-menu"
       >
-        <b-nav-item>
-          
-          appHeader.health
-          
+        <b-nav-item
+          data-test-id="appHeader-container-health"
+          to="/health/event-logs"
+        >
           <span
             class="status-icon secondary"
           >
@@ -82,12 +88,15 @@ exports[`AppHeader.vue should render correctly 1`] = `
               />
             </svg>
           </span>
+          
+          appHeader.health
+        
         </b-nav-item>
          
-        <b-nav-item>
-          
-          appHeader.power
-          
+        <b-nav-item
+          data-test-id="appHeader-container-power"
+          to="/control/server-power-operations"
+        >
           <span
             class="status-icon secondary"
           >
@@ -111,18 +120,19 @@ exports[`AppHeader.vue should render correctly 1`] = `
               />
             </svg>
           </span>
+          
+          appHeader.power
+        
         </b-nav-item>
          
         <li
           class="nav-item"
         >
           <b-button
+            data-test-id="appHeader-button-refresh"
             id="app-header-refresh"
             variant="link"
           >
-            
-            appHeader.refresh
-            
             <svg
               aria-hidden="true"
               focusable="false"
@@ -137,38 +147,55 @@ exports[`AppHeader.vue should render correctly 1`] = `
                 d="M12 10H6.78A11 11 0 0 1 27 16h2A13 13 0 0 0 6 7.68V4H4v8h8zm8 12h5.22A11 11 0 0 1 5 16H3a13 13 0 0 0 23 8.32V28h2v-8h-8z"
               />
             </svg>
+             
+            <span
+              class="responsive-text"
+            >
+              appHeader.refresh
+            </span>
           </b-button>
         </li>
          
-        <li>
-          <b-button
-            id="app-header-logout"
+        <li
+          class="nav-item"
+        >
+          <b-dropdown
+            data-test-id="appHeader-container-user"
+            id="app-header-user"
+            right=""
             variant="link"
           >
+             
+            <b-dropdown-item
+              data-test-id="appHeader-link-profile"
+              to="/profile-settings"
+            >
+              appHeader.profileSettings
             
-            appHeader.logOut
-            
-            <svg
-              aria-hidden="true"
-              focusable="false"
-              height="20"
-              preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
-              viewBox="0 0 32 32"
-              width="20"
-              xmlns="http://www.w3.org/2000/svg"
+            </b-dropdown-item>
+             
+            <b-dropdown-item
+              data-test-id="appHeader-link-logout"
             >
-              <path
-                d="M16 2a14 14 0 1 0 14 14A14 14 0 0 0 16 2zm-6 24.38v-2A3.22 3.22 0 0 1 13 21h6a3.22 3.22 0 0 1 3 3.39v2a11.92 11.92 0 0 1-12 0zm14-1.46v-.61A5.21 5.21 0 0 0 19 19h-6a5.2 5.2 0 0 0-5 5.31v.59a12 12 0 1 1 16 0z"
-              />
-              <path
-                d="M16 7a5 5 0 1 0 5 5 5 5 0 0 0-5-5zm0 8a3 3 0 1 1 3-3 3 3 0 0 1-3 3z"
-              />
-            </svg>
-          </b-button>
+              
+              appHeader.logOut
+            
+            </b-dropdown-item>
+          </b-dropdown>
         </li>
       </b-navbar-nav>
     </b-navbar>
   </header>
+   
+  <b-progress
+    height="0.4rem"
+  >
+    <b-progress-bar
+      animated=""
+      aria-label="global.ariaLabel.progressBar"
+      striped=""
+      value="0"
+    />
+  </b-progress>
 </div>
 `;
diff --git a/tests/unit/__snapshots__/AppNavigation.spec.js.snap b/tests/unit/__snapshots__/AppNavigation.spec.js.snap
index f9da5835..3073a09b 100644
--- a/tests/unit/__snapshots__/AppNavigation.spec.js.snap
+++ b/tests/unit/__snapshots__/AppNavigation.spec.js.snap
@@ -9,10 +9,11 @@ exports[`AppNavigation.vue should render correctly 1`] = `
       aria-label="appNavigation.primaryNavigation"
     >
       <ul
-        class="nav flex-column"
+        class="nav mb-4 flex-column"
       >
         <li
           class="nav-item"
+          data-test-id="nav-item-overview"
         >
           <a
             class="nav-link"
@@ -37,18 +38,18 @@ exports[`AppNavigation.vue should render correctly 1`] = `
               />
             </svg>
             
-          appNavigation.overview
-        
+            appNavigation.overview
+          
           </a>
         </li>
-         
         <li
           class="nav-item"
         >
           <button
-            aria-controls="health-menu"
+            aria-controls="health"
             aria-expanded="false"
             class="btn btn-link collapsed"
+            data-test-id="nav-button-health"
             type="button"
           >
             <svg
@@ -84,8 +85,8 @@ exports[`AppNavigation.vue should render correctly 1`] = `
               />
             </svg>
             
-            appNavigation.health
-            
+              appNavigation.health
+              
             <svg
               aria-hidden="true"
               class="icon-expand"
@@ -105,39 +106,40 @@ exports[`AppNavigation.vue should render correctly 1`] = `
            
           <ul
             class="nav-item__nav collapse"
-            id="health-menu"
+            id="health"
             style="display: none;"
           >
             <li
               class="nav-item"
+              data-test-id="nav-item-event-logs"
             >
               <a
                 class="nav-link"
-                href="javascript:void(0)"
+                href="/health/event-logs"
                 target="_self"
               >
                 
-              appNavigation.eventLog
-            
+                appNavigation.eventLogs
+              
               </a>
             </li>
-             
             <li
               class="nav-item"
+              data-test-id="nav-item-hardware-status"
             >
               <a
                 class="nav-link"
-                href="javascript:void(0)"
+                href="/health/hardware-status"
                 target="_self"
               >
                 
-              appNavigation.hardwareStatus
-            
+                appNavigation.hardwareStatus
+              
               </a>
             </li>
-             
             <li
               class="nav-item"
+              data-test-id="nav-item-sensors"
             >
               <a
                 class="nav-link"
@@ -145,20 +147,20 @@ exports[`AppNavigation.vue should render correctly 1`] = `
                 target="_self"
               >
                 
-              appNavigation.sensors
-            
+                appNavigation.sensors
+              
               </a>
             </li>
           </ul>
         </li>
-         
         <li
           class="nav-item"
         >
           <button
-            aria-controls="control-menu"
+            aria-controls="control"
             aria-expanded="false"
             class="btn btn-link collapsed"
+            data-test-id="nav-button-control"
             type="button"
           >
             <svg
@@ -176,8 +178,8 @@ exports[`AppNavigation.vue should render correctly 1`] = `
               />
             </svg>
             
-            appNavigation.control
-            
+              appNavigation.control
+              
             <svg
               aria-hidden="true"
               class="icon-expand"
@@ -197,25 +199,40 @@ exports[`AppNavigation.vue should render correctly 1`] = `
            
           <ul
             class="nav-item__nav collapse"
-            id="control-menu"
+            id="control"
             style="display: none;"
           >
             <li
               class="nav-item"
+              data-test-id="nav-item-kvm"
             >
               <a
                 class="nav-link"
-                href="javascript:void(0)"
+                href="/control/kvm"
                 target="_self"
               >
                 
-              appNavigation.managePowerUsage
-            
+                appNavigation.kvm
+              
               </a>
             </li>
-             
             <li
               class="nav-item"
+              data-test-id="nav-item-manage-power-usage"
+            >
+              <a
+                class="nav-link"
+                href="/control/manage-power-usage"
+                target="_self"
+              >
+                
+                appNavigation.managePowerUsage
+              
+              </a>
+            </li>
+            <li
+              class="nav-item"
+              data-test-id="nav-item-reboot-bmc"
             >
               <a
                 class="nav-link"
@@ -223,27 +240,41 @@ exports[`AppNavigation.vue should render correctly 1`] = `
                 target="_self"
               >
                 
-              appNavigation.rebootBmc
-            
+                appNavigation.rebootBmc
+              
               </a>
             </li>
-             
             <li
               class="nav-item"
+              data-test-id="nav-item-serial-over-lan"
             >
               <a
                 class="nav-link"
-                href="javascript:void(0)"
+                href="/control/serial-over-lan"
                 target="_self"
               >
                 
-              appNavigation.serverLed
-            
+                appNavigation.serialOverLan
+              
+              </a>
+            </li>
+            <li
+              class="nav-item"
+              data-test-id="nav-item-server-led"
+            >
+              <a
+                class="nav-link"
+                href="/control/server-led"
+                target="_self"
+              >
+                
+                appNavigation.serverLed
+              
               </a>
             </li>
-             
             <li
               class="nav-item"
+              data-test-id="nav-item-server-power-operations"
             >
               <a
                 class="nav-link"
@@ -251,20 +282,34 @@ exports[`AppNavigation.vue should render correctly 1`] = `
                 target="_self"
               >
                 
-              appNavigation.serverPowerOperations
-            
+                appNavigation.serverPowerOperations
+              
+              </a>
+            </li>
+            <li
+              class="nav-item"
+              data-test-id="nav-item-virtual-media"
+            >
+              <a
+                class="nav-link"
+                href="/control/virtual-media"
+                target="_self"
+              >
+                
+                appNavigation.virtualMedia
+              
               </a>
             </li>
           </ul>
         </li>
-         
         <li
           class="nav-item"
         >
           <button
-            aria-controls="configuration-menu"
+            aria-controls="configuration"
             aria-expanded="false"
             class="btn btn-link collapsed"
+            data-test-id="nav-button-configuration"
             type="button"
           >
             <svg
@@ -285,8 +330,8 @@ exports[`AppNavigation.vue should render correctly 1`] = `
               />
             </svg>
             
-            appNavigation.configuration
-            
+              appNavigation.configuration
+              
             <svg
               aria-hidden="true"
               class="icon-expand"
@@ -306,60 +351,75 @@ exports[`AppNavigation.vue should render correctly 1`] = `
            
           <ul
             class="nav-item__nav collapse"
-            id="configuration-menu"
+            id="configuration"
             style="display: none;"
           >
             <li
               class="nav-item"
+              data-test-id="nav-item-date-time-settings"
             >
               <a
                 class="nav-link"
-                href="javascript:void(0)"
+                href="/configuration/date-time-settings"
                 target="_self"
               >
                 
-              appNavigation.firmware
-            
+                appNavigation.dateTimeSettings
+              
               </a>
             </li>
-             
             <li
               class="nav-item"
+              data-test-id="nav-item-firmware"
             >
               <a
                 class="nav-link"
-                href="javascript:void(0)"
+                href="/configuration/firmware"
                 target="_self"
               >
                 
-              appNavigation.networkSettings
-            
+                appNavigation.firmware
+              
               </a>
             </li>
-             
             <li
               class="nav-item"
+              data-test-id="nav-item-network-settings"
             >
               <a
                 class="nav-link"
-                href="javascript:void(0)"
+                href="/configuration/network-settings"
                 target="_self"
               >
                 
-              appNavigation.snmpSettings
-            
+                appNavigation.networkSettings
+              
+              </a>
+            </li>
+            <li
+              class="nav-item"
+              data-test-id="nav-item-snmp-settings"
+            >
+              <a
+                class="nav-link"
+                href="#"
+                target="_self"
+              >
+                
+                appNavigation.snmpSettings
+              
               </a>
             </li>
           </ul>
         </li>
-         
         <li
           class="nav-item"
         >
           <button
-            aria-controls="access-control-menu"
+            aria-controls="access-control"
             aria-expanded="false"
             class="btn btn-link collapsed"
+            data-test-id="nav-button-access-control"
             type="button"
           >
             <svg
@@ -382,8 +442,8 @@ exports[`AppNavigation.vue should render correctly 1`] = `
               />
             </svg>
             
-            appNavigation.accessControl
-            
+              appNavigation.configuration
+              
             <svg
               aria-hidden="true"
               class="icon-expand"
@@ -403,25 +463,26 @@ exports[`AppNavigation.vue should render correctly 1`] = `
            
           <ul
             class="nav-item__nav collapse"
-            id="access-control-menu"
+            id="access-control"
             style="display: none;"
           >
             <li
               class="nav-item"
+              data-test-id="nav-item-ldap"
             >
               <a
                 class="nav-link"
-                href="javascript:void(0)"
+                href="/access-control/ldap"
                 target="_self"
               >
                 
-              appNavigation.ldap
-            
+                appNavigation.ldap
+              
               </a>
             </li>
-             
             <li
               class="nav-item"
+              data-test-id="nav-item-local-user-management"
             >
               <a
                 class="nav-link"
@@ -429,13 +490,13 @@ exports[`AppNavigation.vue should render correctly 1`] = `
                 target="_self"
               >
                 
-              appNavigation.localUserManagement
-            
+                appNavigation.localUserManagement
+              
               </a>
             </li>
-             
             <li
               class="nav-item"
+              data-test-id="nav-item-ssl-certificates"
             >
               <a
                 class="nav-link"
@@ -443,8 +504,8 @@ exports[`AppNavigation.vue should render correctly 1`] = `
                 target="_self"
               >
                 
-              appNavigation.sslCertificates
-            
+                appNavigation.sslCertificates
+              
               </a>
             </li>
           </ul>
@@ -466,10 +527,11 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
       aria-label="appNavigation.primaryNavigation"
     >
       <ul
-        class="nav flex-column"
+        class="nav mb-4 flex-column"
       >
         <li
           class="nav-item"
+          data-test-id="nav-item-overview"
         >
           <a
             class="nav-link"
@@ -494,18 +556,18 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
               />
             </svg>
             
-          appNavigation.overview
-        
+            appNavigation.overview
+          
           </a>
         </li>
-         
         <li
           class="nav-item"
         >
           <button
-            aria-controls="health-menu"
+            aria-controls="health"
             aria-expanded="false"
             class="btn btn-link collapsed"
+            data-test-id="nav-button-health"
             type="button"
           >
             <svg
@@ -541,8 +603,8 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
               />
             </svg>
             
-            appNavigation.health
-            
+              appNavigation.health
+              
             <svg
               aria-hidden="true"
               class="icon-expand"
@@ -562,39 +624,40 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
            
           <ul
             class="nav-item__nav collapse"
-            id="health-menu"
+            id="health"
             style="display: none;"
           >
             <li
               class="nav-item"
+              data-test-id="nav-item-event-logs"
             >
               <a
                 class="nav-link"
-                href="javascript:void(0)"
+                href="/health/event-logs"
                 target="_self"
               >
                 
-              appNavigation.eventLog
-            
+                appNavigation.eventLogs
+              
               </a>
             </li>
-             
             <li
               class="nav-item"
+              data-test-id="nav-item-hardware-status"
             >
               <a
                 class="nav-link"
-                href="javascript:void(0)"
+                href="/health/hardware-status"
                 target="_self"
               >
                 
-              appNavigation.hardwareStatus
-            
+                appNavigation.hardwareStatus
+              
               </a>
             </li>
-             
             <li
               class="nav-item"
+              data-test-id="nav-item-sensors"
             >
               <a
                 class="nav-link"
@@ -602,20 +665,20 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
                 target="_self"
               >
                 
-              appNavigation.sensors
-            
+                appNavigation.sensors
+              
               </a>
             </li>
           </ul>
         </li>
-         
         <li
           class="nav-item"
         >
           <button
-            aria-controls="control-menu"
+            aria-controls="control"
             aria-expanded="false"
             class="btn btn-link collapsed"
+            data-test-id="nav-button-control"
             type="button"
           >
             <svg
@@ -633,8 +696,8 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
               />
             </svg>
             
-            appNavigation.control
-            
+              appNavigation.control
+              
             <svg
               aria-hidden="true"
               class="icon-expand"
@@ -654,25 +717,40 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
            
           <ul
             class="nav-item__nav collapse"
-            id="control-menu"
+            id="control"
             style="display: none;"
           >
             <li
               class="nav-item"
+              data-test-id="nav-item-kvm"
             >
               <a
                 class="nav-link"
-                href="javascript:void(0)"
+                href="/control/kvm"
                 target="_self"
               >
                 
-              appNavigation.managePowerUsage
-            
+                appNavigation.kvm
+              
               </a>
             </li>
-             
             <li
               class="nav-item"
+              data-test-id="nav-item-manage-power-usage"
+            >
+              <a
+                class="nav-link"
+                href="/control/manage-power-usage"
+                target="_self"
+              >
+                
+                appNavigation.managePowerUsage
+              
+              </a>
+            </li>
+            <li
+              class="nav-item"
+              data-test-id="nav-item-reboot-bmc"
             >
               <a
                 class="nav-link"
@@ -680,27 +758,41 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
                 target="_self"
               >
                 
-              appNavigation.rebootBmc
-            
+                appNavigation.rebootBmc
+              
               </a>
             </li>
-             
             <li
               class="nav-item"
+              data-test-id="nav-item-serial-over-lan"
             >
               <a
                 class="nav-link"
-                href="javascript:void(0)"
+                href="/control/serial-over-lan"
                 target="_self"
               >
                 
-              appNavigation.serverLed
-            
+                appNavigation.serialOverLan
+              
+              </a>
+            </li>
+            <li
+              class="nav-item"
+              data-test-id="nav-item-server-led"
+            >
+              <a
+                class="nav-link"
+                href="/control/server-led"
+                target="_self"
+              >
+                
+                appNavigation.serverLed
+              
               </a>
             </li>
-             
             <li
               class="nav-item"
+              data-test-id="nav-item-server-power-operations"
             >
               <a
                 class="nav-link"
@@ -708,20 +800,34 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
                 target="_self"
               >
                 
-              appNavigation.serverPowerOperations
-            
+                appNavigation.serverPowerOperations
+              
+              </a>
+            </li>
+            <li
+              class="nav-item"
+              data-test-id="nav-item-virtual-media"
+            >
+              <a
+                class="nav-link"
+                href="/control/virtual-media"
+                target="_self"
+              >
+                
+                appNavigation.virtualMedia
+              
               </a>
             </li>
           </ul>
         </li>
-         
         <li
           class="nav-item"
         >
           <button
-            aria-controls="configuration-menu"
+            aria-controls="configuration"
             aria-expanded="false"
             class="btn btn-link collapsed"
+            data-test-id="nav-button-configuration"
             type="button"
           >
             <svg
@@ -742,8 +848,8 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
               />
             </svg>
             
-            appNavigation.configuration
-            
+              appNavigation.configuration
+              
             <svg
               aria-hidden="true"
               class="icon-expand"
@@ -763,60 +869,75 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
            
           <ul
             class="nav-item__nav collapse"
-            id="configuration-menu"
+            id="configuration"
             style="display: none;"
           >
             <li
               class="nav-item"
+              data-test-id="nav-item-date-time-settings"
             >
               <a
                 class="nav-link"
-                href="javascript:void(0)"
+                href="/configuration/date-time-settings"
                 target="_self"
               >
                 
-              appNavigation.firmware
-            
+                appNavigation.dateTimeSettings
+              
               </a>
             </li>
-             
             <li
               class="nav-item"
+              data-test-id="nav-item-firmware"
             >
               <a
                 class="nav-link"
-                href="javascript:void(0)"
+                href="/configuration/firmware"
                 target="_self"
               >
                 
-              appNavigation.networkSettings
-            
+                appNavigation.firmware
+              
               </a>
             </li>
-             
             <li
               class="nav-item"
+              data-test-id="nav-item-network-settings"
             >
               <a
                 class="nav-link"
-                href="javascript:void(0)"
+                href="/configuration/network-settings"
                 target="_self"
               >
                 
-              appNavigation.snmpSettings
-            
+                appNavigation.networkSettings
+              
+              </a>
+            </li>
+            <li
+              class="nav-item"
+              data-test-id="nav-item-snmp-settings"
+            >
+              <a
+                class="nav-link"
+                href="#"
+                target="_self"
+              >
+                
+                appNavigation.snmpSettings
+              
               </a>
             </li>
           </ul>
         </li>
-         
         <li
           class="nav-item"
         >
           <button
-            aria-controls="access-control-menu"
+            aria-controls="access-control"
             aria-expanded="false"
             class="btn btn-link collapsed"
+            data-test-id="nav-button-access-control"
             type="button"
           >
             <svg
@@ -839,8 +960,8 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
               />
             </svg>
             
-            appNavigation.accessControl
-            
+              appNavigation.configuration
+              
             <svg
               aria-hidden="true"
               class="icon-expand"
@@ -860,25 +981,26 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
            
           <ul
             class="nav-item__nav collapse"
-            id="access-control-menu"
+            id="access-control"
             style="display: none;"
           >
             <li
               class="nav-item"
+              data-test-id="nav-item-ldap"
             >
               <a
                 class="nav-link"
-                href="javascript:void(0)"
+                href="/access-control/ldap"
                 target="_self"
               >
                 
-              appNavigation.ldap
-            
+                appNavigation.ldap
+              
               </a>
             </li>
-             
             <li
               class="nav-item"
+              data-test-id="nav-item-local-user-management"
             >
               <a
                 class="nav-link"
@@ -886,13 +1008,13 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
                 target="_self"
               >
                 
-              appNavigation.localUserManagement
-            
+                appNavigation.localUserManagement
+              
               </a>
             </li>
-             
             <li
               class="nav-item"
+              data-test-id="nav-item-ssl-certificates"
             >
               <a
                 class="nav-link"
@@ -900,8 +1022,8 @@ exports[`AppNavigation.vue should render with nav-container open 1`] = `
                 target="_self"
               >
                 
-              appNavigation.sslCertificates
-            
+                appNavigation.sslCertificates
+              
               </a>
             </li>
           </ul>