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

1 files changed, 38 insertions, 33 deletions

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);
     });
   });
 });