diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-05-10 14:17:46 +0000 |
---|---|---|
committer | Felipe Artur <felipefac@gmail.com> | 2017-05-10 18:00:51 -0300 |
commit | fe25aef8d5c154cbf4cc42dd820604be543513b7 (patch) | |
tree | 9f8008db36ea25f6ab8826cdc2d33d420d3946b6 | |
parent | 2e4e522aaf18a360df0442f200f482f90113b1e9 (diff) | |
download | gitlab-ce-fe25aef8d5c154cbf4cc42dd820604be543513b7.tar.gz |
Merge branch 'fix-search-not-highlighting' into 'master'
Fixed search terms not highlight
Closes #31997
See merge request !11198
-rw-r--r-- | app/assets/javascripts/gl_dropdown.js | 7 | ||||
-rw-r--r-- | changelogs/unreleased/fix-search-not-highlighting.yml | 4 | ||||
-rw-r--r-- | spec/javascripts/gl_dropdown_spec.js | 28 |
3 files changed, 34 insertions, 5 deletions
diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js index 5511a7b676d..2306d7b38aa 100644 --- a/app/assets/javascripts/gl_dropdown.js +++ b/app/assets/javascripts/gl_dropdown.js @@ -584,7 +584,12 @@ GitLabDropdown = (function() { var link = document.createElement('a'); link.href = url; - link.textContent = text; + + if (this.highlight) { + link.innerHTML = text; + } else { + link.textContent = text; + } if (selected) { link.className = 'is-active'; diff --git a/changelogs/unreleased/fix-search-not-highlighting.yml b/changelogs/unreleased/fix-search-not-highlighting.yml new file mode 100644 index 00000000000..a624530ebd1 --- /dev/null +++ b/changelogs/unreleased/fix-search-not-highlighting.yml @@ -0,0 +1,4 @@ +--- +title: Fixed search terms not correctly highlighting +merge_request: +author: diff --git a/spec/javascripts/gl_dropdown_spec.js b/spec/javascripts/gl_dropdown_spec.js index 42c6e328fac..eb532dff5a1 100644 --- a/spec/javascripts/gl_dropdown_spec.js +++ b/spec/javascripts/gl_dropdown_spec.js @@ -44,8 +44,8 @@ require('~/lib/utils/url_utility'); preloadFixtures('static/gl_dropdown.html.raw'); loadJSONFixtures('projects.json'); - function initDropDown(hasRemote, isFilterable) { - this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown({ + function initDropDown(hasRemote, isFilterable, extraOpts = {}) { + const options = Object.assign({ selectable: true, filterable: isFilterable, data: hasRemote ? remoteMock.bind({}, this.projectsData) : this.projectsData, @@ -53,8 +53,9 @@ require('~/lib/utils/url_utility'); fields: ['name'] }, text: project => (project.name_with_namespace || project.name), - id: project => project.id - }); + id: project => project.id, + }, extraOpts); + this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown(options); } beforeEach(() => { @@ -88,6 +89,25 @@ require('~/lib/utils/url_utility'); ).toBe('<script>alert("testing");</script>'); }); + it('should output HTML when highlighting', () => { + this.projectsData[0].name_with_namespace = 'testing'; + $('.dropdown-input .dropdown-input-field').val('test'); + + initDropDown.call(this, false, true, { + highlight: true, + }); + + this.dropdownButtonElement.click(); + + expect( + $('.dropdown-content li:first-child').text(), + ).toBe('testing'); + + expect( + $('.dropdown-content li:first-child a').html(), + ).toBe('<b>t</b><b>e</b><b>s</b><b>t</b>ing'); + }); + describe('that is open', () => { beforeEach(() => { initDropDown.call(this, false, false); |