From cf10b650aeca5f335fffd7e79095c4ff8d5761a9 Mon Sep 17 00:00:00 2001
From: Matt Rider <mattwr18@gmail.com>
Date: Mon, 2 Sep 2019 10:42:37 +0200
Subject: [PATCH] Limit suggestions list to 15, add component tests

---
 webapp/components/Editor/Editor.spec.js | 27 +++++++++++++++++++++++--
 webapp/components/Editor/Editor.vue     |  9 ++++++---
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/webapp/components/Editor/Editor.spec.js b/webapp/components/Editor/Editor.spec.js
index 81c6cce9b..024d62c58 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)
+        })
       })
     })
 
@@ -80,6 +83,16 @@ 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({
@@ -98,6 +111,16 @@ 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({
diff --git a/webapp/components/Editor/Editor.vue b/webapp/components/Editor/Editor.vue
index 33fe6b5d4..fe7e9afd7 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
+              return this.users.slice(0, 15)
             },
             onEnter: props => this.openSuggestionList(props, MENTION),
             onChange: this.updateSuggestionList,
@@ -92,7 +92,7 @@ export default {
         extensions.push(
           new Hashtag({
             items: () => {
-              return this.hashtags
+              return this.hashtags.slice(0, 15)
             },
             onEnter: props => this.openSuggestionList(props, HASHTAG),
             onChange: this.updateSuggestionList,
@@ -205,10 +205,13 @@ export default {
       if (!query) {
         return items
       }
-      return items.filter(item => {
+
+      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)
     },
     sanitizeQuery(query) {
       if (this.suggestionType === HASHTAG) {