From b89ffde13b3abcbfdf4475bae3256a71923e5472 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 11 May 2021 18:52:29 +0200
Subject: [PATCH 1/6] em-dash is shown while balance is loaded

---
 .../src/components/SidebarPlugin/SideBar.vue  |  6 ++++-
 .../src/views/Layout/DashboardLayout_gdd.vue  | 25 +++++++++++--------
 frontend/src/views/Pages/AccountOverview.vue  | 11 +++++++-
 .../views/Pages/AccountOverview/GddStatus.vue |  8 ++++--
 4 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/frontend/src/components/SidebarPlugin/SideBar.vue b/frontend/src/components/SidebarPlugin/SideBar.vue
index 9e0885d3f..74c5fd108 100755
--- a/frontend/src/components/SidebarPlugin/SideBar.vue
+++ b/frontend/src/components/SidebarPlugin/SideBar.vue
@@ -10,7 +10,7 @@
         <img :src="logo" class="navbar-brand-img" alt="..." />
       </div>
       <b-row class="text-center">
-        <b-col>{{ $n(balance) }} GDD</b-col>
+        <b-col>{{ pending ? '—' : $n(balance) }} GDD</b-col>
       </b-row>
       <slot name="mobile-right">
         <ul class="nav align-items-center d-md-none">
@@ -93,6 +93,10 @@ export default {
       type: Number,
       default: 0,
     },
