Add filtered search visual tokensfiltered-search-visual-tokens

1 files changed, 206 insertions, 26 deletions

diff --git a/spec/javascripts/filtered_search/filtered_search_manager_spec.js b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
index 98959dda242..81c1d81d181 100644
--- a/spec/javascripts/filtered_search/filtered_search_manager_spec.js
+++ b/spec/javascripts/filtered_search/filtered_search_manager_spec.js
@@ -4,64 +4,244 @@ require('~/filtered_search/filtered_search_token_keys');
 require('~/filtered_search/filtered_search_tokenizer');
 require('~/filtered_search/filtered_search_dropdown_manager');
 require('~/filtered_search/filtered_search_manager');
+const FilteredSearchSpecHelper = require('../helpers/filtered_search_spec_helper');
 
 (() => {
   describe('Filtered Search Manager', () => {
-    describe('search', () => {
-      let manager;
-      const defaultParams = '?scope=all&utf8=✓&state=opened';
+    let input;
+    let manager;
+    let tokensContainer;
+    const placeholder = 'Search or filter results...';
 
-      function getInput() {
-        return document.querySelector('.filtered-search');
-      }
+    function dispatchBackspaceEvent(element, eventType) {
+      const backspaceKey = 8;
+      const event = new Event(eventType);
+      event.keyCode = backspaceKey;
+      element.dispatchEvent(event);
+    }
 
-      beforeEach(() => {
-        setFixtures(`
-          <input type='text' class='filtered-search' />
-        `);
+    function dispatchDeleteEvent(element, eventType) {
+      const deleteKey = 46;
+      const event = new Event(eventType);
+      event.keyCode = deleteKey;
+      element.dispatchEvent(event);
+    }
 
-        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);
+    beforeEach(() => {
+      setFixtures(`
+        <div class="filtered-search-input-container">
+          <form>
+            <ul class="tokens-container list-unstyled">
+              ${FilteredSearchSpecHelper.createInputHTML(placeholder)}
+            </ul>
+            <button class="clear-search" type="button">
+              <i class="fa fa-times"></i>
+            </button>
+          </form>
+        </div>
+      `);
 
-        manager = new gl.FilteredSearchManager();
-      });
+      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);
+      spyOn(gl.FilteredSearchVisualTokens, 'unselectTokens').and.callThrough();
 
-      afterEach(() => {
-        getInput().outerHTML = '';
-      });
+      input = document.querySelector('.filtered-search');
+      tokensContainer = document.querySelector('.tokens-container');
+      manager = new gl.FilteredSearchManager();
+    });
 
-      it('should search with a single word', () => {
-        getInput().value = 'searchTerm';
+    describe('search', () => {
+      const defaultParams = '?scope=all&utf8=✓&state=opened';
+
+      it('should search with a single word', (done) => {
+        input.value = 'searchTerm';
 
         spyOn(gl.utils, 'visitUrl').and.callFake((url) => {
           expect(url).toEqual(`${defaultParams}&search=searchTerm`);
+          done();
         });
 
         manager.search();
       });
 
-      it('should search with multiple words', () => {
-        getInput().value = 'awesome search terms';
+      it('should search with multiple words', (done) => {
+        input.value = 'awesome search terms';
 
         spyOn(gl.utils, 'visitUrl').and.callFake((url) => {
           expect(url).toEqual(`${defaultParams}&search=awesome+search+terms`);
+          done();
         });
 
         manager.search();
       });
 
-      it('should search with special characters', () => {
-        getInput().value = '~!@#$%^&*()_+{}:<>,.?/';
+      it('should search with special characters', (done) => {
+        input.value = '~!@#$%^&*()_+{}:<>,.?/';
 
         spyOn(gl.utils, 'visitUrl').and.callFake((url) => {
           expect(url).toEqual(`${defaultParams}&search=~!%40%23%24%25%5E%26*()_%2B%7B%7D%3A%3C%3E%2C.%3F%2F`);
+          done();
         });
 
         manager.search();
       });
     });
+
+    describe('handleInputPlaceholder', () => {
+      it('should render placeholder when there is no input', () => {
+        expect(input.placeholder).toEqual(placeholder);
+      });
+
+      it('should not render placeholder when there is input', () => {
+        input.value = 'test words';
+
+        const event = new Event('input');
+        input.dispatchEvent(event);
+
+        expect(input.placeholder).toEqual('');
+      });
+
+      it('should not render placeholder when there are tokens and no input', () => {
+        tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(
+          FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '~bug'),
+        );
+
+        const event = new Event('input');
+        input.dispatchEvent(event);
+
+        expect(input.placeholder).toEqual('');
+      });
+    });
+
+    describe('checkForBackspace', () => {
+      describe('tokens and no input', () => {
+        beforeEach(() => {
+          tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(
+            FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '~bug'),
+          );
+        });
+
+        it('removes last token', () => {
+          spyOn(gl.FilteredSearchVisualTokens, 'removeLastTokenPartial').and.callThrough();
+          dispatchBackspaceEvent(input, 'keyup');
+
+          expect(gl.FilteredSearchVisualTokens.removeLastTokenPartial).toHaveBeenCalled();
+        });
+
+        it('sets the input', () => {
+          spyOn(gl.FilteredSearchVisualTokens, 'getLastTokenPartial').and.callThrough();
+          dispatchDeleteEvent(input, 'keyup');
+
+          expect(gl.FilteredSearchVisualTokens.getLastTokenPartial).toHaveBeenCalled();
+          expect(input.value).toEqual('~bug');
+        });
+      });
+
+      it('does not remove token or change input when there is existing input', () => {
+        spyOn(gl.FilteredSearchVisualTokens, 'removeLastTokenPartial').and.callThrough();
+        spyOn(gl.FilteredSearchVisualTokens, 'getLastTokenPartial').and.callThrough();
+
+        input.value = 'text';
+        dispatchDeleteEvent(input, 'keyup');
+
+        expect(gl.FilteredSearchVisualTokens.removeLastTokenPartial).not.toHaveBeenCalled();
+        expect(gl.FilteredSearchVisualTokens.getLastTokenPartial).not.toHaveBeenCalled();
+        expect(input.value).toEqual('text');
+      });
+    });
+
+    describe('removeSelectedToken', () => {
+      function getVisualTokens() {
+        return tokensContainer.querySelectorAll('.js-visual-token');
+      }
+
+      beforeEach(() => {
+        tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(
+          FilteredSearchSpecHelper.createFilterVisualTokenHTML('milestone', 'none', true),
+        );
+      });
+
+      it('removes selected token when the backspace key is pressed', () => {
+        expect(getVisualTokens().length).toEqual(1);
+
+        dispatchBackspaceEvent(document, 'keydown');
+
+        expect(getVisualTokens().length).toEqual(0);
+      });
+
+      it('removes selected token when the delete key is pressed', () => {
+        expect(getVisualTokens().length).toEqual(1);
+
+        dispatchDeleteEvent(document, 'keydown');
+
+        expect(getVisualTokens().length).toEqual(0);
+      });
+
+      it('updates the input placeholder after removal', () => {
+        manager.handleInputPlaceholder();
+
+        expect(input.placeholder).toEqual('');
+        expect(getVisualTokens().length).toEqual(1);
+
+        dispatchBackspaceEvent(document, 'keydown');
+
+        expect(input.placeholder).not.toEqual('');
+        expect(getVisualTokens().length).toEqual(0);
+      });
+
+      it('updates the clear button after removal', () => {
+        manager.toggleClearSearchButton();
+
+        const clearButton = document.querySelector('.clear-search');
+
+        expect(clearButton.classList.contains('hidden')).toEqual(false);
+        expect(getVisualTokens().length).toEqual(1);
+
+        dispatchBackspaceEvent(document, 'keydown');
+
+        expect(clearButton.classList.contains('hidden')).toEqual(true);
+        expect(getVisualTokens().length).toEqual(0);
+      });
+    });
+
+    describe('unselects token', () => {
+      beforeEach(() => {
+        tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(`
+          ${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);
+        expect(gl.FilteredSearchVisualTokens.unselectTokens).not.toHaveBeenCalled();
+
+        // Click directly on input attached to document
+        // so that the click event will propagate properly
+        document.querySelector('.filtered-search').click();
+
+        expect(gl.FilteredSearchVisualTokens.unselectTokens).toHaveBeenCalled();
+        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);
+        expect(gl.FilteredSearchVisualTokens.unselectTokens).not.toHaveBeenCalled();
+
+        document.body.click();
+
+        expect(selectedToken.classList.contains('selected')).toEqual(false);
+        expect(gl.FilteredSearchVisualTokens.unselectTokens).toHaveBeenCalled();
+      });
+    });
   });
 })();