fix: 🍰 Suggestion List Filter (#4296)

* Fix suggestion list filter

* fix tests after MAPBOX changed their IDs again

* Add spacebar selection functionality for mentions

* Add tests

* Fix linting

Co-authored-by: Moriz Wahl <moriz.wahl@gmx.de>
Co-authored-by: Wolfgang Huß <wolle.huss@pjannto.com>
This commit is contained in:
ashleysylvialee 2021-03-18 22:32:27 -10:00 committed by GitHub
parent b1dec55449
commit ff50273f94
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 74 additions and 11 deletions

View File

@ -114,10 +114,22 @@ describe('Location Service', () => {
const result = await query({ query: queryLocations, variables })
expect(result.data.queryLocations).toEqual([
{ id: 'place.14094307404564380', place_name: 'Berlin, Germany' },
{ id: 'place.15095411613564380', place_name: 'Berlin, Maryland, United States' },
{ id: 'place.5225018734564380', place_name: 'Berlin, Connecticut, United States' },
{ id: 'place.16922023226564380', place_name: 'Berlin, New Jersey, United States' },
{ id: 'place.4035845612564380', place_name: 'Berlin Township, New Jersey, United States' },
{
id: expect.stringMatching(/^place\.[0-9]+$/),
place_name: 'Berlin, Maryland, United States',
},
{
id: expect.stringMatching(/^place\.[0-9]+$/),
place_name: 'Berlin, Connecticut, United States',
},
{
id: expect.stringMatching(/^place\.[0-9]+$/),
place_name: 'Berlin, New Jersey, United States',
},
{
id: expect.stringMatching(/^place\.[0-9]+$/),
place_name: 'Berlin Township, New Jersey, United States',
},
])
})
@ -128,11 +140,23 @@ describe('Location Service', () => {
}
const result = await query({ query: queryLocations, variables })
expect(result.data.queryLocations).toEqual([
{ id: 'place.14094307404564380', place_name: 'Berlin, Deutschland' },
{ id: 'place.15095411613564380', place_name: 'Berlin, Maryland, Vereinigte Staaten' },
{ id: 'place.16922023226564380', place_name: 'Berlin, New Jersey, Vereinigte Staaten' },
{ id: 'place.10735893248465990', place_name: 'Berlin Heights, Ohio, Vereinigte Staaten' },
{ id: 'place.1165756679564380', place_name: 'Berlin, Massachusetts, Vereinigte Staaten' },
{ id: expect.stringMatching(/^place\.[0-9]+$/), place_name: 'Berlin, Deutschland' },
{
id: expect.stringMatching(/^place\.[0-9]+$/),
place_name: 'Berlin, Maryland, Vereinigte Staaten',
},
{
id: expect.stringMatching(/^place\.[0-9]+$/),
place_name: 'Berlin, New Jersey, Vereinigte Staaten',
},
{
id: expect.stringMatching(/^place\.[0-9]+$/),
place_name: 'Berlin Heights, Ohio, Vereinigte Staaten',
},
{
id: expect.stringMatching(/^place\.[0-9]+$/),
place_name: 'Berlin, Massachusetts, Vereinigte Staaten',
},
])
})

View File

@ -99,6 +99,37 @@ describe('Editor.vue', () => {
})
})
it('suggestion list returns results prefixed by query', () => {
const manyUsersList = []
for (let i = 0; i < 10; i++) {
manyUsersList.push({ id: `user${i}` })
manyUsersList.push({ id: `admin${i}` })
manyUsersList.push({ id: `moderator${i}` })
}
propsData.users = manyUsersList
wrapper = Wrapper()
const suggestionList = wrapper.vm.editor.extensions.options.mention.onFilter(
propsData.users,
'moderator',
)
expect(suggestionList).toHaveLength(10)
for (var i = 0; i < suggestionList.length; i++) {
expect(suggestionList[i].id).toMatch(/^moderator.*/)
}
})
it('exact match appears at the top of suggestion list', () => {
const 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.onFilter(propsData.users, 'user7')[0].id,
).toMatch('user7')
})
it('sets the Hashtag items to the hashtags', () => {
propsData.hashtags = [
{

View File

@ -185,6 +185,9 @@ export default {
if (this.suggestionType === HASHTAG && this.query !== '') {
this.selectItem({ id: this.query })
}
if (this.suggestionType === MENTION && item) {
this.selectItem(item)
}
return true
default:
@ -199,9 +202,14 @@ export default {
const filteredList = items.filter((item) => {
const itemString = item.slug || item.id
return itemString.toLowerCase().includes(query.toLowerCase())
return itemString.toLowerCase().startsWith(query.toLowerCase())
})
return filteredList.slice(0, 15)
const sortedList = filteredList.sort((itemA, itemB) => {
const aString = itemA.slug || itemA.id
const bString = itemB.slug || itemB.id
return aString.length - bString.length
})
return sortedList.slice(0, 15)
},
sanitizeQuery(query) {
if (this.suggestionType === HASHTAG) {