+    pending: {
+      type: Boolean,
+      default: true,
+    },
   },
   provide() {
     return {
diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index 291c8762b..a39040190 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="wrapper">
     <notifications></notifications>
-    <side-bar @logout="logout" :balance="balance">
+    <side-bar @logout="logout" :balance="balance" :pending="pending">
       <template slot="links">
         <b-nav-item href="#!" to="/overview">
           <b-nav-text class="p-0 text-lg text-muted">{{ $t('send') }}</b-nav-text>
@@ -10,15 +10,15 @@
           <b-nav-text class="p-0 text-lg text-muted">{{ $t('transactions') }}</b-nav-text>
         </b-nav-item>
         <!--
-        <b-nav-item href="#!" to="/profile">
-          <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.my-profil') }}</b-nav-text>
-        </b-nav-item>       
-        <b-nav-item href="#!" to="/profileedit">
-          <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.settings') }}</b-nav-text>
-        </b-nav-item>
-        <b-nav-item href="#!" to="/activity">
-          <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.activity') }}</b-nav-text>
-        </b-nav-item>
+             <b-nav-item href="#!" to="/profile">
+             <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.my-profil') }}</b-nav-text>
+             </b-nav-item>       
+             <b-nav-item href="#!" to="/profileedit">
+             <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.settings') }}</b-nav-text>
+             </b-nav-item>
+             <b-nav-item href="#!" to="/activity">
+             <b-nav-text class="p-0 text-lg text-muted">{{ $t('site.navbar.activity') }}</b-nav-text>
+             </b-nav-item>
         -->
       </template>
     </side-bar>
@@ -33,6 +33,7 @@
             :gdt-balance="GdtBalance"
             :transactions="transactions"
             :transactionCount="transactionCount"
+            :pending="pending"
             @update-balance="updateBalance"
             @update-transactions="updateTransactions"
           ></router-view>
@@ -83,6 +84,7 @@ export default {
       transactions: [],
       bookedBalance: 0,
       transactionCount: 0,
+      pending: true,
     }
   },
   methods: {
@@ -99,6 +101,7 @@ export default {
       this.$router.push('/login')
     },
     async updateTransactions() {
+      this.pending = true
       const result = await communityAPI.transactions(this.$store.state.sessionId)
       if (result.success) {
         this.GdtBalance = Number(result.result.data.gdtSum)
@@ -106,7 +109,9 @@ export default {
         this.balance = Number(result.result.data.decay)
         this.bookedBalance = Number(result.result.data.balance)
         this.transactionCount = result.result.data.count
+        this.pending = false
       } else {
+        this.pending = false
         // what to do when loading balance fails?
       }
     },
diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index 41dcc7848..f2fb14fa4 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -2,7 +2,12 @@
   <div>
     <base-header class="pb-4 pt-2 bg-transparent"></base-header>
     <b-container fluid class="p-2 mt-5">
-      <gdd-status v-if="showTransactionList" :balance="balance" :gdt-balance="GdtBalance" />
+      <gdd-status
+        v-if="showTransactionList"
+        :pending="pending"
+        :balance="balance"
+        :gdt-balance="GdtBalance"
+      />
       <br />
       <gdd-send
         :balance="balance"
@@ -50,6 +55,10 @@ export default {
       default: () => [],
     },
     transactionCount: { type: Number, default: 0 },
+    pending: {
+      type: Boolean,
+      default: true,
+    },
   },
   methods: {
     toggleShowList(bool) {
diff --git a/frontend/src/views/Pages/AccountOverview/GddStatus.vue b/frontend/src/views/Pages/AccountOverview/GddStatus.vue
index 8698d1fdc..f1e24b09b 100644
--- a/frontend/src/views/Pages/AccountOverview/GddStatus.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddStatus.vue
@@ -8,7 +8,7 @@
           class="mb-4 h1"
           style="background-color: #ebebeba3 !important"
         >
-          {{ $n(balance) }} GDD
+          {{ pending ? '—' : $n(balance) }} GDD
         </stats-card>
       </b-col>
       <b-col>
@@ -18,7 +18,7 @@
           class="mb-4 h1"
           style="background-color: #ebebeba3 !important"
         >
-          {{ $n(GdtBalance) }} GDT
+          {{ pending ? '—' : $n(GdtBalance) }} GDT
         </stats-card>
       </b-col>
     </b-row>
@@ -31,6 +31,10 @@ export default {
   props: {
     balance: { type: Number, default: 0 },
     GdtBalance: { type: Number, default: 0 },
+    pending: {
+      type: Boolean,
+      default: true,
+    },
   },
 }
 </script>

From 35f9c4a5b4d3633f4c9cbf33fbf87e407eabaa63 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 11 May 2021 18:58:12 +0200
Subject: [PATCH 2/6] test that em-dash is shown while balance is loading

---
 .../Pages/AccountOverview/GddStatus.spec.js   | 26 ++++++++++++++++---
 1 file changed, 22 insertions(+), 4 deletions(-)

diff --git a/frontend/src/views/Pages/AccountOverview/GddStatus.spec.js b/frontend/src/views/Pages/AccountOverview/GddStatus.spec.js
index 9adc3b4ca..b414f4e93 100644
--- a/frontend/src/views/Pages/AccountOverview/GddStatus.spec.js
+++ b/frontend/src/views/Pages/AccountOverview/GddStatus.spec.js
@@ -24,12 +24,30 @@ describe('GddStatus', () => {
       wrapper = Wrapper()
     })
 
-    it('it displays the ammount of GDD', () => {
-      expect(wrapper.findAll('div.card-body').at(0).text()).toEqual('1234 GDD')
+    describe('balance is loading', () => {
+      it('it displays em-dash as the ammount of GDD', () => {
+        expect(wrapper.findAll('div.card-body').at(0).text()).toEqual('— GDD')
+      })
+
+      it('it displays em-dash as the ammount of GDT', () => {
+        expect(wrapper.findAll('div.card-body').at(1).text()).toEqual('— GDT')
+      })
     })
 
-    it('it displays the ammount of GDT', () => {
-      expect(wrapper.findAll('div.card-body').at(1).text()).toEqual('9876 GDT')
+    describe('balance is loaded', () => {
+      beforeEach(() => {
+        wrapper.setProps({
+          pending: false,
+        })
+      })
+
+      it('it displays the ammount of GDD', () => {
+        expect(wrapper.findAll('div.card-body').at(0).text()).toEqual('1234 GDD')
+      })
+
+      it('it displays the ammount of GDT', () => {
+        expect(wrapper.findAll('div.card-body').at(1).text()).toEqual('9876 GDT')
+      })
     })
   })
 })

From b60537c8984b01228d261e880254b76c9dbaee4a Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 11 May 2021 19:45:16 +0200
Subject: [PATCH 3/6] test sidebar component

---
 .../components/SidebarPlugin/SideBar.spec.js  | 102 ++++++++++++++++++
 1 file changed, 102 insertions(+)
 create mode 100644 frontend/src/components/SidebarPlugin/SideBar.spec.js

diff --git a/frontend/src/components/SidebarPlugin/SideBar.spec.js b/frontend/src/components/SidebarPlugin/SideBar.spec.js
new file mode 100644
index 000000000..f15e3ab0c
--- /dev/null
+++ b/frontend/src/components/SidebarPlugin/SideBar.spec.js
@@ -0,0 +1,102 @@
+import { mount, RouterLinkStub } from '@vue/test-utils'
+import SideBar from './SideBar'
+
+const localVue = global.localVue
+
+describe('SideBar', () => {
+  let wrapper
+
+  const stubs = {
+    RouterLink: RouterLinkStub,
+  }
+
+  const propsData = {
+    balance: 1234.56,
+  }
+
+  const mocks = {
+    $store: {
+      state: {
+        email: 'test@example.org',
+      },
+    },
+    $i18n: {
+      locale: 'en',
+    },
+    $t: jest.fn((t) => t),
+    $n: jest.fn((n) => n),
+  }
+
+  const Wrapper = () => {
+    return mount(SideBar, { localVue, mocks, stubs, propsData })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('#sidenav-main').exists()).toBeTruthy()
+    })
+
+    describe('balance', () => {
+      it('shows em-dash as balance while loading', () => {
+        expect(wrapper.find('div.row.text-center').text()).toBe('— GDD')
+      })
+
+      it('shows the when loaded', async () => {
+        wrapper.setProps({
+          pending: false,
+        })
+        await wrapper.vm.$nextTick()
+        expect(wrapper.find('div.row.text-center').text()).toBe('1234.56 GDD')
+      })
+    })
+
+    describe('navbar button', () => {
+      it('has a navbar button', () => {
+        expect(wrapper.find('button.navbar-toggler').exists()).toBeTruthy()
+      })
+    })
+
+    describe('static menu items', () => {
+      describe("member's area", () => {
+        it('has a link to the elopage', () => {
+          expect(wrapper.findAll('li').at(0).text()).toBe('members_area')
+        })
+
+        it('links to the elopage', () => {
+          expect(wrapper.findAll('li').at(0).find('a').attributes('href')).toBe(
+            'https://elopage.com/s/gradido/sign_in?locale=en',
+          )
+        })
+
+        describe('with locale="de"', () => {
+          beforeEach(() => {
+            mocks.$i18n.locale = 'de'
+          })
+
+          it('links to the German elopage when locale is set to de', () => {
+            expect(wrapper.findAll('li').at(0).find('a').attributes('href')).toBe(
+              'https://elopage.com/s/gradido/sign_in?locale=de',
+            )
+          })
+        })
+      })
+
+      describe('logout', () => {
+        it('has a logout button', () => {
+          expect(wrapper.findAll('li').at(1).text()).toBe('logout')
+        })
+
+        it.skip('emits logout when logout is clicked', async () => {
+          const spy = jest.spyOn(wrapper.vm, 'logout')
+          wrapper.findAll('li').at(1).find('a').trigger('click')
+          await wrapper.vm.$nextTick()
+          expect(spy).toHaveBeenCalled()
+        })
+      })
+    })
+  })
+})

