diff --git a/webapp/components/ContributionForm/ContributionForm.spec.js b/webapp/components/ContributionForm/ContributionForm.spec.js index f7f306fc3..14877c395 100644 --- a/webapp/components/ContributionForm/ContributionForm.spec.js +++ b/webapp/components/ContributionForm/ContributionForm.spec.js @@ -15,6 +15,8 @@ describe('ContributionForm.vue', () => { let deutschOption let cancelBtn let mocks + let tagsInput + let chipText const postTitle = 'this is a title for a post' const postContent = 'this is a post' const computed = { locale: () => 'English' } @@ -79,10 +81,16 @@ describe('ContributionForm.vue', () => { }) describe('valid form submission', () => { - expectedParams = { - variables: { title: postTitle, content: postContent, language: 'en', id: null }, - } beforeEach(async () => { + expectedParams = { + variables: { + title: postTitle, + content: postContent, + language: 'en', + id: null, + tags: [], + }, + } postTitleInput = wrapper.find('.ds-input') postTitleInput.setValue('this is a title for a post') wrapper.vm.updateEditorContent('this is a post') @@ -105,6 +113,27 @@ describe('ContributionForm.vue', () => { expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams)) }) + it('supports adding tags', async () => { + expectedParams.variables.tags = ['Frieden'] + tagsInput = wrapper.findAll('input').at(1) + tagsInput.setValue('Frieden') + tagsInput.trigger('keyup.enter') + await wrapper.find('form').trigger('submit') + expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams)) + }) + + it('displays tags if they exist', () => { + expectedParams.variables.tags = ['Frieden'] + tagsInput = wrapper.findAll('input').at(1) + tagsInput.setValue('Frieden') + tagsInput.trigger('keyup.enter') + chipText = wrapper + .findAll('span.ds-chip') + .at(0) + .text() + expect(chipText).toEqual('Frieden') + }) + it("pushes the user to the post's page", async () => { expect(mocks.$router.push).toHaveBeenCalledTimes(1) }) diff --git a/webapp/components/ContributionForm/index.vue b/webapp/components/ContributionForm/index.vue index 62c3650c8..8a1283902 100644 --- a/webapp/components/ContributionForm/index.vue +++ b/webapp/components/ContributionForm/index.vue @@ -7,6 +7,17 @@ + + + {{ tag }} + @@ -20,6 +31,7 @@ /> +
{ @@ -144,6 +159,16 @@ export default { this.form.languageOptions.push({ label: locale.name, value: locale.code }) }) }, + removeTag(index) { + this.form.tags.splice(index, 1) + }, + handleInput(e) { + this.form.tagValue = e.target ? e.target.value.trim() : '' + }, + addTag(tag) { + this.form.tags.push(tag) + this.form.tagValue = '' + }, }, apollo: { User: { diff --git a/webapp/locales/de.json b/webapp/locales/de.json index efe05a472..7eef78b76 100644 --- a/webapp/locales/de.json +++ b/webapp/locales/de.json @@ -304,6 +304,8 @@ }, "contribution": { "success": "Gespeichert!", - "languageSelectLabel": "Sprache" + "languageSelectLabel": "Sprache", + "tagsInputLabel": "Tags", + "tagsInputPlaceholder": "Hinzufügen ein Tag" } } diff --git a/webapp/locales/en.json b/webapp/locales/en.json index 4fdcadedb..597e4f540 100644 --- a/webapp/locales/en.json +++ b/webapp/locales/en.json @@ -303,6 +303,8 @@ }, "contribution": { "success": "Saved!", - "languageSelectLabel": "Language" + "languageSelectLabel": "Language", + "tagsInputLabel": "Tags", + "tagsInputPlaceholder": "Add a tag" } }