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/setup.js b/tests/setup.js
deleted file mode 100644
index e3c220a..0000000
--- 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 52e4543..f4e3626 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 @@
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 @@
}
});
- // 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 check if the skip navigation link exists', () => {
- expect(wrapper.get('.link-skip-nav').exists()).to.be.true;
- });
-
- 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('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('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('should exist', () => {
+ expect(wrapper.exists()).toBe(true);
});
- describe('Methods', () => {
+ 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')).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')).toBeTruthy();
+ });
+
+ 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('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 3424f69..58eaae9 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('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 call toggleIsOpen and toggle isNavigationOpen to true', async () => {
- wrapper.vm.isNavigationOpen = false;
- wrapper.vm.toggleIsOpen();
- expect(wrapper.vm.isNavigationOpen).to.be.true;
- });
- });
+ 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('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 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>
+`;
diff --git a/tests/unit/__snapshots__/AppNavigation.spec.js.snap b/tests/unit/__snapshots__/AppNavigation.spec.js.snap
new file mode 100644
index 0000000..f9da583
--- /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>
+`;