IT4Change/gradido
3
0
Fork 0
mirror of https://github.com/IT4Change/gradido.git synced 2025-12-13 07:45:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
elweyn 2021-10-27 15:19:15 +02:00
commit 183d25dde4
8 changed files with 281 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.github/workflows/test.yml vendored
View File

@ -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 }}
##############################################################################

204
frontend/src/components/Transaction.spec.js
View File

@ -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()
})
})
})
})

29
frontend/src/components/Transaction.vue
View File

@ -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
:icon="getLinesByType(gdtEntryType).icon"
:class="getLinesByType(gdtEntryType).iconclasses"
></b-icon>
<b-icon :icon="getLinesByType.icon" :class="getLinesByType.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
},
},
methods: {
getLinesByType(givenType) {
switch (givenType) {
getLinesByType() {
switch (this.gdtEntryType) {
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)
}
},
},

60
frontend/src/components/TransactionCollapse.spec.js
View File

@ -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('')
})
})
})

22
frontend/src/components/TransactionCollapse.vue
View File

@ -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>{{ getLinesByType(gdtEntryType).headline }}</b>
<b-col class="collapse-headline">
<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 id="collapse-second">{{ getLinesByType(gdtEntryType).second }}</div>
<div class="collapse-first">{{ getLinesByType.first }}</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 id="collapse-secondMath">
{{ getLinesByType(gdtEntryType).secondMath }}
<div class="collapse-firstMath">{{ getLinesByType.firstMath }}</div>
<div class="collapse-secondMath">
{{ getLinesByType.secondMath }}
</div>
</b-col>
</b-row>
@ -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)
}
},
},

4
frontend/src/locales/de.json
View File

@ -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",

4
frontend/src/locales/en.json
View File

@ -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",

13
frontend/src/views/Pages/AccountOverview/GdtTransactionList.vue
View File

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