From ad2ceb6df979cff60e05b088a17ee29dfb95a9ff Mon Sep 17 00:00:00 2001
From: Derick Montague <derick.montague@ibm.com>
Date: Fri, 24 Apr 2020 18:11:04 -0500
Subject: Use Jest as the test framework

- Remove mocha, chai, sinon and setup.js
- Add snapshot test to ApplicationHeader spec and remove skip nav link
test
- Add an update snapshot test that can be run if a page changes and the
snapshot needs to be updated
- Remove tight coupling of application structure and test in
ApplicationHeader spec

We are changing to Jest for a few reasons:
1. Jest is the testing framework used by most Vue applications and
has robust documentation
2. It requires less configuration and works out of the box
3. It includes the ability to perform snapshot testing of rendered
UI, which is much easier to maintain than trying to test specific UI
elements.

Signed-off-by: Derick Montague <derick.montague@ibm.com>
Change-Id: I7bca3613991ebae1fd464fa3a60f079d044ed7b4
---
 tests/unit/__snapshots__/AppHeader.spec.js.snap | 174 ++++++++++++++++++++++++
 1 file changed, 174 insertions(+)
 create mode 100644 tests/unit/__snapshots__/AppHeader.spec.js.snap

(limited to 'tests/unit/__snapshots__/AppHeader.spec.js.snap')

diff --git a/tests/unit/__snapshots__/AppHeader.spec.js.snap b/tests/unit/__snapshots__/AppHeader.spec.js.snap
new file mode 100644
index 00000000..f8f22140
--- /dev/null
+++ b/tests/unit/__snapshots__/AppHeader.spec.js.snap
@@ -0,0 +1,174 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppHeader.vue should render correctly 1`] = `
+<div>
+  <header
+    id="page-header"
+  >
+    <a
+      class="link-skip-nav btn btn-light"
+      href="#main-content"
+      role="link"
+    >
+      
+      appHeader.skipToContent
+    
+    </a>
+     
+    <b-navbar
+      aria-label="appHeader.applicationHeader"
+      type="dark"
+      variant="dark"
+    >
+      <b-button
+        aria-hidden="true"
+        class="nav-trigger"
+        id="app-header-trigger"
+        title="Open navigation"
+        type="button"
+        variant="link"
+      >
+        <!---->
+         
+        <svg
+          aria-hidden="true"
+          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="M2 14.8h16V16H2zm0-3.6h16v1.2H2zm0-3.6h16v1.2H2zM2 4h16v1.2H2z"
+          />
+        </svg>
+      </b-button>
+       
+      <b-navbar-nav>
+        <b-nav-text>
+          appHeader.bmcSystemManagement
+        </b-nav-text>
+      </b-navbar-nav>
+       
+      <b-navbar-nav
+        class="ml-auto"
+      >
+        <b-nav-item>
+          
+          appHeader.health
+          
+          <span
+            class="status-icon secondary"
+          >
+            <svg
+              aria-hidden="true"
+              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"
+              />
+              <path
+                d="M13.5 14.5l-8-8 1-1 8 8-1 1z"
+                data-icon-path="inner-path"
+                opacity="0"
+              />
+            </svg>
+          </span>
+        </b-nav-item>
+         
+        <b-nav-item>
+          
+          appHeader.power
+          
+          <span
+            class="status-icon secondary"
+          >
+            <svg
+              aria-hidden="true"
+              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"
+              />
+              <path
+                d="M13.5 14.5l-8-8 1-1 8 8-1 1z"
+                data-icon-path="inner-path"
+                opacity="0"
+              />
+            </svg>
+          </span>
+        </b-nav-item>
+         
+        <li
+          class="nav-item"
+        >
+          <b-button
+            id="app-header-refresh"
+            variant="link"
+          >
+            
+            appHeader.refresh
+            
+            <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"
+            >
+              <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"
+              />
+            </svg>
+          </b-button>
+        </li>
+         
+        <li>
+          <b-button
+            id="app-header-logout"
+            variant="link"
+          >
+            
+            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"
+            >
+              <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>
+        </li>
+      </b-navbar-nav>
+    </b-navbar>
+  </header>
+</div>
+`;
-- 
cgit v1.2.3