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

refactor: Transaction Component

Browse Source
This commit is contained in:
Moriz Wahl 2021-10-20 10:40:00 +02:00
parent 2342b2e266
commit cf0bd2ff56
2 changed files with 128 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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

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

@ -5,8 +5,8 @@
<!-- icon -->
<div class="text-right" style="position: absolute">
<b-icon
:icon="getLinesByType(gdtEntryType).icon"
:class="getLinesByType(gdtEntryType).iconclasses"
:icon="getLinesByType.icon"
:class="getLinesByType.iconclasses"
></b-icon>
</div>
@ -20,10 +20,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 +33,7 @@
{{ $t('gdt.credit') }}
</b-col>
<b-col cols="6">
{{ getLinesByType(gdtEntryType).credittext }}
{{ getLinesByType.credittext }}
</b-col>
</b-row>
@ -71,65 +71,63 @@
</div>
</template>
<script>
import TransactionCollapse from './TransactionCollapse.vue'
import { GdtEntryType } from '../graphql/enums'
import TransactionCollapse from './TransactionCollapse.vue'
import { GdtEntryType } from '../graphql/enums'
export default {
name: 'Transaction',
components: {
TransactionCollapse,
},
props: {
amount: { type: Number },
date: { type: String },
comment: { type: String },
gdtEntryType: { type: String, default: GdtEntryType.FORM },
factor: { type: Number },
gdt: { type: Number },
},
computed: {
isGlobalModificator: function () {
return this.gdtEntryType === GdtEntryType.GLOBAL_MODIFICATOR
},
},
methods: {
getLinesByType(givenType) {
switch (givenType) {
case GdtEntryType.FORM:
case GdtEntryType.CVS:
case GdtEntryType.ELOPAGE:
case GdtEntryType.DIGISTORE:
case GdtEntryType.CVS2: {
return {
icon: 'heart',
iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
description: this.$t('gdt.contribution'),
descriptiontext: this.$n(this.amount, 'decimal') + ' €',
credittext: this.$n(this.gdt, 'decimal') + ' GDT',
}
}
case GdtEntryType.ELOPAGE_PUBLISHER: {
return {
icon: 'person-check',
iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
description: this.$t('gdt.recruited-member'),
descriptiontext: '5%',
credittext: this.$n(this.amount, 'decimal') + ' GDT',
}
}
case GdtEntryType.GLOBAL_MODIFICATOR: {
return {
icon: 'gift',
iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
description: this.$t('gdt.gdt-received'),
descriptiontext: this.comment,
credittext: this.$n(this.gdt, 'decimal') + ' GDT',
}
}
default:
throw new Error('no lines for this type: ' + givenType)
}
},
},
}
export default {
name: 'Transaction',
components: {
TransactionCollapse,
},
props: {
amount: { type: Number },
date: { type: String },
comment: { type: String },
gdtEntryType: { type: String, default: GdtEntryType.FORM },
factor: { type: Number },
gdt: { type: Number },
},
computed: {
isGlobalModificator() {
return this.gdtEntryType === GdtEntryType.GLOBAL_MODIFICATOR
},
getLinesByType() {
switch (this.gdtEntryType) {
case GdtEntryType.FORM:
case GdtEntryType.CVS:
case GdtEntryType.ELOPAGE:
case GdtEntryType.DIGISTORE:
case GdtEntryType.CVS2: {
return {
icon: 'heart',
iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
description: this.$t('gdt.contribution'),
descriptiontext: this.$n(this.amount, 'decimal') + ' €',
credittext: this.$n(this.gdt, 'decimal') + ' GDT',
}
}
case GdtEntryType.ELOPAGE_PUBLISHER: {
return {
icon: 'person-check',
iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
description: this.$t('gdt.recruited-member'),
descriptiontext: '5%',
credittext: this.$n(this.amount, 'decimal') + ' GDT',
}
}
case GdtEntryType.GLOBAL_MODIFICATOR: {
return {
icon: 'gift',
iconclasses: 'gradido-global-color-accent m-mb-1 font2em',
description: this.$t('gdt.gdt-received'),
descriptiontext: this.comment,
credittext: this.$n(this.gdt, 'decimal') + ' GDT',
}
}
default:
throw new Error('no lines for this type: ' + this.gdtEntryType)
}
},
},
}
</script>