1 files changed, 62 insertions, 0 deletions
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);