From bb0a0d607cee1347856c5b023fd6c1fc66916ee2 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Tue, 11 May 2021 20:09:32 +0200
Subject: [PATCH 4/6] finish tests for sidebar

---
 .../components/SidebarPlugin/SideBar.spec.js  | 21 ++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/SidebarPlugin/SideBar.spec.js b/frontend/src/components/SidebarPlugin/SideBar.spec.js
index f15e3ab0c..cc56b00f1 100644
--- a/frontend/src/components/SidebarPlugin/SideBar.spec.js
+++ b/frontend/src/components/SidebarPlugin/SideBar.spec.js
@@ -58,6 +58,22 @@ describe('SideBar', () => {
       it('has a navbar button', () => {
         expect(wrapper.find('button.navbar-toggler').exists()).toBeTruthy()
       })
+
+      it('calls showSidebar when clicked', async () => {
+        const spy = jest.spyOn(wrapper.vm.$sidebar, 'displaySidebar')
+        wrapper.find('button.navbar-toggler').trigger('click')
+        await wrapper.vm.$nextTick()
+        expect(spy).toHaveBeenCalledWith(true)
+      })
+    })
+
+    describe('close siedbar', () => {
+      it('calls closeSidebar when clicked', async () => {
+        const spy = jest.spyOn(wrapper.vm.$sidebar, 'displaySidebar')
+        wrapper.find('#sidenav-collapse-main').find('button.navbar-toggler').trigger('click')
+        await wrapper.vm.$nextTick()
+        expect(spy).toHaveBeenCalledWith(false)
+      })
     })
 
     describe('static menu items', () => {
@@ -90,11 +106,10 @@ describe('SideBar', () => {
           expect(wrapper.findAll('li').at(1).text()).toBe('logout')
         })
 
-        it.skip('emits logout when logout is clicked', async () => {
-          const spy = jest.spyOn(wrapper.vm, 'logout')
+        it('emits logout when logout is clicked', async () => {
           wrapper.findAll('li').at(1).find('a').trigger('click')
           await wrapper.vm.$nextTick()
-          expect(spy).toHaveBeenCalled()
+          expect(wrapper.emitted('logout')).toEqual([[]])
         })
       })
     })

