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 UI, component tests

Browse Source 
- enforce that a post cannot be created or updated with no categories nor more than 3 categories
This commit is contained in:
Matt Rider 2019-08-20 15:53:07 +02:00
parent e79347637c
commit c614e4de47
2 changed files with 91 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -28,6 +28,7 @@ describe('ContributionForm.vue', () => {
let cancelBtn let cancelBtn
let mocks let mocks
let propsData let propsData
let categoryIds
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 = ''
@ -60,6 +61,7 @@ describe('ContributionForm.vue', () => {
content: postContent, content: postContent,
contentExcerpt: postContent, contentExcerpt: postContent,
language: 'en', language: 'en',
categoryIds,
}, },
}, },
}), }),
@ -175,6 +177,23 @@ describe('ContributionForm.vue', () => {
wrapper.find('.submit-button-for-test').trigger('click') wrapper.find('.submit-button-for-test').trigger('click')
expect(mocks.$apollo.mutate).not.toHaveBeenCalled() expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
}) })
it('should have at least one category', async () => {
postTitleInput = wrapper.find('.ds-input')
postTitleInput.setValue(postTitle)
await wrapper.vm.updateEditorContent(postContent)
wrapper.find('.submit-button-for-test').trigger('click')
expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
})
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.find('.submit-button-for-test').trigger('click')
expect(mocks.$apollo.mutate).not.toHaveBeenCalled()
})
}) })
describe('valid form submission', () => { describe('valid form submission', () => {
@ -186,7 +205,7 @@ describe('ContributionForm.vue', () => {
content: postContent, content: postContent,
language: 'en', language: 'en',
id: null, id: null,
categoryIds: null, categoryIds: ['cat12'],
imageUpload: null, imageUpload: null,
image: null, image: null,
}, },
@ -194,11 +213,13 @@ describe('ContributionForm.vue', () => {
postTitleInput = wrapper.find('.ds-input') postTitleInput = wrapper.find('.ds-input')
postTitleInput.setValue(postTitle) postTitleInput.setValue(postTitle)
await wrapper.vm.updateEditorContent(postContent) await wrapper.vm.updateEditorContent(postContent)
categoryIds = ['cat12']
wrapper.find(CategoriesSelect).vm.$emit('updateCategories', categoryIds)
}) })
it('with title and content', () => { it('creates a post with valid title, content, and at least one category', async () => {
wrapper.find('.submit-button-for-test').trigger('click') await wrapper.find('.submit-button-for-test').trigger('click')
expect(mocks.$apollo.mutate).toHaveBeenCalledTimes(1) expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
}) })
it("sends a fallback language based on a user's locale", () => { it("sends a fallback language based on a user's locale", () => {
@ -214,14 +235,6 @@ describe('ContributionForm.vue', () => {
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams)) expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
}) })
it('supports adding categories', async () => {
const categoryIds = ['cat12', 'cat15', 'cat37']
expectedParams.variables.categoryIds = categoryIds
wrapper.find(CategoriesSelect).vm.$emit('updateCategories', categoryIds)
await wrapper.find('.submit-button-for-test').trigger('click')
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
})
it('supports adding a teaser image', async () => { it('supports adding a teaser image', async () => {
expectedParams.variables.imageUpload = imageUpload expectedParams.variables.imageUpload = imageUpload
wrapper.find(TeaserImage).vm.$emit('addTeaserImage', imageUpload) wrapper.find(TeaserImage).vm.$emit('addTeaserImage', imageUpload)
@ -260,6 +273,8 @@ describe('ContributionForm.vue', () => {
postTitleInput = wrapper.find('.ds-input') postTitleInput = wrapper.find('.ds-input')
postTitleInput.setValue(postTitle) postTitleInput.setValue(postTitle)
await wrapper.vm.updateEditorContent(postContent) await wrapper.vm.updateEditorContent(postContent)
categoryIds = ['cat12']
wrapper.find(CategoriesSelect).vm.$emit('updateCategories', categoryIds)
}) })
it('shows an error toaster when apollo mutation rejects', async () => { it('shows an error toaster when apollo mutation rejects', async () => {
@ -307,35 +322,54 @@ describe('ContributionForm.vue', () => {
expect(wrapper.vm.form.content).toEqual(propsData.contribution.content) expect(wrapper.vm.form.content).toEqual(propsData.contribution.content)
}) })
it('calls the UpdatePost apollo mutation', async () => { describe('valid update', () => {
expectedParams = { beforeEach(() => {
mutation: PostMutations().UpdatePost, mocks.$apollo.mutate = jest.fn().mockResolvedValueOnce({
variables: { data: {
title: postTitle, UpdatePost: {
content: postContent, title: postTitle,
language: propsData.contribution.language, slug: 'this-is-a-title-for-a-post',
id: propsData.contribution.id, content: postContent,
categoryIds: ['cat12'], contentExcerpt: postContent,
image, language: 'en',
imageUpload: null, categoryIds,
}, },
} },
postTitleInput = wrapper.find('.ds-input') })
postTitleInput.setValue(postTitle) wrapper = Wrapper()
wrapper.vm.updateEditorContent(postContent) expectedParams = {
await wrapper.find('.submit-button-for-test').trigger('click') mutation: PostMutations().UpdatePost,
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams)) variables: {
}) title: postTitle,
content: postContent,
language: propsData.contribution.language,
id: propsData.contribution.id,
categoryIds,
image,
imageUpload: null,
},
}
})
it('supports updating categories', async () => { it('calls the UpdatePost apollo mutation', async () => {
const categoryIds = ['cat3', 'cat51', 'cat37'] postTitleInput = wrapper.find('.ds-input')
postTitleInput = wrapper.find('.ds-input') postTitleInput.setValue(postTitle)
postTitleInput.setValue(postTitle) wrapper.vm.updateEditorContent(postContent)
wrapper.vm.updateEditorContent(postContent) wrapper.find(CategoriesSelect).vm.$emit('updateCategories', categoryIds)
expectedParams.variables.categoryIds = categoryIds wrapper.find('.submit-button-for-test').trigger('click')
wrapper.find(CategoriesSelect).vm.$emit('updateCategories', categoryIds) expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
await 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']
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')
expect(mocks.$apollo.mutate).toHaveBeenCalledWith(expect.objectContaining(expectedParams))
})
}) })
}) })
}) })

