diff --git a/webapp/components/Editor/Editor.spec.js b/webapp/components/Editor/Editor.spec.js index 024d62c58..bc5f6f3e8 100644 --- a/webapp/components/Editor/Editor.spec.js +++ b/webapp/components/Editor/Editor.spec.js @@ -83,16 +83,6 @@ describe('Editor.vue', () => { expect(wrapper.vm.editor.extensions.options.mention.items()).toEqual(propsData.users) }) - it('limits the suggestion list to 15 users', () => { - let manyUsersList = [] - for (let i = 0; i < 25; i++) { - manyUsersList.push({ id: `user${i}` }) - } - propsData.users = manyUsersList - wrapper = Wrapper() - expect(wrapper.vm.editor.extensions.options.mention.items()).toHaveLength(15) - }) - it('mentions is not an option when there are no users', () => { expect(wrapper.vm.editor.extensions.options).toEqual( expect.not.objectContaining({ @@ -101,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 = [ { @@ -111,16 +124,6 @@ describe('Editor.vue', () => { expect(wrapper.vm.editor.extensions.options.hashtag.items()).toEqual(propsData.hashtags) }) - it('limits the suggestion list to 15 users', () => { - let manyHashtagsList = [] - for (let i = 0; i < 25; i++) { - manyHashtagsList.push({ id: `hashtag${i}` }) - } - propsData.hashtags = manyHashtagsList - wrapper = Wrapper() - expect(wrapper.vm.editor.extensions.options.hashtag.items()).toHaveLength(15) - }) - it('hashtags is not an option when there are no hashtags', () => { expect(wrapper.vm.editor.extensions.options).toEqual( expect.not.objectContaining({ @@ -128,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 fe7e9afd7..27a94e6b6 100644 --- a/webapp/components/Editor/Editor.vue +++ b/webapp/components/Editor/Editor.vue @@ -77,7 +77,7 @@ export default { extensions.push( new Mention({ items: () => { - return this.users.slice(0, 15) + return this.users }, onEnter: props => this.openSuggestionList(props, MENTION), onChange: this.updateSuggestionList, @@ -92,7 +92,7 @@ export default { extensions.push( new Hashtag({ items: () => { - return this.hashtags.slice(0, 15) + return this.hashtags }, onEnter: props => this.openSuggestionList(props, HASHTAG), onChange: this.updateSuggestionList, @@ -203,15 +203,14 @@ export default { filterSuggestionList(items, query) { query = this.sanitizeQuery(query) if (!query) { - return items + return items.slice(0, 15) } - items = this.suggestionType === HASHTAG ? this.hashtags : this.users const filteredList = items.filter(item => { const itemString = item.slug || item.id return itemString.toLowerCase().includes(query.toLowerCase()) }) - return filteredList.slice(0, 14) + return filteredList.slice(0, 15) }, sanitizeQuery(query) { if (this.suggestionType === HASHTAG) {