refactor edit compoenents form and test it

admin/src/components/EditCreationFormular.spec.js

@@ -7,8 +7,9 @@ const apolloMutateMock = jest.fn().mockResolvedValue({
   data: {
     updatePendingCreation: {
       creation: [0, 0, 0],
+      amount: 500,
       date: new Date(),
-      memo: 'qwertzuiopasdfghjkl',
+      memo: 'Test Schöpfung 2',
       moderator: 0,
     },
   },
@@ -82,196 +83,79 @@ describe('EditCreationFormular', () => {
         expect(wrapper.findAll('input[type="radio"]').length).toBe(3)
       })
 
-      describe('with single creation', () => {
+      it('has the third radio button checked', () => {
+        expect(wrapper.findAll('input[type="radio"]').at(0).element.checked).toBeFalsy()
+        expect(wrapper.findAll('input[type="radio"]').at(1).element.checked).toBeFalsy()
+        expect(wrapper.findAll('input[type="radio"]').at(2).element.checked).toBeTruthy()
+      })
+
+      it('has rangeMax of 700', () => {
+        expect(wrapper.find('input[type="number"]').attributes('max')).toBe('700')
+      })
+
+      describe('change and save memo and value with success', () => {
         beforeEach(async () => {
-          jest.clearAllMocks()
+          await wrapper.find('input[type="number"]').setValue(500)
-          await wrapper.setProps({ creation: [200, 400, 600] })
+          await wrapper.find('textarea').setValue('Test Schöpfung 2')
-          await wrapper.setData({ rangeMin: 180 })
+          await wrapper.find('.test-submit').trigger('click')
-          await wrapper.setData({ text: 'Test create coins' })
-          await wrapper.setData({ value: 90 })
         })
 
-        describe('first radio button', () => {
+        it('calls the API', () => {
-          beforeEach(async () => {
+          expect(apolloMutateMock).toBeCalledWith(
-            await wrapper.findAll('input[type="radio"]').at(0).setChecked()
+            expect.objectContaining({
-          })
+              variables: {
-
+                id: 0,
-          it('sets rangeMin to 0', () => {
+                email: 'bob@baumeister.de',
-            expect(wrapper.vm.rangeMin).toBe(0)
+                creationDate: getCreationDate(0),
-          })
+                amount: 500,
-
+                memo: 'Test Schöpfung 2',
-          it('sets rangeMax to 200', () => {
+                moderator: 0,
-            expect(wrapper.vm.rangeMax).toBe(200)
+              },
-          })
+            }),
-
+          )
-          describe('sendForm', () => {
-            beforeEach(async () => {
-              await wrapper.find('.test-submit').trigger('click')
-            })
-
-            it('sends ... to apollo', () => {
-              expect(apolloMutateMock).toBeCalledWith(
-                expect.objectContaining({
-                  variables: {
-                    amount: 90,
-                    creationDate: getCreationDate(2),
-                    email: 'bob@baumeister.de',
-                    id: 0,
-                    memo: 'Test create coins',
-                    moderator: 0,
-                  },
-                }),
-              )
-            })
-
-            it('emits update-user-data', () => {
-              expect(wrapper.emitted('update-user-data')).toBeTruthy()
-              expect(wrapper.emitted('update-user-data')).toEqual([
-                [
-                  {
-                    id: 0,
-                    email: 'bob@baumeister.de',
-                  },
-                  [0, 0, 0],
-                ],
-              ])
-            })
-
-            it('toast success message', () => {
-              expect(toastedSuccessMock).toBeCalledWith('creation_form.toasted_update')
-            })
-
-            describe('sendForm with error', () => {
-              beforeEach(async () => {
-                jest.clearAllMocks()
-                apolloMutateMock.mockRejectedValue({
-                  message: 'Ouch!',
-                })
-                wrapper = Wrapper()
-                await wrapper.setProps({ type: 'singleCreation', creation: [200, 400, 600] })
-                await wrapper.setData({ text: 'Test create coins' })
-                await wrapper.setData({ value: 90 })
-                await wrapper.findAll('input[type="radio"]').at(0).setChecked()
-                await wrapper.setData({ rangeMin: 100 })
-                await wrapper.find('.test-submit').trigger('click')
-              })
-
-              it('toast error message', () => {
-                expect(toastedErrorMock).toBeCalledWith('Ouch!')
-              })
-            })
-          })
         })
 
-        describe('second radio button', () => {
+        it('emits update-user-data', () => {
-          beforeEach(async () => {
+          expect(wrapper.emitted('update-user-data')).toEqual([
-            await wrapper.findAll('input[type="radio"]').at(1).setChecked()
+            [
-          })
+              {
-
+                id: 0,
-          it('sets rangeMin to 0', () => {
+                email: 'bob@baumeister.de',
-            expect(wrapper.vm.rangeMin).toBe(0)
+              },
-          })
+              [0, 0, 0],
-
+            ],
-          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).toBeCalledWith(
-                expect.objectContaining({
-                  variables: {
-                    amount: 90,
-                    creationDate: getCreationDate(1),
-                    email: 'bob@baumeister.de',
-                    id: 0,
-                    memo: 'Test create coins',
-                    moderator: 0,
-                  },
-                }),
-              )
-            })
-
-            describe('sendForm with error', () => {
-              beforeEach(async () => {
-                jest.clearAllMocks()
-                apolloMutateMock.mockRejectedValue({
-                  message: 'Ouch!',
-                })
-                wrapper = Wrapper()
-                await wrapper.setProps({ creation: [200, 400, 600] })
-                await wrapper.setData({ text: 'Test create coins' })
-                await wrapper.setData({ value: 100 })
-                await wrapper.findAll('input[type="radio"]').at(1).setChecked()
-                await wrapper.setData({ rangeMin: 180 })
-                await wrapper.find('.test-submit').trigger('click')
-              })
-
-              it('toast error message', () => {
-                expect(toastedErrorMock).toBeCalledWith('Ouch!')
-              })
-            })
-          })
         })
 
-        describe('third radio button', () => {
+        it('emits update-creation-data', () => {
-          beforeEach(async () => {
+          expect(wrapper.emitted('update-creation-data')).toEqual([
-            await wrapper.setData({ rangeMin: 180 })
+            [
-            await wrapper.findAll('input[type="radio"]').at(2).setChecked()
+              {
-          })
+                amount: 500,
+                date: expect.any(Date),
+                memo: 'Test Schöpfung 2',
+                moderator: 0,
+                row: expect.any(Object),
+              },
+            ],
+          ])
+        })
 
-          it('sets rangeMin to 180', () => {
+        it('toasts a success message', () => {
-            expect(wrapper.vm.rangeMin).toBe(180)
+          expect(toastedSuccessMock).toBeCalledWith('creation_form.toasted_update')
-          })
+        })
+      })
 
-          it('sets rangeMax to 700', () => {
+      describe('change and save memo and value with error', () => {
-            expect(wrapper.vm.rangeMax).toBe(700)
+        beforeEach(async () => {
-          })
+          apolloMutateMock.mockRejectedValue({ message: 'Oh no!' })
+          await wrapper.find('input[type="number"]').setValue(500)
+          await wrapper.find('textarea').setValue('Test Schöpfung 2')
+          await wrapper.find('.test-submit').trigger('click')
+        })
 
-          describe('sendForm with success', () => {
+        it('toasts an error message', () => {
-            beforeEach(async () => {
+          expect(toastedErrorMock).toBeCalledWith('Oh no!')
-              await wrapper.find('.test-submit').trigger('click')
-            })
-
-            it('sends ... to apollo', () => {
-              expect(apolloMutateMock).toBeCalledWith(
-                expect.objectContaining({
-                  variables: {
-                    amount: 90,
-                    creationDate: getCreationDate(0),
-                    email: 'bob@baumeister.de',
-                    id: 0,
-                    memo: 'Test create coins',
-                    moderator: 0,
-                  },
-                }),
-              )
-            })
-          })
-
-          describe('sendForm with error', () => {
-            beforeEach(async () => {
-              jest.clearAllMocks()
-              apolloMutateMock.mockRejectedValue({
-                message: 'Ouch!',
-              })
-              wrapper = Wrapper()
-              await wrapper.setProps({ creation: [200, 400, 600] })
-              await wrapper.setData({ text: 'Test create coins' })
-              await wrapper.setData({ value: 90 })
-              await wrapper.findAll('input[type="radio"]').at(2).setChecked()
-              await wrapper.setData({ rangeMin: 180 })
-              await wrapper.find('.test-submit').trigger('click')
-            })
-
-            it('toast error message', () => {
-              expect(toastedErrorMock).toBeCalledWith('Ouch!')
-            })
-          })
         })
       })
     })

admin/src/components/EditCreationFormular.vue

@@ -4,65 +4,14 @@
       <b-form ref="updateCreationForm">
         <b-row class="m-4">
           <label>{{ $t('creation_form.select_month') }}</label>
-          <b-col class="text-left">
+          <b-form-radio-group
-            <b-form-radio
+            v-model="selected"
-              id="beforeLastMonth"
+            :options="radioOptions"
-              v-model="radioSelected"
+            value-field="item"
-              :value="beforeLastMonth"
+            text-field="name"
-              :disabled="selectedOpenCreationAmount[0] === 0"
+            name="month-selection"
-              size="lg"
+          ></b-form-radio-group>
-              @change="updateRadioSelected(beforeLastMonth, 0, selectedOpenCreationAmount[0])"
-            >
-              <label for="beforeLastMonth">
-                {{ beforeLastMonth.short }}
-                {{
-                  selectedOpenCreationAmount[0] != null
-                    ? selectedOpenCreationAmount[0] + ' GDD'
-                    : ''
-                }}
-              </label>
-            </b-form-radio>
-          </b-col>
-          <b-col>
-            <b-form-radio
-              id="lastMonth"
-              v-model="radioSelected"
-              :value="lastMonth"
-              :disabled="selectedOpenCreationAmount[1] === 0"
-              size="lg"
-              @change="updateRadioSelected(lastMonth, 1, selectedOpenCreationAmount[1])"
-            >
-              <label for="lastMonth">
-                {{ lastMonth.short }}
-                {{
-                  selectedOpenCreationAmount[1] != null
-                    ? selectedOpenCreationAmount[1] + ' GDD'
-                    : ''
-                }}
-              </label>
-            </b-form-radio>
-          </b-col>
-          <b-col class="text-right">
-            <b-form-radio
-              id="currentMonth"
-              v-model="radioSelected"
-              :value="currentMonth"
-              :disabled="selectedOpenCreationAmount[2] === 0"
-              size="lg"
-              @change="updateRadioSelected(currentMonth, 2, selectedOpenCreationAmount[2])"
-            >
-              <label for="currentMonth">
-                {{ currentMonth.short }}
-                {{
-                  selectedOpenCreationAmount[2] != null
-                    ? selectedOpenCreationAmount[2] + ' GDD'
-                    : ''
-                }}
-              </label>
-            </b-form-radio>
-          </b-col>
         </b-row>
-
         <b-row class="m-4">
           <label>{{ $t('creation_form.select_value') }}</label>
           <div>
@@ -111,7 +60,7 @@
                 variant="success"
                 class="test-submit"
                 @click="submitCreation"
-                :disabled="radioSelected === '' || value <= 0 || text.length < 10"
+                :disabled="selected === '' || value <= 0 || text.length < 10"
               >
                 {{ $t('creation_form.update_creation') }}
               </b-button>
@@ -124,8 +73,11 @@
 </template>
 <script>
 import { updatePendingCreation } from '../graphql/updatePendingCreation'
+import { creationMonths } from '../mixins/creationMonths'
+
 export default {
   name: 'EditCreationFormular',
+  mixins: [creationMonths],
   props: {
     item: {
       type: Object,
@@ -149,40 +101,26 @@ export default {
   },
   data() {
     return {
-      radioSelected: '',
       text: !this.creationUserData.memo ? '' : this.creationUserData.memo,
       value: !this.creationUserData.amount ? 0 : this.creationUserData.amount,
       rangeMin: 0,
       rangeMax: 1000,
-      submitObj: null,
+      selected: '',
-      isdisabled: true,
-      createdIndex: null,
-      selectedOpenCreationAmount: {},
-      now: Date.now(),
     }
   },
-
   methods: {
-    updateRadioSelected(name, index, openCreation) {
-      this.createdIndex = index
-      this.rangeMin = 0
-      this.rangeMax = this.creation[index]
-    },
     submitCreation() {
-      this.submitObj = {
-        id: this.item.id,
-        email: this.item.email,
-        creationDate: this.radioSelected.date,
-        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,
+          variables: {
+            id: this.item.id,
+            email: this.item.email,
+            creationDate: this.selected.date,
+            amount: Number(this.value),
+            memo: this.text,
+            moderator: Number(this.$store.state.moderator.id),
+          },
         })
         .then((result) => {
           this.$emit('update-user-data', this.item, result.data.updatePendingCreation.creation)
@@ -199,8 +137,6 @@ export default {
               email: this.item.email,
             }),
           )
-          this.submitObj = null
-          this.createdIndex = null
           // das creation Formular reseten
           this.$refs.updateCreationForm.reset()
           // Den geschöpften Wert auf o setzen
@@ -208,7 +144,6 @@ export default {
         })
         .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
@@ -216,54 +151,12 @@ export default {
         })
     },
   },
-  computed: {
-    currentMonth() {
-      return {
-        short: this.$d(this.now, 'month'),
-        long: this.$d(this.now, 'short'),
-        date: this.$d(this.now, 'short', 'en'),
-      }
-    },
-    lastMonth() {
-      const now = new Date(this.now)
-      const lastMonth = new Date(now.getFullYear(), now.getMonth() - 1, 1, 0)
-      return {
-        short: this.$d(lastMonth, 'month'),
-        long: this.$d(lastMonth, 'short'),
-        date: this.$d(lastMonth, 'short', 'en'),
-      }
-    },
-    beforeLastMonth() {
-      const now = new Date(this.now)
-      const beforeLastMonth = new Date(now.getFullYear(), now.getMonth() - 2, 1, 0)
-      return {
-        short: this.$d(beforeLastMonth, 'month'),
-        long: this.$d(beforeLastMonth, 'short'),
-        date: this.$d(beforeLastMonth, 'short', 'en'),
-      }
-    },
-  },
   created() {
     if (this.creationUserData.date) {
-      switch (this.$d(new Date(this.creationUserData.date), 'month')) {
+      const month = this.$d(new Date(this.creationUserData.date), 'month')
-        case this.currentMonth.short:
+      const index = this.radioOptions.findIndex((obj) => obj.item.short === month)
-          this.createdIndex = 2
+      this.selected = this.radioOptions[index].item
-          this.radioSelected = this.currentMonth
+      this.rangeMax = this.creation[index] + this.creationUserData.amount
-          break
-        case this.lastMonth.short:
-          this.createdIndex = 1
-          this.radioSelected = this.lastMonth
-          break
-        case this.beforeLastMonth.short:
-          this.createdIndex = 0
-          this.radioSelected = this.beforeLastMonth
-          break
-        default:
-          throw new Error('Something went wrong')
-      }
-      this.selectedOpenCreationAmount[this.createdIndex] =
-        this.creation[this.createdIndex] + this.creationUserData.amount
-      this.rangeMax = this.selectedOpenCreationAmount[this.createdIndex]
     }
   },
 }