Merge pull request #396 from gradido/pending-balance

feat: Dash is Shown When Balance is Loading

frontend/src/components/SidebarPlugin/SideBar.spec.js

@@ -0,0 +1,117 @@
+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()
+      })
+
+      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', () => {
+      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('emits logout when logout is clicked', async () => {
+          wrapper.findAll('li').at(1).find('a').trigger('click')
+          await wrapper.vm.$nextTick()
+          expect(wrapper.emitted('logout')).toEqual([[]])
+        })
+      })
+    })
+  })
+})

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 {

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>
@@ -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 = true
         // what to do when loading balance fails?
       }
     },

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" :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>
@@ -78,6 +83,10 @@ export default {
       default: () => [],
     },
     transactionCount: { type: Number, default: 0 },
+    pending: {
+      type: Boolean,
+      default: true,
+    },
   },
   computed: {
     showContext() {

frontend/src/views/Pages/AccountOverview/GddStatus.spec.js

@@ -24,6 +24,23 @@ describe('GddStatus', () => {
       wrapper = Wrapper()
     })
 
+    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')
+      })
+    })
+
+    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')
       })
@@ -33,3 +50,4 @@ describe('GddStatus', () => {
       })
     })
   })
+})

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>