From cf0bd2ff56d6042ff431c1f4fe3eed901c608e81 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Wed, 20 Oct 2021 10:40:00 +0200 Subject: [PATCH 1/6] refactor: Transaction Component --- frontend/src/components/Transaction.spec.js | 65 ++++++++++ frontend/src/components/Transaction.vue | 128 ++++++++++---------- 2 files changed, 128 insertions(+), 65 deletions(-) diff --git a/frontend/src/components/Transaction.spec.js b/frontend/src/components/Transaction.spec.js index 43dc44782..67091c363 100644 --- a/frontend/src/components/Transaction.spec.js +++ b/frontend/src/components/Transaction.spec.js @@ -1,8 +1,55 @@ import { mount } from '@vue/test-utils' import Transaction from './Transaction' +import Vue from 'vue' + +// disable throwing Errors on warnings to catch the warning +Vue.config.warnHandler = (w) => { +} const localVue = global.localVue +const consoleError = console.error +const consoleErrorMock = jest.fn() +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 @@ -27,5 +74,23 @@ describe('Transaction', () => { it('renders the component', () => { expect(wrapper.find('div.gdt-transaction-list-item').exists()).toBeTruthy() }) + + describe('no valid GDT entry type', () => { + beforeEach(async () => { + 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 () + it('has the heart icon', () => { + console.log(wrapper.html()) + expect(wrapper.vm.getLinesByType.icon).toBe('heart') + }) + }) }) }) diff --git a/frontend/src/components/Transaction.vue b/frontend/src/components/Transaction.vue index cc027306b..41bd54b42 100644 --- a/frontend/src/components/Transaction.vue +++ b/frontend/src/components/Transaction.vue @@ -5,8 +5,8 @@
@@ -20,10 +20,10 @@ - {{ getLinesByType(gdtEntryType).description }} + {{ getLinesByType.description }} - {{ getLinesByType(gdtEntryType).descriptiontext }} + {{ getLinesByType.descriptiontext }} @@ -33,7 +33,7 @@ {{ $t('gdt.credit') }} - {{ getLinesByType(gdtEntryType).credittext }} + {{ getLinesByType.credittext }} @@ -71,65 +71,63 @@ From cf07dc15a08677ab8dab7d3923c674dbb213a97d Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Wed, 20 Oct 2021 13:18:50 +0200 Subject: [PATCH 2/6] use id as collapse id. complete test --- frontend/src/components/Transaction.spec.js | 235 ++++++++++++++---- frontend/src/components/Transaction.vue | 129 +++++----- .../AccountOverview/GdtTransactionList.vue | 13 +- 3 files changed, 256 insertions(+), 121 deletions(-) diff --git a/frontend/src/components/Transaction.spec.js b/frontend/src/components/Transaction.spec.js index 67091c363..d0bb009b7 100644 --- a/frontend/src/components/Transaction.spec.js +++ b/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.vm.getLinesByType.icon).toBe('heart') + 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() }) }) }) diff --git a/frontend/src/components/Transaction.vue b/frontend/src/components/Transaction.vue index 41bd54b42..f1deca565 100644 --- a/frontend/src/components/Transaction.vue +++ b/frontend/src/components/Transaction.vue @@ -1,13 +1,10 @@ diff --git a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue index e69e5edec..fb058ca66 100644 --- a/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue +++ b/frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue @@ -6,16 +6,8 @@
From 80246ed70ddf6f67383d5c6748a4b7bea8633b39 Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Wed, 20 Oct 2021 14:28:48 +0200 Subject: [PATCH 3/6] refactor transaction collapse component and test --- .../components/TransactionCollapse.spec.js | 62 ++++++++++++++----- .../src/components/TransactionCollapse.vue | 22 +++---- 2 files changed, 57 insertions(+), 27 deletions(-) diff --git a/frontend/src/components/TransactionCollapse.spec.js b/frontend/src/components/TransactionCollapse.spec.js index 198ce2780..c25bb5aad 100644 --- a/frontend/src/components/TransactionCollapse.spec.js +++ b/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('') }) }) }) diff --git a/frontend/src/components/TransactionCollapse.vue b/frontend/src/components/TransactionCollapse.vue index f1eb57aa0..45af607d5 100644 --- a/frontend/src/components/TransactionCollapse.vue +++ b/frontend/src/components/TransactionCollapse.vue @@ -4,19 +4,19 @@ style="border: 0px; background-color: #f1f1f1" > - - {{ getLinesByType(gdtEntryType).headline }} + + {{ getLinesByType.headline }} -
{{ getLinesByType(gdtEntryType).first }}
-
{{ getLinesByType(gdtEntryType).second }}
+
{{ getLinesByType.first }}
+
{{ getLinesByType.second }}
 -
{{ getLinesByType(gdtEntryType).firstMath }}
-
- {{ getLinesByType(gdtEntryType).secondMath }} +
{{ getLinesByType.firstMath }}
+
+ {{ getLinesByType.secondMath }}
@@ -33,9 +33,9 @@ export default { factor: { type: Number }, gdt: { type: Number }, }, - methods: { - getLinesByType(givenType) { - switch (givenType) { + computed: { + getLinesByType() { + 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) } }, }, From a09b2200fc0d9066ac07c1360955e5b0f942785d Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Wed, 20 Oct 2021 14:42:17 +0200 Subject: [PATCH 4/6] coverage frontend unit tests to 83% --- .github/workflows/test.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml index 1efaf19d2..b9c6d5495 100644 --- a/.github/workflows/test.yml +++ b/.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 }} ############################################################################## From 4974cfd79a66533bbcfac1736968d8d9a5da1f7f Mon Sep 17 00:00:00 2001 From: elweyn Date: Mon, 25 Oct 2021 09:32:34 +0200 Subject: [PATCH 5/6] Text changes for german and english. --- frontend/src/locales/de.json | 4 ++-- frontend/src/locales/en.json | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json index e46f9bb83..2db5f6e0d 100644 --- a/frontend/src/locales/de.json +++ b/frontend/src/locales/de.json @@ -132,8 +132,8 @@ }, "newsletter": { "newsletter": "Newsletter", - "newsletterFalse": "Du bist aus Newslettersystem ausgetragen.", - "newsletterTrue": "Du bist im Newslettersystem eingetragen." + "newsletterFalse": "Du erhältst keine Informationen per E-Mail.", + "newsletterTrue": "Du erhältst Informationen per E-Mail." }, "password": { "change-password": "Passwort ändern", diff --git a/frontend/src/locales/en.json b/frontend/src/locales/en.json index 23d551272..99fcd46a7 100644 --- a/frontend/src/locales/en.json +++ b/frontend/src/locales/en.json @@ -132,8 +132,8 @@ }, "newsletter": { "newsletter": "Newsletter", - "newsletterFalse": "You are unsubscribed from newsletter system.", - "newsletterTrue": "You are subscribed to newsletter system." + "newsletterFalse": "You will not receive any information by e-mail.", + "newsletterTrue": "You will receive information by e-mail." }, "password": { "change-password": "Change password", From f482eb7db6e7ff8ccc9d1841b1689bfd6f85ecae Mon Sep 17 00:00:00 2001 From: Moriz Wahl Date: Tue, 26 Oct 2021 07:52:49 +0200 Subject: [PATCH 6/6] mock console error only in the test for the error --- frontend/src/components/Transaction.spec.js | 10 ++++------ frontend/src/components/TransactionCollapse.spec.js | 10 ++++------ 2 files changed, 8 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/Transaction.spec.js b/frontend/src/components/Transaction.spec.js index d0bb009b7..aaad023e0 100644 --- a/frontend/src/components/Transaction.spec.js +++ b/frontend/src/components/Transaction.spec.js @@ -2,16 +2,10 @@ import { mount } from '@vue/test-utils' import Transaction from './Transaction' 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('Transaction', () => { let wrapper @@ -43,6 +37,10 @@ describe('Transaction', () => { 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' }) }) diff --git a/frontend/src/components/TransactionCollapse.spec.js b/frontend/src/components/TransactionCollapse.spec.js index c25bb5aad..58385700a 100644 --- a/frontend/src/components/TransactionCollapse.spec.js +++ b/frontend/src/components/TransactionCollapse.spec.js @@ -4,16 +4,10 @@ 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 @@ -28,6 +22,10 @@ describe('TransactionCollapse', () => { 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,