28
webapp/components/ContributionForm/ContributionForm.vue
View File

@ -57,7 +57,7 @@
type="submit" type="submit"
icon="check" icon="check"
:loading="loading" :loading="loading"
:disabled="disabledByContent || errors" :disabled="failsValidations || errors"
primary primary
@click.prevent="submit" @click.prevent="submit"
> >
@ -101,7 +101,7 @@ export default {
image: null, image: null,
language: null, language: null,
languageOptions: [], languageOptions: [],
categoryIds: null, categoryIds: [],
}, },
formSchema: { formSchema: {
title: { required: true, min: 3, max: 64 }, title: { required: true, min: 3, max: 64 },
@ -109,12 +109,11 @@ export default {
}, },
id: null, id: null,
loading: false, loading: false,
disabledByContent: true,
slug: null, slug: null,
users: [], users: [],
contentMin: 3, contentMin: 3,
contentMax: 2000, contentMax: 2000,
failsValidations: true,
hashtags: [], hashtags: [],
} }
}, },
@ -129,9 +128,9 @@ export default {
this.slug = contribution.slug this.slug = contribution.slug
this.form.title = contribution.title this.form.title = contribution.title
this.form.content = contribution.content this.form.content = contribution.content
this.manageContent(this.form.content)
this.form.image = contribution.image this.form.image = contribution.image
this.form.categoryIds = this.categoryIds(contribution.categories) this.form.categoryIds = this.categoryIds(contribution.categories)
this.manageContent(this.form.content)
}, },
}, },
}, },
@ -175,11 +174,11 @@ export default {
imageUpload: teaserImage, imageUpload: teaserImage,
}, },
}) })
.then(res => { .then(({ data }) => {
this.loading = false this.loading = false
this.$toast.success(this.$t('contribution.success')) this.$toast.success(this.$t('contribution.success'))
this.disabledByContent = true this.failedValidations = true
const result = res.data[this.id ? 'UpdatePost' : 'CreatePost'] const result = data[this.id ? 'UpdatePost' : 'CreatePost']
this.$router.push({ this.$router.push({
name: 'post-id-slug', name: 'post-id-slug',
@ -189,7 +188,7 @@ export default {
.catch(err => { .catch(err => {
this.$toast.error(err.message) this.$toast.error(err.message)
this.loading = false this.loading = false
this.disabledByContent = false this.failedValidations = false
}) })
}, },
updateEditorContent(value) { updateEditorContent(value) {
@ -202,8 +201,7 @@ export default {
const str = content.replace(/<\/?[^>]+(>|$)/gm, '') const str = content.replace(/<\/?[^>]+(>|$)/gm, '')
// Set counter length of text // Set counter length of text
this.form.contentLength = str.length this.form.contentLength = str.length
// Enable save button if requirements are met this.validatePost()
this.disabledByContent = !(this.contentMin <= str.length && str.length <= this.contentMax)
}, },
availableLocales() { availableLocales() {
orderBy(locales, 'name').map(locale => { orderBy(locales, 'name').map(locale => {
@ -212,6 +210,7 @@ export default {
}, },
updateCategories(ids) { updateCategories(ids) {
this.form.categoryIds = ids this.form.categoryIds = ids
this.validatePost()
}, },
addTeaserImage(file) { addTeaserImage(file) {
this.form.teaserImage = file this.form.teaserImage = file
@ -223,6 +222,13 @@ export default {
}) })
return categoryIds return categoryIds
}, },
validatePost() {
const passesContentValidations =
this.form.contentLength >= this.contentMin && this.form.contentLength <= this.contentMax
const passesCategoryValidations =
this.form.categoryIds.length > 0 && this.form.categoryIds.length <= 3
this.failsValidations = !(passesContentValidations && passesCategoryValidations)
},
}, },
apollo: { apollo: {
User: { User: {