Test frontend, next try

webapp/pages/admin/donations.spec.js

@@ -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', () => {
+      describe('submit', () => {
-        it.skip('entered values are send in the mutation', () => {
+        it.skip('calls mutation with default values once', async () => {
-          mocks.$apollo.mutate = jest.fn().mockResolvedValue({ data: { shout: 'WeDoShout' } })
+          // 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', () => {})
   })
 })

webapp/pages/admin/donations.vue

@@ -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: {