Merge pull request #1451 from Human-Connection/1396-limit-suggestions-list

Limit suggestions list to 15, add component tests

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

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