diff --git a/webapp/components/ContributionForm/ContributionForm.spec.js b/webapp/components/ContributionForm/ContributionForm.spec.js index 5f345adb7..3946f2508 100644 --- a/webapp/components/ContributionForm/ContributionForm.spec.js +++ b/webapp/components/ContributionForm/ContributionForm.spec.js @@ -26,13 +26,13 @@ describe('ContributionForm.vue', () => { const postTitle = 'this is a title for a post' const postTitleTooShort = 'xx' let postTitleTooLong = '' - for (let i = 0; i < 100; i++) { + for (let i = 0; i < 65; i++) { postTitleTooLong += 'x' } const postContent = 'this is a post' - const postContentTooShort = 'xx' + const postContentTooShort = 'xxx' let postContentTooLong = '' - for (let i = 0; i < 2008; i++) { + for (let i = 0; i < 2000; i++) { postContentTooLong += 'x' } const imageUpload = { @@ -157,7 +157,11 @@ describe('ContributionForm.vue', () => { postTitleInput = wrapper.find('.ds-input') postTitleInput.setValue(postTitle) wrapper.vm.updateEditorContent(postContentTooLong) + // console.log('this.form.content: ', wrapper.vm.form.content) + console.log('wrapper.vm.contentMin: ', wrapper.vm.contentMin) + console.log('wrapper.vm.contentMax: ', wrapper.vm.contentMax) await wrapper.find('form').trigger('submit') + // await wrapper.find('.submit-button-for-test').trigger('click') expect(mocks.$apollo.mutate).not.toHaveBeenCalled() }) @@ -165,7 +169,9 @@ describe('ContributionForm.vue', () => { postTitleInput = wrapper.find('.ds-input') postTitleInput.setValue(postTitle) wrapper.vm.updateEditorContent(postContentTooShort) + // console.log('this.form.content: ', wrapper.vm.form.content) await wrapper.find('form').trigger('submit') + // await wrapper.find('.submit-button-for-test').trigger('click') expect(mocks.$apollo.mutate).not.toHaveBeenCalled() }) }) diff --git a/webapp/components/ContributionForm/ContributionForm.vue b/webapp/components/ContributionForm/ContributionForm.vue index 5b1040b62..485af2545 100644 --- a/webapp/components/ContributionForm/ContributionForm.vue +++ b/webapp/components/ContributionForm/ContributionForm.vue @@ -18,7 +18,7 @@ :value="form.content" @input="updateEditorContent" /> - {{ form.contentLength }}/{{ content_max }} + {{ form.contentLength }}/{{ contentMax }} {{ $t('actions.save') }} @@ -112,11 +113,11 @@ export default { }, id: null, loading: false, - disabled: true, + disabledByContent: true, slug: null, users: [], - content_min: 3, - content_max: 2000, + contentMin: 3, + contentMax: 2000, hashtags: [], } @@ -130,8 +131,9 @@ export default { } this.id = contribution.id this.slug = contribution.slug - this.form.content = contribution.content this.form.title = contribution.title + this.form.content = contribution.content + this.manageContent(this.form.content) this.form.image = contribution.image this.form.categoryIds = this.categoryIds(contribution.categories) }, @@ -177,7 +179,7 @@ export default { .then(res => { this.loading = false this.$toast.success(this.$t('contribution.success')) - this.disabled = true + this.disabledByContent = true const result = res.data[this.id ? 'UpdatePost' : 'CreatePost'] this.$router.push({ @@ -188,22 +190,23 @@ export default { .catch(err => { this.$toast.error(err.message) this.loading = false - this.disabled = false + this.disabledByContent = false }) }, updateEditorContent(value) { - // disable form - this.disabled = true // TODO: Do smth????? what is happening this.$refs.contributionForm.update('content', value) + this.manageContent(value) + }, + manageContent(content) { // filter HTML out of content value - const str = value.replace(/<\/?[^>]+(>|$)/gm, '') + const str = content.replace(/<\/?[^>]+(>|$)/gm, '') // Set counter length of text this.form.contentLength = str.length + console.log('this.disabledByContent: ', this.disabledByContent) // Enable save button if requirements are met - if (str.length >= this.content_min && str.length <= this.content_max) { - this.disabled = false - } + this.disabledByContent = !(this.contentMin <= str.length && str.length <= this.contentMax) + console.log('this.disabledByContent: ', this.disabledByContent) }, availableLocales() { orderBy(locales, 'name').map(locale => {