From 4ad268e86ce4c24618769b6a8d52c7d31c57c1c6 Mon Sep 17 00:00:00 2001
From: ogerly <fridolin@tutanota.com>
Date: Thu, 3 Mar 2022 10:13:14 +0100
Subject: [PATCH] add tests specs for Transaction slots

---
 .../Transactions/TransactionCreation.spec.js  | 52 +++++++++++++++++++
 .../Transactions/TransactionCreation.vue      | 13 ++---
 .../Transactions/TransactionDecay.spec.js     | 52 +++++++++++++++++++
 .../Transactions/TransactionDecay.vue         |  7 +--
 .../Transactions/TransactionReceive.spec.js   | 52 +++++++++++++++++++
 .../Transactions/TransactionReceive.vue       | 14 ++---
 .../Transactions/TransactionSend.spec.js      | 52 +++++++++++++++++++
 .../Transactions/TransactionSend.vue          | 14 ++---
 .../AccountOverview/GddTransactionList.vue    | 43 ++-------------
 9 files changed, 225 insertions(+), 74 deletions(-)
 create mode 100644 frontend/src/components/Transactions/TransactionCreation.spec.js
 create mode 100644 frontend/src/components/Transactions/TransactionDecay.spec.js
 create mode 100644 frontend/src/components/Transactions/TransactionReceive.spec.js
 create mode 100644 frontend/src/components/Transactions/TransactionSend.spec.js

diff --git a/frontend/src/components/Transactions/TransactionCreation.spec.js b/frontend/src/components/Transactions/TransactionCreation.spec.js
new file mode 100644
index 000000000..62de8a9a2
--- /dev/null
+++ b/frontend/src/components/Transactions/TransactionCreation.spec.js
@@ -0,0 +1,52 @@
+import { mount } from '@vue/test-utils'
+import TransactionCreation from './TransactionCreation'
+
+const localVue = global.localVue
+
+const mocks = {
+  $i18n: {
+    locale: 'en',
+  },
+  $n: jest.fn((n) => n),
+  $t: jest.fn((t) => t),
+  $d: jest.fn((d) => d),
+}
+
+const propsData = {
+  amount: '12.45',
+  balance: '31.76099091058521',
+  balanceDate: '2022-02-28T13:55:47.000Z',
+  decay: {
+    decay: '-0.2038314055482643084',
+    start: '2022-02-25T07:29:26.000Z',
+    end: '2022-02-28T13:55:47.000Z',
+    duration: 282381,
+    __typename: 'CREATION',
+  },
+  id: 9,
+  linkedUser: {
+    firstName: 'Bibi',
+    lastName: 'Bloxberg',
+    __typename: 'User',
+  },
+  memo: 'sadasd asdasdasdasdadadd da dad aad',
+  typeId: 'DECAY',
+  decayStartBlock: new Date('2021-05-13T17:46:31.000Z'),
+}
+
+describe('TransactionCreation', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(TransactionCreation, { localVue, mocks, propsData })
+  }
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component transaction-slot-creation', () => {
+      expect(wrapper.find('div.transaction-slot-creation').exists()).toBeTruthy()
+    })
+  })
+})
diff --git a/frontend/src/components/Transactions/TransactionCreation.vue b/frontend/src/components/Transactions/TransactionCreation.vue
index 74b298ee9..bc83edc77 100644
--- a/frontend/src/components/Transactions/TransactionCreation.vue
+++ b/frontend/src/components/Transactions/TransactionCreation.vue
@@ -1,8 +1,8 @@
 <template>
-  <div :class="visible ? 'bg-secondary' : ''">
+  <div :class="visible ? 'bg-secondary' : ''" class="transaction-slot-creation">
     <div @click="visible = !visible">
       {{ amount }}, {{ balance }}, {{ balanceDate }}, {{ decay }}, {{ id }}, {{ linkedUser }},
-      {{ memo }}, {{ properties }}
+      {{ memo }}
 
       <!-- Collaps Icon  -->
       <div class="text-right" style="width: 95%; position: absolute">
@@ -17,7 +17,7 @@
           <!-- ICON  -->
           <b-col cols="1">
             <div class="gdd-transaction-list-item-icon">
-              <b-icon :icon="properties.icon" :class="properties.class" />
+              <b-icon icon="gift" class="gradido-global-color-accent m-mb-1 font2em" />
             </div>
           </b-col>
 
