diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-05-10 14:17:46 +0000 |
---|---|---|
committer | kushalpandya <kushal@gitlab.com> | 2017-05-19 14:29:04 +0530 |
commit | 58fa8351fc16fda12b3ab638f05aa8155db12cf2 (patch) | |
tree | e35a6e10e25cd8d5723765678003a029289bbbbd | |
parent | 9f968cbe75ee9a37cf76a97ce9521c999e4be4ab (diff) | |
download | gitlab-ce-58fa8351fc16fda12b3ab638f05aa8155db12cf2.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 ef423691ece..6227722b99b 100644 --- a/app/assets/javascripts/gl_dropdown.js +++ b/app/assets/javascripts/gl_dropdown.js @@ -610,7 +610,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); |