Test frontend, next try

This commit is contained in:
Wolfgang Huß 2021-06-23 15:30:47 +02:00
parent 5a1eda272b
commit 7618e18294
2 changed files with 95 additions and 20 deletions

View File

@ -1,4 +1,5 @@
import { mount } from '@vue/test-utils'
import flushPromises from 'flush-promises'
import Donations from './donations.vue'
const localVue = global.localVue
@ -30,6 +31,11 @@ describe('donations.vue', () => {
// Donations: 1,
// },
// }),
// mutate: jest.fn().mockResolvedValue({
// data: {
// UpdateDonations: { showDonations: true, goal: 10, progress: 20 },
// },
// }),
// mutate: jest.fn(),
},
}
@ -77,6 +83,31 @@ describe('donations.vue', () => {
})
})
describe('form component click', () => {
it('on #showDonations checkbox changes "showDonations" to true', async () => {
// starts with false
wrapper.find('#showDonations').trigger('click') // set to true
await wrapper.vm.$nextTick()
expect(wrapper.vm.showDonations).toBe(true)
})
it('on #showDonations checkbox twice changes "showDonations" back to false', async () => {
// starts with false
wrapper.find('#showDonations').trigger('click') // set to true
wrapper.find('#showDonations').trigger('click') // set to false
await wrapper.vm.$nextTick()
expect(wrapper.vm.showDonations).toBe(false)
})
it.skip('on donations-goal and enter value XXX', async () => {
wrapper.find('#showDonations').trigger('click') // set to true
// wrapper.find('[data-test="donations-goal"]').setValue('20000')
wrapper.find('#donations-goal').setValue('20000')
await wrapper.vm.$nextTick()
expect(wrapper.vm.formData.goal).toBe('20000')
})
})
describe('apollo', () => {
it.skip('query is called', () => {
// expect(mocks.$apollo.queries.Donations.refetch).toHaveBeenCalledTimes(1)
@ -92,27 +123,70 @@ describe('donations.vue', () => {
})
})
describe('click on save', () => {
it.skip('entered values are send in the mutation', () => {
mocks.$apollo.mutate = jest.fn().mockResolvedValue({ data: { shout: 'WeDoShout' } })
describe('submit', () => {
it.skip('calls mutation with default values once', async () => {
// TODO: Makes the warning: "UnhandledPromiseRejectionWarning: TypeError: Cannot read property 'error' of undefined"
wrapper.find('.donations-info-button').trigger('submit')
await mocks.$apollo.mutate
// await flushPromises()
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining({variables: { showDonations: false, goal: 15000, progress: 0 }}))
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
})
it.skip('calls mutation with input values once', async () => {
wrapper.find('#showDonations').trigger('click') // set to true
await wrapper.vm.$nextTick()
// wrapper.find('[data-test="donations-goal"]').setValue('20000')
wrapper.find('#donations-goal').setValue('20000')
await wrapper.vm.$nextTick()
// expect(wrapper.vm.formData.goal).toBe('20000')
wrapper.find('.donations-info-button').trigger('submit')
await mocks.$apollo.mutate
await flushPromises()
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining({variables: { showDonations: true, goal: 15000, progress: 0 }}))
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
})
it.skip('calls mutation with corrected values once', async () => {
wrapper.find('.show-donations-checkbox').trigger('click')
await Vue.nextTick()
expect(wrapper.vm.showDonations).toBe(false)
// wrapper.find('.donations-info-button').trigger('submit')
// await mocks.$apollo.mutate
// expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining({variables: { showDonations: false, goal: 15000, progress: 0 }}))
// expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
})
it.skip('default values are displayed', async () => {
mocks.$apollo.mutate = jest.fn().mockResolvedValue({ data: { UpdateDonations: { showDonations: true, goal: 10, progress: 20 } } })
wrapper.find('.donations-info-button').trigger('submit')
await mocks.$apollo.mutate
await Vue.nextTick()
expect(wrapper.vm.showDonations).toBe(false)
expect(wrapper.vm.formData.goal).toBe(1)
expect(wrapper.vm.formData.progress).toBe(1)
})
it.skip('XXX entered values are send in the mutation', async () => {
// mocks.$apollo.mutate = jest.fn().mockResolvedValue({ data: { UpdateDonations: { showDonations: true, goal: 10, progress: 20 } } })
// expect(wrapper.vm.showDonations).toBe(null)
// expect(wrapper.vm.formData.goal).toBe(null)
// expect(wrapper.vm.formData.progress).toBe(null)
// wrapper.find('.base-button').trigger('click')
// await Vue.nextTick()
// expect(wrapper.vm.showDonations).toBe(true)
// expect(wrapper.vm.formData.goal).toBe(1)
// expect(wrapper.vm.formData.progress).toBe(1)
// wrapper.find('.base-button').trigger('click')
// wrapper.find('.donations-info-button').trigger('click')
// await Vue.nextTick()
// wrapper.find('.donations-info-button').trigger('submit')
await mocks.$apollo.mutate
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
})
})
})
describe('showDonations', () => {
it.skip('set as default', () => {})
it.skip('click changes value', () => {})
})
it.skip('XXX', () => {})
it.skip('XXX', () => {})
it.skip('XXX', () => {})
it.skip('XXX', () => {})
it.skip('XXX', () => {})
})
})

View File

@ -14,6 +14,7 @@
</label>
</ds-text>
<ds-input
id="donations-goal"
class="donations-data"
model="goal"
:label="$t('admin.donations.goal')"
@ -51,7 +52,7 @@ export default {
// TODO: Our styleguide does not support checkmarks.
// Integrate showDonations into `this.formData` once we
// have checkmarks available.
showDonations: null,
showDonations: false,
}
},
methods: {