diff options
Diffstat (limited to 'spec')
3 files changed, 127 insertions, 82 deletions
diff --git a/spec/javascripts/filtered_search/filtered_search_manager_spec.js.es6 b/spec/javascripts/filtered_search/filtered_search_manager_spec.js.es6 index 975fb1da40a..51582251cbe 100644 --- a/spec/javascripts/filtered_search/filtered_search_manager_spec.js.es6 +++ b/spec/javascripts/filtered_search/filtered_search_manager_spec.js.es6 @@ -9,30 +9,40 @@ const FilteredSearchSpecHelper = require('../helpers/filtered_search_spec_helper (() => { describe('Filtered Search Manager', () => { let input; + let manager; + let tokensContainer; + const placeholder = 'Search or filter results...'; + + beforeEach(() => { + setFixtures(` + <form> + <ul class="tokens-container list-unstyled"></ul> + <input type='text' class='filtered-search' placeholder='${placeholder}' /> + <button class="clear-search" type="button"> + <i class="fa fa-times"></i> + </button> + </form> + `); + + spyOn(gl.FilteredSearchManager.prototype, 'cleanup').and.callFake(() => {}); + spyOn(gl.FilteredSearchManager.prototype, 'loadSearchParamsFromURL').and.callFake(() => {}); + spyOn(gl.FilteredSearchManager.prototype, 'tokenChange').and.callFake(() => {}); + spyOn(gl.FilteredSearchDropdownManager.prototype, 'setDropdown').and.callFake(() => {}); + spyOn(gl.FilteredSearchDropdownManager.prototype, 'updateDropdownOffset').and.callFake(() => {}); + spyOn(gl.utils, 'getParameterByName').and.returnValue(null); + + input = document.querySelector('.filtered-search'); + tokensContainer = document.querySelector('.tokens-container'); + manager = new gl.FilteredSearchManager(); + }); + + afterEach(() => { + tokensContainer.innerHTML = ''; + }); describe('search', () => { - let manager; const defaultParams = '?scope=all&utf8=✓&state=opened'; - beforeEach(() => { - setFixtures(` - <input type='text' class='filtered-search' /> - `); - - spyOn(gl.FilteredSearchManager.prototype, 'bindEvents').and.callFake(() => {}); - spyOn(gl.FilteredSearchManager.prototype, 'cleanup').and.callFake(() => {}); - spyOn(gl.FilteredSearchManager.prototype, 'loadSearchParamsFromURL').and.callFake(() => {}); - spyOn(gl.FilteredSearchDropdownManager.prototype, 'setDropdown').and.callFake(() => {}); - spyOn(gl.utils, 'getParameterByName').and.returnValue(null); - - input = document.querySelector('.filtered-search'); - manager = new gl.FilteredSearchManager(); - }); - - afterEach(() => { - input.outerHTML = ''; - }); - it('should search with a single word', () => { input.value = 'searchTerm'; @@ -65,35 +75,6 @@ const FilteredSearchSpecHelper = require('../helpers/filtered_search_spec_helper }); describe('handleInputPlaceholder', () => { - const placeholder = 'Search or filter results...'; - let tokensContainer; - - beforeEach(() => { - setFixtures(` - <form> - <ul class="tokens-container list-unstyled"></ul> - <input type='text' class='filtered-search' placeholder='${placeholder}' /> - <button class="clear-search" type="button"> - <i class="fa fa-times"></i> - </button> - </form> - `); - - spyOn(gl.FilteredSearchManager.prototype, 'cleanup').and.callFake(() => {}); - spyOn(gl.FilteredSearchManager.prototype, 'loadSearchParamsFromURL').and.callFake(() => {}); - spyOn(gl.FilteredSearchDropdownManager.prototype, 'setDropdown').and.callFake(() => {}); - spyOn(gl.utils, 'getParameterByName').and.returnValue(null); - - input = document.querySelector('.filtered-search'); - tokensContainer = document.querySelector('.tokens-container'); - return new gl.FilteredSearchManager(); - }); - - afterEach(() => { - input.outerHTML = ''; - tokensContainer.innerHTML = ''; - }); - it('should render placeholder when there is no input', () => { expect(input.placeholder).toEqual(placeholder); }); @@ -118,39 +99,9 @@ const FilteredSearchSpecHelper = require('../helpers/filtered_search_spec_helper }); describe('checkForBackspace', () => { - let tokensContainer; const backspaceKey = 8; const deleteKey = 46; - beforeEach(() => { - setFixtures(` - <form> - <ul class="tokens-container list-unstyled"></ul> - <input type='text' class='filtered-search' /> - <button class="clear-search" type="button"> - <i class="fa fa-times"></i> - </button> - </form> - `); - - spyOn(gl.FilteredSearchManager.prototype, 'cleanup').and.callFake(() => {}); - spyOn(gl.FilteredSearchManager.prototype, 'loadSearchParamsFromURL').and.callFake(() => {}); - spyOn(gl.FilteredSearchManager.prototype, 'tokenChange').and.callFake(() => {}); - spyOn(gl.FilteredSearchDropdownManager.prototype, 'setDropdown').and.callFake(() => {}); - spyOn(gl.FilteredSearchDropdownManager.prototype, 'updateDropdownOffset').and.callFake(() => {}); - - spyOn(gl.utils, 'getParameterByName').and.returnValue(null); - - input = document.querySelector('.filtered-search'); - tokensContainer = document.querySelector('.tokens-container'); - return new gl.FilteredSearchManager(); - }); - - afterEach(() => { - input.outerHTML = ''; - tokensContainer.innerHTML = ''; - }); - describe('tokens and no input', () => { beforeEach(() => { tokensContainer.innerHTML = FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '~bug'); @@ -193,5 +144,35 @@ const FilteredSearchSpecHelper = require('../helpers/filtered_search_spec_helper expect(input.value).toEqual('text'); }); }); + + describe('unselects token', () => { + beforeEach(() => { + tokensContainer.innerHTML = ` + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '~bug', true)} + ${FilteredSearchSpecHelper.createSearchVisualTokenHTML('search term')} + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '~awesome')} + `; + }); + + it('unselects token when input is clicked', () => { + const selectedToken = tokensContainer.querySelector('.js-visual-token .selected'); + + expect(selectedToken.classList.contains('selected')).toEqual(true); + + input.click(); + + expect(selectedToken.classList.contains('selected')).toEqual(false); + }); + + it('unselects token when document.body is clicked', () => { + const selectedToken = tokensContainer.querySelector('.js-visual-token .selected'); + + expect(selectedToken.classList.contains('selected')).toEqual(true); + + document.body.click(); + + expect(selectedToken.classList.contains('selected')).toEqual(false); + }); + }); }); })(); diff --git a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js.es6 b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js.es6 index 8c5150a6134..ff21d096f9d 100644 --- a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js.es6 +++ b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js.es6 @@ -76,6 +76,68 @@ const FilteredSearchSpecHelper = require('../helpers/filtered_search_spec_helper }); }); + describe('unselectTokens', () => { + it('does nothing when there are no tokens', () => { + const beforeHTML = tokensContainer.innerHTML; + gl.FilteredSearchVisualTokens.unselectTokens(); + + expect(tokensContainer.innerHTML).toEqual(beforeHTML); + }); + + it('removes the selected class from buttons', () => { + tokensContainer.innerHTML = ` + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('author', '@author')} + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('milestone', '%123', true)} + `; + + const selected = tokensContainer.querySelector('.js-visual-token .selected'); + expect(selected.classList.contains('selected')).toEqual(true); + + gl.FilteredSearchVisualTokens.unselectTokens(); + + expect(selected.classList.contains('selected')).toEqual(false); + }); + }); + + describe('selectToken', () => { + beforeEach(() => { + tokensContainer.innerHTML = ` + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '~bug')} + ${FilteredSearchSpecHelper.createSearchVisualTokenHTML('search term')} + ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '~awesome')} + `; + }); + + it('removes the selected class if it has selected class', () => { + const firstTokenButton = tokensContainer.querySelector('.js-visual-token .selectable'); + firstTokenButton.classList.add('selected'); + + gl.FilteredSearchVisualTokens.selectToken(firstTokenButton); + + expect(firstTokenButton.classList.contains('selected')).toEqual(false); + }); + + describe('has no selected class', () => { + it('adds selected class', () => { + const firstTokenButton = tokensContainer.querySelector('.js-visual-token .selectable'); + + gl.FilteredSearchVisualTokens.selectToken(firstTokenButton); + + expect(firstTokenButton.classList.contains('selected')).toEqual(true); + }); + + it('removes selected class from other tokens', () => { + const tokenButtons = tokensContainer.querySelectorAll('.js-visual-token .selectable'); + tokenButtons[1].classList.add('selected'); + + gl.FilteredSearchVisualTokens.selectToken(tokenButtons[0]); + + expect(tokenButtons[0].classList.contains('selected')).toEqual(true); + expect(tokenButtons[1].classList.contains('selected')).toEqual(false); + }); + }); + }); + describe('addVisualTokenElement', () => { it('renders search visual tokens', () => { gl.FilteredSearchVisualTokens.addVisualTokenElement('search term', null, true); diff --git a/spec/javascripts/helpers/filtered_search_spec_helper.js.es6 b/spec/javascripts/helpers/filtered_search_spec_helper.js.es6 index 567efdd838c..31f4d93f8b8 100644 --- a/spec/javascripts/helpers/filtered_search_spec_helper.js.es6 +++ b/spec/javascripts/helpers/filtered_search_spec_helper.js.es6 @@ -1,9 +1,11 @@ class FilteredSearchSpecHelper { - static createFilterVisualTokenHTML(name, value) { + static createFilterVisualTokenHTML(name, value, isSelected = false) { return ` <li class="js-visual-token filtered-search-token"> - <div class="name">${name}</div> - <div class="value">${value}</div> + <div class="selectable ${isSelected ? 'selected' : ''}" role="button"> + <div class="name">${name}</div> + <div class="value">${value}</div> + </div> </li> `; } |