From cf10b650aeca5f335fffd7e79095c4ff8d5761a9 Mon Sep 17 00:00:00 2001 From: Matt Rider Date: Mon, 2 Sep 2019 10:42:37 +0200 Subject: [PATCH 1/2] 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) { From accb8ae505275e3cdf0976ab985b1c6fae76c8ab Mon Sep 17 00:00:00 2001 From: Matt Rider Date: Mon, 2 Sep 2019 15:43:18 +0200 Subject: [PATCH 2/2] 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 | 66 +++++++++++++++++-------- webapp/components/Editor/Editor.vue | 9 ++-- 2 files changed, 50 insertions(+), 25 deletions(-) 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) {