From abfb59109d5b7ff874af9003980779d1a61a0064 Mon Sep 17 00:00:00 2001 From: winh Date: Tue, 27 Jun 2017 10:47:58 +0200 Subject: Add failing test for #34141 --- .../filtered_search/dropdown_user_spec.js | 34 ++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/spec/javascripts/filtered_search/dropdown_user_spec.js b/spec/javascripts/filtered_search/dropdown_user_spec.js index f7708301b6e..0132f4b7c93 100644 --- a/spec/javascripts/filtered_search/dropdown_user_spec.js +++ b/spec/javascripts/filtered_search/dropdown_user_spec.js @@ -66,4 +66,38 @@ describe('Dropdown User', () => { window.gon = {}; }); }); + + describe('hideCurrentUser', () => { + const fixtureTemplate = 'issues/issue_list.html.raw'; + preloadFixtures(fixtureTemplate); + + let dropdown; + let authorFilterDropdownElement; + + beforeEach(() => { + loadFixtures(fixtureTemplate); + authorFilterDropdownElement = document.querySelector('#js-dropdown-author'); + const dummyInput = document.createElement('div'); + dropdown = new gl.DropdownUser(null, authorFilterDropdownElement, dummyInput); + }); + + const findCurrentUserElement = () => authorFilterDropdownElement.querySelector('.js-current-user'); + + it('hides the current user from dropdown', () => { + const currentUserElement = findCurrentUserElement(); + expect(currentUserElement).not.toBe(null); + + dropdown.hideCurrentUser(); + + expect(currentUserElement.classList).toContain('hidden'); + }); + + it('does nothing if no user is logged in', () => { + const currentUserElement = findCurrentUserElement(); + currentUserElement.parentNode.removeChild(currentUserElement); + expect(findCurrentUserElement()).toBe(null); + + dropdown.hideCurrentUser(); + }); + }); }); -- cgit v1.2.1 From a61eda78a7f7f7e52c4e2b9e3221cc1da37ccf9f Mon Sep 17 00:00:00 2001 From: winh Date: Tue, 27 Jun 2017 11:11:01 +0200 Subject: Add condition if there is a current user to DropdownUser --- app/assets/javascripts/filtered_search/dropdown_user.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js b/app/assets/javascripts/filtered_search/dropdown_user.js index 65c1b2050ac..1af791dba22 100644 --- a/app/assets/javascripts/filtered_search/dropdown_user.js +++ b/app/assets/javascripts/filtered_search/dropdown_user.js @@ -32,8 +32,11 @@ class DropdownUser extends gl.FilteredSearchDropdown { } hideCurrentUser() { - const currenUserItem = this.dropdown.querySelector('.js-current-user'); - currenUserItem.classList.add('hidden'); + const currentUserItem = this.dropdown.querySelector('.js-current-user'); + + if (currentUserItem) { + currentUserItem.classList.add('hidden'); + } } itemClicked(e) { -- cgit v1.2.1 From 6ab12777bc9aa79f37859318bce07d6b5a67acd6 Mon Sep 17 00:00:00 2001 From: winh Date: Tue, 27 Jun 2017 20:37:30 +0200 Subject: Introduce addClassIfElementExists utility --- .../javascripts/filtered_search/dropdown_user.js | 7 ++--- .../filtered_search/filtered_search_manager.js | 7 ++--- app/assets/javascripts/lib/utils/dom_utils.js | 7 +++++ spec/javascripts/lib/utils/dom_utils_spec.js | 35 ++++++++++++++++++++++ 4 files changed, 46 insertions(+), 10 deletions(-) create mode 100644 app/assets/javascripts/lib/utils/dom_utils.js create mode 100644 spec/javascripts/lib/utils/dom_utils_spec.js diff --git a/app/assets/javascripts/filtered_search/dropdown_user.js b/app/assets/javascripts/filtered_search/dropdown_user.js index 1af791dba22..19fed771197 100644 --- a/app/assets/javascripts/filtered_search/dropdown_user.js +++ b/app/assets/javascripts/filtered_search/dropdown_user.js @@ -2,6 +2,7 @@ import AjaxFilter from '~/droplab/plugins/ajax_filter'; import './filtered_search_dropdown'; +import { addClassIfElementExists } from '../lib/utils/dom_utils'; class DropdownUser extends gl.FilteredSearchDropdown { constructor(droplab, dropdown, input, tokenKeys, filter) { @@ -32,11 +33,7 @@ class DropdownUser extends gl.FilteredSearchDropdown { } hideCurrentUser() { - const currentUserItem = this.dropdown.querySelector('.js-current-user'); - - if (currentUserItem) { - currentUserItem.classList.add('hidden'); - } + addClassIfElementExists(this.dropdown.querySelector('.js-current-user'), 'hidden'); } itemClicked(e) { diff --git a/app/assets/javascripts/filtered_search/filtered_search_manager.js b/app/assets/javascripts/filtered_search/filtered_search_manager.js index 1425769d2de..7872e9e68ad 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_manager.js +++ b/app/assets/javascripts/filtered_search/filtered_search_manager.js @@ -3,6 +3,7 @@ import RecentSearchesRoot from './recent_searches_root'; import RecentSearchesStore from './stores/recent_searches_store'; import RecentSearchesService from './services/recent_searches_service'; import eventHub from './event_hub'; +import { addClassIfElementExists } from '../lib/utils/dom_utils'; class FilteredSearchManager { constructor(page) { @@ -227,11 +228,7 @@ class FilteredSearchManager { } addInputContainerFocus() { - const inputContainer = this.filteredSearchInput.closest('.filtered-search-box'); - - if (inputContainer) { - inputContainer.classList.add('focus'); - } + addClassIfElementExists(this.filteredSearchInput.closest('.filtered-search-box'), 'focus'); } removeInputContainerFocus(e) { diff --git a/app/assets/javascripts/lib/utils/dom_utils.js b/app/assets/javascripts/lib/utils/dom_utils.js new file mode 100644 index 00000000000..de65ea15a60 --- /dev/null +++ b/app/assets/javascripts/lib/utils/dom_utils.js @@ -0,0 +1,7 @@ +/* eslint-disable import/prefer-default-export */ + +export const addClassIfElementExists = (element, className) => { + if (element) { + element.classList.add(className); + } +}; diff --git a/spec/javascripts/lib/utils/dom_utils_spec.js b/spec/javascripts/lib/utils/dom_utils_spec.js new file mode 100644 index 00000000000..867bf5912d1 --- /dev/null +++ b/spec/javascripts/lib/utils/dom_utils_spec.js @@ -0,0 +1,35 @@ +import { addClassIfElementExists } from '~/lib/utils/dom_utils'; + +describe('DOM Utils', () => { + describe('addClassIfElementExists', () => { + const className = 'biology'; + const fixture = ` +
+
+
+ `; + + let parentElement; + + beforeEach(() => { + setFixtures(fixture); + parentElement = document.querySelector('.parent'); + }); + + it('adds class if element exists', () => { + const childElement = parentElement.querySelector('.child'); + expect(childElement).not.toBe(null); + + addClassIfElementExists(childElement, className); + + expect(childElement.classList).toContain(className); + }); + + it('does not throw if element does not exist', () => { + const childElement = parentElement.querySelector('.other-child'); + expect(childElement).toBe(null); + + addClassIfElementExists(childElement, className); + }); + }); +}); -- cgit v1.2.1