Merge pull request #1183 from gradido/Error-handling-in-GddTransactionList

Error handling in GddTransactionList.vue

frontend/src/locales/de.json

@@ -45,9 +45,11 @@
   },
   "error": {
     "change-password": "Fehler beim Ändern des Passworts",
+    "empty-transactionlist": "Es gab einen Fehler mit der Übermittlung der Anzahl deiner Transaktionen.",
     "error": "Fehler",
     "no-account": "Leider konnten wir keinen Account finden mit diesen Daten!",
     "no-email-verify": "Die Email wurde noch nicht bestätigt, bitte überprüfe deine Emails und klicke auf den Aktivierungslink!",
+    "no-transactionlist": "Es gab leider einen Fehler. Es wurden keine Transaktionen vom Server übermittelt",
     "session-expired": "Die Sitzung wurde aus Sicherheitsgründen beendet."
   },
   "form": {

frontend/src/locales/en.json

@@ -45,9 +45,11 @@
   },
   "error": {
     "change-password": "Error while changing password",
+    "empty-transactionlist": "There was an error with the transmission of the number of your transactions.",
     "error": "Error",
     "no-account": "Unfortunately we could not find an account to the given data!",
     "no-email-verify": "Your email is not activated yet, please check your emails and click the activation link!",
+    "no-transactionlist": "Unfortunately, there was an error. No transactions have been sent from the server.",
     "session-expired": "The session was closed for security reasons."
   },
   "form": {

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

@@ -36,9 +36,42 @@ describe('GddTransactionList', () => {
       expect(wrapper.find('div.gdd-transaction-list').exists()).toBeTruthy()
     })
 
+    describe('no transactions from server', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({
+          transactions: false,
+        })
+      })
+      it('shows error no transaction list', () => {
+        expect(wrapper.find('div.test-no-transactionlist').text()).toContain(
+          'error.no-transactionlist',
+        )
+      })
+    })
+    describe('0 transactions from server', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({
+          transactions: [],
+          transactionCount: 0,
+        })
+      })
+      it('Transactions Array is empty, 0 transactions', () => {
+        expect(wrapper.find('div.test-empty-transactionlist').text()).toContain(
+          'error.empty-transactionlist',
+        )
+      })
+    })
+
     describe('without any properties', () => {
-      it('renders text saying that there are no transactions', () => {
-        expect(wrapper.find('div.gdd-transaction-list').text()).toBe('transaction.nullTransactions')
+      it('renders text saying that there are error.empty-transactionlist ', () => {
+        expect(wrapper.find('div.gdd-transaction-list').text()).toContain(
+          'error.empty-transactionlist',
+        )
+      })
+      it('renders text saying that there are no transaction.nullTransactions', () => {
+        expect(wrapper.find('div.gdd-transaction-list').text()).toContain(
+          'transaction.nullTransactions',
+        )
       })
     })
 

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

@@ -1,6 +1,16 @@
 <template>
   <div class="gdd-transaction-list">
     <div class="list-group">
+      <div v-if="!transactions" class="test-no-transactionlist text-right">
+        <b-icon icon="exclamation-triangle" class="mr-2" style="color: red"></b-icon>
+        <small>
+          {{ $t('error.no-transactionlist') }}
+        </small>
+      </div>
+      <div v-if="!transactionCount" class="test-empty-transactionlist text-right">
+        <b-icon icon="exclamation-triangle" class="mr-2" style="color: red"></b-icon>
+        <small>{{ $t('error.empty-transactionlist') }}</small>
+      </div>
       <div
         v-for="{ decay, transactionId, type, date, balance, name, memo } in transactions"
         :key="transactionId"