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 @@