Add NavBar test

5 files changed, 104 insertions, 15 deletions

diff --git a/components/NavBar.vue b/components/NavBar.vue
index e9fa1f0..e564fb0 100644
--- a/components/NavBar.vue
+++ b/components/NavBar.vue
@@ -2,7 +2,7 @@
   <nav :class="navbarClass">
     <div class="title">
       <img v-if="logo" class="logo" :src="logo" alt="ZHR" />
-      <router-link :class="titleClass" to="/">{{ title }}</router-link>
+      <nuxt-link :class="titleClass" to="/">{{ title }}</nuxt-link>
     </div>
     <div class="space"></div>
     <button @click="toggleMenu" class="menu-toggler">Menu</button>
@@ -21,7 +21,7 @@
 </template>
 
 <script>
-import NavLink from "./NavLink";
+import NavLink from './NavLink'
 
 export default {
   components: {
@@ -36,42 +36,42 @@ export default {
   computed: {
     titleClass() {
       if (this.logo) {
-        return "title-name margin";
+        return 'title-name margin'
       }
-      return "title-name";
+      return 'title-name'
     },
     navbarClass() {
       if (this.menuCollapsed) {
-        return "navbar";
+        return 'navbar'
       }
-      return "navbar menu-open";
+      return 'navbar menu-open'
     },
     linksClass() {
       if (this.menuCollapsed) {
-        return "links";
+        return 'links'
       }
-      return "links show";
+      return 'links show'
     }
   },
   data: function() {
     return {
       menuCollapsed: true
-    };
+    }
   },
   methods: {
     toggleMenu() {
-      this.menuCollapsed = !this.menuCollapsed;
+      this.menuCollapsed = !this.menuCollapsed
     },
     linksClick() {
-      this.toggleMenu();
+      this.toggleMenu()
     }
   }
-};
+}
 </script>
 
 <style scoped>
 .navbar {
-  font-family: "Roboto Slab", serif;
+  font-family: 'Roboto Slab', serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   color: #181818;
diff --git a/test/NavBar.test.js b/test/NavBar.test.js
new file mode 100644
index 0000000..88bc5db
--- /dev/null
+++ b/test/NavBar.test.js
@@ -0,0 +1,27 @@
+import { shallowMount } from '@vue/test-utils'
+import NavBar from '../components/NavBar'
+
+describe('NavBar', () => {
+  // Now mount the component and you have the wrapper
+  const wrapper = shallowMount(NavBar)
+
+  wrapper.setProps({
+    title: 'Title',
+    routes: [
+      {
+        path: '/',
+        name: 'Home'
+      }
+    ]
+  })
+
+  it('check title', () => {
+    expect(wrapper.html()).toContain(
+      '<nuxt-link to="/" class="title-name">Title</nuxt-link>'
+    )
+  })
+
+  it('match snapshot', () => {
+    expect(wrapper.element).toMatchSnapshot()
+  })
+})
diff --git a/test/NavLink.test.js b/test/NavLink.test.js
index 8a1f144..aeb16d0 100644
--- a/test/NavLink.test.js
+++ b/test/NavLink.test.js
@@ -1,9 +1,9 @@
-import { mount } from '@vue/test-utils'
+import { shallowMount } from '@vue/test-utils'
 import NavLink from '../components/NavLink'
 
 describe('NavLink', () => {
   // Now mount the component and you have the wrapper
-  const wrapper = mount(NavLink)
+  const wrapper = shallowMount(NavLink)
 
   wrapper.setProps({ link: '/link', name: 'Link' })
 
@@ -12,4 +12,12 @@ describe('NavLink', () => {
       `<li class="navlink"><nuxt-link class="link" to="/link">Link</nuxt-link></li>`
     )
   })
+
+  it('check text', () => {
+    expect(wrapper.text()).toBe('Link')
+  })
+
+  it('match snapshot', () => {
+    expect(wrapper.element).toMatchSnapshot()
+  })
 })
diff --git a/test/__snapshots__/NavBar.test.js.snap b/test/__snapshots__/NavBar.test.js.snap
new file mode 100644
index 0000000..fb90c28
--- /dev/null
+++ b/test/__snapshots__/NavBar.test.js.snap
@@ -0,0 +1,40 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavBar match snapshot 1`] = `
+<nav
+  class="navbar"
+>
+  <div
+    class="title"
+  >
+    <!---->
+     
+    <nuxt-link
+      class="title-name"
+      to="/"
+    >
+      Title
+    </nuxt-link>
+  </div>
+   
+  <div
+    class="space"
+  />
+   
+  <button
+    class="menu-toggler"
+  >
+    Menu
+  </button>
+   
+  <ul
+    class="links"
+  >
+    <navlink-stub
+      link="/"
+      name="Home"
+    />
+     
+  </ul>
+</nav>
+`;
diff --git a/test/__snapshots__/NavLink.test.js.snap b/test/__snapshots__/NavLink.test.js.snap
new file mode 100644
index 0000000..122e5c8
--- /dev/null
+++ b/test/__snapshots__/NavLink.test.js.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`NavLink match snapshot 1`] = `
+<li
+  class="navlink"
+>
+  <nuxt-link
+    class="link"
+    to="/link"
+  >
+    Link
+  </nuxt-link>
+</li>
+`;