mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
use id as collapse id. complete test
This commit is contained in:
Moriz Wahl
parent
cf0bd2ff56
commit
cf07dc15a0
@ -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()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@ -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.icon"
|
||||
:class="getLinesByType.iconclasses"
|
||||
></b-icon>
|
||||
<b-icon :icon="getLinesByType.icon" :class="getLinesByType.iconclasses"></b-icon>
|
||||
</div>
|
||||
|
||||
<!-- collaps Button -->
|
||||
@ -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"
|
||||
@ -71,63 +68,67 @@
|
||||
</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() {
|
||||
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)
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
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 },
|
||||
id: { type: Number },
|
||||
},
|
||||
computed: {
|
||||
collapseId() {
|
||||
return 'gdt-collapse-' + String(this.id)
|
||||
},
|
||||
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>
|
||||
|
||||
@ -6,16 +6,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"
|
||||
@ -24,6 +16,7 @@
|
||||
:gdtEntryType="gdtEntryType"
|
||||
:factor="factor"
|
||||
:gdt="gdt"
|
||||
:id="id"
|
||||
></transaction>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user