From 69a6566c4b394b33d9cc18b817de652dc5d99acd Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Wed, 8 Sep 2021 11:02:21 +0200
Subject: [PATCH] fix locale, add  tests

---
 frontend/src/components/Transaction.spec.js   | 36 ++++++++
 frontend/src/components/Transaction.vue       | 82 +++++++++----------
 .../src/components/TransactionCollaps.spec.js | 36 ++++++++
 .../src/components/TransactionCollaps.vue     | 12 ++-
 frontend/src/locales/de.json                  |  6 +-
 frontend/src/locales/en.json                  |  3 +-
 .../AccountOverview/GdtTransactionList.vue    |  1 -
 7 files changed, 129 insertions(+), 47 deletions(-)
 create mode 100644 frontend/src/components/Transaction.spec.js
 create mode 100644 frontend/src/components/TransactionCollaps.spec.js

diff --git a/frontend/src/components/Transaction.spec.js b/frontend/src/components/Transaction.spec.js
new file mode 100644
index 000000000..e5e0c89f0
--- /dev/null
+++ b/frontend/src/components/Transaction.spec.js
@@ -0,0 +1,36 @@
+import { mount } from '@vue/test-utils'
+import Transaction from './Transaction'
+
+const localVue = global.localVue
+
+const toastErrorMock = jest.fn()
+
+describe('Transaction', () => {
+  let wrapper
+
+  const mocks = {
+    $i18n: {
+      locale: 'en',
+    },
+    $t: jest.fn((t) => t),
+    $n: jest.fn((n) => n),
+    $d: jest.fn((d) => d),
+    $toasted: {
+      error: toastErrorMock,
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(Transaction, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div.gdt-transaction-list-item').exists()).toBeTruthy()
+    })
+  })
+})
diff --git a/frontend/src/components/Transaction.vue b/frontend/src/components/Transaction.vue
index e1884a3e3..faf347a41 100644
--- a/frontend/src/components/Transaction.vue
+++ b/frontend/src/components/Transaction.vue
@@ -1,17 +1,16 @@
 <template>
   <div>
-    
     <div class="list-group">
       <div class="list-group-item gdt-transaction-list-item" v-b-toggle="'a' + date + ''">
-        <!-- Icon  -->
+        <!-- icon  -->
         <div class="text-right" style="position: absolute">
-          <b-icon          
+          <b-icon
             :icon="getLinesByType(gdtEntryType).icon"
             :class="getLinesByType(gdtEntryType).iconclasses"
           ></b-icon>
         </div>
 
-        <!-- Collaps Button  -->
+        <!-- collaps Button  -->
         <div class="text-right" style="width: 96%; position: absolute">
           <b-button class="btn-sm">
             <b>i</b>
@@ -19,7 +18,6 @@
         </div>
 
         <!-- type  -->
-
         <b-row>
           <div class="col-6 text-right">
             {{ getLinesByType(gdtEntryType).description }}
@@ -39,7 +37,7 @@
           </div>
         </b-row>
 
-        <!-- Nachricht-->
+        <!-- Message-->
         <b-row v-if="comment && gdtEntryType !== 7">
           <div class="col-6 text-right">
             {{ $t('form.memo') }}
@@ -49,7 +47,7 @@
           </div>
         </b-row>
 
-        <!-- Datum-->
+        <!-- date-->
         <b-row class="gdt-list-row text-header">
           <div class="col-6 text-right">
             {{ $t('form.date') }}
@@ -60,6 +58,7 @@
         </b-row>
       </div>
 
+      <!-- collaps trancaction info-->
       <b-collapse :id="'a' + date + ''" class="pb-4">
         <transaction-collaps
           :amount="amount"
