use id as collapse id. complete test

frontend/src/components/Transaction.spec.js

@@ -3,53 +3,15 @@ import Transaction from './Transaction'
 import Vue from 'vue'
 
 // disable throwing Errors on warnings to catch the warning
-Vue.config.warnHandler = (w) => {
+Vue.config.warnHandler = (w) => {}
-}
 
 const localVue = global.localVue
 
-const consoleError = console.error
 const consoleErrorMock = jest.fn()
+
+// eslint-disable-next-line no-console
 console.error = consoleErrorMock
 
-
-/*
-      gdtEntries: [
-        {
-          amount: 100,
-          gdt: 1700,
-          factor: 17,
-          comment: '',
-          date: '2021-05-02T17:20:11+00:00',
-          gdtEntryType: GdtEntryType.FORM,
-        },
-        {
-          amount: 1810,
-          gdt: 362,
-          factor: 0.2,
-          comment: 'Dezember 20',
-          date: '2020-12-31T12:00:00+00:00',
-          gdtEntryType: GdtEntryType.GLOBAL_MODIFICATOR,
-        },
-        {
-          amount: 100,
-          gdt: 1700,
-          factor: 17,
-          comment: '',
-          date: '2020-05-07T17:00:00+00:00',
-          gdtEntryType: GdtEntryType.FORM,
-        },
-        {
-          amount: 100,
-          gdt: 110,
-          factor: 22,
-          comment: '',
-          date: '2020-04-10T13:28:00+00:00',
-          gdtEntryType: GdtEntryType.ELOPAGE_PUBLISHER,
-        },
-      ],
-*/
-
 describe('Transaction', () => {
   let wrapper
 
@@ -75,21 +37,200 @@ describe('Transaction', () => {
       expect(wrapper.find('div.gdt-transaction-list-item').exists()).toBeTruthy()
     })
 
+    it('has a collapse button', () => {
+      expect(wrapper.find('button[type="button"].btn-secondary').text()).toBe('i')
+    })
+
     describe('no valid GDT entry type', () => {
       beforeEach(async () => {
-        await wrapper.setProps({ gdtEntryType: 'NOT_VALID'  })
+        await wrapper.setProps({ gdtEntryType: 'NOT_VALID' })
       })
-      
+
       it('throws an error', () => {
-        expect(consoleErrorMock).toBeCalledWith(expect.objectContaining({ message: 'no lines for this type: NOT_VALID' }))
+        expect(consoleErrorMock).toBeCalledWith(
+          expect.objectContaining({ message: 'no lines for this type: NOT_VALID' }),
+        )
       })
     })
 
     describe('default entry type FORM', () => {
-      beforeEach((async ()
+      beforeEach(async () => {
+        await wrapper.setProps({
+          amount: 100,
+          date: '2021-05-02T17:20:11+00:00',
+          comment: 'This is a comment',
+          factor: 17,
+          gdt: 1700,
+          id: 42,
+        })
+      })
+
       it('has the heart icon', () => {
-        console.log(wrapper.html())
+        expect(wrapper.find('svg.bi-heart').exists()).toBeTruthy()
-        expect(wrapper.vm.getLinesByType.icon).toBe('heart')
+      })
+
+      it('has the description gdt.contribution', () => {
+        expect(wrapper.findAll('div.row').at(0).text()).toContain('gdt.contribution')
+      })
+
+      it('renders the amount of euros', () => {
+        expect(wrapper.findAll('div.row').at(0).text()).toContain('100 €')
+      })
+
+      it('renders the amount of GDT', () => {
+        expect(wrapper.findAll('div.row').at(1).text()).toContain('1700 GDT')
+      })
+
+      it('renders the comment message', () => {
+        expect(wrapper.findAll('div.row').at(2).text()).toContain('This is a comment')
+      })
+
+      it('renders the date', () => {
+        expect(wrapper.findAll('div.row').at(3).text()).toContain('Sun May 02 2021')
+      })
+
+      it('does not show the collapse by default', () => {
+        expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBeFalsy()
+      })
+
+      describe('without comment', () => {
+        it('does not render the message row', async () => {
+          await wrapper.setProps({ comment: undefined })
+          expect(wrapper.findAll('div.row').at(2).text()).toContain('form.date')
+        })
+      })
+      /* how to open the collapse ????? 
+      describe('collapse is open', () => {
+        beforeEach(async () => {
+          //console.log(wrapper.html())
+          await wrapper.find('div#gdt-collapse-42').trigger('click')
+          await wrapper.vm.$nextTick()
+          await flushPromises()
+          await wrapper.vm.$nextTick()
+          await flushPromises()
+          //console.log(wrapper.find('[enteractiveclass="collapsing"]').html())
+        })
+
+        it('shows the collapse', () => {
+          //console.log(wrapper.html())
+          expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBeTruthy()
+        })
+      })
+      */
+    })
+
+    describe('GdtEntryType.CVS', () => {
+      it('behaves as default FORM', async () => {
+        await wrapper.setProps({ gdtEntryType: 'CVS' })
+        expect(wrapper.find('svg.bi-heart').exists()).toBeTruthy()
+      })
+    })
+
+    describe('GdtEntryType.ELOPAGE', () => {
+      it('behaves as default FORM', async () => {
+        await wrapper.setProps({ gdtEntryType: 'ELOPAGE' })
+        expect(wrapper.find('svg.bi-heart').exists()).toBeTruthy()
+      })
+    })
+
+    describe('GdtEntryType.DIGISTORE', () => {
+      it('behaves as default FORM', async () => {
+        await wrapper.setProps({ gdtEntryType: 'DIGISTORE' })
+        expect(wrapper.find('svg.bi-heart').exists()).toBeTruthy()
+      })
+    })
+
+    describe('GdtEntryType.CVS2', () => {
+      it('behaves as default FORM', async () => {
+        await wrapper.setProps({ gdtEntryType: 'CVS2' })
+        expect(wrapper.find('svg.bi-heart').exists()).toBeTruthy()
+      })
+    })
+
+    describe('GdtEntryType.ELOPAGE_PUBLISHER', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({
+          amount: 365.67,
+          date: '2020-04-10T13:28:00+00:00',
+          comment: 'This is a comment',
+          gdtEntryType: 'ELOPAGE_PUBLISHER',
+          factor: 22,
+          gdt: 967.65,
+          id: 42,
+        })
+      })
+
+      it('has the person-check icon', () => {
+        expect(wrapper.find('svg.bi-person-check').exists()).toBeTruthy()
+      })
+
+      it('has the description gdt.recruited-member', () => {
+        expect(wrapper.findAll('div.row').at(0).text()).toContain('gdt.recruited-member')
+      })
+
+      it('renders the percentage', () => {
+        expect(wrapper.findAll('div.row').at(0).text()).toContain('5%')
+      })
+
+      it('renders the amount of GDT', () => {
+        expect(wrapper.findAll('div.row').at(1).text()).toContain('365.67 GDT')
+      })
+
+      it('renders the comment message', () => {
+        expect(wrapper.findAll('div.row').at(2).text()).toContain('This is a comment')
+      })
+
+      it('renders the date', () => {
+        expect(wrapper.findAll('div.row').at(3).text()).toContain('Fri Apr 10 2020')
+      })
+
+      it('does not show the collapse by default', () => {
+        expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBeFalsy()
+      })
+
+      describe('without comment', () => {
+        it('does not render the message row', async () => {
+          await wrapper.setProps({ comment: undefined })
+          expect(wrapper.findAll('div.row').at(2).text()).toContain('form.date')
+        })
+      })
+    })
+
+    describe('GdtEntryType.GLOBAL_MODIFICATOR', () => {
+      beforeEach(async () => {
+        await wrapper.setProps({
+          amount: 123.45,
+          date: '2020-03-12T13:28:00+00:00',
+          comment: 'This is a comment',
+          gdtEntryType: 'GLOBAL_MODIFICATOR',
+          factor: 19,
+          gdt: 61.23,
+          id: 42,
+        })
+      })
+
+      it('has the gift icon', () => {
+        expect(wrapper.find('svg.bi-gift').exists()).toBeTruthy()
+      })
+
+      it('has the description gdt.gdt-received', () => {
+        expect(wrapper.findAll('div.row').at(0).text()).toContain('gdt.gdt-received')
+      })
+
+      it('renders the comment', () => {
+        expect(wrapper.findAll('div.row').at(0).text()).toContain('This is a comment')
+      })
+
+      it('renders the amount of GDT', () => {
+        expect(wrapper.findAll('div.row').at(1).text()).toContain('61.23 GDT')
+      })
+
+      it('renders the date', () => {
+        expect(wrapper.findAll('div.row').at(2).text()).toContain('Thu Mar 12 2020')
+      })
+
+      it('does not show the collapse by default', () => {
+        expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBeFalsy()
       })
     })
   })

