diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2017-05-10 14:17:46 +0000 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2017-05-10 14:17:46 +0000 |
commit | a24e8bfc68da79bcae3d05f353ad6ecd49cded0e (patch) | |
tree | fc29d8efcf44336241879257e2be329e55bf557f | |
parent | 46a6fb38809fe8482fd8fb60fcfd979226e1321e (diff) | |
parent | 6a547779ff441becb8662e8ee84507775b0a2ed6 (diff) | |
download | gitlab-ce-a24e8bfc68da79bcae3d05f353ad6ecd49cded0e.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 | 46 |
3 files changed, 47 insertions, 10 deletions
diff --git a/app/assets/javascripts/gl_dropdown.js b/app/assets/javascripts/gl_dropdown.js index 2eee989bffe..9666eeeb5ad 100644 --- a/app/assets/javascripts/gl_dropdown.js +++ b/app/assets/javascripts/gl_dropdown.js @@ -608,7 +608,12 @@ GitLabDropdown = (function() { var link = document.createElement('a'); link.href = url; - link.innerHTML = 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 c207fb00a47..eb532dff5a1 100644 --- a/spec/javascripts/gl_dropdown_spec.js +++ b/spec/javascripts/gl_dropdown_spec.js @@ -44,21 +44,18 @@ 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, search: { fields: ['name'] }, - text: (project) => { - (project.name_with_namespace || project.name); - }, - id: (project) => { - project.id; - } - }); + text: project => (project.name_with_namespace || project.name), + id: project => project.id, + }, extraOpts); + this.dropdownButtonElement = $('#js-project-dropdown', this.dropdownContainerElement).glDropdown(options); } beforeEach(() => { @@ -80,6 +77,37 @@ require('~/lib/utils/url_utility'); expect(this.dropdownContainerElement).toHaveClass('open'); }); + it('escapes HTML as text', () => { + this.projectsData[0].name_with_namespace = '<script>alert("testing");</script>'; + + initDropDown.call(this, false); + + this.dropdownButtonElement.click(); + + expect( + $('.dropdown-content li:first-child').text(), + ).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); |