Test the EditCreationFormular & add verifyLogin to it.

admin/src/components/EditCreationFormular.spec.js

@@ -0,0 +1,143 @@
+import { mount } from '@vue/test-utils'
+import EditCreationFormular from './EditCreationFormular.vue'
+
+const localVue = global.localVue
+
+const apolloMock = jest.fn().mockResolvedValue({
+  data: {
+    verifyLogin: {
+      name: 'success',
+      id: 0,
+    },
+  },
+})
+const apolloMutateMock = jest.fn().mockResolvedValue({
+  data: {
+    updatePendingCreation: {
+      creation: [0, 0, 0],
+      date: new Date(),
+      memo: 'qwertzuiopasdfghjkl',
+      moderator: 0,
+    },
+  },
+})
+const stateCommitMock = jest.fn()
+
+const mocks = {
+  $moment: jest.fn(() => {
+    return {
+      format: jest.fn((m) => m),
+      subtract: jest.fn(() => {
+        return {
+          format: jest.fn((m) => m),
+        }
+      }),
+    }
+  }),
+  $apollo: {
+    query: apolloMock,
+    mutate: apolloMutateMock,
+  },
+  $store: {
+    commit: stateCommitMock,
+  },
+}
+
+const propsData = {
+  type: '',
+  item: {},
+  row: [],
+  creation: [],
+  itemsMassCreation: {},
+}
+
+describe('EditCreationFormular', () => {
+  let wrapper
+
+  const Wrapper = () => {
+    return mount(EditCreationFormular, { localVue, mocks, propsData })
+  }
+
+  describe('mount', () => {
+    beforeEach(() => {
+      wrapper = Wrapper()
+    })
+
+    it('has a DIV element with the class.component-edit-creation-formular', () => {
+      expect(wrapper.find('.component-edit-creation-formular').exists()).toBeTruthy()
+    })
+
+    describe('server sends back moderator data', () => {
+      it('called store commit with mocked data', () => {
+        expect(stateCommitMock).toBeCalledWith('moderator', { name: 'success', id: 0 })
+      })
+    })
+
+    describe('server throws error for moderator data call', () => {
+      beforeEach(() => {
+        jest.clearAllMocks()
+        apolloMock.mockRejectedValue({ message: 'Ouch!' })
+        wrapper = Wrapper()
+      })
+      it('has called store commit with fake data', () => {
+        expect(stateCommitMock).toBeCalledWith('moderator', { id: 0, name: 'Test Moderator' })
+      })
+    })
+
+    describe('radio buttons to selcet month', () => {
+      it('has three radio buttons', () => {
+        expect(wrapper.findAll('input[type="radio"]').length).toBe(3)
+      })
+
+      describe('with single creation', () => {
+        beforeEach(async () => {
+          jest.clearAllMocks()
+          await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
+          await wrapper.setData({ rangeMin: 180 })
+        })
+
+        describe('first radio button', () => {
+          beforeEach(async () => {
+            await wrapper.findAll('input[type="radio"]').at(0).setChecked()
+          })
+
+          it('sets rangeMin to 0', () => {
+            expect(wrapper.vm.rangeMin).toBe(0)
+          })
+
+          it('sets rangeMax to 200', () => {
+            expect(wrapper.vm.rangeMax).toBe(200)
+          })
+        })
+
+        describe('second radio button', () => {
+          beforeEach(async () => {
+            await wrapper.findAll('input[type="radio"]').at(1).setChecked()
+          })
+
+          it('sets rangeMin to 0', () => {
+            expect(wrapper.vm.rangeMin).toBe(0)
+          })
+
+          it('sets rangeMax to 400', () => {
+            expect(wrapper.vm.rangeMax).toBe(400)
+          })
+        })
+
+        describe('third radio button', () => {
+          beforeEach(async () => {
+            await wrapper.findAll('input[type="radio"]').at(2).setChecked()
+          })
+
+          it('sets rangeMin to 0', () => {
+            expect(wrapper.vm.rangeMin).toBe(0)
+          })
+
+          it('sets rangeMax to 400', () => {
+            expect(wrapper.vm.rangeMax).toBe(600)
+          })
+        })
+      })
+    })
+  })
+})

admin/src/components/EditCreationFormular.vue

@@ -120,8 +120,9 @@
 </template>
 <script>
 import { updatePendingCreation } from '../graphql/updatePendingCreation'
