Testing Creation and EditCreation formulars.

admin/src/components/CreationFormular.spec.js

@@ -11,7 +11,14 @@ const apolloMock = jest.fn().mockResolvedValue({
     },
   },
 })
+const apolloMutateMock = jest.fn().mockResolvedValue({
+  data: {
+    createPendingCreation: [0, 0, 0],
+  },
+})
 const stateCommitMock = jest.fn()
+const toastedErrorMock = jest.fn()
+const toastedSuccessMock = jest.fn()
 
 const mocks = {
   $moment: jest.fn(() => {
@@ -26,9 +33,20 @@ const mocks = {
   }),
   $apollo: {
     query: apolloMock,
+    mutate: apolloMutateMock,
   },
   $store: {
     commit: stateCommitMock,
+    state: {
+      moderator: {
+        id: 0,
+        name: 'test moderator',
+      },
+    },
+  },
+  $toasted: {
+    error: toastedErrorMock,
+    success: toastedSuccessMock,
   },
 }
 
@@ -124,6 +142,8 @@ describe('CreationFormular', () => {
           jest.clearAllMocks()
           await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
           await wrapper.setData({ rangeMin: 180 })
+          await wrapper.setData({ text: 'Test create coins' })
+          await wrapper.setData({ value: 90 })
         })
 
         describe('first radio button', () => {
@@ -138,6 +158,66 @@ describe('CreationFormular', () => {
           it('sets rangeMax to 200', () => {
             expect(wrapper.vm.rangeMax).toBe(200)
           })
+
+          describe('sendForm', () => {
+            beforeEach(async () => {
+              await wrapper.find('.test-submit').trigger('click')
+            })
+
+            it('sends ... to apollo', () => {
+              expect(apolloMutateMock).toBeCalled()
+            })
+          })
+
+          describe('sendForm', () => {
+            beforeEach(async () => {
+              apolloMutateMock.mockRejectedValueOnce({ message: 'Ouch!' })
+              await wrapper.find('.test-submit').trigger('click')
+            })
+
+            it('sends ... to apollo', () => {
+              expect(toastedErrorMock).toBeCalled()
+            })
+          })
+
+          describe('Negativ value', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.setData({ value: -20 })
+            })
+
+            it('has no submit button', async () => {
+              expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
+            })
+          })
+
+          describe('Empty text', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.setData({ text: '' })
+            })
+
+            it('has no submit button', async () => {
+              expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
+            })
+          })
+
+          describe('Text length less than 10', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.setData({ text: 'Try this' })
+            })
+
+            it('has no submit button', async () => {
+              expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
+            })
+          })
         })
 
         describe('second radio button', () => {
@@ -152,6 +232,55 @@ describe('CreationFormular', () => {
           it('sets rangeMax to 400', () => {
             expect(wrapper.vm.rangeMax).toBe(400)
           })
+
+          describe('sendForm', () => {
+            beforeEach(async () => {
+              await wrapper.find('.test-submit').trigger('click')
+            })
+
+            it('sends ... to apollo', () => {
+              expect(apolloMutateMock).toBeCalled()
+            })
+          })
+
+          describe('Negativ value', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.setData({ value: -20 })
+            })
+
+            it('has no submit button', async () => {
+              expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
+            })
+          })
+
+          describe('Empty text', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.setData({ text: '' })
+            })
+
+            it('has no submit button', async () => {
+              expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
+            })
+          })
+
+          describe('Text length less than 10', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.setData({ text: 'Try this' })
+            })
+
+            it('has no submit button', async () => {
+              expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
+            })
+          })
         })
 
         describe('third radio button', () => {
@@ -166,6 +295,63 @@ describe('CreationFormular', () => {
           it('sets rangeMax to 400', () => {
             expect(wrapper.vm.rangeMax).toBe(600)
           })
+
+          describe('sendForm', () => {
+            beforeEach(async () => {
+              await wrapper.find('.test-submit').trigger('click')
+            })
+
+            it('sends mutation to apollo', () => {
+              expect(apolloMutateMock).toBeCalled()
+            })
+
+            it('toast success message', () => {
+              expect(toastedSuccessMock).toBeCalled()
+            })
+
+            it('store commit openCreationPlus', () => {
+              expect(stateCommitMock).toBeCalledWith('openCreationsPlus', 1)
+            })
+          })
+
+          describe('Negativ value', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.setData({ value: -20 })
+            })
+
+            it('has no submit button', async () => {
+              expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
+            })
+          })
+
+          describe('Empty text', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.setData({ text: '' })
+            })
+
+            it('has no submit button', async () => {
+              expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
+            })
+          })
+
+          describe('Text length less than 10', () => {
+            beforeEach(async () => {
+              jest.clearAllMocks()
+              await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+              await wrapper.setData({ rangeMin: 180 })
+              await wrapper.setData({ text: 'Try this' })
+            })
+
+            it('has no submit button', async () => {
+              expect(await wrapper.find('.test-submit').attributes('disabled')).toBe('disabled')
+            })
+          })
         })
       })
     })

