included gdd status again.

.github/workflows/test.yml

@@ -212,7 +212,7 @@ jobs:
           report_name: Coverage Frontend
           type: lcov
           result_path: ./coverage/lcov.info
-          min_coverage: 21
+          min_coverage: 27
           token: ${{ github.token }}
   
   ##############################################################################

frontend/src/plugins/dashboard-plugin.js

@@ -1,5 +1,5 @@
 import '@/polyfills'
-import { configure, extend, localize } from 'vee-validate'
+import { configure, extend } from 'vee-validate'
 import GlobalComponents from './globalComponents'
 import GlobalDirectives from './globalDirectives'
 import SideBar from '@/components/SidebarPlugin'
@@ -7,7 +7,7 @@ import SideBar from '@/components/SidebarPlugin'
 import '@/assets/scss/argon.scss'
 import '@/assets/vendor/nucleo/css/nucleo.css'
 import * as rules from 'vee-validate/dist/rules'
-import en, { messages } from 'vee-validate/dist/locale/en.json'
+import { messages } from 'vee-validate/dist/locale/en.json'
 
 import VueQrcodeReader from 'vue-qrcode-reader'
 import VueQrcode from 'vue-qrcode'
@@ -22,8 +22,6 @@ import 'vue-loading-overlay/dist/vue-loading.css'
 
 import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
 
-localize('en', en)
-
 Object.keys(rules).forEach((rule) => {
   extend(rule, {
     ...rules[rule], // copies rule configuration

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

@@ -19,6 +19,10 @@ describe('AccountOverview', () => {
       wrapper = Wrapper()
     })
 
+    it('has a status line', () => {
+      expect(wrapper.find('gdd-status-stub').exists()).toBeTruthy()
+    })
+
     it('has a send field', () => {
       expect(wrapper.find('gdd-send-stub').exists()).toBeTruthy()
     })

frontend/src/views/Pages/AccountOverview.vue

@@ -41,6 +41,7 @@
   </div>
 </template>
 <script>
+import GddStatus from './AccountOverview/GddStatus.vue'
 import GddSend from './AccountOverview/GddSend.vue'
 import GddTransactionList from './AccountOverview/GddTransactionList.vue'
 import GddTransactionListFooter from './AccountOverview/GddTransactionListFooter.vue'
@@ -59,6 +60,7 @@ const EMPTY_TRANSACTION_DATA = {
 export default {
   name: 'Overview',
   components: {
+    GddStatus,
     GddSend,
     GddTransactionList,
     GddTransactionListFooter,

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

@@ -0,0 +1,53 @@
+import { mount } from '@vue/test-utils'
+import GddStatus from './GddStatus'
+
+const localVue = global.localVue
+
+describe('GddStatus', () => {
+  let wrapper
+
+  const mocks = {
+    $n: jest.fn((n) => n),
+  }
+
+  const propsData = {
+    balance: 1234,
+    GdtBalance: 9876,
+  }
+
+  const Wrapper = () => {
+    return mount(GddStatus, { localVue, mocks, propsData })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      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')
+      })
+
+      it('it displays the ammount of GDT', () => {
+        expect(wrapper.findAll('div.card-body').at(1).text()).toEqual('9876 GDT')
+      })
+    })
+  })
+})

frontend/src/views/Pages/AccountOverview/GddStatus.vue

@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <b-row>
+      <b-col>
+        <b-card style="background-color: #ebebeba3 !important">
+          {{ pending ? '—' : $n(balance, 'decimal') }} GDD
+        </b-card>
+      </b-col>
+      <b-col>
+        <b-card class="lg-h2 text-right" style="background-color: #ebebeba3 !important">
+          {{ pending ? '—' : $n(GdtBalance, 'decimal') }} GDT
+        </b-card>
+      </b-col>
+    </b-row>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'GddStatus',
+  props: {
+    balance: { type: Number, default: 0 },
+    GdtBalance: { type: Number, default: 0 },
+    pending: {
+      type: Boolean,
+      default: true,
+    },
+  },
+}
+</script>