diff --git a/webapp/components/CategoriesSelect/CategoriesSelect.spec.js b/webapp/components/CategoriesSelect/CategoriesSelect.spec.js
index 199dacb74..56534c6ad 100644
--- a/webapp/components/CategoriesSelect/CategoriesSelect.spec.js
+++ b/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', () => {
- expect(wrapper.emitted().updateCategories[0][0]).toEqual([categories[0].id])
+ it('calls $parent.update with selected category ids', () => {
+ expect(provide.$parentForm.update).toHaveBeenCalledWith('categoryIds', ['cat9'])
})
it('removes categories when clicked a second time', () => {
diff --git a/webapp/components/ContributionForm/ContributionForm.spec.js b/webapp/components/ContributionForm/ContributionForm.spec.js
index 836fe3fd3..f4d76895b 100644
--- a/webapp/components/ContributionForm/ContributionForm.spec.js
+++ b/webapp/components/ContributionForm/ContributionForm.spec.js
@@ -20,6 +20,34 @@ config.stubs['client-only'] = ''
config.stubs['nuxt-link'] = ''
config.stubs['v-popover'] = ''
+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).vm.$emit('updateCategories', categoryIds)
+ wrapper.find(CategoriesSelect).setData({categories})
+ 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)
- wrapper.find('.submit-button-for-test').trigger('click')
+ await wrapper.find('form').trigger('submit')
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).vm.$emit('updateCategories', categoryIds)
- await wrapper.find('.submit-button-for-test').trigger('click')
+ wrapper.find(CategoriesSelect).setData({categories})
+ await wrapper.find(CategoriesSelect).findAll('button').at(0).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))
})
})
diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue
index e588f1ac4..90a63b7df 100644
--- a/webapp/components/ContributionForm/ContributionForm.vue
+++ b/webapp/components/ContributionForm/ContributionForm.vue
@@ -1,5 +1,5 @@
-
+
{{ $t('actions.save') }}
@@ -141,8 +139,8 @@ export default {
required: true,
validator: (rule, value) => {
const errors = []
- if (!value || value.length <= 0) {
- errors.push(new Error('Choose at least 1 but at most 3 categories'))
+ if (!(value && 1 <= value.length && value.length <= 3)) {
+ errors.push(new Error(this.$t('common.validations.categories')))
}
return errors
},
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 34cd948ed..fb371c831 100644
--- a/webapp/locales/de.json
+++ b/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": {
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index d3b4e8edc..e898c9000 100644
--- a/webapp/locales/en.json
+++ b/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": {