Fix tests

webapp/components/CategoriesSelect/CategoriesSelect.spec.js

@@ -8,10 +8,12 @@ localVue.use(Styleguide)
 describe('CategoriesSelect.vue', () => {
   let wrapper
   let mocks
+  let provide
   let democracyAndPolitics
   let environmentAndNature
   let consumptionAndSustainablity
 
+  const propsData = { model: 'categoryIds' }
   const categories = [
     {
       id: 'cat9',
@@ -35,6 +37,11 @@ describe('CategoriesSelect.vue', () => {
     },
   ]
   beforeEach(() => {
+    provide = {
+      $parentForm: {
+        update: jest.fn(),
+      },
+    }
     mocks = {
       $t: jest.fn(),
     }
@@ -42,7 +49,7 @@ describe('CategoriesSelect.vue', () => {
 
   describe('shallowMount', () => {
     const Wrapper = () => {
-      return mount(CategoriesSelect, { mocks, localVue })
+      return mount(CategoriesSelect, { propsData, mocks, localVue, provide })
     }
 
     beforeEach(() => {
@@ -60,8 +67,8 @@ describe('CategoriesSelect.vue', () => {
         expect(wrapper.vm.selectedCategoryIds).toEqual([categories[0].id])
       })
 
-      it('emits an updateCategories event when the selectedCategoryIds changes', () => {
+      it('calls $parent.update with selected category ids', () => {
-        expect(wrapper.emitted().updateCategories[0][0]).toEqual([categories[0].id])
+        expect(provide.$parentForm.update).toHaveBeenCalledWith('categoryIds', ['cat9'])
       })
 
       it('removes categories when clicked a second time', () => {

webapp/components/ContributionForm/ContributionForm.spec.js

@@ -20,6 +20,34 @@ config.stubs['client-only'] = '<span><slot /></span>'
 config.stubs['nuxt-link'] = '<span><slot /></span>'
 config.stubs['v-popover'] = '<span><slot /></span>'
 
+const categories = [
+  {
+    "id": "cat3",
+    "slug": "health-wellbeing",
+    "icon": "medkit"
+  },
+  {
+    "id": "cat12",
+    "slug": "it-internet-data-privacy",
+    "icon": "mouse-pointer"
+  },
+  {
+    "id": "cat9",
+    "slug": "democracy-politics",
+    "icon": "university"
+  },
+  {
+    "id": "cat15",
+    "slug": "consumption-sustainability",
+    "icon": "shopping-cart"
+  },
+  {
+    "id": "cat4",
+    "slug": "environment-nature",
+    "icon": "tree"
+  }
+]
+
 describe('ContributionForm.vue', () => {
   let wrapper
   let postTitleInput
@@ -130,13 +158,13 @@ describe('ContributionForm.vue', () => {
 
       describe('invalid form submission', () => {
         it('title and content should not be empty ', async () => {
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
         it('title should not be empty', async () => {
           await wrapper.vm.updateEditorContent(postContent)
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
@@ -144,7 +172,7 @@ describe('ContributionForm.vue', () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitleTooLong)
           await wrapper.vm.updateEditorContent(postContent)
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
@@ -152,14 +180,14 @@ describe('ContributionForm.vue', () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitleTooShort)
           await wrapper.vm.updateEditorContent(postContent)
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
         it('content should not be empty', async () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
-          await wrapper.find('.submit-button-for-test').trigger('click')
+          await wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
@@ -167,7 +195,7 @@ describe('ContributionForm.vue', () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContentTooShort)
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
@@ -175,7 +203,7 @@ describe('ContributionForm.vue', () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContentTooLong)
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
@@ -183,7 +211,7 @@ describe('ContributionForm.vue', () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContent)
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
 
@@ -192,7 +220,7 @@ describe('ContributionForm.vue', () => {
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContent)
           wrapper.vm.form.categoryIds = ['cat4', 'cat9', 'cat15', 'cat27']
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
         })
       })
@@ -214,17 +242,17 @@ describe('ContributionForm.vue', () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContent)
-          categoryIds = ['cat12']
+          wrapper.find(CategoriesSelect).setData({categories})
-          wrapper.find(CategoriesSelect).vm.$emit('updateCategories', categoryIds)
+          await wrapper.find(CategoriesSelect).findAll('button').at(1).trigger('click')
         })
 
         it('creates a post with valid title, content, and at least one category', async () => {
-          await wrapper.find('.submit-button-for-test').trigger('click')
+          await wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
 
         it("sends a fallback language based on a user's locale", () => {
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
 
@@ -232,25 +260,25 @@ describe('ContributionForm.vue', () => {
           expectedParams.variables.language = 'de'
           deutschOption = wrapper.findAll('li').at(0)
           deutschOption.trigger('click')
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
 
         it('supports adding a teaser image', async () => {
           expectedParams.variables.imageUpload = imageUpload
           wrapper.find(TeaserImage).vm.$emit('addTeaserImage', imageUpload)
-          await wrapper.find('.submit-button-for-test').trigger('click')
+          await wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
 
         it("pushes the user to the post's page", async () => {
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           await mocks.$apollo.mutate
           expect(mocks.$router.push).toHaveBeenCalledTimes(1)
         })
 
         it('shows a success toaster', async () => {
-          wrapper.find('.submit-button-for-test').trigger('click')
+          wrapper.find('form').trigger('submit')
           await mocks.$apollo.mutate
           expect(mocks.$toast.success).toHaveBeenCalledTimes(1)
         })
@@ -275,11 +303,12 @@ describe('ContributionForm.vue', () => {
           postTitleInput.setValue(postTitle)
           await wrapper.vm.updateEditorContent(postContent)
           categoryIds = ['cat12']
-          wrapper.find(CategoriesSelect).vm.$emit('updateCategories', categoryIds)
+          wrapper.find(CategoriesSelect).setData({categories})
+          await wrapper.find(CategoriesSelect).findAll('button').at(1).trigger('click')
         })
 
         it('shows an error toaster when apollo mutation rejects', async () => {
-          await wrapper.find('.submit-button-for-test').trigger('click')
+          await wrapper.find('form').trigger('submit')
           await mocks.$apollo.mutate
           await expect(mocks.$toast.error).toHaveBeenCalledWith('Not Authorised!')
         })
@@ -345,7 +374,7 @@ describe('ContributionForm.vue', () => {
               content: postContent,
               language: propsData.contribution.language,
               id: propsData.contribution.id,
-              categoryIds,
+              categoryIds: ['cat12'],
               image,
               imageUpload: null,
             },
@@ -356,19 +385,20 @@ describe('ContributionForm.vue', () => {
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
           wrapper.vm.updateEditorContent(postContent)
-          wrapper.find(CategoriesSelect).vm.$emit('updateCategories', categoryIds)
+          await wrapper.find('form').trigger('submit')
-          wrapper.find('.submit-button-for-test').trigger('click')
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
 
         it('supports updating categories', async () => {
-          const categoryIds = ['cat3', 'cat51', 'cat37']
+          expectedParams.variables.categoryIds = ['cat12', 'cat3', 'cat15']
           postTitleInput = wrapper.find('.ds-input')
           postTitleInput.setValue(postTitle)
           wrapper.vm.updateEditorContent(postContent)
-          expectedParams.variables.categoryIds = categoryIds
+          wrapper.find(CategoriesSelect).setData({categories})
-          wrapper.find(CategoriesSelect).vm.$emit('updateCategories', categoryIds)
+          await wrapper.find(CategoriesSelect).findAll('button').at(0).trigger('click')
-          await wrapper.find('.submit-button-for-test').trigger('click')
+          await wrapper.find(CategoriesSelect).findAll('button').at(3).trigger('click')
+          await wrapper.find(CategoriesSelect).findAll('button').at(4).trigger('click')
+          await wrapper.find('form').trigger('submit')
           expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
         })
       })

webapp/components/ContributionForm/ContributionForm.vue

@@ -1,5 +1,5 @@
 <template>
-  <ds-form ref="contributionForm" v-model="form" :schema="formSchema">
+  <ds-form ref="contributionForm" v-model="form" :schema="formSchema" @submit="submit">
     <template slot-scope="{ errors }">
       <hc-teaser-image :contribution="contribution" @addTeaserImage="addTeaserImage">
         <img
@@ -78,13 +78,11 @@
             {{ $t('actions.cancel') }}
           </ds-button>
           <ds-button
-            class="submit-button-for-test"
             type="submit"
             icon="check"
             :loading="loading"
             :disabled="errors"
             primary
-            @click.prevent="submit"
           >
             {{ $t('actions.save') }}
           </ds-button>
@@ -141,8 +139,8 @@ export default {
           required: true,
           validator: (rule, value) => {
             const errors = []
-            if (!value || value.length <= 0) {
+            if (!(value && 1 <= value.length && value.length <= 3)) {
-              errors.push(new Error('Choose at least 1 but at most 3 categories'))
+              errors.push(new Error(this.$t('common.validations.categories')))
             }
             return errors
           },

webapp/locales/de.json

@@ -434,7 +434,8 @@
     "reportContent": "Melden",
     "validations": {
       "email": "muss eine gültige E-Mail Adresse sein",
-      "url": "muss eine gültige URL sein"
+      "url": "muss eine gültige URL sein",
+      "categories": "es müssen eine bis drei Kategorien ausgewählt werden"
     }
   },
   "actions": {

webapp/locales/en.json

@@ -435,7 +435,8 @@
     "reportContent": "Report",
     "validations": {
       "email": "must be a valid e-mail address",
-      "url": "must be a valid URL"
+      "url": "must be a valid URL",
+      "categories": "at least one and at most three categories must be selected"
     }
   },
   "actions": {