Follow @alina-beck's suggestions

- set items to the full list of hashtags or users to avoid unnecessarily reassigning the items variable based on suggestionType
- refactor tests to trigger onFilter, which calls filterSuggestionList, then check that it returns a maximum of 15 items both for queries and empty queries
- fix description with incorrect type(users, instead of hashtags)
- return 15 items, not 14

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)
+        })
+      })
     })
   })
 })

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) {