From 1813b7b434515f68830e749b2cb2754ebabc2379 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 9 Dec 2021 11:27:29 +0100
Subject: [PATCH] tests for Navbar and Sidebar

---
 frontend/src/components/Menu/Navbar.spec.js  | 57 ++++++++++++++++++++
 frontend/src/components/Menu/Navbar.vue      | 10 ++--
 frontend/src/components/Menu/Sidebar.spec.js | 34 ++++++++++++
 frontend/src/components/Menu/Sidebar.vue     |  2 +-
 4 files changed, 99 insertions(+), 4 deletions(-)
 create mode 100644 frontend/src/components/Menu/Navbar.spec.js
 create mode 100644 frontend/src/components/Menu/Sidebar.spec.js

diff --git a/frontend/src/components/Menu/Navbar.spec.js b/frontend/src/components/Menu/Navbar.spec.js
new file mode 100644
index 000000000..fba63d65a
--- /dev/null
+++ b/frontend/src/components/Menu/Navbar.spec.js
@@ -0,0 +1,57 @@
+import { mount } from '@vue/test-utils'
+import Navbar from './Navbar'
+
+const localVue = global.localVue
+
+const propsData = {
+  balance: 1234,
+}
+
+const mocks = {
+  $i18n: {
+    locale: 'en',
+  },
+  $t: jest.fn((t) => t),
+  $store: {
+    state: {
+      hasElopage: true,
+      isAdmin: true,
+    },
+  },
+}
+
+describe('Navbar', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(Navbar, { localVue, propsData, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div.component-navbar').exists()).toBeTruthy()
+    })
+  })
+  // describe('find link admin and evented click', () => {
+  //   beforeEach(async () => {
+  //     await wrapper.find('.test-admin').trigger('click')
+  //   })
+
+  //   it('find link admin and click', () => {
+  //     expect(wrapper.emitted('admin')).toBeTruthy()
+  //     expect(wrapper.emitted('admin')).toEqual([
+  //       [
+  //         {
+  //           email: 'someone@watches.tv',
+  //           amount: 87.23,
+  //           memo: 'Long enough',
+  //         },
+  //       ],
+  //     ])
+  //   })
+  // })
+})
diff --git a/frontend/src/components/Menu/Navbar.vue b/frontend/src/components/Menu/Navbar.vue
index 10e5ec858..3a48aa8b7 100644
--- a/frontend/src/components/Menu/Navbar.vue
+++ b/frontend/src/components/Menu/Navbar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="component-navbar">
     <b-navbar toggleable="lg" type="light" variant="trans">
       <div class="navbar-brand">
         <b-navbar-nav>
@@ -13,7 +13,7 @@
       <div class="d-flex d-xl-none d-lg-none d-md-flex">
         <b-collapse id="nav-collapse" is-nav>
           <b-navbar-nav>
-            <b-nav-item to="/overview">{{ $t('overview') }}</b-nav-item>
+            <b-nav-item to="/overview" class="test-overview">{{ $t('overview') }}</b-nav-item>
             <b-nav-item to="/send">{{ $t('send') }}</b-nav-item>
             <b-nav-item to="/transactions">{{ $t('transactions') }}</b-nav-item>
             <b-nav-item to="/profile">{{ $t('site.navbar.my-profil') }}</b-nav-item>
@@ -22,7 +22,11 @@
               {{ $t('members_area') }}
               <b-badge v-if="!$store.state.hasElopage" pill variant="danger">!</b-badge>
             </b-nav-item>
-            <b-nav-item v-if="$store.state.isAdmin" class="mb-3" @click="$emit('admin')">
+            <b-nav-item
+              v-if="$store.state.isAdmin"
+              class="test-overview mb-3"
+              @click="$emit('admin')"
+            >
               {{ $t('admin_area') }}
             </b-nav-item>
             <b-nav-item class="mb-3" @click="$emit('logout')">
diff --git a/frontend/src/components/Menu/Sidebar.spec.js b/frontend/src/components/Menu/Sidebar.spec.js
new file mode 100644
index 000000000..4a5b8f930
--- /dev/null
+++ b/frontend/src/components/Menu/Sidebar.spec.js
@@ -0,0 +1,34 @@
+import { mount } from '@vue/test-utils'
+import Sidebar from './Sidebar.vue'
+
+const localVue = global.localVue
+
+describe('Sidebar', () => {
+  let wrapper
+
+  const mocks = {
+    $i18n: {
+      locale: 'en',
+    },
+    $t: jest.fn((t) => t),
+    $store: {
+      state: {
+        hasElopage: true,
+        isAdmin: true,
+      },
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(Sidebar, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+    it('renders the component', () => {
+      expect(wrapper.find('div#component-sidebar').exists()).toBeTruthy()
+    })
+  })
+})
diff --git a/frontend/src/components/Menu/Sidebar.vue b/frontend/src/components/Menu/Sidebar.vue
index 1072c6709..c9f1356a6 100644
--- a/frontend/src/components/Menu/Sidebar.vue
+++ b/frontend/src/components/Menu/Sidebar.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div id="component-sidebar">
     <div class="px-3 py-2">
       <p></p>
       <div class="mb-6">