mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
478 lines
14 KiB
JavaScript
478 lines
14 KiB
JavaScript
import { mount } from '@vue/test-utils'
|
|
import GddTransactionList from './GddTransactionList'
|
|
|
|
const localVue = global.localVue
|
|
|
|
const errorHandler = jest.fn()
|
|
|
|
localVue.config.errorHandler = errorHandler
|
|
|
|
const scrollToMock = jest.fn()
|
|
|
|
global.scrollTo = scrollToMock
|
|
|
|
describe('GddTransactionList', () => {
|
|
let wrapper
|
|
|
|
const mocks = {
|
|
$n: jest.fn((n) => n),
|
|
$t: jest.fn((t) => t),
|
|
$d: jest.fn((d) => d),
|
|
$i18n: {
|
|
locale: () => 'de',
|
|
},
|
|
}
|
|
|
|
const Wrapper = () => {
|
|
return mount(GddTransactionList, { localVue, mocks })
|
|
}
|
|
|
|
describe('mount', () => {
|
|
beforeEach(() => {
|
|
wrapper = Wrapper()
|
|
})
|
|
|
|
it('renders the component', () => {
|
|
expect(wrapper.find('div.gdd-transaction-list').exists()).toBeTruthy()
|
|
})
|
|
|
|
describe('no transactions from server', () => {
|
|
beforeEach(async () => {
|
|
await wrapper.setProps({
|
|
transactions: false,
|
|
})
|
|
})
|
|
it('shows error no transaction list', () => {
|
|
expect(wrapper.find('div.test-no-transactionlist').text()).toContain(
|
|
'error.no-transactionlist',
|
|
)
|
|
})
|
|
})
|
|
describe('0 transactions from server', () => {
|
|
beforeEach(async () => {
|
|
await wrapper.setProps({
|
|
transactions: [],
|
|
transactionCount: 0,
|
|
})
|
|
})
|
|
it('Transactions Array is empty, 0 transactions', () => {
|
|
expect(wrapper.find('div.test-empty-transactionlist').exists()).toBe(false)
|
|
})
|
|
})
|
|
|
|
describe('without any properties', () => {
|
|
beforeEach(async () => {
|
|
await wrapper.setProps({
|
|
transactions: [],
|
|
transactionCount: -1,
|
|
})
|
|
})
|
|
it('renders text saying that there are error.empty-transactionlist ', () => {
|
|
expect(wrapper.find('div.gdd-transaction-list').text()).toContain(
|
|
'transaction.nullTransactions',
|
|
)
|
|
})
|
|
it('renders text saying that there are no transaction.nullTransactions', () => {
|
|
expect(wrapper.find('div.gdd-transaction-list').text()).toContain(
|
|
'transaction.nullTransactions',
|
|
)
|
|
})
|
|
})
|
|
|
|
describe('timestamp property', () => {
|
|
it('emits update-transactions when timestamp changes', async () => {
|
|
await wrapper.setProps({ timestamp: 0 })
|
|
expect(wrapper.emitted('update-transactions')).toBeTruthy()
|
|
})
|
|
})
|
|
|
|
describe('with transactions', () => {
|
|
beforeEach(async () => {
|
|
await wrapper.setProps({
|
|
transactions: [
|
|
{
|
|
balance: 19.93,
|
|
date: '2021-05-25T17:38:13+00:00',
|
|
memo: 'Alles Gute zum Geburtstag',
|
|
name: 'Bob der Baumeister',
|
|
transaction_id: 29,
|
|
type: 'send',
|
|
decay: { balance: '0.5' },
|
|
},
|
|
{
|
|
balance: 1000,
|
|
date: '2021-04-29T15:34:49+00:00',
|
|
memo: 'Gut das du da bist!',
|
|
name: 'Gradido Akademie',
|
|
transaction_id: 3,
|
|
type: 'creation',
|
|
},
|
|
{
|
|
balance: 314.98,
|
|
date: '2021-04-29T17:26:40+00:00',
|
|
memo: 'Für das Fahrrad!',
|
|
name: 'Jan Ulrich',
|
|
transaction_id: 8,
|
|
type: 'receive',
|
|
decay: { balance: '1.5' },
|
|
},
|
|
{
|
|
balance: '1.07',
|
|
type: 'decay',
|
|
},
|
|
],
|
|
transactionCount: 12,
|
|
})
|
|
})
|
|
|
|
it('renders 4 transactions', () => {
|
|
expect(wrapper.findAll('div.gdd-transaction-list-item')).toHaveLength(4)
|
|
})
|
|
|
|
describe('send transactions', () => {
|
|
let transaction
|
|
beforeEach(() => {
|
|
transaction = wrapper.findAll('div.gdd-transaction-list-item').at(0)
|
|
})
|
|
|
|
it('has a bi-caret-down-square icon', () => {
|
|
expect(transaction.findAll('svg').at(0).classes()).toEqual([
|
|
'bi-caret-down-square',
|
|
'b-icon',
|
|
'bi',
|
|
'text-muted',
|
|
])
|
|
})
|
|
|
|
// it('transaction is clicked', async () => {
|
|
// await transaction.trigger('click')
|
|
// expect(transaction.findAll('svg').at(0).classes()).toEqual([
|
|
// 'bi-caret-up-square',
|
|
// 'b-icon',
|
|
// 'bi',
|
|
// 'text-muted',
|
|
// ])
|
|
// })
|
|
|
|
it('has a bi-arrow-left-circle icon', () => {
|
|
expect(transaction.findAll('svg').at(1).classes()).toContain('bi-arrow-left-circle')
|
|
})
|
|
|
|
it('has text-danger color', () => {
|
|
expect(transaction.findAll('svg').at(1).classes()).toContain('text-danger')
|
|
})
|
|
|
|
it('has a minus operator', () => {
|
|
expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
|
|
'-',
|
|
)
|
|
})
|
|
|
|
it('shows the amount of transaction', () => {
|
|
expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
|
|
'19.93',
|
|
)
|
|
})
|
|
|
|
it('shows the name of the receiver', () => {
|
|
expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
|
|
'Bob der Baumeister',
|
|
)
|
|
})
|
|
|
|
it('shows the message of the transaction', () => {
|
|
expect(transaction.findAll('.gdd-transaction-list-message').at(0).text()).toContain(
|
|
'Alles Gute zum Geburtstag',
|
|
)
|
|
})
|
|
|
|
it('shows the date of the transaction', () => {
|
|
expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
|
|
'Tue May 25 2021',
|
|
)
|
|
})
|
|
|
|
it('shows the decay calculation', () => {
|
|
expect(transaction.findAll('div.gdd-transaction-list-item-decay').at(0).text()).toContain(
|
|
'- 0.5',
|
|
)
|
|
})
|
|
})
|
|
|
|
describe('creation transactions', () => {
|
|
let transaction
|
|
beforeEach(() => {
|
|
transaction = wrapper.findAll('div.gdd-transaction-list-item').at(1)
|
|
})
|
|
|
|
it('has a bi-caret-down-square icon', () => {
|
|
expect(transaction.findAll('svg').at(0).classes()).toEqual([
|
|
'bi-caret-down-square',
|
|
'b-icon',
|
|
'bi',
|
|
'text-muted',
|
|
])
|
|
})
|
|
|
|
// it('transaction is clicked', async () => {
|
|
// await transaction.trigger('click')
|
|
// expect(transaction.findAll('svg').at(0).classes()).toEqual([
|
|
// 'bi-caret-up-square',
|
|
// 'b-icon',
|
|
// 'bi',
|
|
// 'text-muted',
|
|
// ])
|
|
// })
|
|
|
|
it('has a bi-gift icon', () => {
|
|
expect(transaction.findAll('svg').at(1).classes()).toContain('bi-gift')
|
|
})
|
|
|
|
it('has gradido-global-color-accent color', () => {
|
|
expect(transaction.findAll('svg').at(1).classes()).toContain(
|
|
'gradido-global-color-accent',
|
|
)
|
|
})
|
|
|
|
it('has a plus operator', () => {
|
|
expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
|
|
'+',
|
|
)
|
|
})
|
|
|
|
it('shows the amount of transaction', () => {
|
|
expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
|
|
'1000',
|
|
)
|
|
})
|
|
|
|
it('shows the name of the receiver', () => {
|
|
expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
|
|
'Gradido Akademie',
|
|
)
|
|
})
|
|
|
|
it('shows the date of the transaction', () => {
|
|
expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
|
|
'Thu Apr 29 2021',
|
|
)
|
|
})
|
|
})
|
|
|
|
describe('receive transactions', () => {
|
|
let transaction
|
|
beforeEach(() => {
|
|
transaction = wrapper.findAll('div.gdd-transaction-list-item').at(2)
|
|
})
|
|
|
|
it('has a bi-caret-down-square icon', () => {
|
|
expect(transaction.findAll('svg').at(0).classes()).toEqual([
|
|
'bi-caret-down-square',
|
|
'b-icon',
|
|
'bi',
|
|
'text-muted',
|
|
])
|
|
})
|
|
|
|
// it('transaction is clicked', async () => {
|
|
// await transaction.trigger('click')
|
|
// expect(transaction.findAll('svg').at(0).classes()).toEqual([
|
|
// 'bi-caret-up-square',
|
|
// 'b-icon',
|
|
// 'bi',
|
|
// 'text-muted',
|
|
// ])
|
|
// })
|
|
|
|
it('has a bi-arrow-right-circle icon', () => {
|
|
expect(transaction.findAll('svg').at(1).classes()).toContain('bi-arrow-right-circle')
|
|
})
|
|
|
|
it('has gradido-global-color-accent color', () => {
|
|
expect(transaction.findAll('svg').at(1).classes()).toContain(
|
|
'gradido-global-color-accent',
|
|
)
|
|
})
|
|
|
|
it('has a plus operator', () => {
|
|
expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
|
|
'+',
|
|
)
|
|
})
|
|
|
|
it('shows the amount of transaction', () => {
|
|
expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
|
|
'314.98',
|
|
)
|
|
})
|
|
|
|
it('shows the name of the recipient', () => {
|
|
expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toContain(
|
|
'Jan Ulrich',
|
|
)
|
|
})
|
|
|
|
it('shows the message of the transaction', () => {
|
|
expect(transaction.findAll('.gdd-transaction-list-message').at(0).text()).toContain(
|
|
'Für das Fahrrad!',
|
|
)
|
|
})
|
|
|
|
it('shows the date of the transaction', () => {
|
|
expect(transaction.findAll('.gdd-transaction-list-item-date').at(0).text()).toContain(
|
|
'Thu Apr 29 2021',
|
|
)
|
|
})
|
|
|
|
it('shows the decay calculation', () => {
|
|
expect(transaction.findAll('.gdd-transaction-list-item-decay').at(0).text()).toContain(
|
|
'- 1.5',
|
|
)
|
|
})
|
|
})
|
|
|
|
describe('decay transactions', () => {
|
|
let transaction
|
|
beforeEach(() => {
|
|
transaction = wrapper.findAll('div.gdd-transaction-list-item').at(3)
|
|
})
|
|
|
|
it('has a bi-caret-down-square icon', () => {
|
|
expect(transaction.findAll('svg').at(0).classes()).toEqual([
|
|
'bi-caret-down-square',
|
|
'b-icon',
|
|
'bi',
|
|
'text-muted',
|
|
])
|
|
})
|
|
|
|
// it('transaction is clicked', async () => {
|
|
// await transaction.trigger('click')
|
|
// expect(transaction.findAll('svg').at(0).classes()).toEqual([
|
|
// 'bi-caret-up-square',
|
|
// 'b-icon',
|
|
// 'bi',
|
|
// 'text-muted',
|
|
// ])
|
|
// })
|
|
|
|
it('has a bi-droplet-half icon', () => {
|
|
expect(transaction.findAll('svg').at(1).classes()).toContain('bi-droplet-half')
|
|
})
|
|
|
|
it('has gradido-global-color-gray color', () => {
|
|
expect(transaction.findAll('svg').at(1).classes()).toContain('gradido-global-color-gray')
|
|
})
|
|
|
|
it('has a minus operator', () => {
|
|
expect(transaction.findAll('.gdd-transaction-list-item-operator').at(0).text()).toContain(
|
|
'-',
|
|
)
|
|
})
|
|
|
|
it('shows the amount of transaction', () => {
|
|
expect(transaction.findAll('.gdd-transaction-list-item-amount').at(0).text()).toContain(
|
|
'1.07',
|
|
)
|
|
})
|
|
|
|
it('shows the name of the receiver', () => {
|
|
expect(transaction.findAll('.gdd-transaction-list-item-name').at(0).text()).toBe(
|
|
'decay.decay_since_last_transaction',
|
|
)
|
|
})
|
|
})
|
|
})
|
|
|
|
describe('with invalid transaction type', () => {
|
|
beforeEach(async () => {
|
|
await wrapper.setProps({
|
|
transactions: [
|
|
{
|
|
balance: '19.93',
|
|
date: '2021-05-25T17:38:13+00:00',
|
|
memo: 'Alles Gute zum Geburtstag',
|
|
name: 'Bob der Baumeister',
|
|
transaction_id: 29,
|
|
type: 'invalid',
|
|
},
|
|
],
|
|
})
|
|
})
|
|
|
|
it('throws an error', () => {
|
|
expect(errorHandler).toHaveBeenCalled()
|
|
})
|
|
})
|
|
|
|
describe('pagination buttons', () => {
|
|
const transactions = Array.from({ length: 42 }, (_, idx) => {
|
|
return {
|
|
balance: '3.14',
|
|
date: '2021-04-29T17:26:40+00:00',
|
|
memo: 'Kreiszahl PI',
|
|
name: 'Euklid',
|
|
transaction_id: idx + 1,
|
|
type: 'receive',
|
|
}
|
|
})
|
|
|
|
let paginationButtons
|
|
|
|
beforeEach(async () => {
|
|
await wrapper.setProps({
|
|
transactions,
|
|
transactionCount: 42,
|
|
showPagination: true,
|
|
})
|
|
paginationButtons = wrapper.find('div.pagination-buttons')
|
|
})
|
|
|
|
it('shows the pagination buttons', () => {
|
|
expect(paginationButtons.exists()).toBeTruthy()
|
|
})
|
|
|
|
it('has the previous button disabled', () => {
|
|
expect(paginationButtons.find('button.previous-page').attributes('disabled')).toBe(
|
|
'disabled',
|
|
)
|
|
})
|
|
|
|
it('shows the text "1 / 2"', () => {
|
|
expect(paginationButtons.find('p.text-center').text()).toBe('1 / 2')
|
|
})
|
|
|
|
it('emits update-transactions when next button is clicked', async () => {
|
|
await paginationButtons.find('button.next-page').trigger('click')
|
|
expect(wrapper.emitted('update-transactions')[1]).toEqual([
|
|
{ currentPage: 2, pageSize: 25 },
|
|
])
|
|
})
|
|
|
|
it('shows text "2 / 2" when next button is clicked', async () => {
|
|
await paginationButtons.find('button.next-page').trigger('click')
|
|
expect(paginationButtons.find('p.text-center').text()).toBe('2 / 2')
|
|
})
|
|
|
|
it('has next-button disabled when next button is clicked', async () => {
|
|
await paginationButtons.find('button.next-page').trigger('click')
|
|
expect(paginationButtons.find('button.next-page').attributes('disabled')).toBe('disabled')
|
|
})
|
|
|
|
it('scrolls to top after loading next page', async () => {
|
|
await paginationButtons.find('button.next-page').trigger('click')
|
|
expect(scrollToMock).toBeCalled()
|
|
})
|
|
|
|
it('emits update-transactions when preivous button is clicked after next buton', async () => {
|
|
await paginationButtons.find('button.next-page').trigger('click')
|
|
await paginationButtons.find('button.previous-page').trigger('click')
|
|
expect(wrapper.emitted('update-transactions')[2]).toEqual([
|
|
{ currentPage: 1, pageSize: 25 },
|
|
])
|
|
expect(scrollToMock).toBeCalled()
|
|
})
|
|
})
|
|
})
|
|
})
|