diff options
Diffstat (limited to 'spec/javascripts/filtered_search')
5 files changed, 159 insertions, 4 deletions
diff --git a/spec/javascripts/filtered_search/dropdown_utils_spec.js b/spec/javascripts/filtered_search/dropdown_utils_spec.js index f55726379f3..b1b3d43f241 100644 --- a/spec/javascripts/filtered_search/dropdown_utils_spec.js +++ b/spec/javascripts/filtered_search/dropdown_utils_spec.js @@ -1,4 +1,3 @@ -import '~/extensions/array'; import '~/filtered_search/dropdown_utils'; import '~/filtered_search/filtered_search_tokenizer'; import '~/filtered_search/filtered_search_dropdown_manager'; @@ -191,6 +190,102 @@ describe('Dropdown Utils', () => { }); }); + describe('mergeDuplicateLabels', () => { + const dataMap = { + label: { + title: 'label', + color: '#FFFFFF', + }, + }; + + it('should add label to dataMap if it is not a duplicate', () => { + const newLabel = { + title: 'new-label', + color: '#000000', + }; + + const updated = gl.DropdownUtils.mergeDuplicateLabels(dataMap, newLabel); + expect(updated[newLabel.title]).toEqual(newLabel); + }); + + it('should merge colors if label is a duplicate', () => { + const duplicate = { + title: 'label', + color: '#000000', + }; + + const updated = gl.DropdownUtils.mergeDuplicateLabels(dataMap, duplicate); + expect(updated.label.multipleColors).toEqual([dataMap.label.color, duplicate.color]); + }); + }); + + describe('duplicateLabelColor', () => { + it('should linear-gradient 2 colors', () => { + const gradient = gl.DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000']); + expect(gradient).toEqual('linear-gradient(#FFFFFF 0%, #FFFFFF 50%, #000000 50%, #000000 100%)'); + }); + + it('should linear-gradient 3 colors', () => { + const gradient = gl.DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000', '#333333']); + expect(gradient).toEqual('linear-gradient(#FFFFFF 0%, #FFFFFF 33%, #000000 33%, #000000 66%, #333333 66%, #333333 100%)'); + }); + + it('should linear-gradient 4 colors', () => { + const gradient = gl.DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000', '#333333', '#DDDDDD']); + expect(gradient).toEqual('linear-gradient(#FFFFFF 0%, #FFFFFF 25%, #000000 25%, #000000 50%, #333333 50%, #333333 75%, #DDDDDD 75%, #DDDDDD 100%)'); + }); + + it('should not linear-gradient more than 4 colors', () => { + const gradient = gl.DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000', '#333333', '#DDDDDD', '#EEEEEE']); + expect(gradient.indexOf('#EEEEEE') === -1).toEqual(true); + }); + }); + + describe('duplicateLabelPreprocessing', () => { + it('should set preprocessed to true', () => { + const results = gl.DropdownUtils.duplicateLabelPreprocessing([]); + expect(results.preprocessed).toEqual(true); + }); + + it('should not mutate existing data if there are no duplicates', () => { + const data = [{ + title: 'label1', + color: '#FFFFFF', + }, { + title: 'label2', + color: '#000000', + }]; + const results = gl.DropdownUtils.duplicateLabelPreprocessing(data); + + expect(results.length).toEqual(2); + expect(results[0]).toEqual(data[0]); + expect(results[1]).toEqual(data[1]); + }); + + describe('duplicate labels', () => { + const data = [{ + title: 'label', + color: '#FFFFFF', + }, { + title: 'label', + color: '#000000', + }]; + const results = gl.DropdownUtils.duplicateLabelPreprocessing(data); + + it('should merge duplicate labels', () => { + expect(results.length).toEqual(1); + }); + + it('should convert multiple colored labels into linear-gradient', () => { + expect(results[0].color).toEqual(gl.DropdownUtils.duplicateLabelColor(['#FFFFFF', '#000000'])); + }); + + it('should set multiple colored label text color to black', () => { + expect(results[0].text_color).toEqual('#000000'); + }); + }); + }); + describe('setDataValueIfSelected', () => { beforeEach(() => { spyOn(gl.FilteredSearchDropdownManager, 'addWordToInput') diff --git a/spec/javascripts/filtered_search/filtered_search_dropdown_manager_spec.js b/spec/javascripts/filtered_search/filtered_search_dropdown_manager_spec.js index 9e2076dc383..5c7e9115aac 100644 --- a/spec/javascripts/filtered_search/filtered_search_dropdown_manager_spec.js +++ b/spec/javascripts/filtered_search/filtered_search_dropdown_manager_spec.js @@ -1,4 +1,3 @@ -import '~/extensions/array'; import '~/filtered_search/filtered_search_visual_tokens'; import '~/filtered_search/filtered_search_tokenizer'; import '~/filtered_search/filtered_search_dropdown_manager'; diff --git a/spec/javascripts/filtered_search/filtered_search_token_keys_spec.js b/spec/javascripts/filtered_search/filtered_search_token_keys_spec.js index 1a7631994b4..69b424c3af5 100644 --- a/spec/javascripts/filtered_search/filtered_search_token_keys_spec.js +++ b/spec/javascripts/filtered_search/filtered_search_token_keys_spec.js @@ -1,4 +1,3 @@ -import '~/extensions/array'; import '~/filtered_search/filtered_search_token_keys'; describe('Filtered Search Token Keys', () => { diff --git a/spec/javascripts/filtered_search/filtered_search_tokenizer_spec.js b/spec/javascripts/filtered_search/filtered_search_tokenizer_spec.js index e4a15c83c23..585bea9b499 100644 --- a/spec/javascripts/filtered_search/filtered_search_tokenizer_spec.js +++ b/spec/javascripts/filtered_search/filtered_search_tokenizer_spec.js @@ -1,4 +1,3 @@ -import '~/extensions/array'; import '~/filtered_search/filtered_search_token_keys'; import '~/filtered_search/filtered_search_tokenizer'; diff --git a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js index fa4343ffbc8..67166802c70 100644 --- a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js +++ b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js @@ -797,6 +797,69 @@ describe('Filtered Search Visual Tokens', () => { }); }); + describe('setTokenStyle', () => { + let originalTextColor; + + beforeEach(() => { + originalTextColor = bugLabelToken.style.color; + }); + + it('should set backgroundColor', () => { + const originalBackgroundColor = bugLabelToken.style.backgroundColor; + const token = subject.setTokenStyle(bugLabelToken, 'blue', 'white'); + expect(token.style.backgroundColor).toEqual('blue'); + expect(token.style.backgroundColor).not.toEqual(originalBackgroundColor); + }); + + it('should not set backgroundColor when it is a linear-gradient', () => { + const token = subject.setTokenStyle(bugLabelToken, 'linear-gradient(135deg, red, blue)', 'white'); + expect(token.style.backgroundColor).toEqual(bugLabelToken.style.backgroundColor); + }); + + it('should set textColor', () => { + const token = subject.setTokenStyle(bugLabelToken, 'white', 'black'); + expect(token.style.color).toEqual('black'); + expect(token.style.color).not.toEqual(originalTextColor); + }); + + it('should add inverted class when textColor is #FFFFFF', () => { + const token = subject.setTokenStyle(bugLabelToken, 'black', '#FFFFFF'); + expect(token.style.color).toEqual('rgb(255, 255, 255)'); + expect(token.style.color).not.toEqual(originalTextColor); + expect(token.querySelector('.remove-token').classList.contains('inverted')).toEqual(true); + }); + }); + + describe('preprocessLabel', () => { + const endpoint = 'endpoint'; + + it('does not preprocess more than once', () => { + let labels = []; + + spyOn(gl.DropdownUtils, 'duplicateLabelPreprocessing').and.callFake(() => []); + + labels = gl.FilteredSearchVisualTokens.preprocessLabel(endpoint, labels); + gl.FilteredSearchVisualTokens.preprocessLabel(endpoint, labels); + + expect(gl.DropdownUtils.duplicateLabelPreprocessing.calls.count()).toEqual(1); + }); + + describe('not preprocessed before', () => { + it('returns preprocessed labels', () => { + let labels = []; + expect(labels.preprocessed).not.toEqual(true); + labels = gl.FilteredSearchVisualTokens.preprocessLabel(endpoint, labels); + expect(labels.preprocessed).toEqual(true); + }); + + it('overrides AjaxCache with preprocessed results', () => { + spyOn(AjaxCache, 'override').and.callFake(() => {}); + gl.FilteredSearchVisualTokens.preprocessLabel(endpoint, []); + expect(AjaxCache.override.calls.count()).toEqual(1); + }); + }); + }); + describe('updateLabelTokenColor', () => { const jsonFixtureName = 'labels/project_labels.json'; const dummyEndpoint = '/dummy/endpoint'; |