From 7eb6fc6c5165c5b88a8fbfe02061555da947e691 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Wolfgang=20Hu=C3=9F?= <wolle.huss@pjannto.com>
Date: Tue, 26 Jul 2022 16:20:49 +0200
Subject: [PATCH] Refactor and enhance tests, try

---
 .../Contributions/ContributionForm.spec.js    | 131 +++++++++++++++++-
 1 file changed, 128 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Contributions/ContributionForm.spec.js b/frontend/src/components/Contributions/ContributionForm.spec.js
index 5b05957bb..00a3d9578 100644
--- a/frontend/src/components/Contributions/ContributionForm.spec.js
+++ b/frontend/src/components/Contributions/ContributionForm.spec.js
@@ -1,4 +1,5 @@
 import { mount } from '@vue/test-utils'
+import flushPromises from 'flush-promises'
 import ContributionForm from './ContributionForm.vue'
 
 const localVue = global.localVue
@@ -6,7 +7,7 @@ const localVue = global.localVue
 describe('ContributionForm', () => {
   let wrapper
 
-  const propsData = {
+  let propsData = {
     value: {
       id: null,
       date: '',
@@ -42,8 +43,132 @@ describe('ContributionForm', () => {
       expect(wrapper.find('div.contribution-form').exists()).toBe(true)
     })
 
-    it('is submit button disable of true', () => {
-      expect(wrapper.find('button[type="submit"]').attributes('disabled')).toBe('disabled')
+    describe('empty form data', () => {
+      describe('has button', () => {
+        it('reset enabled', () => {
+          expect(wrapper.find('button[type="reset"]').attributes('disabled')).toBeFalsy()
+        })
+
+        it('submit disabled', () => {
+          expect(wrapper.find('button[type="submit"]').attributes('disabled')).toBe('disabled')
+        })
+      })
+    })
+
+    describe('set contrubtion', () => {
+      describe('fill in form data', () => {
+        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 () => {
+          // Wolle: await wrapper.setData({
+          //   form: {
+          //     id: 2,
+          //     date: now,
+          //     memo: 'Mein Beitrag zur Gemeinschaft für diesen Monat ...',
+          //     amount: '200',
+          //   },
+          // })
+          // await wrapper.setData({
+          //   form: {
+          //     id: 2,
+          //   },
+          // })
+          propsData = {
+            value: {
+              id: 2,
+              date: '',
+              memo: '',
+              amount: '',
+            },
+          }
+          wrapper = Wrapper()
+          // 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')
+          await flushPromises()
+          // Wolle:
+          await wrapper.vm.$nextTick()
+        })
+
+        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.only('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')
+          })
+
+          it('emits "update-contribution"', () => {
+            expect(wrapper.emitted('update-contribution')).toEqual(
+              expect.arrayContaining([
+                expect.arrayContaining([
+                  {
+                    id: 2,
+                    date: now,
+                    memo: 'Mein Beitrag zur Gemeinschaft für diesen Monat ...',
+                    amount: '200',
+                  },
+                ]),
+              ]),
+            )
+          })
+        })
+      })
     })
   })
 })