frontend/src/components/Transaction.vue

@@ -1,13 +1,10 @@
 <template>
   <div>
     <div class="list-group">
-      <div class="list-group-item gdt-transaction-list-item" v-b-toggle="'a' + date + ''">
+      <div class="list-group-item gdt-transaction-list-item" v-b-toggle="collapseId">
         <!-- icon  -->
         <div class="text-right" style="position: absolute">
-          <b-icon
+          <b-icon :icon="getLinesByType.icon" :class="getLinesByType.iconclasses"></b-icon>
-            :icon="getLinesByType.icon"
-            :class="getLinesByType.iconclasses"
-          ></b-icon>
         </div>
 
         <!-- collaps Button  -->
@@ -58,7 +55,7 @@
         </b-row>
 
         <!-- collaps trancaction info-->
-        <b-collapse :id="'a' + date + ''" class="mt-2 pb-4">
+        <b-collapse :id="collapseId" class="mt-2 pb-4">
           <transaction-collapse
             :amount="amount"
             :gdtEntryType="gdtEntryType"
@@ -71,63 +68,67 @@
   </div>
 </template>
 <script>
- import TransactionCollapse from './TransactionCollapse.vue'
+import TransactionCollapse from './TransactionCollapse.vue'
- import { GdtEntryType } from '../graphql/enums'
+import { GdtEntryType } from '../graphql/enums'
 
