refactor transaction collapse component and test

frontend/src/components/TransactionCollapse.spec.js

@@ -2,8 +2,18 @@ import { mount } from '@vue/test-utils'
 import TransactionCollapse from './TransactionCollapse'
 import { GdtEntryType } from '../graphql/enums'
 
+import Vue from 'vue'
+
+// disable throwing Errors on warnings to catch the warning
+Vue.config.warnHandler = (w) => {}
+
 const localVue = global.localVue
 
+const consoleErrorMock = jest.fn()
+
+// eslint-disable-next-line no-console
+console.error = consoleErrorMock
+
 describe('TransactionCollapse', () => {
   let wrapper
 
@@ -16,6 +26,27 @@ describe('TransactionCollapse', () => {
     return mount(TransactionCollapse, { localVue, mocks, propsData })
   }
 
+  describe('no valid GDT entry type', () => {
+    beforeEach(async () => {
+      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 +55,6 @@ describe('TransactionCollapse', () => {
         factor: 22,
         gdtEntryType: GdtEntryType.FORM,
       }
-
       wrapper = Wrapper(propsData)
     })
 
@@ -41,23 +71,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 +116,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 +161,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)
       }
     },
   },