@@ -82,44 +81,42 @@ export default {
   props: {
     amount: { type: Number },
     date: {
-      type: Date
+      type: Date,
     },
     comment: { type: String },
-    gdtEntryType: { type: Number, default: 1},
-    factor: { type: Number},
-    gdt: { type: Number},
+    gdtEntryType: { type: Number, default: 1 },
+    factor: { type: Number },
+    gdt: { type: Number },
   },
   methods: {
     getLinesByType(givenType) {
-       
-        const linesByType = {
-          1: {
-            icon: 'heart',
-            iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
-            description: 'Beitrag',
-            descriptiontext: this.$n(this.amount, 'decimal') + ' €',
-            credittext: this.$n(this.gdt, 'decimal') + ' GDT',
-          },
-          4: {
-            icon: 'person-check',
-            iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
-            description: 'Geworbenes Mitglied',
-            descriptiontext: '5%',
-            credittext: this.$n(this.amount, 'decimal') + ' GDT',
-          },
-          7: {
-            icon: 'gift',
-            iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
-            description: 'Aktion',
-            descriptiontext: this.comment,
-            credittext: this.$n(this.gdt, 'decimal') + ' GDT',
-          },
-        }
-        
-       
-      const type = linesByType[givenType]       
-      
-      if (type) 
+      const linesByType = {
+        1: {
+          icon: 'heart',
+          iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+          description: this.$t('gdt.contribution'),
+          descriptiontext: this.$n(this.amount, 'decimal') + ' €',
+          credittext: this.$n(this.gdt, 'decimal') + ' GDT',
+        },
+        4: {
+          icon: 'person-check',
+          iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+          description: this.$t('gdt.recruited-member'),
+          descriptiontext: '5%',
+          credittext: this.$n(this.amount, 'decimal') + ' GDT',
+        },
+        7: {
+          icon: 'gift',
+          iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+          description: this.$t('gdt.action'),
+          descriptiontext: this.comment,
+          credittext: this.$n(this.gdt, 'decimal') + ' GDT',
+        },
+      }
+
+      const type = linesByType[givenType]
+
+      if (type)
         return {
           icon: type.icon,
           iconclasses: type.iconclasses,
@@ -127,7 +124,10 @@ export default {
           descriptiontext: type.descriptiontext,
           credittext: type.credittext,
         }
-      
+      this.throwError('no lines for this type')
+    },
+    throwError(msg) {
+      throw new Error(msg)
     },
   },
 }
diff --git a/frontend/src/components/TransactionCollaps.spec.js b/frontend/src/components/TransactionCollaps.spec.js
new file mode 100644
index 000000000..edb5c5dd7
--- /dev/null
+++ b/frontend/src/components/TransactionCollaps.spec.js
@@ -0,0 +1,36 @@
+import { mount } from '@vue/test-utils'
+import TransactionCollaps from './TransactionCollaps'
+
+const localVue = global.localVue
+
+const toastErrorMock = jest.fn()
+
+describe('TransactionCollaps', () => {
+  let wrapper
+
+  const mocks = {
+    $i18n: {
+      locale: 'en',
+    },
+    $t: jest.fn((t) => t),
+    $n: jest.fn((n) => n),
+    $d: jest.fn((d) => d),
+    $toasted: {
+      error: toastErrorMock,
+    },
+  }
+
+  const Wrapper = () => {
+    return mount(TransactionCollaps, { localVue, mocks })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component', () => {
+      expect(wrapper.find('div.gdt-transaction-collaps').exists()).toBeTruthy()
+    })
+  })
+})
diff --git a/frontend/src/components/TransactionCollaps.vue b/frontend/src/components/TransactionCollaps.vue
index 4c016ea9d..4148c6d56 100644
--- a/frontend/src/components/TransactionCollaps.vue
+++ b/frontend/src/components/TransactionCollaps.vue
@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="gdt-transaction-collaps">
     <b-row class="gdt-list-clooaps-header-text text-center pb-3">
       <div class="col h4">
         {{ getLinesByType(gdtEntryType).headline }}
@@ -21,7 +21,7 @@
 </template>
 <script>
 export default {
-  name: 'TransactionCollaps',
+  name: 'transaction-collaps',
   props: {
     amount: { type: Number },
     gdtEntryType: { type: Number },
@@ -46,6 +46,10 @@ export default {
         },
         4: {
           headline: this.$t('gdt.publisher'),
+          first: null,
+          firstMath: null,
+          second: null,
+          secondMath: null,
         },
         7: {
           headline: this.$t('gdt.conversion-gdt-euro'),
@@ -72,6 +76,10 @@ export default {
           second: type.second,
           secondMath: type.secondMath,
         }
+      this.throwError('no additional transaction info for this type')
+    },
+    throwError(msg) {
+      throw new Error(msg)
     },
   },
 }
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index ae1822396..b078fd21e 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -138,6 +138,7 @@
       "add_work":"neuer Gemeinschaftsbeitrag"
     },
     "profil": {
+      "transactions":"Transaktionen",
       "activity": {
         "new":"Neue Gemeinschaftsstunden eintragen",
         "list":"Meine Gemeinschaftsstunden Liste"
@@ -183,8 +184,9 @@
     "formula":"Berechungsformel",
     "no-transactions":"Du hast zur Zeit keine Transaktionen",
     "publisher":"Dein geworbenes Mitglied hat einen Beitrag bezahlt",
-    "gdt-receive":"Aktion",
-    "your-share":"Geworbenes Mitglied",
+    "action":"Action",
+    "gdt-receive":"GDT erhalten",
+    "recruited-member":"Geworbenes Mitglied",
     "contribution":"Beitrag"
   }
 }
diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json
index 4bd04116d..12e6f647d 100644
--- a/frontend/src/locales/en.json
+++ b/frontend/src/locales/en.json
@@ -184,8 +184,9 @@
     "formula": "Calculation formula",
     "no-transactions":"You currently have no transactions",
     "publisher":"A member you referred has paid a contribution",
+    "action":"Aktion",
     "gdt-receive":"GDT receive",
-    "your-share":"Your share",
+    "recruited-member":"Your share",
     "contribution":"Contribution"
  }
 }
diff --git a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
index 6a1ddce01..7591ec9ec 100644
--- a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
@@ -17,7 +17,6 @@
         } in transactionsGdt"
         :key="transactionId"
       >
- 
         <transaction
           :amount="amount"
           :date="date"