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, 26 insertions, 18 deletions

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