Merge branch 'master' into 1036-register-page-breaks-without-community

.github/workflows/test.yml

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

frontend/src/components/Transaction.spec.js

@@ -1,8 +1,11 @@
 import { mount } from '@vue/test-utils'
 import Transaction from './Transaction'
+import Vue from 'vue'
 
 const localVue = global.localVue
 
+const consoleErrorMock = jest.fn()
+
 describe('Transaction', () => {
   let wrapper
 
@@ -27,5 +30,206 @@ describe('Transaction', () => {
     it('renders the component', () => {
       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 () => {
+        // disable throwing Errors on warnings to catch the warning
+        Vue.config.warnHandler = (w) => {}
+        // eslint-disable-next-line no-console
+        console.error = consoleErrorMock
+        await wrapper.setProps({ gdtEntryType: 'NOT_VALID' })
+      })
+
+      it('throws an error', () => {
+        expect(consoleErrorMock).toBeCalledWith(
+          expect.objectContaining({ message: 'no lines for this type: NOT_VALID' }),
+        )
+      })
+    })
+
+    describe('default entry type FORM', () => {
+      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', () => {
+        expect(wrapper.find('svg.bi-heart').exists()).toBeTruthy()
+      })
+
+      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(gdtEntryType).icon"
-            :class="getLinesByType(gdtEntryType).iconclasses"
-          ></b-icon>
         </div>
 
         <!-- collaps Button  -->
@@ -20,10 +17,10 @@
         <!-- type  -->
         <b-row>
           <b-col cols="6" class="text-right">
-            {{ getLinesByType(gdtEntryType).description }}
+            {{ getLinesByType.description }}
           </b-col>
           <b-col cols="6">
-            {{ getLinesByType(gdtEntryType).descriptiontext }}
+            {{ getLinesByType.descriptiontext }}
           </b-col>
         </b-row>
 
@@ -33,7 +30,7 @@
             {{ $t('gdt.credit') }}
           </b-col>
           <b-col cols="6">
-            {{ getLinesByType(gdtEntryType).credittext }}
+            {{ getLinesByType.credittext }}
           </b-col>
         </b-row>
 
@@ -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"
@@ -86,15 +83,17 @@ export default {
     gdtEntryType: { type: String, default: GdtEntryType.FORM },
     factor: { type: Number },
     gdt: { type: Number },
+    id: { type: Number },
   },
   computed: {
-    isGlobalModificator: function () {
+    collapseId() {
+      return 'gdt-collapse-' + String(this.id)
+    },
+    isGlobalModificator() {
       return this.gdtEntryType === GdtEntryType.GLOBAL_MODIFICATOR
     },
-  },
+    getLinesByType() {
-  methods: {
+      switch (this.gdtEntryType) {
-    getLinesByType(givenType) {
-      switch (givenType) {
         case GdtEntryType.FORM:
         case GdtEntryType.CVS:
         case GdtEntryType.ELOPAGE:
@@ -127,7 +126,7 @@ export default {
           }
         }
         default:
-          throw new Error('no lines for this type: ' + givenType)
+          throw new Error('no lines for this type: ' + this.gdtEntryType)
       }
     },
   },

frontend/src/components/TransactionCollapse.spec.js

@@ -2,8 +2,12 @@ import { mount } from '@vue/test-utils'
 import TransactionCollapse from './TransactionCollapse'
 import { GdtEntryType } from '../graphql/enums'
 
+import Vue from 'vue'
+
 const localVue = global.localVue
 
+const consoleErrorMock = jest.fn()
+
 describe('TransactionCollapse', () => {
   let wrapper
 
@@ -16,6 +20,31 @@ describe('TransactionCollapse', () => {
     return mount(TransactionCollapse, { localVue, mocks, propsData })
   }
 
+  describe('no valid GDT entry type', () => {
+    beforeEach(async () => {
+      // disable throwing Errors on warnings to catch the warning
+      Vue.config.warnHandler = (w) => {}
+      // eslint-disable-next-line no-console
+      console.error = consoleErrorMock
+      const propsData = {
+        amount: 100,
+        gdt: 110,
+        factor: 22,
+        gdtEntryType: GdtEntryType.FORM,
+      }
+      wrapper = Wrapper(propsData)
+      await wrapper.setProps({ gdtEntryType: 'NOT_VALID' })
+    })
+
+    it('throws an error', () => {
+      expect(consoleErrorMock).toBeCalledWith(
+        expect.objectContaining({
+          message: 'no additional transaction info for this type: NOT_VALID',
+        }),
+      )
+    })
+  })
+
   describe('mount with gdtEntryType: FORM', () => {
     beforeEach(() => {
       const propsData = {
@@ -24,7 +53,6 @@ describe('TransactionCollapse', () => {
         factor: 22,
         gdtEntryType: GdtEntryType.FORM,
       }
-
       wrapper = Wrapper(propsData)
     })
 
@@ -41,23 +69,23 @@ describe('TransactionCollapse', () => {
     })
 
     it('renders the component collapse-headline', () => {
-      expect(wrapper.find('#collapse-headline').text()).toBe('gdt.calculation')
+      expect(wrapper.find('.collapse-headline').text()).toBe('gdt.calculation')
     })
 
     it('renders the component collapse-first', () => {
-      expect(wrapper.find('#collapse-first').text()).toBe('gdt.factor')
+      expect(wrapper.find('.collapse-first').text()).toBe('gdt.factor')
     })
 
     it('renders the component collapse-second', () => {
-      expect(wrapper.find('#collapse-second').text()).toBe('gdt.formula')
+      expect(wrapper.find('.collapse-second').text()).toBe('gdt.formula')
     })
 
     it('renders the component collapse-firstMath', () => {
-      expect(wrapper.find('#collapse-firstMath').text()).toBe('22 GDT pro €')
+      expect(wrapper.find('.collapse-firstMath').text()).toBe('22 GDT pro €')
     })
 
     it('renders the component collapse-secondMath', () => {
-      expect(wrapper.find('#collapse-secondMath').text()).toBe('100 € * 22 GDT / € = 110 GDT')
+      expect(wrapper.find('.collapse-secondMath').text()).toBe('100 € * 22 GDT / € = 110 GDT')
     })
   })
 
@@ -86,23 +114,23 @@ describe('TransactionCollapse', () => {
     })
 
     it('renders the component collapse-headline', () => {
-      expect(wrapper.find('#collapse-headline').text()).toBe('gdt.conversion-gdt-euro')
+      expect(wrapper.find('.collapse-headline').text()).toBe('gdt.conversion-gdt-euro')
     })
 
     it('renders the component collapse-first', () => {
-      expect(wrapper.find('#collapse-first').text()).toBe('gdt.raise')
+      expect(wrapper.find('.collapse-first').text()).toBe('gdt.raise')
     })
 
     it('renders the component collapse-second', () => {
-      expect(wrapper.find('#collapse-second').text()).toBe('gdt.conversion')
+      expect(wrapper.find('.collapse-second').text()).toBe('gdt.conversion')
     })
 
     it('renders the component collapse-firstMath', () => {
-      expect(wrapper.find('#collapse-firstMath').text()).toBe('2200 %')
+      expect(wrapper.find('.collapse-firstMath').text()).toBe('2200 %')
     })
 
     it('renders the component collapse-secondMath', () => {
-      expect(wrapper.find('#collapse-secondMath').text()).toBe('100 GDT * 2200 % = 2200 GDT')
+      expect(wrapper.find('.collapse-secondMath').text()).toBe('100 GDT * 2200 % = 2200 GDT')
     })
   })
 
@@ -131,23 +159,23 @@ describe('TransactionCollapse', () => {
     })
 
     it('renders the component collapse-headline', () => {
-      expect(wrapper.find('#collapse-headline').text()).toBe('gdt.publisher')
+      expect(wrapper.find('.collapse-headline').text()).toBe('gdt.publisher')
     })
 
     it('renders the component collapse-first', () => {
-      expect(wrapper.find('#collapse-first').text()).toBe('')
+      expect(wrapper.find('.collapse-first').text()).toBe('')
     })
 
     it('renders the component collapse-second', () => {
-      expect(wrapper.find('#collapse-second').text()).toBe('')
+      expect(wrapper.find('.collapse-second').text()).toBe('')
     })
 
     it('renders the component collapse-firstMath', () => {
-      expect(wrapper.find('#collapse-firstMath').text()).toBe('')
+      expect(wrapper.find('.collapse-firstMath').text()).toBe('')
     })
 
     it('renders the component collapse-secondMath', () => {
-      expect(wrapper.find('#collapse-secondMath').text()).toBe('')
+      expect(wrapper.find('.collapse-secondMath').text()).toBe('')
     })
   })
 })

frontend/src/components/TransactionCollapse.vue

@@ -4,19 +4,19 @@
     style="border: 0px; background-color: #f1f1f1"
   >
     <b-row class="gdt-list-collapse-header-text text-center pb-3">
-      <b-col id="collapse-headline">
+      <b-col class="collapse-headline">
-        <b>{{ getLinesByType(gdtEntryType).headline }}</b>
+        <b>{{ getLinesByType.headline }}</b>
       </b-col>
     </b-row>
     <b-row class="gdt-list-collapse-box--all">
       <b-col cols="6" class="text-right collapse-col-left">
-        <div id="collapse-first">{{ getLinesByType(gdtEntryType).first }}</div>
+        <div class="collapse-first">{{ getLinesByType.first }}</div>
-        <div id="collapse-second">{{ getLinesByType(gdtEntryType).second }}</div>
+        <div class="collapse-second">{{ getLinesByType.second }}</div>
       </b-col>
       <b-col cols="6" class="collapse-col-right">
-        <div id="collapse-firstMath">{{ getLinesByType(gdtEntryType).firstMath }}</div>
+        <div class="collapse-firstMath">{{ getLinesByType.firstMath }}</div>
-        <div id="collapse-secondMath">
+        <div class="collapse-secondMath">
-          {{ getLinesByType(gdtEntryType).secondMath }}
+          {{ getLinesByType.secondMath }}
         </div>
       </b-col>
     </b-row>
@@ -33,9 +33,9 @@ export default {
     factor: { type: Number },
     gdt: { type: Number },
   },
-  methods: {
+  computed: {
-    getLinesByType(givenType) {
+    getLinesByType() {
-      switch (givenType) {
+      switch (this.gdtEntryType) {
         case GdtEntryType.FORM:
         case GdtEntryType.CVS:
         case GdtEntryType.ELOPAGE:
@@ -80,7 +80,7 @@ export default {
           }
         }
         default:
-          throw new Error('no additional transaction info for this type: ' + givenType)
+          throw new Error('no additional transaction info for this type: ' + this.gdtEntryType)
       }
     },
   },

frontend/src/locales/de.json

@@ -132,8 +132,8 @@
     },
     "newsletter": {
       "newsletter": "Newsletter",
-      "newsletterFalse": "Du bist aus Newslettersystem ausgetragen.",
+      "newsletterFalse": "Du erhältst keine Informationen per E-Mail.",
-      "newsletterTrue": "Du bist im Newslettersystem eingetragen."
+      "newsletterTrue": "Du erhältst Informationen per E-Mail."
     },
     "password": {
       "change-password": "Passwort ändern",

frontend/src/locales/en.json

@@ -132,8 +132,8 @@
     },
     "newsletter": {
       "newsletter": "Newsletter",
-      "newsletterFalse": "You are unsubscribed from newsletter system.",
+      "newsletterFalse": "You will not receive any information by e-mail.",
-      "newsletterTrue": "You are subscribed to newsletter system."
+      "newsletterTrue": "You will receive information by e-mail."
     },
     "password": {
       "change-password": "Change password",

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

@@ -10,16 +10,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"
@@ -28,6 +20,7 @@
           :gdtEntryType="gdtEntryType"
           :factor="factor"
           :gdt="gdt"
+          :id="id"
         ></transaction>
       </div>
     </div>