@@ -26,9 +26,7 @@
             <b-row>
               <b-col cols="5">
                 <div class="text-right">
-                  <span class="gdd-transaction-list-item-operator">
-                    {{ properties.operator }}
-                  </span>
+                  <span class="gdd-transaction-list-item-operator">+</span>
                   <span class="gdd-transaction-list-item-amount">
                     {{ $n(amount, 'decimal') }}
                   </span>
@@ -132,9 +130,6 @@ export default {
     properties: {
       type: Object,
     },
-    getCollapseState: {
-      type: Boolean,
-    },
     decayStartBlock: { type: Date },
   },
   data() {
diff --git a/frontend/src/components/Transactions/TransactionDecay.spec.js b/frontend/src/components/Transactions/TransactionDecay.spec.js
new file mode 100644
index 000000000..7b4b658a4
--- /dev/null
+++ b/frontend/src/components/Transactions/TransactionDecay.spec.js
@@ -0,0 +1,52 @@
+import { mount } from '@vue/test-utils'
+import TransactionDecay from './TransactionDecay'
+
+const localVue = global.localVue
+
+const mocks = {
+  $i18n: {
+    locale: 'en',
+  },
+  $n: jest.fn((n) => n),
+  $t: jest.fn((t) => t),
+  $d: jest.fn((d) => d),
+}
+
+const propsData = {
+  amount: '12.45',
+  balance: '31.76099091058521',
+  balanceDate: '2022-02-28T13:55:47.000Z',
+  decay: {
+    decay: '-0.2038314055482643084',
+    start: '2022-02-25T07:29:26.000Z',
+    end: '2022-02-28T13:55:47.000Z',
+    duration: 282381,
+    __typename: 'Decay',
+  },
+  id: 9,
+  linkedUser: {
+    firstName: 'Bibi',
+    lastName: 'Bloxberg',
+    __typename: 'User',
+  },
+  memo: 'sadasd asdasdasdasdadadd da dad aad',
+  typeId: 'DECAY',
+  decayStartBlock: new Date('2021-05-13T17:46:31.000Z'),
+}
+
+describe('TransactionDecay', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(TransactionDecay, { localVue, mocks, propsData })
+  }
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component transaction-slot-decay', () => {
+      expect(wrapper.find('div.transaction-slot-decay').exists()).toBeTruthy()
+    })
+  })
+})
diff --git a/frontend/src/components/Transactions/TransactionDecay.vue b/frontend/src/components/Transactions/TransactionDecay.vue
index ef5aa92be..fc53c0ff8 100644
--- a/frontend/src/components/Transactions/TransactionDecay.vue
+++ b/frontend/src/components/Transactions/TransactionDecay.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="visible ? 'bg-secondary' : ''">
+  <div :class="visible ? 'bg-secondary' : ''" class="transaction-slot-decay">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
       <div class="text-right" style="width: 95%; position: absolute">
@@ -14,7 +14,7 @@
           <!-- ICON  -->
           <b-col cols="1">
             <div class="gdd-transaction-list-item-icon">
-              <b-icon :icon="properties.icon" :class="properties.class" />
+              <b-icon icon="droplet-half" class="gradido-global-color-gray m-mb-1 font2em" />
             </div>
           </b-col>
 
@@ -81,9 +81,6 @@ export default {
     typeId: {
       type: String,
     },
-    properties: {
-      type: Object,
-    },
   },
   data() {
     return {
diff --git a/frontend/src/components/Transactions/TransactionReceive.spec.js b/frontend/src/components/Transactions/TransactionReceive.spec.js
new file mode 100644
index 000000000..6643553f8
--- /dev/null
+++ b/frontend/src/components/Transactions/TransactionReceive.spec.js
@@ -0,0 +1,52 @@
+import { mount } from '@vue/test-utils'
+import TransactionReceive from './TransactionReceive'
+
+const localVue = global.localVue
+
+const mocks = {
+  $i18n: {
+    locale: 'en',
+  },
+  $n: jest.fn((n) => n),
+  $t: jest.fn((t) => t),
+  $d: jest.fn((d) => d),
+}
+
+const propsData = {
+  amount: '12.45',
+  balance: '31.76099091058521',
+  balanceDate: '2022-02-28T13:55:47.000Z',
+  decay: {
+    decay: '-0.2038314055482643084',
+    start: '2022-02-25T07:29:26.000Z',
+    end: '2022-02-28T13:55:47.000Z',
+    duration: 282381,
+    __typename: 'Decay',
+  },
+  id: 9,
+  linkedUser: {
+    firstName: 'Bibi',
+    lastName: 'Bloxberg',
+    __typename: 'User',
+  },
+  memo: 'sadasd asdasdasdasdadadd da dad aad',
+  typeId: 'RECEIVE',
+  decayStartBlock: new Date('2021-05-13T17:46:31.000Z'),
+}
+
+describe('TransactionReceive', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(TransactionReceive, { localVue, mocks, propsData })
+  }
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component transaction-slot-receive', () => {
+      expect(wrapper.find('div.transaction-slot-receive').exists()).toBeTruthy()
+    })
+  })
+})
diff --git a/frontend/src/components/Transactions/TransactionReceive.vue b/frontend/src/components/Transactions/TransactionReceive.vue
index 864d69184..36ce5ebc1 100644
--- a/frontend/src/components/Transactions/TransactionReceive.vue
+++ b/frontend/src/components/Transactions/TransactionReceive.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="visible ? 'bg-secondary' : ''">
+  <div :class="visible ? 'bg-secondary' : ''" class="transaction-slot-receive">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
       <div class="text-right" style="width: 95%; position: absolute">