admin/src/components/CreationFormular.vue

@@ -106,6 +106,7 @@
                 v-else
                 type="button"
                 variant="success"
+                class="test-submit"
                 @click="submitCreation"
                 :disabled="radioSelected === '' || value <= 0 || text.length < 10"
               >
@@ -187,9 +188,7 @@ export default {
   methods: {
     // Auswählen eines Zeitraumes
     updateRadioSelected(name, index, openCreation) {
-      console.log('this.createdIndex befor', this.createdIndex)
       this.createdIndex = index
-       console.log('this.createdIndex last', this.createdIndex)
       // Wenn Mehrfachschöpfung
       if (this.type === 'massCreation') {
         // An Creation.vue emitten und radioSelectedMass aktualisieren
@@ -201,23 +200,6 @@ export default {
       }
     },
     submitCreation() {
-      // Formular Prüfen ob ein Zeitraum ausgewählt wurde. Ansonsten abbrechen und Hinweis anzeigen
-      if (this.radioSelected === '') {
-        return this.$toasted.error('Bitte wähle einen Zeitraum!')
-      }
-      // Formular Prüfen ob der GDD Betrag grösser 0 ist. Ansonsten abbrechen und Hinweis anzeigen
-      if (this.value <= 0) {
-        return this.$toasted.error('Bitte gib einen GDD Betrag an!')
-      }
-      // Formular Prüfen ob der Text vorhanden ist. Ansonsten abbrechen und Hinweis anzeigen
-      if (this.text === '') {
-        return this.$toasted.error('Bitte gib einen Text ein!')
-      }
-      // Formular Prüfen ob der Text länger als 10 Zeichen hat. Ansonsten abbrechen und Hinweis anzeigen
-      if (this.text.length < 10) {
-        return this.$toasted.error('Bitte gib einen Text ein der länger als 10 Zeichen ist!')
-      }
-
       if (this.type === 'massCreation') {
         // Die anzahl der Mitglieder aus der Mehrfachschöpfung
         const i = Object.keys(this.itemsMassCreation).length

admin/src/components/EditCreationFormular.vue

@@ -6,6 +6,7 @@
           <label>Monat Auswählen</label>
           <b-col class="text-left">
             <b-form-radio
+              id="beforeLastMonth"
               v-model="radioSelected"
               :value="beforeLastMonth"
               :disabled="selectedOpenCreationAmount[0] === 0"
@@ -24,6 +25,7 @@
           </b-col>
           <b-col>
             <b-form-radio
+              id="lastMonth"
               v-model="radioSelected"
               :value="lastMonth"
               :disabled="selectedOpenCreationAmount[1] === 0"
@@ -42,6 +44,7 @@
           </b-col>
           <b-col class="text-right">
             <b-form-radio
+              id="currentMonth"
               v-model="radioSelected"
               :value="currentMonth"
               :disabled="selectedOpenCreationAmount[2] === 0"
@@ -149,10 +152,10 @@ export default {
       },
     },
     row: {
-      type: Array,
+      type: Object,
       required: false,
       default() {
-        return []
+        return {}
       },
     },
     creationUserData: {
@@ -200,22 +203,6 @@ export default {
       this.rangeMax = this.creation[index]
     },
     submitCreation() {
-      // Formular Prüfen ob ein Zeitraum ausgewählt wurde. Ansonsten abbrechen und Hinweis anzeigen
-      if (this.radioSelected === '') {
-        return this.$toasted.error('Bitte wähle einen Zeitraum!')
-      }
-      // Formular Prüfen ob der GDD Betrag grösser 0 ist. Ansonsten abbrechen und Hinweis anzeigen
-      if (this.value <= 0) {
-        return this.$toasted.error('Bitte gib einen GDD Betrag an!')
-      }
-      // Formular Prüfen ob der Text vorhanden ist. Ansonsten abbrechen und Hinweis anzeigen
-      if (this.text === '') {
-        return this.$toasted.error('Bitte gib einen Text ein!')
-      }
-      // Formular Prüfen ob der Text länger als 10 Zeichen hat. Ansonsten abbrechen und Hinweis anzeigen
-      if (this.text.length < 10) {
-        return this.$toasted.error('Bitte gib einen Text ein der länger als 10 Zeichen ist!')
-      }
       this.submitObj = {
         id: this.item.id,
         email: this.item.email,