Update failing unit tests

- Add babel plugin to handle Jest import of SVG. Without plugin the
test fails with a require.context() is undefined
- Update snapshot tests that have changed
- Removed globals from .eslintrc.js that were needed prior to
migrating from Mocha and Chai to Jest

Signed-off-by: Derick Montague <[email protected]>
Change-Id: Ibd01d2e629b5ecb47d072e277e4e9b5ae5c5f001

Author: derick-montague

.eslintrc.js

@@ -19,10 +19,6 @@ module.exports = {
   parserOptions: {
     parser: 'babel-eslint',
   },
-  globals: {
-    expect: true,
-    sinon: true,
-  },
   overrides: [
     {
       files: [

babel.config.js

@@ -1,3 +1,8 @@
 module.exports = {
   presets: [['@vue/cli-plugin-babel/preset', { useBuiltIns: 'entry' }]],
+  env: {
+    test: {
+      plugins: ['transform-require-context'],
+    },
+  },
 };

package-lock.json

@@ -44,6 +44,7 @@
     "@vue/eslint-config-prettier": "5.0.0",
     "@vue/test-utils": "1.1.0",
     "babel-eslint": "10.1.0",
+    "babel-plugin-transform-require-context": "0.1.1",
     "check-node-version": "4.0.3",
     "compression-webpack-plugin": "6.0.3",
     "eslint": "7.11.0",

package.json

@@ -12,6 +12,7 @@ describe('AppHeader.vue', () => {
   const actions = {
     'global/getHostStatus': jest.fn(),
     'eventLog/getEventLogData': jest.fn(),
+    'authentication/resetStoreState': jest.fn(),
   };
 
   const store = new Vuex.Store({ actions });

tests/unit/AppHeader.spec.js

@@ -23,30 +23,33 @@ exports[`AppHeader.vue should render correctly 1`] = `
         aria-hidden="true"
         class="nav-trigger"
         id="app-header-trigger"
-        title="Open navigation"
         type="button"
         variant="link"
       >
         <!---->
          
         <svg
-          aria-hidden="true"
+          fill="currentColor"
           focusable="false"
           height="20"
           preserveAspectRatio="xMidYMid meet"
-          style="will-change: transform;"
+          role="img"
+          title="appHeader.titleShowNavigation"
           viewBox="0 0 20 20"
           width="20"
           xmlns="http://www.w3.org/2000/svg"
         >
+          <title>
+            appHeader.titleShowNavigation
+          </title>
           <path
-            d="M2 14.8h16V16H2zm0-3.6h16v1.2H2zm0-3.6h16v1.2H2zM2 4h16v1.2H2z"
+            d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
           />
         </svg>
       </b-button>
        
       <b-navbar-nav>
-        <b-nav-item
+        <b-navbar-brand
           data-test-id="appHeader-container-overview"
           to="/"
         >
@@ -55,7 +58,7 @@ exports[`AppHeader.vue should render correctly 1`] = `
             class="header-logo"
             src="@/assets/images/logo-header.svg"
           />
-        </b-nav-item>
+        </b-navbar-brand>
       </b-navbar-nav>
        
       <b-navbar-nav
@@ -70,19 +73,19 @@ exports[`AppHeader.vue should render correctly 1`] = `
           >
             <svg
               aria-hidden="true"
+              fill="currentColor"
               focusable="false"
               height="20"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 20 20"
               width="20"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm3.5 13.5l-8-8 1-1 8 8-1 1z"
+                d="M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
               />
               <path
-                d="M13.5 14.5l-8-8 1-1 8 8-1 1z"
+                d="M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
                 data-icon-path="inner-path"
                 opacity="0"
               />
@@ -102,19 +105,19 @@ exports[`AppHeader.vue should render correctly 1`] = `
           >
             <svg
               aria-hidden="true"
+              fill="currentColor"
               focusable="false"
               height="20"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
               viewBox="0 0 20 20"
               width="20"
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                d="M10 1c-5 0-9 4-9 9s4 9 9 9 9-4 9-9-4-9-9-9zm3.5 13.5l-8-8 1-1 8 8-1 1z"
+                d="M10,1c-5,0-9,4-9,9s4,9,9,9s9-4,9-9S15,1,10,1z M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
               />
               <path
-                d="M13.5 14.5l-8-8 1-1 8 8-1 1z"
+                d="M13.5,14.5l-8-8l1-1l8,8L13.5,14.5z"
                 data-icon-path="inner-path"
                 opacity="0"
               />
@@ -134,17 +137,21 @@ exports[`AppHeader.vue should render correctly 1`] = `
             variant="link"
           >
             <svg
-              aria-hidden="true"
+              fill="currentColor"
               focusable="false"
               height="20"
               preserveAspectRatio="xMidYMid meet"
-              style="will-change: transform;"
+              role="img"
+              title="appHeader.titleRefresh"
               viewBox="0 0 32 32"
               width="20"
               xmlns="http://www.w3.org/2000/svg"
             >
+              <title>
+                appHeader.titleRefresh
+              </title>
               <path
-                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"
+                d="M12 10H6.78A11 11 0 0127 16h2A13 13 0 006 7.68V4H4v8h8zM20 22h5.22A11 11 0 015 16H3a13 13 0 0023 8.32V28h2V20H20z"
               />
             </svg>
              
@@ -187,15 +194,17 @@ exports[`AppHeader.vue should render correctly 1`] = `
     </b-navbar>
   </header>
    
-  <b-progress
-    height="0.4rem"
+  <transition-stub
+    name="fade"
   >
-    <b-progress-bar
-      animated=""
-      aria-label="global.ariaLabel.progressBar"
-      striped=""
-      value="0"
-    />
-  </b-progress>
+    <b-progress>
+      <b-progress-bar
+        animated=""
+        aria-label="global.ariaLabel.progressBar"
+        striped=""
+        value="0"
+      />
+    </b-progress>
+  </transition-stub>
 </div>
 `;