Add button to delete filters from filtered search bar

4 files changed, 81 insertions, 7 deletions

diff --git a/spec/features/issues/filtered_search/filter_issues_spec.rb b/spec/features/issues/filtered_search/filter_issues_spec.rb
index 81ee0e2e4f6..c824aa6a414 100644
--- a/spec/features/issues/filtered_search/filter_issues_spec.rb
+++ b/spec/features/issues/filtered_search/filter_issues_spec.rb
@@ -12,7 +12,7 @@ describe 'Filter issues', js: true, feature: true do
   let!(:wontfix) { create(:label, project: project, title: "Won't fix") }
 
   let!(:bug_label) { create(:label, project: project, title: 'bug') }
-  let!(:caps_sensitive_label) { create(:label, project: project, title: 'CAPS_sensitive') }
+  let!(:caps_sensitive_label) { create(:label, project: project, title: 'CaPs') }
   let!(:milestone) { create(:milestone, title: "8", project: project, start_date: 2.days.ago) }
   let!(:multiple_words_label) { create(:label, project: project, title: "Two words") }
 
diff --git a/spec/javascripts/filtered_search/filtered_search_manager_spec.js b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
index 6683489f63c..e747aa497c2 100644
--- a/spec/javascripts/filtered_search/filtered_search_manager_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
@@ -26,6 +26,10 @@ describe('Filtered Search Manager', () => {
     element.dispatchEvent(event);
   }
 
+  function getVisualTokens() {
+    return tokensContainer.querySelectorAll('.js-visual-token');
+  }
+
   beforeEach(() => {
     setFixtures(`
       <div class="filtered-search-box">
@@ -170,11 +174,37 @@ describe('Filtered Search Manager', () => {
     });
   });
 
-  describe('removeSelectedToken', () => {
-    function getVisualTokens() {
-      return tokensContainer.querySelectorAll('.js-visual-token');
-    }
+  describe('removeToken', () => {
+    it('removes token even when it is already selected', () => {
+      tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(
+        FilteredSearchSpecHelper.createFilterVisualTokenHTML('milestone', 'none', true),
+      );
+
+      tokensContainer.querySelector('.js-visual-token .remove-token').click();
+      expect(tokensContainer.querySelector('.js-visual-token')).toEqual(null);
+    });
 
+    describe('unselected token', () => {
+      beforeEach(() => {
+        spyOn(gl.FilteredSearchManager.prototype, 'removeSelectedToken').and.callThrough();
+
+        tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(
+          FilteredSearchSpecHelper.createFilterVisualTokenHTML('milestone', 'none'),
+        );
+        tokensContainer.querySelector('.js-visual-token .remove-token').click();
+      });
+
+      it('removes token when remove button is selected', () => {
+        expect(tokensContainer.querySelector('.js-visual-token')).toEqual(null);
+      });
+
+      it('calls removeSelectedToken', () => {
+        expect(manager.removeSelectedToken).toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('removeSelectedTokenKeydown', () => {
     beforeEach(() => {
       tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(
         FilteredSearchSpecHelper.createFilterVisualTokenHTML('milestone', 'none', true),
@@ -224,6 +254,31 @@ describe('Filtered Search Manager', () => {
     });
   });
 
+  describe('removeSelectedToken', () => {
+    beforeEach(() => {
+      spyOn(gl.FilteredSearchVisualTokens, 'removeSelectedToken').and.callThrough();
+      spyOn(gl.FilteredSearchManager.prototype, 'handleInputPlaceholder').and.callThrough();
+      spyOn(gl.FilteredSearchManager.prototype, 'toggleClearSearchButton').and.callThrough();
+      manager.removeSelectedToken();
+    });
+
+    it('calls FilteredSearchVisualTokens.removeSelectedToken', () => {
+      expect(gl.FilteredSearchVisualTokens.removeSelectedToken).toHaveBeenCalled();
+    });
+
+    it('calls handleInputPlaceholder', () => {
+      expect(manager.handleInputPlaceholder).toHaveBeenCalled();
+    });
+
+    it('calls toggleClearSearchButton', () => {
+      expect(manager.toggleClearSearchButton).toHaveBeenCalled();
+    });
+
+    it('calls update dropdown offset', () => {
+      expect(manager.dropdownManager.updateDropdownOffset).toHaveBeenCalled();
+    });
+  });
+
   describe('unselects token', () => {
     beforeEach(() => {
       tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(`
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 bbda1476fed..d75b9061281 100644
--- a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js
@@ -214,8 +214,12 @@ describe('Filtered Search Visual Tokens', () => {
       expect(tokenElement.querySelector('.name')).toEqual(jasmine.anything());
     });
 
+    it('contains value container div', () => {
+      expect(tokenElement.querySelector('.value-container')).toEqual(jasmine.anything());
+    });
+
     it('contains value div', () => {
-      expect(tokenElement.querySelector('.value')).toEqual(jasmine.anything());
+      expect(tokenElement.querySelector('.value-container .value')).toEqual(jasmine.anything());
     });
 
     it('contains selectable class', () => {
@@ -225,6 +229,16 @@ describe('Filtered Search Visual Tokens', () => {
     it('contains button role', () => {
       expect(tokenElement.getAttribute('role')).toEqual('button');
     });
+
+    describe('remove token', () => {
+      it('contains remove-token button', () => {
+        expect(tokenElement.querySelector('.value-container .remove-token')).toEqual(jasmine.anything());
+      });
+
+      it('contains fa-close icon', () => {
+        expect(tokenElement.querySelector('.remove-token .fa-close')).toEqual(jasmine.anything());
+      });
+    });
   });
 
   describe('addVisualTokenElement', () => {
diff --git a/spec/javascripts/helpers/filtered_search_spec_helper.js b/spec/javascripts/helpers/filtered_search_spec_helper.js
index ce83a256ddd..b8d4a93b1ab 100644
--- a/spec/javascripts/helpers/filtered_search_spec_helper.js
+++ b/spec/javascripts/helpers/filtered_search_spec_helper.js
@@ -10,7 +10,12 @@ class FilteredSearchSpecHelper {
     li.innerHTML = `
       <div class="selectable ${isSelected ? 'selected' : ''}" role="button">
         <div class="name">${name}</div>
-        <div class="value">${value}</div>
+        <div class="value-container">
+          <div class="value">${value}</div>
+          <div class="remove-token" role="button">
+            <i class="fa fa-close"></i>
+          </div>
+        </div>
       </div>
     `;