@@ -14,7 +14,7 @@
           <!-- ICON  -->
           <b-col cols="1">
             <div class="gdd-transaction-list-item-icon">
-              <b-icon :icon="properties.icon" :class="properties.class" />
+              <b-icon icon="arrow-right-circle" class="text-success m-mb-1 font2em" />
             </div>
           </b-col>
 
@@ -23,9 +23,7 @@
             <b-row>
               <b-col cols="5">
                 <div class="text-right">
-                  <span class="gdd-transaction-list-item-operator">
-                    {{ properties.operator }}
-                  </span>
+                  <span class="gdd-transaction-list-item-operator">+</span>
                   <span class="gdd-transaction-list-item-amount">
                     {{ $n(amount, 'decimal') }}
                   </span>
@@ -126,12 +124,6 @@ export default {
     typeId: {
       type: String,
     },
-    properties: {
-      type: Object,
-    },
-    getCollapseState: {
-      type: Boolean,
-    },
     decayStartBlock: { type: Date },
   },
   data() {
diff --git a/frontend/src/components/Transactions/TransactionSend.spec.js b/frontend/src/components/Transactions/TransactionSend.spec.js
new file mode 100644
index 000000000..40c93437c
--- /dev/null
+++ b/frontend/src/components/Transactions/TransactionSend.spec.js
@@ -0,0 +1,52 @@
+import { mount } from '@vue/test-utils'
+import TransactionSend from './TransactionSend'
+
+const localVue = global.localVue
+
+const mocks = {
+  $i18n: {
+    locale: 'en',
+  },
+  $n: jest.fn((n) => n),
+  $t: jest.fn((t) => t),
+  $d: jest.fn((d) => d),
+}
+
+const propsData = {
+  amount: '12.45',
+  balance: '31.76099091058521',
+  balanceDate: '2022-02-28T13:55:47.000Z',
+  decay: {
+    decay: '-0.2038314055482643084',
+    start: '2022-02-25T07:29:26.000Z',
+    end: '2022-02-28T13:55:47.000Z',
+    duration: 282381,
+    __typename: 'Decay',
+  },
+  id: 9,
+  linkedUser: {
+    firstName: 'Bibi',
+    lastName: 'Bloxberg',
+    __typename: 'User',
+  },
+  memo: 'sadasd asdasdasdasdadadd da dad aad',
+  typeId: 'SEND',
+  decayStartBlock: new Date('2021-05-13T17:46:31.000Z'),
+}
+
+describe('TransactionSend', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(TransactionSend, { localVue, mocks, propsData })
+  }
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('renders the component transaction-slot-send', () => {
+      expect(wrapper.find('div.transaction-slot-send').exists()).toBeTruthy()
+    })
+  })
+})
diff --git a/frontend/src/components/Transactions/TransactionSend.vue b/frontend/src/components/Transactions/TransactionSend.vue
index f6cdac911..922fd16e3 100644
--- a/frontend/src/components/Transactions/TransactionSend.vue
+++ b/frontend/src/components/Transactions/TransactionSend.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="visible ? 'bg-secondary' : ''">
+  <div :class="visible ? 'bg-secondary' : ''" class="transaction-slot-send">
     <div @click="visible = !visible">
       <!-- Collaps Icon  -->
       <div class="text-right" style="width: 95%; position: absolute">
