Fix all tests in 'ContributionForm.spec.js'

This commit is contained in:
Wolfgang Huß 2022-08-04 15:45:38 +02:00
parent 2759c7011d
commit f7dccb04b6
2 changed files with 69 additions and 59 deletions

View File

@ -1,5 +1,4 @@
import { mount } from '@vue/test-utils'
import flushPromises from 'flush-promises'
import ContributionForm from './ContributionForm.vue'
const localVue = global.localVue
@ -46,64 +45,24 @@ describe('ContributionForm', () => {
describe('empty form data', () => {
describe('has button', () => {
it('reset enabled', () => {
expect(wrapper.find('button[type="reset"]').attributes('disabled')).toBeFalsy()
expect(
wrapper.find('button[data-test="button-cancel"]').attributes('disabled'),
).toBeFalsy()
})
it('submit disabled', () => {
expect(wrapper.find('button[type="submit"]').attributes('disabled')).toBe('disabled')
expect(wrapper.find('button[data-test="button-submit"]').attributes('disabled')).toBe(
'disabled',
)
})
})
})
describe('set contrubtion', () => {
describe('fill in form data', () => {
describe('fill in form data with "id === null"', () => {
const now = new Date().toISOString()
beforeEach(async () => {
await wrapper.setData({
form: {
id: null,
date: now,
memo: 'Mein Beitrag zur Gemeinschaft für diesen Monat ...',
amount: '200',
},
})
})
describe('has button', () => {
it('reset enabled', () => {
expect(wrapper.find('button[type="reset"]').attributes('disabled')).toBeFalsy()
})
it('submit enabled', () => {
expect(wrapper.find('button[type="submit"]').attributes('disabled')).toBeFalsy()
})
})
describe.skip('on trigger submit', () => {
beforeEach(async () => {
// await wrapper.find('.test-submit').trigger('click')
await wrapper.find('button[type="submit"]').trigger('click')
})
it('emits "set-contribution"', () => {
expect(wrapper.emitted('set-contribution')).toEqual({
id: null,
date: now,
memo: 'Mein Beitrag zur Gemeinschaft für diesen Monat ...',
amount: '200',
})
})
})
})
})
describe('update contrubtion', () => {
describe('fill in form data and "id"', () => {
const now = new Date().toISOString()
beforeEach(async () => {
wrapper = Wrapper()
await wrapper.findComponent({ name: 'BFormDatepicker' }).vm.$emit('input', now)
await wrapper
.find('#contribution-memo')
@ -128,15 +87,69 @@ describe('ContributionForm', () => {
describe('on trigger submit', () => {
beforeEach(async () => {
// await wrapper.find('.test-submit').trigger('click')
// await wrapper.find('button[type="submit"]').trigger('click')
await wrapper.find('form').trigger('submit')
await flushPromises()
// Wolle:
await wrapper.vm.$nextTick()
})
it.only('emits "update-contribution"', () => {
it('emits "set-contribution"', () => {
expect(wrapper.emitted('set-contribution')).toEqual(
expect.arrayContaining([
expect.arrayContaining([
{
id: null,
date: now,
memo: 'Mein Beitrag zur Gemeinschaft für diesen Monat ...',
amount: '200',
},
]),
]),
)
})
})
})
})
describe('update contrubtion', () => {
describe('fill in form data with set "id"', () => {
const now = new Date().toISOString()
beforeEach(async () => {
wrapper = Wrapper()
await wrapper.setData({
form: {
id: 2,
date: now,
memo: 'Mein kommerzieller Beitrag für diesen Monat ...',
amount: '100',
},
})
await wrapper.findComponent({ name: 'BFormDatepicker' }).vm.$emit('input', now)
await wrapper
.find('#contribution-memo')
.find('textarea')
.setValue('Mein Beitrag zur Gemeinschaft für diesen Monat ...')
await wrapper.find('#contribution-amount').find('input').setValue('200')
})
describe('has button', () => {
it('reset enabled', () => {
expect(
wrapper.find('button[data-test="button-cancel"]').attributes('disabled'),
).toBeFalsy()
})
it('submit enabled', () => {
expect(
wrapper.find('button[data-test="button-submit"]').attributes('disabled'),
).toBeFalsy()
})
})
describe('on trigger submit', () => {
beforeEach(async () => {
await wrapper.find('form').trigger('submit')
})
it('emits "update-contribution"', () => {
expect(wrapper.emitted('update-contribution')).toEqual(
expect.arrayContaining([
expect.arrayContaining([

View File

@ -98,11 +98,8 @@ export default {
},
methods: {
submit() {
if (this.form.id) {
this.$emit('update-contribution', this.form)
} else {
this.$emit('set-contribution', this.form)
}
// this.$emit(this.form.id ? 'update-contribution' : 'set-contribution', this.form) // is not working for testing
this.$emit(this.form.id ? 'update-contribution' : 'set-contribution', { ...this.form }) // this works for testing, why ever, we have to make a spread '...', to evaluate the values it looks like
this.reset()
},
reset() {