From bd106cd90e61bae445ea9cb2fe978491f638a331 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 12 May 2021 13:08:41 +0200
Subject: [PATCH 5/6] do not show cero GDD when loading balance fails

---
 frontend/src/views/Layout/DashboardLayout_gdd.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/views/Layout/DashboardLayout_gdd.vue b/frontend/src/views/Layout/DashboardLayout_gdd.vue
index a39040190..33625cc6a 100755
--- a/frontend/src/views/Layout/DashboardLayout_gdd.vue
+++ b/frontend/src/views/Layout/DashboardLayout_gdd.vue
@@ -111,7 +111,7 @@ export default {
         this.transactionCount = result.result.data.count
         this.pending = false
       } else {
-        this.pending = false
+        this.pending = true
         // what to do when loading balance fails?
       }
     },

From f72f2550aa7fadabe40b933d94c7b3adfa4c2863 Mon Sep 17 00:00:00 2001
From: Moriz Wahl <moriz.wahl@gmx.de>
Date: Wed, 12 May 2021 13:32:43 +0200
Subject: [PATCH 6/6] linting

---
 frontend/src/views/Pages/AccountOverview.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/src/views/Pages/AccountOverview.vue b/frontend/src/views/Pages/AccountOverview.vue
index 2a8fd2c79..12153c8e4 100644
--- a/frontend/src/views/Pages/AccountOverview.vue
+++ b/frontend/src/views/Pages/AccountOverview.vue
@@ -2,7 +2,12 @@
   <div>
     <base-header class="pb-4 pt-2 bg-transparent"></base-header>
     <b-container fluid class="p-2 mt-5">
-      <gdd-status v-if="showContext" :pending="pending" :balance="balance" :gdt-balance="GdtBalance" />
+      <gdd-status
+        v-if="showContext"
+        :pending="pending"
+        :balance="balance"
+        :gdt-balance="GdtBalance"
+      />
       <br />
       <gdd-send :currentTransactionStep="currentTransactionStep">
         <template #transaction-form>