@@ -14,7 +14,7 @@
           <!-- ICON  -->
           <b-col cols="1">
             <div class="gdd-transaction-list-item-icon">
-              <b-icon :icon="properties.icon" :class="properties.class" />
+              <b-icon icon="arrow-left-circle" class="text-danger m-mb-1 font2em" />
             </div>
           </b-col>
 
@@ -23,9 +23,7 @@
             <b-row>
               <b-col cols="5">
                 <div class="text-right">
-                  <span class="gdd-transaction-list-item-operator">
-                    {{ properties.operator }}
-                  </span>
+                  <span class="gdd-transaction-list-item-operator">-</span>
                   <span class="gdd-transaction-list-item-amount">
                     {{ $n(amount, 'decimal') }}
                   </span>
@@ -125,12 +123,6 @@ export default {
     typeId: {
       type: String,
     },
-    properties: {
-      type: Object,
-    },
-    getCollapseState: {
-      type: Boolean,
-    },
     decayStartBlock: { type: Date },
   },
   data() {
diff --git a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
index 2613dd174..21f725bc1 100644
--- a/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
+++ b/frontend/src/views/Pages/AccountOverview/GddTransactionList.vue
@@ -12,44 +12,33 @@
         <small>{{ $t('error.empty-transactionlist') }}</small>
       </div>
 
-      <div
-        v-for="({ id, typeId }, index) in transactions"
-        :key="id"
-        :style="typeId === 'DECAY' ? 'background-color:#f1e0ae3d' : ''"
-      >
+      <div v-for="({ id, typeId }, index) in transactions" :key="id">
         <transaction-list-item :typeId="typeId">
           <template #DECAY>
-            <transaction-decay
-              class="list-group-item gdd-transaction-list-item"
-              v-bind="transactions[index]"
-              :properties="getProperties(typeId)"
-            />
+            <transaction-decay class="list-group-item" v-bind="transactions[index]" />
           </template>
 
           <template #SEND>
             <transaction-send
-              class="list-group-item gdd-transaction-list-item"
+              class="list-group-item"
               v-bind="transactions[index]"
               :decayStartBlock="decayStartBlock"
-              :properties="getProperties(typeId)"
             />
           </template>
 
           <template #RECEIVE>
             <transaction-receive
-              class="list-group-item gdd-transaction-list-item"
+              class="list-group-item"
               v-bind="transactions[index]"
               :decayStartBlock="decayStartBlock"
-              :properties="getProperties(typeId)"
             />
           </template>
 
           <template #CREATION>
             <transaction-creation
-              class="list-group-item gdd-transaction-list-item"
+              class="list-group-item"
               v-bind="transactions[index]"
               :decayStartBlock="decayStartBlock"
-              :properties="getProperties(typeId)"
             />
           </template>
         </transaction-list-item>
@@ -75,13 +64,6 @@ import TransactionSend from '../../../components/Transactions/TransactionSend'
 import TransactionReceive from '../../../components/Transactions/TransactionReceive'
 import TransactionCreation from '../../../components/Transactions/TransactionCreation'
 
-const iconsByType = {
-  SEND: { icon: 'arrow-left-circle', classes: 'text-danger', operator: '−' },
-  RECEIVE: { icon: 'arrow-right-circle', classes: 'gradido-global-color-accent', operator: '+' },
-  CREATION: { icon: 'gift', classes: 'gradido-global-color-accent', operator: '+' },
-  DECAY: { icon: 'droplet-half', classes: 'gradido-global-color-gray', operator: '−' },
-}
-
 export default {
   name: 'gdd-transaction-list',
   components: {
@@ -95,7 +77,6 @@ export default {
   data() {
     return {
       currentPage: 1,
-      collapseStatus: [],
     }
   },
   props: {
@@ -114,16 +95,6 @@ export default {
       })
       window.scrollTo(0, 0)
     },
-    getProperties(givenType) {
-      const type = iconsByType[givenType]
-      if (type)
-        return {
-          icon: type.icon,
-          class: type.classes + ' m-mb-1 font2em',
-          operator: type.operator,
-        }
-      this.throwError('no icon to given type')
-    },
     throwError(msg) {
       throw new Error(msg)
     },
@@ -144,8 +115,4 @@ export default {
   padding-left: 0px;
   padding-right: 0px;
 }
-
-.gdd-transaction-list-item {
-  outline: none !important;
-}
 </style>