+import { verifyLogin } from '../graphql/verifyLogin'
 export default {
-  name: 'CreationFormular',
+  name: 'EditCreationFormular',
   props: {
     type: {
       type: String,
@@ -166,6 +167,7 @@ export default {
     },
   },
   created() {
+    this.searchModeratorData()
     if (this.pagetype === 'PageCreationConfirm' && this.creationUserData.date) {
       switch (this.$moment(this.creationUserData.date).format('MMMM')) {
         case this.currentMonth.short:
@@ -237,53 +239,59 @@ export default {
       if (this.text.length < 10) {
         return alert('Bitte gib einen Text ein der länger als 10 Zeichen ist!')
       }
-      if (this.type === 'singleCreation') {
-        this.submitObj = {
-          id: this.item.id,
-          email: this.item.email,
-          creationDate: this.radioSelected.long,
-          amount: Number(this.value),
-          memo: this.text,
-          moderator: Number(this.$store.state.moderator.id),
-        }
-
-        if (this.pagetype === 'PageCreationConfirm') {
-          // hinweis das eine ein einzelne Schöpfung abgesendet wird an (email)
-          this.$apollo
-            .mutate({
-              mutation: updatePendingCreation,
-              variables: this.submitObj,
-            })
-            .then((result) => {
-              this.$emit('update-user-data', this.item, result.data.updatePendingCreation.creation)
-              this.$emit('update-creation-data', {
-                amount: Number(result.data.updatePendingCreation.amount),
-                date: result.data.updatePendingCreation.date,
-                memo: result.data.updatePendingCreation.memo,
-                moderator: Number(result.data.updatePendingCreation.moderator),
-                row: this.row,
-              })
-              this.$toasted.success(
-                `Offene schöpfung (${this.value} GDD) für ${this.item.email} wurde geändert, liegt zur Bestätigung bereit`,
-              )
-              this.submitObj = null
-              this.createdIndex = null
-              // das creation Formular reseten
-              this.$refs.updateCreationForm.reset()
-              // Den geschöpften Wert auf o setzen
-              this.value = 0
-            })
-            .catch((error) => {
-              this.$toasted.error(error.message)
-              this.submitObj = null
-              // das creation Formular reseten
-              this.$refs.updateCreationForm.reset()
-              // Den geschöpften Wert auf o setzen
-              this.value = 0
-            })
-        }
+      this.submitObj = {
+        id: this.item.id,
+        email: this.item.email,
+        creationDate: this.radioSelected.long,
+        amount: Number(this.value),
+        memo: this.text,
+        moderator: Number(this.$store.state.moderator.id),
       }
+
+      // hinweis das eine ein einzelne Schöpfung abgesendet wird an (email)
+      this.$apollo
+        .mutate({
+          mutation: updatePendingCreation,
+          variables: this.submitObj,
+        })
+        .then((result) => {
+          this.$emit('update-user-data', this.item, result.data.updatePendingCreation.creation)
+          this.$emit('update-creation-data', {
+            amount: Number(result.data.updatePendingCreation.amount),
+            date: result.data.updatePendingCreation.date,
+            memo: result.data.updatePendingCreation.memo,
+            moderator: Number(result.data.updatePendingCreation.moderator),
+            row: this.row,
+          })
+          this.$toasted.success(
+            `Offene schöpfung (${this.value} GDD) für ${this.item.email} wurde geändert, liegt zur Bestätigung bereit`,
+          )
+          this.submitObj = null
+          this.createdIndex = null
+          // das creation Formular reseten
+          this.$refs.updateCreationForm.reset()
+          // Den geschöpften Wert auf o setzen
+          this.value = 0
+        })
+        .catch((error) => {
+          this.$toasted.error(error.message)
+          this.submitObj = null
+          // das creation Formular reseten
+          this.$refs.updateCreationForm.reset()
+          // Den geschöpften Wert auf o setzen
+          this.value = 0
+        })
     },
   },
+  searchModeratorData() {
+    this.$apollo
+      .query({ query: verifyLogin })
+      .then((result) => {
+        this.$store.commit('moderator', result.data.verifyLogin)
+      })
+      .catch(() => {
+        this.$store.commit('moderator', { id: 0, name: 'Test Moderator' })
+      })
+  },
 }
 </script>