diff --git a/webapp/components/Editor/Editor.spec.js b/webapp/components/Editor/Editor.spec.js index 81c6cce9b..bc5f6f3e8 100644 --- a/webapp/components/Editor/Editor.spec.js +++ b/webapp/components/Editor/Editor.spec.js @@ -3,6 +3,7 @@ import Editor from './Editor' import Vuex from 'vuex' import Styleguide from '@human-connection/styleguide' import MutationObserver from 'mutation-observer' +import Vue from 'vue' global.MutationObserver = MutationObserver @@ -55,9 +56,11 @@ describe('Editor.vue', () => { propsData.value = 'I am a piece of text' }) - it.skip('renders', () => { + it('renders', async () => { wrapper = Wrapper() - expect(wrapper.find('.ProseMirror').text()).toContain('I am a piece of text') + await Vue.nextTick().then(() => { + expect(wrapper.find('.editor-content').text()).toContain(propsData.value) + }) }) }) @@ -88,6 +91,29 @@ describe('Editor.vue', () => { ) }) + describe('limists suggestion list to 15 users', () => { + beforeEach(() => { + let manyUsersList = [] + for (let i = 0; i < 25; i++) { + manyUsersList.push({ id: `user${i}` }) + } + propsData.users = manyUsersList + wrapper = Wrapper() + }) + + it('when query is empty', () => { + expect( + wrapper.vm.editor.extensions.options.mention.onFilter(propsData.users), + ).toHaveLength(15) + }) + + it('when query is present', () => { + expect( + wrapper.vm.editor.extensions.options.mention.onFilter(propsData.users, 'user'), + ).toHaveLength(15) + }) + }) + it('sets the Hashtag items to the hashtags', () => { propsData.hashtags = [ { @@ -105,6 +131,29 @@ describe('Editor.vue', () => { }), ) }) + + describe('limists suggestion list to 15 hashtags', () => { + beforeEach(() => { + let manyHashtagsList = [] + for (let i = 0; i < 25; i++) { + manyHashtagsList.push({ id: `hashtag${i}` }) + } + propsData.hashtags = manyHashtagsList + wrapper = Wrapper() + }) + + it('when query is empty', () => { + expect( + wrapper.vm.editor.extensions.options.hashtag.onFilter(propsData.hashtags), + ).toHaveLength(15) + }) + + it('when query is present', () => { + expect( + wrapper.vm.editor.extensions.options.hashtag.onFilter(propsData.hashtags, 'hashtag'), + ).toHaveLength(15) + }) + }) }) }) }) diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue index 33fe6b5d4..27a94e6b6 100644 --- a/webapp/components/Editor/Editor.vue +++ b/webapp/components/Editor/Editor.vue @@ -203,12 +203,14 @@ export default { filterSuggestionList(items, query) { query = this.sanitizeQuery(query) if (!query) { - return items + return items.slice(0, 15) } - return items.filter(item => { + + const filteredList = items.filter(item => { const itemString = item.slug || item.id return itemString.toLowerCase().includes(query.toLowerCase()) }) + return filteredList.slice(0, 15) }, sanitizeQuery(query) { if (this.suggestionType === HASHTAG) {