1 files changed, 57 insertions, 15 deletions

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 ed0b0196ec4..a1da3396d7b 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,5 @@
 require('~/extensions/array');
+require('~/filtered_search/filtered_search_visual_tokens');
 require('~/filtered_search/filtered_search_tokenizer');
 require('~/filtered_search/filtered_search_dropdown_manager');
 
@@ -14,24 +15,44 @@ require('~/filtered_search/filtered_search_dropdown_manager');
       }
 
       beforeEach(() => {
-        const input = document.createElement('input');
-        input.classList.add('filtered-search');
-        document.body.appendChild(input);
-      });
-
-      afterEach(() => {
-        document.querySelector('.filtered-search').outerHTML = '';
+        setFixtures(`
+          <ul class="tokens-container">
+            <li class="input-token">
+              <input class="filtered-search">
+            </li>
+          </ul>
+        `);
       });
 
       describe('input has no existing value', () => {
         it('should add just tokenName', () => {
           gl.FilteredSearchDropdownManager.addWordToInput('milestone');
-          expect(getInputValue()).toBe('milestone:');
+
+          const token = document.querySelector('.tokens-container .js-visual-token');
+
+          expect(token.classList.contains('filtered-search-token')).toEqual(true);
+          expect(token.querySelector('.name').innerText).toBe('milestone');
+          expect(getInputValue()).toBe('');
         });
 
         it('should add tokenName and tokenValue', () => {
+          gl.FilteredSearchDropdownManager.addWordToInput('label');
+
+          let token = document.querySelector('.tokens-container .js-visual-token');
+
+          expect(token.classList.contains('filtered-search-token')).toEqual(true);
+          expect(token.querySelector('.name').innerText).toBe('label');
+          expect(getInputValue()).toBe('');
+
           gl.FilteredSearchDropdownManager.addWordToInput('label', 'none');
-          expect(getInputValue()).toBe('label:none ');
+          // We have to get that reference again
+          // Because gl.FilteredSearchDropdownManager deletes the previous token
+          token = document.querySelector('.tokens-container .js-visual-token');
+
+          expect(token.classList.contains('filtered-search-token')).toEqual(true);
+          expect(token.querySelector('.name').innerText).toBe('label');
+          expect(token.querySelector('.value').innerText).toBe('none');
+          expect(getInputValue()).toBe('');
         });
       });
 
@@ -39,19 +60,40 @@ require('~/filtered_search/filtered_search_dropdown_manager');
         it('should be able to just add tokenName', () => {
           setInputValue('a');
           gl.FilteredSearchDropdownManager.addWordToInput('author');
-          expect(getInputValue()).toBe('author:');
+
+          const token = document.querySelector('.tokens-container .js-visual-token');
+
+          expect(token.classList.contains('filtered-search-token')).toEqual(true);
+          expect(token.querySelector('.name').innerText).toBe('author');
+          expect(getInputValue()).toBe('');
         });
 
         it('should replace tokenValue', () => {
-          setInputValue('author:roo');
-          gl.FilteredSearchDropdownManager.addWordToInput('author', '@root');
-          expect(getInputValue()).toBe('author:@root ');
+          gl.FilteredSearchDropdownManager.addWordToInput('author');
+
+          setInputValue('roo');
+          gl.FilteredSearchDropdownManager.addWordToInput(null, '@root');
+
+          const token = document.querySelector('.tokens-container .js-visual-token');
+
+          expect(token.classList.contains('filtered-search-token')).toEqual(true);
+          expect(token.querySelector('.name').innerText).toBe('author');
+          expect(token.querySelector('.value').innerText).toBe('@root');
+          expect(getInputValue()).toBe('');
         });
 
         it('should add tokenValues containing spaces', () => {
-          setInputValue('label:~"test');
+          gl.FilteredSearchDropdownManager.addWordToInput('label');
+
+          setInputValue('"test ');
           gl.FilteredSearchDropdownManager.addWordToInput('label', '~\'"test me"\'');
-          expect(getInputValue()).toBe('label:~\'"test me"\' ');
+
+          const token = document.querySelector('.tokens-container .js-visual-token');
+
+          expect(token.classList.contains('filtered-search-token')).toEqual(true);
+          expect(token.querySelector('.name').innerText).toBe('label');
+          expect(token.querySelector('.value').innerText).toBe('~\'"test me"\'');
+          expect(getInputValue()).toBe('');
         });
       });
     });