gradido/frontend/src/components/Transaction.spec.js
MateuszMichalowski b69d2273ae
feat(frontend): add transaction link in latest transactions (#3375)
* fix(frontend): post migration fixes

* fix(frontend): align with stylelint

* fix(frontend): fix tests and dashboard layout

* feat(frontend): add link to transactions

* feat(frontend): remove unused code

* feat(frontend): let dynamic keys in translations

* feat(frontend): fix stylelint

* feat(frontend): add missing styles for breadcrumb

---------

Co-authored-by: einhornimmond <dario.rekowski@gmx.de>
2024-10-15 16:06:34 +02:00

480 lines
15 KiB
JavaScript

// import { mount } from '@vue/test-utils'
// import Transaction from './Transaction'
// import Vue from 'vue'
// import flushPromises from 'flush-promises'
//
// const localVue = global.localVue
//
// const consoleErrorMock = jest.fn()
//
// describe('Transaction', () => {
// let wrapper
//
// const mocks = {
// $i18n: {
// locale: 'en',
// },
// $t: jest.fn((t) => t),
// $n: jest.fn((n) => n),
// $d: jest.fn((d) => d),
// }
//
// const Wrapper = () => {
// return mount(Transaction, { localVue, mocks })
// }
//
// describe('mount', () => {
// beforeEach(() => {
// wrapper = Wrapper()
// })
//
// it('renders the component', () => {
// expect(wrapper.find('div.gdt-transaction-list').exists()).toBeTruthy()
// })
//
// it('has a collapse icon bi-arrow-down-circle', () => {
// expect(wrapper.find('div.gdt-transaction-list').findAll('svg').at(1).classes()).toEqual([
// 'bi-arrow-down-circle',
// 'h1',
// 'b-icon',
// 'bi',
// 'text-muted',
// ])
// })
//
// 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(0).text()).toContain('1700 GDT')
// })
//
// it.skip('renders the comment message', () => {
// expect(wrapper.findAll('div.row').at(0).text()).toContain('This is a comment')
// })
//
// it.skip('renders the date', () => {
// expect(wrapper.findAll('div.row').at(0).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(1).text()).toContain('gdt.calculation')
// })
// })
// // how to open the collapse ?????
// describe.skip('collapse is open', () => {
// beforeEach(async () => {
// await wrapper.find('div#gdt-collapse-42').trigger('click')
// await wrapper.vm.$nextTick()
// await flushPromises()
// await wrapper.vm.$nextTick()
// await flushPromises()
// })
//
// it('shows the collapse', () => {
// 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(0).text()).toContain('365.67 GDT')
// })
//
// it('renders the gdt.publisher', () => {
// expect(wrapper.findAll('div.row').at(1).text()).toContain('gdt.publisher')
// })
//
// it.skip('renders the date', () => {
// expect(wrapper.findAll('div.row').at(2).text()).toContain('Fri Apr 10 2020')
// })
//
// it('does not show the collapse by default', () => {
// expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBeFalsy()
// })
//
// describe.skip('without comment', () => {
// it('does not render the message row', async () => {
// await wrapper.setProps({ comment: undefined })
// expect(wrapper.findAll('div.row').at(0).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(0).text()).toContain('61.23 GDT')
// })
//
// it('renders the gdt.conversion-gdt-euro', () => {
// expect(wrapper.findAll('div.row').at(1).text()).toContain('gdt.conversion-gdt-euro')
// })
//
// it('does not show the collapse by default', () => {
// expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBeFalsy()
// })
// })
// })
// })
import { mount } from '@vue/test-utils'
import { describe, it, expect, beforeEach, vi } from 'vitest'
import Transaction from './Transaction'
import { nextTick } from 'vue'
import { BAvatar, BCol, BCollapse, BRow } from 'bootstrap-vue-next'
import TransactionCollapse from '@/components/TransactionCollapse.vue'
import { GdtEntryType } from '@/graphql/enums'
import VariantIcon from '@/components/VariantIcon.vue'
import { createStore } from 'vuex'
const mockToastError = vi.fn()
vi.mock('@/composables/useToast', () => ({
useAppToast: vi.fn(() => ({
toastError: mockToastError,
})),
}))
// Mock useI18n
vi.mock('vue-i18n', () => ({
useI18n: () => ({
t: (key) => key,
n: (value) => value?.toString() ?? '',
d: (value) => value?.toString() ?? '',
}),
}))
describe('Transaction', () => {
let wrapper
const Wrapper = () => {
return mount(Transaction, {
global: {
plugins: [
createStore({
state: {
transactionToHighlightId: '',
},
}),
],
mocks: {
$d: (value) => value?.toString() ?? '',
$n: (value) => value?.toString() ?? '',
$t: (value) => value?.toString() ?? '',
},
stubs: {
BRow,
BCol,
BAvatar,
BCollapse,
VariantIcon,
},
},
})
}
describe('mount', () => {
beforeEach(() => {
wrapper = Wrapper()
})
it('renders the component', () => {
expect(wrapper.find('div.gdt-transaction-list').exists()).toBe(true)
})
it('has a collapse icon bi-arrow-down-circle', () => {
expect(wrapper.find('ibiarrowdowncircle').exists()).toBe(true)
})
describe('no valid GDT entry type', () => {
it('throws an error for invalid gdtEntryType', async () => {
const wrapper = mount(TransactionCollapse, {
props: {
amount: 100,
gdt: 110,
factor: 22,
gdtEntryType: GdtEntryType.FORM,
},
global: {
mocks: {
$t: (msg) => msg,
$n: (n) => n,
},
},
})
await expect(async () => {
await wrapper.setProps({ gdtEntryType: 'NOT_VALID' })
}).rejects.toThrow('no additional transaction info 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('ibiheart').exists()).toBe(true)
})
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(0).text()).toContain('1700 GDT')
})
// it('does not show the collapse by default', () => {
// expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBe(false)
// })
describe('without comment', () => {
it('does not render the message row', async () => {
await wrapper.setProps({ comment: undefined })
expect(wrapper.findAll('div.row').at(1).text()).toContain('gdt.calculation')
})
})
describe('collapse is open', () => {
beforeEach(async () => {
await wrapper.find('.list-group').trigger('click')
await nextTick()
})
it('shows the collapse', () => {
expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBe(true)
})
})
})
describe('GdtEntryType.CVS', () => {
it('behaves as default FORM', async () => {
await wrapper.setProps({ gdtEntryType: 'CVS' })
expect(wrapper.find('ibiheart').exists()).toBe(true)
})
})
describe('GdtEntryType.ELOPAGE', () => {
it('behaves as default FORM', async () => {
await wrapper.setProps({ gdtEntryType: 'ELOPAGE' })
expect(wrapper.find('ibiheart').exists()).toBe(true)
})
})
describe('GdtEntryType.DIGISTORE', () => {
it('behaves as default FORM', async () => {
await wrapper.setProps({ gdtEntryType: 'DIGISTORE' })
expect(wrapper.find('ibiheart').exists()).toBe(true)
})
})
describe('GdtEntryType.CVS2', () => {
it('behaves as default FORM', async () => {
await wrapper.setProps({ gdtEntryType: 'CVS2' })
expect(wrapper.find('ibiheart').exists()).toBe(true)
})
})
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('ibipersoncheck').exists()).toBe(true)
})
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(0).text()).toContain('365.67 GDT')
})
// it('does not show the collapse by default', () => {
// expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBe(false)
// })
})
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,
})
wrapper.attachTo = document.body
})
it('has the gift icon', () => {
expect(wrapper.find('ibigift').exists()).toBe(true)
})
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(0).text()).toContain('61.23 GDT')
})
// it('does not show the collapse by default', () => {
// expect(wrapper.find('div#gdt-collapse-42').isVisible()).toBe(false)
// })
})
})
})