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
diff --git a/tests/unit/__snapshots__/AppHeader.spec.js.snap b/tests/unit/__snapshots__/AppHeader.spec.js.snap
new file mode 100644
index 0000000..f8f2214
--- /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>
+`;