IT4Change/Ocelot-Social
3
0
Fork 0
mirror of https://github.com/IT4Change/Ocelot-Social.git synced 2025-12-13 07:45:56 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update tests to test new validations

Browse Source
This commit is contained in:
mattwr18 2019-11-18 21:23:12 +01:00
parent 5450eba1b9
commit 399e13360e
2 changed files with 58 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
webapp/components/CategoriesSelect/CategoriesSelect.vue
View File

@ -5,6 +5,7 @@
<ds-flex-item> <ds-flex-item>
<ds-button <ds-button
size="small" size="small"
:data-test="categoryButtonsId(category.id)"
@click.prevent="toggleCategory(category.id)" @click.prevent="toggleCategory(category.id)"
:primary="isActive(category.id)" :primary="isActive(category.id)"
:disabled="isDisabled(category.id)" :disabled="isDisabled(category.id)"
@ -68,6 +69,9 @@ export default {
isDisabled(id) { isDisabled(id) {
return !!(this.reachedMaximum && !this.isActive(id)) return !!(this.reachedMaximum && !this.isActive(id))
}, },
categoryButtonsId(categoryId) {
return `category-buttons-${categoryId}`
},
}, },
apollo: { apollo: {
Category: { Category: {

156
webapp/components/ContributionForm/ContributionForm.spec.js
View File

@ -49,13 +49,16 @@ const categories = [
] ]
describe('ContributionForm.vue', () => { describe('ContributionForm.vue', () => {
let wrapper let wrapper,
let postTitleInput postTitleInput,
let expectedParams expectedParams,
let cancelBtn cancelBtn,
let mocks mocks,
let propsData propsData,
let categoryIds categoryIds,
englishLanguage,
deutschLanguage,
dataPrivacyButton
const postTitle = 'this is a title for a post' const postTitle = 'this is a title for a post'
const postTitleTooShort = 'xx' const postTitleTooShort = 'xx'
let postTitleTooLong = '' let postTitleTooLong = ''
@ -63,11 +66,6 @@ describe('ContributionForm.vue', () => {
postTitleTooLong += 'x' postTitleTooLong += 'x'
} }
const postContent = 'this is a post' const postContent = 'this is a post'
const postContentTooShort = 'xx'
let postContentTooLong = ''
for (let i = 0; i < 2001; i++) {
postContentTooLong += 'x'
}
const imageUpload = { const imageUpload = {
file: { file: {
filename: 'avataar.svg', filename: 'avataar.svg',
@ -139,77 +137,54 @@ describe('ContributionForm.vue', () => {
}) })
describe('CreatePost', () => { describe('CreatePost', () => {
describe('language placeholder', () => {
it.skip("displays the name that corresponds with the user's location code", () => {
// Well not anymore right? We want the user to save the language
// excplicitly. I'll keep this test if we change our minds
expect(wrapper.find('.ds-select-placeholder').text()).toEqual('English')
})
})
describe('invalid form submission', () => { describe('invalid form submission', () => {
it('title and content should not be empty ', async () => { beforeEach(async () => {
wrapper.find('form').trigger('submit') wrapper.find(CategoriesSelect).setData({ categories })
expect(mocks.$apollo.mutate).not.toHaveBeenCalled() postTitleInput = wrapper.find('.ds-input')
postTitleInput.setValue(postTitle)
await wrapper.vm.updateEditorContent(postContent)
englishLanguage = wrapper.findAll('li').filter(language => language.text() === 'English')
englishLanguage.trigger('click')
dataPrivacyButton = await wrapper
.find(CategoriesSelect)
.find('[data-test="category-buttons-cat12"]')
dataPrivacyButton.trigger('click')
}) })
it('title should not be empty', async () => { it('title should not be empty', async () => {
await wrapper.vm.updateEditorContent(postContent) postTitleInput.setValue('')
wrapper.find('form').trigger('submit') wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).not.toHaveBeenCalled() expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
}) })
it('title should not be too long', async () => { it('title should not be too long', async () => {
postTitleInput = wrapper.find('.ds-input')
postTitleInput.setValue(postTitleTooLong) postTitleInput.setValue(postTitleTooLong)
await wrapper.vm.updateEditorContent(postContent)
wrapper.find('form').trigger('submit') wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).not.toHaveBeenCalled() expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
}) })
it('title should not be too short', async () => { it('title should not be too short', async () => {
postTitleInput = wrapper.find('.ds-input')
postTitleInput.setValue(postTitleTooShort) postTitleInput.setValue(postTitleTooShort)
await wrapper.vm.updateEditorContent(postContent)
wrapper.find('form').trigger('submit') wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).not.toHaveBeenCalled() expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
}) })
it('content should not be empty', async () => { it('content should not be empty', async () => {
postTitleInput = wrapper.find('.ds-input') await wrapper.vm.updateEditorContent('')
postTitleInput.setValue(postTitle)
await wrapper.find('form').trigger('submit') await wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).not.toHaveBeenCalled() expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
}) })
it('content should not be too short', async () => {
postTitleInput = wrapper.find('.ds-input')
postTitleInput.setValue(postTitle)
await wrapper.vm.updateEditorContent(postContentTooShort)
wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
})
it('content should not be too long', async () => {
postTitleInput = wrapper.find('.ds-input')
postTitleInput.setValue(postTitle)
await wrapper.vm.updateEditorContent(postContentTooLong)
wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
})
it('should have at least one category', async () => { it('should have at least one category', async () => {
postTitleInput = wrapper.find('.ds-input') dataPrivacyButton = await wrapper
postTitleInput.setValue(postTitle) .find(CategoriesSelect)
await wrapper.vm.updateEditorContent(postContent) .find('[data-test="category-buttons-cat12"]')
dataPrivacyButton.trigger('click')
wrapper.find('form').trigger('submit') wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).not.toHaveBeenCalled() expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
}) })
it('should have not have more than three categories', async () => { it('should have not have more than three categories', async () => {
postTitleInput = wrapper.find('.ds-input')
postTitleInput.setValue(postTitle)
await wrapper.vm.updateEditorContent(postContent)
wrapper.vm.form.categoryIds = ['cat4', 'cat9', 'cat15', 'cat27'] wrapper.vm.form.categoryIds = ['cat4', 'cat9', 'cat15', 'cat27']
wrapper.find('form').trigger('submit') wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).not.toHaveBeenCalled() expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
@ -234,15 +209,12 @@ describe('ContributionForm.vue', () => {
postTitleInput.setValue(postTitle) postTitleInput.setValue(postTitle)
await wrapper.vm.updateEditorContent(postContent) await wrapper.vm.updateEditorContent(postContent)
wrapper.find(CategoriesSelect).setData({ categories }) wrapper.find(CategoriesSelect).setData({ categories })
wrapper englishLanguage = wrapper.findAll('li').filter(language => language.text() === 'English')
.findAll('li') englishLanguage.trigger('click')
.at(1) dataPrivacyButton = await wrapper
.trigger('click') // language
await wrapper
.find(CategoriesSelect) .find(CategoriesSelect)
.findAll('button') .find('[data-test="category-buttons-cat12"]')
.at(1) dataPrivacyButton.trigger('click')
.trigger('click')
}) })
it('creates a post with valid title, content, and at least one category', async () => { it('creates a post with valid title, content, and at least one category', async () => {
@ -252,10 +224,8 @@ describe('ContributionForm.vue', () => {
it('supports changing the language', async () => { it('supports changing the language', async () => {
expectedParams.variables.language = 'de' expectedParams.variables.language = 'de'
wrapper deutschLanguage = wrapper.findAll('li').filter(language => language.text() === 'Deutsch')
.findAll('li') deutschLanguage.trigger('click')
.at(0)
.trigger('click') // choose German as language
wrapper.find('form').trigger('submit') wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams)) expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
}) })
@ -267,6 +237,14 @@ describe('ContributionForm.vue', () => {
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams)) expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
}) })
it('content is valid with just a link', async () => {
await wrapper.vm.updateEditorContent(
'<a href="https://www.youtube.com/watch?v=smoEelV6FUk" target="_blank"></a>',
)
wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1)
})
it("pushes the user to the post's page", async () => { it("pushes the user to the post's page", async () => {
wrapper.find('form').trigger('submit') wrapper.find('form').trigger('submit')
await mocks.$apollo.mutate await mocks.$apollo.mutate
@ -300,15 +278,12 @@ describe('ContributionForm.vue', () => {
await wrapper.vm.updateEditorContent(postContent) await wrapper.vm.updateEditorContent(postContent)
categoryIds = ['cat12'] categoryIds = ['cat12']
wrapper.find(CategoriesSelect).setData({ categories }) wrapper.find(CategoriesSelect).setData({ categories })
wrapper englishLanguage = wrapper.findAll('li').filter(language => language.text() === 'English')
.findAll('li') englishLanguage.trigger('click')
.at(1) dataPrivacyButton = await wrapper
.trigger('click') // language
await wrapper
.find(CategoriesSelect) .find(CategoriesSelect)
.findAll('button') .find('[data-test="category-buttons-cat12"]')
.at(1) dataPrivacyButton.trigger('click')
.trigger('click')
}) })
it('shows an error toaster when apollo mutation rejects', async () => { it('shows an error toaster when apollo mutation rejects', async () => {
@ -374,8 +349,8 @@ describe('ContributionForm.vue', () => {
expectedParams = { expectedParams = {
mutation: PostMutations().UpdatePost, mutation: PostMutations().UpdatePost,
variables: { variables: {
title: postTitle, title: propsData.contribution.title,
content: postContent, content: propsData.contribution.content,
language: propsData.contribution.language, language: propsData.contribution.language,
id: propsData.contribution.id, id: propsData.contribution.id,
categoryIds: ['cat12'], categoryIds: ['cat12'],
@ -386,42 +361,19 @@ describe('ContributionForm.vue', () => {
}) })
it('calls the UpdatePost apollo mutation', async () => { it('calls the UpdatePost apollo mutation', async () => {
postTitleInput = wrapper.find('.ds-input') expectedParams.variables.content = postContent
postTitleInput.setValue(postTitle)
wrapper.vm.updateEditorContent(postContent) wrapper.vm.updateEditorContent(postContent)
wrapper
.findAll('li')
.at(0)
.trigger('click') // language
await wrapper.find('form').trigger('submit') await wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams)) expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
}) })
it('supports updating categories', async () => { it('supports updating categories', async () => {
expectedParams.variables.categoryIds = ['cat12', 'cat3', 'cat15'] expectedParams.variables.categoryIds.push('cat3')
postTitleInput = wrapper.find('.ds-input')
postTitleInput.setValue(postTitle)
wrapper.vm.updateEditorContent(postContent)
wrapper
.findAll('li')
.at(0)
.trigger('click') // language
wrapper.find(CategoriesSelect).setData({ categories }) wrapper.find(CategoriesSelect).setData({ categories })
await wrapper let healthWellbeingButton = await wrapper
.find(CategoriesSelect) .find(CategoriesSelect)
.findAll('button') .find('[data-test="category-buttons-cat3"]')
.at(0) healthWellbeingButton.trigger('click')
.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') await wrapper.find('form').trigger('submit')
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams)) expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
}) })