test event data form

webapp/components/ContributionForm/ContributionForm.spec.js

@@ -1,8 +1,8 @@
 import { mount } from '@vue/test-utils'
 import ContributionForm from './ContributionForm.vue'
+import PostMutations from '~/graphql/PostMutations.js'
 
 import Vuex from 'vuex'
-import PostMutations from '~/graphql/PostMutations.js'
 
 import ImageUploader from '~/components/Uploader/ImageUploader'
 import MutationObserver from 'mutation-observer'
@@ -108,6 +108,10 @@ describe('ContributionForm.vue', () => {
           await wrapper.vm.updateEditorContent(postContent)
         })
 
+        it('has no event data block', () => {
+          expect(wrapper.find('div.eventDatas').exists()).toBe(false)
+        })
+
         it('title cannot be empty', async () => {
           postTitleInput.setValue('')
           wrapper.find('form').trigger('submit')
@@ -293,5 +297,88 @@ describe('ContributionForm.vue', () => {
         })
       })
     })
+
+    describe('Events', () => {
+      beforeEach(() => {
+        propsData.createEvent = true
+        wrapper = Wrapper()
+      })
+
+      it('has event data block', () => {
+        expect(wrapper.find('div.eventDatas').exists()).toBe(true)
+      })
+
+      describe('is online event', () => {
+        it('has false as default', () => {
+          expect(wrapper.vm.formData.eventIsOnline).toBe(false)
+        })
+
+        it('has input for event location', () => {
+          expect(wrapper.find('input[name="eventLocationName"]').exists()).toBe(true)
+        })
+
+        describe('click is online event', () => {
+          beforeEach(() => {
+            wrapper.find('input[name="eventIsOnline"]').setChecked(true)
+          })
+
+          it('has no input for event location', () => {
+            expect(wrapper.find('input[name="eventLocationName"]').exists()).toBe(false)
+          })
+        })
+
+        describe('invalid form', () => {
+          beforeEach(() => {
+            wrapper.find('input[name="title"]').setValue('Illegaler Kindergeburtstag')
+            wrapper.vm.updateEditorContent('Elli hat Geburtstag!')
+          })
+
+          it('has submit button disabled', () => {
+            expect(wrapper.find('button[type="submit"]').attributes('disabled')).toBe('disabled')
+          })
+        })
+
+        describe('valid form', () => {
+          const now = new Date()
+
+          beforeEach(() => {
+            wrapper.find('input[name="title"]').setValue('Illegaler Kindergeburtstag')
+            wrapper.vm.updateEditorContent('Elli hat Geburtstag!')
+            wrapper
+              .findComponent({ name: 'DatePicker' })
+              .vm.$emit('change', new Date(now.getFullYear(), now.getMonth() + 1).toISOString())
+            wrapper.find('input[name="eventVenue"]').setValue('Ellis Kinderzimmer')
+            wrapper.find('input[name="eventLocationName"]').setValue('Deutschland')
+          })
+
+          it('has submit button not disabled', () => {
+            expect(wrapper.find('button[type="submit"]').attributes('disabled')).toBe(undefined)
+          })
+
+          describe('submit', () => {
+            beforeEach(() => {
+              wrapper.find('form').trigger('submit')
+            })
+
+            it('calls create post', () => {
+              expect(mocks.$apollo.mutate).toHaveBeenCalledWith({
+                mutation: PostMutations().CreatePost,
+                variables: expect.objectContaining({
+                  title: 'Illegaler Kindergeburtstag',
+                  content: 'Elli hat Geburtstag!',
+                  eventInput: {
+                    eventStart: new Date(now.getFullYear(), now.getMonth() + 1).toISOString(),
+                    eventVenue: 'Ellis Kinderzimmer',
+                    eventLocationName: 'Deutschland',
+                    eventIsOnline: false,
+                    eventEnd: null,
+                  },
+                }),
+              })
+            })
+          })
+        })
+      })
+    })
   })
 })

webapp/components/ContributionForm/ContributionForm.vue

@@ -106,7 +106,7 @@
             <ds-grid-item class="event-grid-item">
               <ds-input
                 model="eventVenue"
-                name="location"
+                name="eventVenue"
                 :placeholder="$t('post.viewEvent.eventVenue')"
               />
               <div class="chipbox">
@@ -119,7 +119,7 @@
             <ds-grid-item v-if="showEventLocationName" class="event-grid-item">
               <ds-input
                 model="eventLocationName"
-                name="venue"
+                name="eventLocationName"
                 :placeholder="$t('post.viewEvent.eventLocationName')"
               />
               <div class="chipbox">