mirror of
https://github.com/IT4Change/gradido.git
synced 2025-12-13 07:45:54 +00:00
fixed test updateGdt on click on tab
This commit is contained in:
ogerly
parent
17f8a47f7f
commit
7cae264f13
@ -1,24 +1,9 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import { GdtEntryType } from '@/graphql/enums'
|
||||
import GdtTransactionList from './GdtTransactionList'
|
||||
|
||||
import { toastErrorSpy } from '@test/testSetup'
|
||||
import { GdtEntryType } from '@/graphql/enums'
|
||||
|
||||
const localVue = global.localVue
|
||||
|
||||
const apolloMock = jest.fn().mockResolvedValue({
|
||||
data: {
|
||||
listGDTEntries: {
|
||||
count: 0,
|
||||
gdtEntries: [],
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
const windowScrollToMock = jest.fn()
|
||||
|
||||
window.scrollTo = windowScrollToMock
|
||||
|
||||
const state = {
|
||||
language: 'en',
|
||||
}
|
||||
@ -37,16 +22,20 @@ describe('GdtTransactionList ', () => {
|
||||
$t: jest.fn((t) => t),
|
||||
$n: jest.fn((n) => n),
|
||||
$d: jest.fn((d) => d),
|
||||
$apollo: {
|
||||
query: apolloMock,
|
||||
},
|
||||
}
|
||||
|
||||
const propsData = {
|
||||
transactionsGdt: [],
|
||||
transactionGdtCount: 0,
|
||||
pageSize: 25,
|
||||
value: 1,
|
||||
}
|
||||
|
||||
const Wrapper = () => {
|
||||
return mount(GdtTransactionList, { localVue, mocks })
|
||||
return mount(GdtTransactionList, { localVue, mocks, propsData })
|
||||
}
|
||||
|
||||
describe('mount - When no transactions are loaded', () => {
|
||||
describe('transactionGdtCount is 0', () => {
|
||||
beforeEach(() => {
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
@ -62,54 +51,50 @@ describe('GdtTransactionList ', () => {
|
||||
})
|
||||
})
|
||||
|
||||
describe('mount - When transactions are loaded', () => {
|
||||
beforeEach(() => {
|
||||
apolloMock.mockResolvedValue({
|
||||
data: {
|
||||
listGDTEntries: {
|
||||
count: 4,
|
||||
gdtEntries: [
|
||||
{
|
||||
id: 1,
|
||||
amount: 100,
|
||||
gdt: 1700,
|
||||
factor: 17,
|
||||
comment: '',
|
||||
date: '2021-05-02T17:20:11+00:00',
|
||||
gdtEntryType: GdtEntryType.FORM,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
amount: 1810,
|
||||
gdt: 362,
|
||||
factor: 0.2,
|
||||
comment: 'Dezember 20',
|
||||
date: '2020-12-31T12:00:00+00:00',
|
||||
gdtEntryType: GdtEntryType.GLOBAL_MODIFICATOR,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
amount: 100,
|
||||
gdt: 1700,
|
||||
factor: 17,
|
||||
comment: '',
|
||||
date: '2020-05-07T17:00:00+00:00',
|
||||
gdtEntryType: GdtEntryType.FORM,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
amount: 100,
|
||||
gdt: 110,
|
||||
factor: 22,
|
||||
comment: '',
|
||||
date: '2020-04-10T13:28:00+00:00',
|
||||
gdtEntryType: GdtEntryType.ELOPAGE_PUBLISHER,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
})
|
||||
describe('Transactions are loaded', () => {
|
||||
beforeEach(async () => {
|
||||
wrapper = Wrapper()
|
||||
await wrapper.setProps({
|
||||
transactionGdtCount: 42,
|
||||
transactionsGdt: [
|
||||
{
|
||||
id: 1,
|
||||
amount: 100,
|
||||
gdt: 1700,
|
||||
factor: 17,
|
||||
comment: '',
|
||||
date: '2021-05-02T17:20:11+00:00',
|
||||
gdtEntryType: GdtEntryType.FORM,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
amount: 1810,
|
||||
gdt: 362,
|
||||
factor: 0.2,
|
||||
comment: 'Dezember 20',
|
||||
date: '2020-12-31T12:00:00+00:00',
|
||||
gdtEntryType: GdtEntryType.GLOBAL_MODIFICATOR,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
amount: 100,
|
||||
gdt: 1700,
|
||||
factor: 17,
|
||||
comment: '',
|
||||
date: '2020-05-07T17:00:00+00:00',
|
||||
gdtEntryType: GdtEntryType.FORM,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
amount: 100,
|
||||
gdt: 110,
|
||||
factor: 22,
|
||||
comment: '',
|
||||
date: '2020-04-10T13:28:00+00:00',
|
||||
gdtEntryType: GdtEntryType.ELOPAGE_PUBLISHER,
|
||||
},
|
||||
],
|
||||
})
|
||||
})
|
||||
|
||||
it('renders the component', () => {
|
||||
@ -120,83 +105,25 @@ describe('GdtTransactionList ', () => {
|
||||
expect(wrapper.find('.gdt-funding').exists()).toBe(false)
|
||||
})
|
||||
|
||||
describe('server returns valid data', () => {
|
||||
it('calls the API', async () => {
|
||||
await wrapper.vm.$nextTick()
|
||||
expect(apolloMock).toBeCalledWith(
|
||||
expect.objectContaining({
|
||||
variables: {
|
||||
currentPage: 1,
|
||||
pageSize: 25,
|
||||
},
|
||||
}),
|
||||
)
|
||||
})
|
||||
|
||||
it('scrolls to (0, 0) after API call', () => {
|
||||
expect(windowScrollToMock).toBeCalledWith(0, 0)
|
||||
})
|
||||
})
|
||||
|
||||
describe('server returns error', () => {
|
||||
beforeEach(() => {
|
||||
jest.resetAllMocks()
|
||||
apolloMock.mockRejectedValue({
|
||||
message: 'Ouch!',
|
||||
})
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
it('toasts an error message', () => {
|
||||
expect(toastErrorSpy).toBeCalledWith('Ouch!')
|
||||
})
|
||||
})
|
||||
|
||||
describe('change of currentPage', () => {
|
||||
it('calls the API after currentPage changes', async () => {
|
||||
jest.clearAllMocks()
|
||||
await wrapper.setData({ transactionGdtCount: 42 })
|
||||
await wrapper.findComponent({ name: 'BPagination' }).vm.$emit('input', 2)
|
||||
expect(apolloMock).toBeCalledWith(
|
||||
expect.objectContaining({
|
||||
variables: {
|
||||
currentPage: 2,
|
||||
pageSize: 25,
|
||||
},
|
||||
}),
|
||||
)
|
||||
expect(wrapper.emitted('input')).toEqual([[2]])
|
||||
})
|
||||
|
||||
describe('pagination buttons', () => {
|
||||
describe('with transactionCount > pageSize', () => {
|
||||
beforeEach(async () => {
|
||||
apolloMock.mockResolvedValue({
|
||||
data: {
|
||||
listGDTEntries: {
|
||||
count: 42,
|
||||
gdtEntries: [],
|
||||
},
|
||||
},
|
||||
})
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
it('shows the pagination buttons', () => {
|
||||
expect(wrapper.find('ul.pagination').exists()).toBe(true)
|
||||
})
|
||||
})
|
||||
|
||||
describe('with transactionCount < pageSize', () => {
|
||||
beforeEach(async () => {
|
||||
apolloMock.mockResolvedValue({
|
||||
data: {
|
||||
listGDTEntries: {
|
||||
count: 2,
|
||||
gdtEntries: [],
|
||||
},
|
||||
},
|
||||
beforeEach(() => {
|
||||
wrapper.setProps({
|
||||
transactionGdtCount: 10,
|
||||
})
|
||||
wrapper = Wrapper()
|
||||
})
|
||||
|
||||
it('shows no pagination buttons', () => {
|
||||
@ -205,5 +132,17 @@ describe('GdtTransactionList ', () => {
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('server not reachable', () => {
|
||||
beforeEach(() => {
|
||||
wrapper.setProps({
|
||||
transactionGdtCount: -1,
|
||||
})
|
||||
})
|
||||
|
||||
it('renders the not-reachable text', () => {
|
||||
expect(wrapper.text()).toBe('gdt.not-reachable')
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
{{ $t('gdt.funding') }}
|
||||
</b-button>
|
||||
</div>
|
||||
<div v-else-if="typeof transactionGdtCount === 'object'" class="text-center">
|
||||
<div v-else-if="transactionGdtCount === -1" class="text-center">
|
||||
{{ $t('gdt.not-reachable') }}
|
||||
</div>
|
||||
<div
|
||||
@ -41,7 +41,6 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { listGDTEntriesQuery } from '@/graphql/queries'
|
||||
import Transaction from '@/components/Transaction.vue'
|
||||
|
||||
export default {
|
||||
@ -49,41 +48,24 @@ export default {
|
||||
components: {
|
||||
Transaction,
|
||||
},
|
||||
props: {
|
||||
transactionsGdt: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
transactionGdtCount: { type: Number, required: true },
|
||||
pageSize: { type: Number, required: true },
|
||||
value: { type: Number, required: true },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
transactionsGdt: [],
|
||||
transactionGdtCount: { type: Number, default: 0 },
|
||||
currentPage: 1,
|
||||
pageSize: 25,
|
||||
currentPage: this.value,
|
||||
link: 'https://gradido.net/' + this.$store.state.language + '/memberships/',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async updateGdt() {
|
||||
this.$apollo
|
||||
.query({
|
||||
query: listGDTEntriesQuery,
|
||||
variables: {
|
||||
currentPage: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
},
|
||||
})
|
||||
.then((result) => {
|
||||
const {
|
||||
data: { listGDTEntries },
|
||||
} = result
|
||||
this.transactionsGdt = listGDTEntries.gdtEntries
|
||||
this.transactionGdtCount = listGDTEntries.count
|
||||
window.scrollTo(0, 0)
|
||||
})
|
||||
.catch((error) => {
|
||||
this.toastError(error.message)
|
||||
})
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
currentPage() {
|
||||
this.updateGdt()
|
||||
if (this.value !== this.currentPage) this.$emit('input', this.currentPage)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
@ -1,28 +1,48 @@
|
||||
import { mount } from '@vue/test-utils'
|
||||
import Transactions from './Transactions'
|
||||
import { GdtEntryType } from '@/graphql/enums'
|
||||
|
||||
import { toastErrorSpy } from '@test/testSetup'
|
||||
|
||||
const localVue = global.localVue
|
||||
|
||||
window.scrollTo = jest.fn()
|
||||
const windowScrollToMock = jest.fn()
|
||||
window.scrollTo = windowScrollToMock
|
||||
|
||||
const apolloMock = jest.fn().mockResolvedValue({
|
||||
data: {
|
||||
listGDTEntries: {
|
||||
count: 0,
|
||||
gdtEntries: [],
|
||||
},
|
||||
},
|
||||
})
|
||||
|
||||
describe('Transactions', () => {
|
||||
let wrapper
|
||||
|
||||
const state = {
|
||||
language: 'en',
|
||||
}
|
||||
|
||||
const mocks = {
|
||||
$store: {
|
||||
state,
|
||||
commit: jest.fn(),
|
||||
},
|
||||
$t: jest.fn((t) => t),
|
||||
$n: jest.fn((n) => String(n)),
|
||||
$d: jest.fn((d) => d),
|
||||
$i18n: {
|
||||
locale: jest.fn(() => 'en'),
|
||||
},
|
||||
}
|
||||
|
||||
const stubs = {
|
||||
GdtTransactionList: true,
|
||||
$apollo: {
|
||||
query: apolloMock,
|
||||
},
|
||||
}
|
||||
|
||||
const Wrapper = () => {
|
||||
return mount(Transactions, { localVue, mocks, stubs })
|
||||
return mount(Transactions, { localVue, mocks })
|
||||
}
|
||||
|
||||
describe('mount', () => {
|
||||
@ -40,7 +60,7 @@ describe('Transactions', () => {
|
||||
)
|
||||
})
|
||||
|
||||
it('emist update-transactions when update-transactions is called', () => {
|
||||
it('emits update-transactions when update-transactions is called', () => {
|
||||
wrapper
|
||||
.findComponent({ name: 'GddTransactionList' })
|
||||
.vm.$emit('update-transactions', { currentPage: 2, pageSize: 25 })
|
||||
@ -63,32 +83,129 @@ describe('Transactions', () => {
|
||||
})
|
||||
|
||||
describe('click on GDT tab', () => {
|
||||
beforeEach(() => {
|
||||
wrapper.findAll('li[ role="presentation"]').at(1).find('a').trigger('click')
|
||||
})
|
||||
|
||||
it('does not show the GDD transactions', () => {
|
||||
expect(wrapper.findAll('div[role="tabpanel"]').at(0).isVisible()).toBeFalsy()
|
||||
})
|
||||
|
||||
it('shows the GDT transactions', () => {
|
||||
expect(wrapper.findAll('div[role="tabpanel"]').at(1).isVisible()).toBeTruthy()
|
||||
})
|
||||
|
||||
describe('click on GDD tab', () => {
|
||||
describe('server returns valid data', () => {
|
||||
beforeEach(() => {
|
||||
wrapper.findAll('li[ role="presentation"]').at(0).find('a').trigger('click')
|
||||
apolloMock.mockResolvedValue({
|
||||
data: {
|
||||
listGDTEntries: {
|
||||
count: 4,
|
||||
gdtEntries: [
|
||||
{
|
||||
id: 1,
|
||||
amount: 100,
|
||||
gdt: 1700,
|
||||
factor: 17,
|
||||
comment: '',
|
||||
date: '2021-05-02T17:20:11+00:00',
|
||||
gdtEntryType: GdtEntryType.FORM,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
amount: 1810,
|
||||
gdt: 362,
|
||||
factor: 0.2,
|
||||
comment: 'Dezember 20',
|
||||
date: '2020-12-31T12:00:00+00:00',
|
||||
gdtEntryType: GdtEntryType.GLOBAL_MODIFICATOR,
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
amount: 100,
|
||||
gdt: 1700,
|
||||
factor: 17,
|
||||
comment: '',
|
||||
date: '2020-05-07T17:00:00+00:00',
|
||||
gdtEntryType: GdtEntryType.FORM,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
amount: 100,
|
||||
gdt: 110,
|
||||
factor: 22,
|
||||
comment: '',
|
||||
date: '2020-04-10T13:28:00+00:00',
|
||||
gdtEntryType: GdtEntryType.ELOPAGE_PUBLISHER,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
})
|
||||
wrapper.findAll('li[ role="presentation"]').at(1).find('a').trigger('click')
|
||||
})
|
||||
|
||||
it('shows the GDD transactions', () => {
|
||||
expect(wrapper.findAll('div[role="tabpanel"]').at(0).isVisible()).toBeTruthy()
|
||||
it('does not show the GDD transactions', () => {
|
||||
expect(wrapper.findAll('div[role="tabpanel"]').at(0).isVisible()).toBeFalsy()
|
||||
})
|
||||
|
||||
it('does not show the GDT', () => {
|
||||
expect(wrapper.findAll('div[role="tabpanel"]').at(1).isVisible()).toBeFalsy()
|
||||
it('shows the GDT transactions', () => {
|
||||
expect(wrapper.findAll('div[role="tabpanel"]').at(1).isVisible()).toBeTruthy()
|
||||
})
|
||||
|
||||
it('calls the API', () => {
|
||||
expect(apolloMock).toBeCalledWith(
|
||||
expect.objectContaining({
|
||||
variables: {
|
||||
currentPage: 1,
|
||||
pageSize: 25,
|
||||
},
|
||||
}),
|
||||
)
|
||||
})
|
||||
|
||||
it('scrolls to (0, 0) after API call', () => {
|
||||
expect(windowScrollToMock).toBeCalledWith(0, 0)
|
||||
})
|
||||
|
||||
describe('click on GDD tab', () => {
|
||||
beforeEach(() => {
|
||||
wrapper.findAll('li[ role="presentation"]').at(0).find('a').trigger('click')
|
||||
})
|
||||
|
||||
it('shows the GDD transactions', () => {
|
||||
expect(wrapper.findAll('div[role="tabpanel"]').at(0).isVisible()).toBeTruthy()
|
||||
})
|
||||
|
||||
it('does not show the GDT', () => {
|
||||
expect(wrapper.findAll('div[role="tabpanel"]').at(1).isVisible()).toBeFalsy()
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('server returns error', () => {
|
||||
beforeEach(() => {
|
||||
apolloMock.mockRejectedValue({ message: 'Ouch!' })
|
||||
wrapper.findAll('li[ role="presentation"]').at(1).find('a').trigger('click')
|
||||
})
|
||||
|
||||
it('toasts an error message', () => {
|
||||
expect(toastErrorSpy).toBeCalledWith('Ouch!')
|
||||
})
|
||||
|
||||
it('sets transactionGdtCount to -1', () => {
|
||||
expect(wrapper.vm.transactionGdtCount).toBe(-1)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('update currentPage', () => {
|
||||
beforeEach(() => {
|
||||
jest.clearAllMocks()
|
||||
wrapper.setData({
|
||||
currentPage: 2,
|
||||
})
|
||||
})
|
||||
|
||||
it('calls the API', () => {
|
||||
expect(apolloMock).toBeCalledWith(
|
||||
expect.objectContaining({
|
||||
variables: {
|
||||
currentPage: 2,
|
||||
pageSize: 25,
|
||||
},
|
||||
}),
|
||||
)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
@ -15,12 +15,17 @@
|
||||
/>
|
||||
</b-tab>
|
||||
|
||||
<b-tab :title="titelGdt" class="px-4" @click="$refs.childComponentRef.updateGdt()">
|
||||
<b-tab :title="titleGdt" class="px-4" @click="updateGdt()">
|
||||
<b-row class="mb-3">
|
||||
<b-col>{{ $t('transaction.gdt-text') }}</b-col>
|
||||
<b-col class="text-right">{{ `${$n(GdtBalance, 'decimal')} GDT` }}</b-col>
|
||||
</b-row>
|
||||
<gdt-transaction-list ref="childComponentRef" />
|
||||
<gdt-transaction-list
|
||||
v-model="currentPage"
|
||||
:transactionsGdt="transactionsGdt"
|
||||
:transactionGdtCount="transactionGdtCount"
|
||||
:pageSize="pageSize"
|
||||
/>
|
||||
</b-tab>
|
||||
</b-tabs>
|
||||
</div>
|
||||
@ -28,6 +33,7 @@
|
||||
<script>
|
||||
import GddTransactionList from '@/components/GddTransactionList.vue'
|
||||
import GdtTransactionList from '@/components/GdtTransactionList.vue'
|
||||
import { listGDTEntriesQuery } from '@/graphql/queries'
|
||||
|
||||
export default {
|
||||
name: 'Transactions',
|
||||
@ -47,14 +53,45 @@ export default {
|
||||
data() {
|
||||
return {
|
||||
timestamp: Date.now(),
|
||||
titelGdt: this.$t('gdt.gdt'),
|
||||
titleGdt: this.$t('gdt.gdt'),
|
||||
transactionsGdt: [],
|
||||
transactionGdtCount: 0,
|
||||
currentPage: 1,
|
||||
pageSize: 25,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
async updateGdt() {
|
||||
this.$apollo
|
||||
.query({
|
||||
query: listGDTEntriesQuery,
|
||||
variables: {
|
||||
currentPage: this.currentPage,
|
||||
pageSize: this.pageSize,
|
||||
},
|
||||
})
|
||||
.then((result) => {
|
||||
const {
|
||||
data: { listGDTEntries },
|
||||
} = result
|
||||
this.transactionsGdt = listGDTEntries.gdtEntries
|
||||
this.transactionGdtCount = listGDTEntries.count
|
||||
window.scrollTo(0, 0)
|
||||
})
|
||||
.catch((error) => {
|
||||
this.transactionGdtCount = -1
|
||||
this.toastError(error.message)
|
||||
})
|
||||
},
|
||||
updateTransactions(pagination) {
|
||||
this.$emit('update-transactions', pagination)
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
currentPage() {
|
||||
this.updateGdt()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user