From 768b047e89f419deca3ddd00af7cb75209de97b6 Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Fri, 30 Aug 2019 10:08:13 +0200
Subject: Move to nuxtjs

---
 components/NavBar.vue | 203 ++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 203 insertions(+)
 create mode 100644 components/NavBar.vue

(limited to 'components/NavBar.vue')

diff --git a/components/NavBar.vue b/components/NavBar.vue
new file mode 100644
index 0000000..e9fa1f0
--- /dev/null
+++ b/components/NavBar.vue
@@ -0,0 +1,203 @@
+<template>
+  <nav :class="navbarClass">
+    <div class="title">
+      <img v-if="logo" class="logo" :src="logo" alt="ZHR" />
+      <router-link :class="titleClass" to="/">{{ title }}</router-link>
+    </div>
+    <div class="space"></div>
+    <button @click="toggleMenu" class="menu-toggler">Menu</button>
+    <ul :class="linksClass" @click="toggleMenu">
+      <!-- Loop for generating links -->
+      <NavLink v-for="route in routes" :key="route.path" :link="route.path" :name="route.name"></NavLink>
+      <NavLink
+        v-for="route in externalRoutes"
+        :key="route.path"
+        :link="route.path"
+        :name="route.name"
+        :external="true"
+      ></NavLink>
+    </ul>
+  </nav>
+</template>
+
+<script>
+import NavLink from "./NavLink";
+
+export default {
+  components: {
+    NavLink
+  },
+  props: {
+    routes: Array,
+    externalRoutes: Array,
+    title: String,
+    logo: String
+  },
+  computed: {
+    titleClass() {
+      if (this.logo) {
+        return "title-name margin";
+      }
+      return "title-name";
+    },
+    navbarClass() {
+      if (this.menuCollapsed) {
+        return "navbar";
+      }
+      return "navbar menu-open";
+    },
+    linksClass() {
+      if (this.menuCollapsed) {
+        return "links";
+      }
+      return "links show";
+    }
+  },
+  data: function() {
+    return {
+      menuCollapsed: true
+    };
+  },
+  methods: {
+    toggleMenu() {
+      this.menuCollapsed = !this.menuCollapsed;
+    },
+    linksClick() {
+      this.toggleMenu();
+    }
+  }
+};
+</script>
+
+<style scoped>
+.navbar {
+  font-family: "Roboto Slab", serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #181818;
+
+  box-sizing: border-box;
+  width: 100%;
+  height: 80px;
+
+  background: #ffffff;
+  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1);
+
+  padding: 0 200px 0 200px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.space {
+  flex: 1;
+  max-width: 500px;
+}
+
+.title {
+  font-size: 30px;
+  flex-shrink: 0;
+
+  display: flex;
+}
+
+.title-name {
+  text-decoration: none;
+  color: #181818;
+  padding: 10px;
+}
+
+.title-name.margin {
+  margin-left: 100px;
+}
+
+.links {
+  display: flex;
+  flex-direction: row;
+  padding: 0;
+}
+
+.logo {
+  position: absolute;
+  top: 0;
+  z-index: 1;
+}
+
+.menu-toggler {
+  display: none;
+}
+
+@media (max-width: 1300px) {
+  .navbar {
+    padding: 0 50px 0 50px;
+  }
+}
+
+@media (max-width: 900px) {
+  .navbar.menu-open {
+    box-shadow: none;
+  }
+
+  .title {
+    font-size: 24px;
+  }
+
+  .links {
+    position: absolute;
+    /* width: 100vw; */
+
+    margin-top: 80px;
+
+    flex-direction: column;
+    display: none;
+  }
+
+  .menu-toggler {
+    display: block;
+  }
+
+  .links.show {
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    margin-bottom: 0;
+    padding: 50px 0;
+
+    width: 100%;
+    left: 0;
+    top: 0;
+
+    background: #fff;
+  }
+
+  .links.show li {
+    padding: 2vh;
+    font-size: 30px;
+  }
+}
+
+@media (max-width: 500px) {
+  .navbar {
+    padding: 0 10px 0 10px;
+  }
+
+  .logo {
+    width: 65px;
+  }
+
+  .title-name {
+    font-size: 20px;
+  }
+
+  .title-name.margin {
+    margin-left: 70px;
+  }
+
+  .links.show {
+    height: calc(100% - 80px);
+  }
+}
+</style>
\ No newline at end of file
-- 
cgit 1.4.1


From 51b96f0c0bc9e00477e24d1d799dba0e3a519f24 Mon Sep 17 00:00:00 2001
From: Patryk Niedźwiedziński <pniedzwiedzinski19@gmail.com>
Date: Fri, 30 Aug 2019 22:31:54 +0200
Subject: Add NavBar test

---
 components/NavBar.vue                   | 26 ++++++++++-----------
 test/NavBar.test.js                     | 27 ++++++++++++++++++++++
 test/NavLink.test.js                    | 12 ++++++++--
 test/__snapshots__/NavBar.test.js.snap  | 40 +++++++++++++++++++++++++++++++++
 test/__snapshots__/NavLink.test.js.snap | 14 ++++++++++++
 5 files changed, 104 insertions(+), 15 deletions(-)
 create mode 100644 test/NavBar.test.js
 create mode 100644 test/__snapshots__/NavBar.test.js.snap
 create mode 100644 test/__snapshots__/NavLink.test.js.snap

(limited to 'components/NavBar.vue')

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>
+`;
-- 
cgit 1.4.1