- export default {
+export default {
-   name: 'Transaction',
+  name: 'Transaction',
-   components: {
+  components: {
-     TransactionCollapse,
+    TransactionCollapse,
-   },
+  },
-   props: {
+  props: {
-     amount: { type: Number },
+    amount: { type: Number },
-     date: { type: String },
+    date: { type: String },
-     comment: { type: String },
+    comment: { type: String },
-     gdtEntryType: { type: String, default: GdtEntryType.FORM },
+    gdtEntryType: { type: String, default: GdtEntryType.FORM },
-     factor: { type: Number },
+    factor: { type: Number },
-     gdt: { type: Number },
+    gdt: { type: Number },
-   },
+    id: { type: Number },
-   computed: {
+  },
-     isGlobalModificator() {
+  computed: {
-       return this.gdtEntryType === GdtEntryType.GLOBAL_MODIFICATOR
+    collapseId() {
-     },
+      return 'gdt-collapse-' + String(this.id)
-     getLinesByType() {
+    },
-       switch (this.gdtEntryType) {
+    isGlobalModificator() {
-         case GdtEntryType.FORM:
+      return this.gdtEntryType === GdtEntryType.GLOBAL_MODIFICATOR
-         case GdtEntryType.CVS:
+    },
-         case GdtEntryType.ELOPAGE:
+    getLinesByType() {
-         case GdtEntryType.DIGISTORE:
+      switch (this.gdtEntryType) {
-         case GdtEntryType.CVS2: {
+        case GdtEntryType.FORM:
-           return {
+        case GdtEntryType.CVS:
-             icon: 'heart',
+        case GdtEntryType.ELOPAGE:
-             iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+        case GdtEntryType.DIGISTORE:
-             description: this.$t('gdt.contribution'),
+        case GdtEntryType.CVS2: {
-             descriptiontext: this.$n(this.amount, 'decimal') + ' €',
+          return {
-             credittext: this.$n(this.gdt, 'decimal') + ' GDT',
+            icon: 'heart',
-           }
+            iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
-         }
+            description: this.$t('gdt.contribution'),
-         case GdtEntryType.ELOPAGE_PUBLISHER: {
+            descriptiontext: this.$n(this.amount, 'decimal') + ' €',
-           return {
+            credittext: this.$n(this.gdt, 'decimal') + ' GDT',
-             icon: 'person-check',
+          }
-             iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+        }
-             description: this.$t('gdt.recruited-member'),
+        case GdtEntryType.ELOPAGE_PUBLISHER: {
-             descriptiontext: '5%',
+          return {
-             credittext: this.$n(this.amount, 'decimal') + ' GDT',
+            icon: 'person-check',
-           }
+            iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
-         }
+            description: this.$t('gdt.recruited-member'),
-         case GdtEntryType.GLOBAL_MODIFICATOR: {
+            descriptiontext: '5%',
-           return {
+            credittext: this.$n(this.amount, 'decimal') + ' GDT',
-             icon: 'gift',
+          }
-             iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
+        }
-             description: this.$t('gdt.gdt-received'),
+        case GdtEntryType.GLOBAL_MODIFICATOR: {
-             descriptiontext: this.comment,
+          return {
-             credittext: this.$n(this.gdt, 'decimal') + ' GDT',
+            icon: 'gift',
-           }
+            iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
-         }
+            description: this.$t('gdt.gdt-received'),
-         default:
+            descriptiontext: this.comment,
-           throw new Error('no lines for this type: ' + this.gdtEntryType)
+            credittext: this.$n(this.gdt, 'decimal') + ' GDT',
-       }
+          }
-     },
+        }
-   },
+        default:
- }
+          throw new Error('no lines for this type: ' + this.gdtEntryType)
+      }
+    },
+  },
+}
 </script>

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

@@ -6,16 +6,8 @@
       </div>
       <div
         v-else
-        v-for="{
+        v-for="{ id, amount, date, comment, gdtEntryType, factor, gdt } in transactionsGdt"
-          transactionId,
+        :key="id"
-          amount,
-          date,
-          comment,
-          gdtEntryType,
-          factor,
-          gdt,
-        } in transactionsGdt"
-        :key="transactionId"
       >
         <transaction
           :amount="amount"
@@ -24,6 +16,7 @@
           :gdtEntryType="gdtEntryType"
           :factor="factor"
           :gdt="gdt"
+          :id="id"
         ></transaction>
       </div>
     </div>