From f7dccb04b61a90fbe902cfa12bfa65c9b5304360 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= Date: Thu, 4 Aug 2022 15:45:38 +0200 Subject: [PATCH] Fix all tests in 'ContributionForm.spec.js' --- .../Contributions/ContributionForm.spec.js | 121 ++++++++++-------- .../Contributions/ContributionForm.vue | 7 +- 2 files changed, 69 insertions(+), 59 deletions(-) diff --git a/frontend/src/components/Contributions/ContributionForm.spec.js b/frontend/src/components/Contributions/ContributionForm.spec.js index fdd037b63..9dfc090f2 100644 --- a/frontend/src/components/Contributions/ContributionForm.spec.js +++ b/frontend/src/components/Contributions/ContributionForm.spec.js @@ -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([ diff --git a/frontend/src/components/Contributions/ContributionForm.vue b/frontend/src/components/Contributions/ContributionForm.vue index 5434881ab..e19fb2b9a 100644 --- a/frontend/src/components/Contributions/ContributionForm.vue +++ b/frontend/src/components/Contributions/ContributionForm.vue @@ -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() {