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

5 files changed, 1153 insertions, 62 deletions

diff --git a/tests/setup.js b/tests/setup.js
deleted file mode 100644
index e3c220a2..00000000
--- a/tests/setup.js
+++ /dev/null
@@ -1,11 +0,0 @@
-var chai = require('chai');
-var sinonChai = require('sinon-chai');
-
-chai.use(sinonChai);
-
-require('jsdom-global')('', {
-  url: 'http://localhost'
-});
-
-global.expect = require('chai').expect;
-global.sinon = require('sinon');
diff --git a/tests/unit/AppHeader.spec.js b/tests/unit/AppHeader.spec.js
index 52e45437..f4e3626b 100644
--- a/tests/unit/AppHeader.spec.js
+++ b/tests/unit/AppHeader.spec.js
@@ -1,4 +1,4 @@
-import { shallowMount, createLocalVue, createWrapper } from '@vue/test-utils';
+import { mount, createLocalVue, createWrapper } from '@vue/test-utils';
 import Vue from 'vue';
 import Vuex from 'vuex';
 import AppHeader from '@/components/AppHeader';
@@ -10,12 +10,12 @@ localVue.use(Vuex);
 
 describe('AppHeader.vue', () => {
   const actions = {
-    'global/getHostStatus': sinon.spy(),
-    'eventLog/getEventLogData': sinon.spy()
+    'global/getHostStatus': jest.fn(),
+    'eventLog/getEventLogData': jest.fn()
   };
 
   const store = new Vuex.Store({ actions });
-  const wrapper = shallowMount(AppHeader, {
+  const wrapper = mount(AppHeader, {
     store,
     localVue,
     mocks: {
@@ -23,50 +23,55 @@ describe('AppHeader.vue', () => {
     }
   });
 
-  // Reset spy for each test. Otherwise mutiple actions
-  // are dispatched in each test
+  // Reset dispatch between tests so that multiple
+  // actions are not dispatched for each test
   beforeEach(() => {
-    store.dispatch = sinon.spy();
+    store.dispatch = jest.fn();
   });
 
-  describe('UI', () => {
-    it('should check if AppHeader exists', () => {
-      expect(wrapper.exists()).to.be.true;
-    });
+  it('should exist', () => {
+    expect(wrapper.exists()).toBe(true);
+  });
 
-    it('should check if the skip navigation link exists', () => {
-      expect(wrapper.get('.link-skip-nav').exists()).to.be.true;
-    });
+  it('should render correctly', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
 
-    it('refresh button click should emit refresh event', async () => {
-      wrapper.get('#app-header-refresh').trigger('click');
-      await wrapper.vm.$nextTick();
-      expect(wrapper.emitted().refresh).to.exist;
-    });
+  it('refresh button click should emit refresh event', async () => {
+    wrapper.get('#app-header-refresh').trigger('click');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted('refresh')).toBeTruthy();
+  });
 
-    it('nav-trigger button click should emit toggle:navigation event', async () => {
-      const rootWrapper = createWrapper(wrapper.vm.$root);
-      wrapper.get('#app-header-trigger').trigger('click');
-      await wrapper.vm.$nextTick();
-      expect(rootWrapper.emitted()['toggle:navigation']).to.exist;
-    });
+  it('nav-trigger button click should emit toggle:navigation event', async () => {
+    const rootWrapper = createWrapper(wrapper.vm.$root);
+    wrapper.get('#app-header-trigger').trigger('click');
+    await wrapper.vm.$nextTick();
+    expect(rootWrapper.emitted('toggle:navigation')).toBeTruthy();
+  });
 
-    it('logout button should dispatch authentication/logout', async () => {
-      wrapper.get('#app-header-logout').trigger('click');
-      await wrapper.vm.$nextTick();
-      expect(store.dispatch).calledWith('authentication/logout');
-    });
+  it('logout button should dispatch authentication/logout', async () => {
+    wrapper.get('#app-header-logout').trigger('click');
+    await wrapper.vm.$nextTick();
+    expect(store.dispatch).toHaveBeenCalledTimes(1);
+  });
+
+  it('change:isNavigationOpen event should set isNavigationOpen prop to false', async () => {
+    const rootWrapper = createWrapper(wrapper.vm.$root);
+    rootWrapper.vm.$emit('change:isNavigationOpen', false);
+    await rootWrapper.vm.$nextTick();
+    expect(wrapper.vm.isNavigationOpen).toEqual(false);
   });
 
-  describe('Methods', () => {
+  describe('Created lifecycle hook', () => {
     it('getHostInfo should dispatch global/getHostStatus', () => {
       wrapper.vm.getHostInfo();
-      expect(store.dispatch).calledWith('global/getHostStatus');
+      expect(store.dispatch).toHaveBeenCalledTimes(1);
     });
 
     it('getEvents should dispatch eventLog/getEventLogData', () => {
       wrapper.vm.getEvents();
-      expect(store.dispatch).calledWith('eventLog/getEventLogData');
+      expect(store.dispatch).toHaveBeenCalledTimes(1);
     });
   });
 });
diff --git a/tests/unit/AppNavigation.spec.js b/tests/unit/AppNavigation.spec.js
index 3424f698..58eaae91 100644
--- a/tests/unit/AppNavigation.spec.js
+++ b/tests/unit/AppNavigation.spec.js
@@ -1,4 +1,4 @@
-import { mount } from '@vue/test-utils';
+import { mount, createWrapper } from '@vue/test-utils';
 import AppNavigation from '@/components/AppNavigation';
 import Vue from 'vue';
 import { BootstrapVue } from 'bootstrap-vue';
@@ -13,25 +13,33 @@ describe('AppNavigation.vue', () => {
     }
   });
 
-  describe('Component exists', () => {
-    it('should check if AppNavigation exists', async () => {
-      expect(wrapper.exists());
-    });
+  it('should exist', async () => {
+    expect(wrapper.exists()).toBe(true);
   });
 
-  describe('Methods', () => {
-    describe('toggleIsOpen method', () => {
-      it('should call toggleIsOpen and toggle isNavigationOpen to false', async () => {
-        wrapper.vm.isNavigationOpen = true;
-        wrapper.vm.toggleIsOpen();
-        expect(wrapper.vm.isNavigationOpen).to.be.false;
-      });
+  it('should render correctly', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('should render with nav-container open', () => {
+    wrapper.vm.isNavigationOpen = true;
+    expect(wrapper.element).toMatchSnapshot();
+  });
+
+  it('Nav Overlay cliick should emit change:isNavigationOpen event', async () => {
+    const rootWrapper = createWrapper(wrapper.vm.$root);
+    const navOverlay = wrapper.find('#nav-overlay');
+    navOverlay.trigger('click');
+    await wrapper.vm.$nextTick();
+    expect(rootWrapper.emitted('change:isNavigationOpen')).toBeTruthy();
+  });
 
-      it('should call toggleIsOpen and toggle isNavigationOpen to true', async () => {
-        wrapper.vm.isNavigationOpen = false;
-        wrapper.vm.toggleIsOpen();
-        expect(wrapper.vm.isNavigationOpen).to.be.true;
-      });
-    });
+  it('toggle:navigation event should toggle isNavigation data prop value', async () => {
+    const rootWrapper = createWrapper(wrapper.vm.$root);
+    wrapper.vm.isNavigationOpen = false;
+    rootWrapper.vm.$emit('toggle:navigation');
+    expect(wrapper.vm.isNavigationOpen).toBe(true);
+    rootWrapper.vm.$emit('toggle:navigation');
+    expect(wrapper.vm.isNavigationOpen).toBe(false);
   });
 });
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>
+`;
diff --git a/tests/unit/__snapshots__/AppNavigation.spec.js.snap b/tests/unit/__snapshots__/AppNavigation.spec.js.snap
new file mode 100644
index 00000000..f9da5835
--- /dev/null
+++ b/tests/unit/__snapshots__/AppNavigation.spec.js.snap
@@ -0,0 +1,915 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppNavigation.vue should render correctly 1`] = `
+<div>
+  <div
+    class="nav-container"
+  >
+    <nav
+      aria-label="appNavigation.primaryNavigation"
+    >
+      <ul
+        class="nav flex-column"
+      >
+        <li
+          class="nav-item"
+        >
+          <a
+            class="nav-link"
+            href="/"
+            target="_self"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              style="will-change: transform;"
+              viewBox="0 0 32 32"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4 2H2v26a2 2 0 0 0 2 2h26v-2H4z"
+              />
+              <path
+                d="M30 9h-7v2h3.59L19 18.59l-4.29-4.3a1 1 0 0 0-1.42 0L6 21.59 7.41 23 14 16.41l4.29 4.3a1 1 0 0 0 1.42 0l8.29-8.3V16h2z"
+              />
+            </svg>
+            
+          appNavigation.overview
+        
+          </a>
+        </li>
+         
+        <li
+          class="nav-item"
+        >
+          <button
+            aria-controls="health-menu"
+            aria-expanded="false"
+            class="btn btn-link collapsed"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              style="will-change: transform;"
+              viewBox="0 0 32 32"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M23 27.18l-2.59-2.59L19 26l4 4 7-7-1.41-1.41L23 27.18z"
+              />
+              <circle
+                cx="11"
+                cy="8"
+                r="1"
+              />
+              <circle
+                cx="11"
+                cy="16"
+                r="1"
+              />
+              <circle
+                cx="11"
+                cy="24"
+                r="1"
+              />
+              <path
+                d="M24 3H8a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h8v-2H8v-6h18V5a2 2 0 0 0-2-2zm0 16H8v-6h16zm0-8H8V5h16z"
+              />
+            </svg>
+            
+            appNavigation.health
+            
+            <svg
+              aria-hidden="true"
+              class="icon-expand"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              style="will-change: transform;"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8 5l5 5-.7.7L8 6.4l-4.3 4.3L3 10z"
+              />
+            </svg>
+          </button>
+           
+          <ul
+            class="nav-item__nav collapse"
+            id="health-menu"
+            style="display: none;"
+          >
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="javascript:void(0)"
+                target="_self"
+              >
+                
+              appNavigation.eventLog
+            
+              </a>
+            </li>
+             
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="javascript:void(0)"
+                target="_self"
+              >
+                
+              appNavigation.hardwareStatus
+            
+              </a>
+            </li>
+             
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="/health/sensors"
+                target="_self"
+              >
+                
+              appNavigation.sensors
+            
+              </a>
+            </li>
+          </ul>
+        </li>
+         
+        <li
+          class="nav-item"
+        >
+          <button
+            aria-controls="control-menu"
+            aria-expanded="false"
+            class="btn btn-link collapsed"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              style="will-change: transform;"
+              viewBox="0 0 32 32"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M30 7h-5.1a5 5 0 0 0-9.8 0H2v2h13.1a5 5 0 0 0 9.8 0H30zm-10 4a3 3 0 1 1 3-3 3 3 0 0 1-3 3zM2 25h5.1a5 5 0 0 0 9.8 0H30v-2H16.9a5 5 0 0 0-9.8 0H2zm7-1a3 3 0 1 1 3 3 3 3 0 0 1-3-3z"
+              />
+            </svg>
+            
+            appNavigation.control
+            
+            <svg
+              aria-hidden="true"
+              class="icon-expand"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              style="will-change: transform;"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8 5l5 5-.7.7L8 6.4l-4.3 4.3L3 10z"
+              />
+            </svg>
+          </button>
+           
+          <ul
+            class="nav-item__nav collapse"
+            id="control-menu"
+            style="display: none;"
+          >
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="javascript:void(0)"
+                target="_self"
+              >
+                
+              appNavigation.managePowerUsage
+            
+              </a>
+            </li>
+             
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="/control/reboot-bmc"
+                target="_self"
+              >
+                
+              appNavigation.rebootBmc
+            
+              </a>
+            </li>
+             
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="javascript:void(0)"
+                target="_self"
+              >
+                
+              appNavigation.serverLed
+            
+              </a>
+            </li>
+             
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="/control/server-power-operations"
+                target="_self"
+              >
+                
+              appNavigation.serverPowerOperations
+            
+              </a>
+            </li>
+          </ul>
+        </li>
+         
+        <li
+          class="nav-item"
+        >
+          <button
+            aria-controls="configuration-menu"
+            aria-expanded="false"
+            class="btn btn-link collapsed"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              style="will-change: transform;"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M13.5 8.4v-.8l1-.8c.4-.3.4-.9.2-1.3l-1.2-2c-.2-.3-.5-.5-.9-.5-.1 0-.2 0-.3.1l-1.2.4c-.2-.1-.4-.3-.7-.4l-.3-1.3c0-.5-.4-.8-.9-.8H6.8c-.5 0-.9.3-1 .8l-.2 1.3c-.3.1-.5.2-.7.3L3.7 3h-.3c-.4 0-.7.2-.9.5l-1.2 2c-.2.4-.1.9.3 1.3l.9.9v.8l-.9.7c-.4.3-.5.9-.2 1.3l1.2 2c.1.3.4.5.8.5.1 0 .2 0 .3-.1l1.2-.4c.2.1.4.3.7.4l.3 1.3c.1.5.5.8 1 .8h2.4c.5 0 .9-.3 1-.8l.3-1.3c.2-.1.4-.2.7-.4l1.2.4c.1 0 .2.1.3.1.4 0 .7-.2.9-.5l1.1-2c.2-.4.2-.9-.2-1.3l-1.1-.8zm-.9 3.6l-1.7-.6c-.4.3-.9.6-1.4.8L9.2 14H6.8l-.4-1.8c-.5-.2-.9-.5-1.4-.8l-1.6.6-1.2-2 1.4-1.2c-.1-.5-.1-1.1 0-1.6L2.2 6l1.2-2 1.7.6c.4-.4.9-.6 1.4-.8L6.8 2h2.4l.4 1.8c.5.2.9.5 1.4.8l1.6-.6 1.2 2-1.4 1.2c.1.5.1 1.1 0 1.6l1.4 1.2-1.2 2z"
+              />
+              <path
+                d="M8 11c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3c0 1.6-1.3 3-3 3zm0-5c-1.1 0-2 .8-2 1.9V8c0 1.1.8 2 1.9 2H8c1.1 0 2-.8 2-1.9V8c0-1.1-.8-2-2-2 .1 0 0 0 0 0z"
+              />
+            </svg>
+            
+            appNavigation.configuration
+            
+            <svg
+              aria-hidden="true"
+              class="icon-expand"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              style="will-change: transform;"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8 5l5 5-.7.7L8 6.4l-4.3 4.3L3 10z"
+              />
+            </svg>
+          </button>
+           
+          <ul
+            class="nav-item__nav collapse"
+            id="configuration-menu"
+            style="display: none;"
+          >
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="javascript:void(0)"
+                target="_self"
+              >
+                
+              appNavigation.firmware
+            
+              </a>
+            </li>
+             
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="javascript:void(0)"
+                target="_self"
+              >
+                
+              appNavigation.networkSettings
+            
+              </a>
+            </li>
+             
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="javascript:void(0)"
+                target="_self"
+              >
+                
+              appNavigation.snmpSettings
+            
+              </a>
+            </li>
+          </ul>
+        </li>
+         
+        <li
+          class="nav-item"
+        >
+          <button
+            aria-controls="access-control-menu"
+            aria-expanded="false"
+            class="btn btn-link collapsed"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              style="will-change: transform;"
+              viewBox="0 0 32 32"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M21 2a9 9 0 0 0-9 9 8.87 8.87 0 0 0 .39 2.61L2 24v6h6l10.39-10.39A9 9 0 0 0 30 11.74a8.77 8.77 0 0 0-1.65-6A9 9 0 0 0 21 2zm0 16a7 7 0 0 1-2-.3l-1.15-.35-.85.85-3.18 3.18L12.41 20 11 21.41l1.38 1.38-1.59 1.59L9.41 23 8 24.41l1.38 1.38L7.17 28H4v-3.17L13.8 15l.85-.85-.29-.95a7.14 7.14 0 0 1 3.4-8.44 7 7 0 0 1 10.24 6 6.69 6.69 0 0 1-1.09 4A7 7 0 0 1 21 18z"
+              />
+              <circle
+                cx="22"
+                cy="10"
+                r="2"
+              />
+            </svg>
+            
+            appNavigation.accessControl
+            
+            <svg
+              aria-hidden="true"
+              class="icon-expand"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              style="will-change: transform;"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8 5l5 5-.7.7L8 6.4l-4.3 4.3L3 10z"
+              />
+            </svg>
+          </button>
+           
+          <ul
+            class="nav-item__nav collapse"
+            id="access-control-menu"
+            style="display: none;"
+          >
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="javascript:void(0)"
+                target="_self"
+              >
+                
+              appNavigation.ldap
+            
+              </a>
+            </li>
+             
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="/access-control/local-user-management"
+                target="_self"
+              >
+                
+              appNavigation.localUserManagement
+            
+              </a>
+            </li>
+             
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="/access-control/ssl-certificates"
+                target="_self"
+              >
+                
+              appNavigation.sslCertificates
+            
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </nav>
+  </div>
+   
+  <!---->
+</div>
+`;
+
+exports[`AppNavigation.vue should render with nav-container open 1`] = `
+<div>
+  <div
+    class="nav-container"
+  >
+    <nav
+      aria-label="appNavigation.primaryNavigation"
+    >
+      <ul
+        class="nav flex-column"
+      >
+        <li
+          class="nav-item"
+        >
+          <a
+            class="nav-link"
+            href="/"
+            target="_self"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              style="will-change: transform;"
+              viewBox="0 0 32 32"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M4 2H2v26a2 2 0 0 0 2 2h26v-2H4z"
+              />
+              <path
+                d="M30 9h-7v2h3.59L19 18.59l-4.29-4.3a1 1 0 0 0-1.42 0L6 21.59 7.41 23 14 16.41l4.29 4.3a1 1 0 0 0 1.42 0l8.29-8.3V16h2z"
+              />
+            </svg>
+            
+          appNavigation.overview
+        
+          </a>
+        </li>
+         
+        <li
+          class="nav-item"
+        >
+          <button
+            aria-controls="health-menu"
+            aria-expanded="false"
+            class="btn btn-link collapsed"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              style="will-change: transform;"
+              viewBox="0 0 32 32"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M23 27.18l-2.59-2.59L19 26l4 4 7-7-1.41-1.41L23 27.18z"
+              />
+              <circle
+                cx="11"
+                cy="8"
+                r="1"
+              />
+              <circle
+                cx="11"
+                cy="16"
+                r="1"
+              />
+              <circle
+                cx="11"
+                cy="24"
+                r="1"
+              />
+              <path
+                d="M24 3H8a2 2 0 0 0-2 2v22a2 2 0 0 0 2 2h8v-2H8v-6h18V5a2 2 0 0 0-2-2zm0 16H8v-6h16zm0-8H8V5h16z"
+              />
+            </svg>
+            
+            appNavigation.health
+            
+            <svg
+              aria-hidden="true"
+              class="icon-expand"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              style="will-change: transform;"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8 5l5 5-.7.7L8 6.4l-4.3 4.3L3 10z"
+              />
+            </svg>
+          </button>
+           
+          <ul
+            class="nav-item__nav collapse"
+            id="health-menu"
+            style="display: none;"
+          >
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="javascript:void(0)"
+                target="_self"
+              >
+                
+              appNavigation.eventLog
+            
+              </a>
+            </li>
+             
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="javascript:void(0)"
+                target="_self"
+              >
+                
+              appNavigation.hardwareStatus
+            
+              </a>
+            </li>
+             
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="/health/sensors"
+                target="_self"
+              >
+                
+              appNavigation.sensors
+            
+              </a>
+            </li>
+          </ul>
+        </li>
+         
+        <li
+          class="nav-item"
+        >
+          <button
+            aria-controls="control-menu"
+            aria-expanded="false"
+            class="btn btn-link collapsed"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              style="will-change: transform;"
+              viewBox="0 0 32 32"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M30 7h-5.1a5 5 0 0 0-9.8 0H2v2h13.1a5 5 0 0 0 9.8 0H30zm-10 4a3 3 0 1 1 3-3 3 3 0 0 1-3 3zM2 25h5.1a5 5 0 0 0 9.8 0H30v-2H16.9a5 5 0 0 0-9.8 0H2zm7-1a3 3 0 1 1 3 3 3 3 0 0 1-3-3z"
+              />
+            </svg>
+            
+            appNavigation.control
+            
+            <svg
+              aria-hidden="true"
+              class="icon-expand"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              style="will-change: transform;"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8 5l5 5-.7.7L8 6.4l-4.3 4.3L3 10z"
+              />
+            </svg>
+          </button>
+           
+          <ul
+            class="nav-item__nav collapse"
+            id="control-menu"
+            style="display: none;"
+          >
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="javascript:void(0)"
+                target="_self"
+              >
+                
+              appNavigation.managePowerUsage
+            
+              </a>
+            </li>
+             
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="/control/reboot-bmc"
+                target="_self"
+              >
+                
+              appNavigation.rebootBmc
+            
+              </a>
+            </li>
+             
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="javascript:void(0)"
+                target="_self"
+              >
+                
+              appNavigation.serverLed
+            
+              </a>
+            </li>
+             
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="/control/server-power-operations"
+                target="_self"
+              >
+                
+              appNavigation.serverPowerOperations
+            
+              </a>
+            </li>
+          </ul>
+        </li>
+         
+        <li
+          class="nav-item"
+        >
+          <button
+            aria-controls="configuration-menu"
+            aria-expanded="false"
+            class="btn btn-link collapsed"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              style="will-change: transform;"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M13.5 8.4v-.8l1-.8c.4-.3.4-.9.2-1.3l-1.2-2c-.2-.3-.5-.5-.9-.5-.1 0-.2 0-.3.1l-1.2.4c-.2-.1-.4-.3-.7-.4l-.3-1.3c0-.5-.4-.8-.9-.8H6.8c-.5 0-.9.3-1 .8l-.2 1.3c-.3.1-.5.2-.7.3L3.7 3h-.3c-.4 0-.7.2-.9.5l-1.2 2c-.2.4-.1.9.3 1.3l.9.9v.8l-.9.7c-.4.3-.5.9-.2 1.3l1.2 2c.1.3.4.5.8.5.1 0 .2 0 .3-.1l1.2-.4c.2.1.4.3.7.4l.3 1.3c.1.5.5.8 1 .8h2.4c.5 0 .9-.3 1-.8l.3-1.3c.2-.1.4-.2.7-.4l1.2.4c.1 0 .2.1.3.1.4 0 .7-.2.9-.5l1.1-2c.2-.4.2-.9-.2-1.3l-1.1-.8zm-.9 3.6l-1.7-.6c-.4.3-.9.6-1.4.8L9.2 14H6.8l-.4-1.8c-.5-.2-.9-.5-1.4-.8l-1.6.6-1.2-2 1.4-1.2c-.1-.5-.1-1.1 0-1.6L2.2 6l1.2-2 1.7.6c.4-.4.9-.6 1.4-.8L6.8 2h2.4l.4 1.8c.5.2.9.5 1.4.8l1.6-.6 1.2 2-1.4 1.2c.1.5.1 1.1 0 1.6l1.4 1.2-1.2 2z"
+              />
+              <path
+                d="M8 11c-1.7 0-3-1.3-3-3s1.3-3 3-3 3 1.3 3 3c0 1.6-1.3 3-3 3zm0-5c-1.1 0-2 .8-2 1.9V8c0 1.1.8 2 1.9 2H8c1.1 0 2-.8 2-1.9V8c0-1.1-.8-2-2-2 .1 0 0 0 0 0z"
+              />
+            </svg>
+            
+            appNavigation.configuration
+            
+            <svg
+              aria-hidden="true"
+              class="icon-expand"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              style="will-change: transform;"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8 5l5 5-.7.7L8 6.4l-4.3 4.3L3 10z"
+              />
+            </svg>
+          </button>
+           
+          <ul
+            class="nav-item__nav collapse"
+            id="configuration-menu"
+            style="display: none;"
+          >
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="javascript:void(0)"
+                target="_self"
+              >
+                
+              appNavigation.firmware
+            
+              </a>
+            </li>
+             
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="javascript:void(0)"
+                target="_self"
+              >
+                
+              appNavigation.networkSettings
+            
+              </a>
+            </li>
+             
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="javascript:void(0)"
+                target="_self"
+              >
+                
+              appNavigation.snmpSettings
+            
+              </a>
+            </li>
+          </ul>
+        </li>
+         
+        <li
+          class="nav-item"
+        >
+          <button
+            aria-controls="access-control-menu"
+            aria-expanded="false"
+            class="btn btn-link collapsed"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              style="will-change: transform;"
+              viewBox="0 0 32 32"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M21 2a9 9 0 0 0-9 9 8.87 8.87 0 0 0 .39 2.61L2 24v6h6l10.39-10.39A9 9 0 0 0 30 11.74a8.77 8.77 0 0 0-1.65-6A9 9 0 0 0 21 2zm0 16a7 7 0 0 1-2-.3l-1.15-.35-.85.85-3.18 3.18L12.41 20 11 21.41l1.38 1.38-1.59 1.59L9.41 23 8 24.41l1.38 1.38L7.17 28H4v-3.17L13.8 15l.85-.85-.29-.95a7.14 7.14 0 0 1 3.4-8.44 7 7 0 0 1 10.24 6 6.69 6.69 0 0 1-1.09 4A7 7 0 0 1 21 18z"
+              />
+              <circle
+                cx="22"
+                cy="10"
+                r="2"
+              />
+            </svg>
+            
+            appNavigation.accessControl
+            
+            <svg
+              aria-hidden="true"
+              class="icon-expand"
+              focusable="false"
+              height="16"
+              preserveAspectRatio="xMidYMid meet"
+              style="will-change: transform;"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M8 5l5 5-.7.7L8 6.4l-4.3 4.3L3 10z"
+              />
+            </svg>
+          </button>
+           
+          <ul
+            class="nav-item__nav collapse"
+            id="access-control-menu"
+            style="display: none;"
+          >
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="javascript:void(0)"
+                target="_self"
+              >
+                
+              appNavigation.ldap
+            
+              </a>
+            </li>
+             
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="/access-control/local-user-management"
+                target="_self"
+              >
+                
+              appNavigation.localUserManagement
+            
+              </a>
+            </li>
+             
+            <li
+              class="nav-item"
+            >
+              <a
+                class="nav-link"
+                href="/access-control/ssl-certificates"
+                target="_self"
+              >
+                
+              appNavigation.sslCertificates
+            
+              </a>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </nav>
+  </div>
+   
+  <!---->
+</div>
+`;