1 files changed, 130 insertions, 0 deletions
diff --git a/spec/frontend/filtered_search/filtered_search_dropdown_manager_spec.js b/spec/frontend/filtered_search/filtered_search_dropdown_manager_spec.js
new file mode 100644
index 00000000000..e9ee69ca163
--- /dev/null
+++ b/spec/frontend/filtered_search/filtered_search_dropdown_manager_spec.js
@@ -0,0 +1,130 @@
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import FilteredSearchDropdownManager from '~/filtered_search/filtered_search_dropdown_manager';
+
+describe('Filtered Search Dropdown Manager', () => {
+  let mock;
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+    mock.onGet().reply(200);
+  });
+
+  describe('addWordToInput', () => {
+    function getInputValue() {
+      return document.querySelector('.filtered-search').value;
+    }
+
+    function setInputValue(value) {
+      document.querySelector('.filtered-search').value = value;
+    }
+
+    beforeEach(() => {
+      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', () => {
+        FilteredSearchDropdownManager.addWordToInput({ tokenName: 'milestone' });
+
+        const token = document.querySelector('.tokens-container .js-visual-token');
+
+        expect(token.classList.contains('filtered-search-token')).toEqual(true);
+        expect(token.querySelector('.name').textContent).toBe('milestone');
+        expect(getInputValue()).toBe('');
+      });
+
+      it('should add tokenName, tokenOperator, and tokenValue', () => {
+        FilteredSearchDropdownManager.addWordToInput({ tokenName: 'label' });
+
+        let token = document.querySelector('.tokens-container .js-visual-token');
+
+        expect(token.classList.contains('filtered-search-token')).toEqual(true);
+        expect(token.querySelector('.name').textContent).toBe('label');
+        expect(getInputValue()).toBe('');
+
+        FilteredSearchDropdownManager.addWordToInput({ tokenName: 'label', tokenOperator: '=' });
+
+        token = document.querySelector('.tokens-container .js-visual-token');
+
+        expect(token.classList.contains('filtered-search-token')).toEqual(true);
+        expect(token.querySelector('.name').textContent).toBe('label');
+        expect(token.querySelector('.operator').textContent).toBe('=');
+        expect(getInputValue()).toBe('');
+
+        FilteredSearchDropdownManager.addWordToInput({
+          tokenName: 'label',
+          tokenOperator: '=',
+          tokenValue: 'none',
+        });
+        // We have to get that reference again
+        // Because 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').textContent).toBe('label');
+        expect(token.querySelector('.operator').textContent).toBe('=');
+        expect(token.querySelector('.value').textContent).toBe('none');
+        expect(getInputValue()).toBe('');
+      });
+    });
+
+    describe('input has existing value', () => {
+      it('should be able to just add tokenName', () => {
+        setInputValue('a');
+        FilteredSearchDropdownManager.addWordToInput({ tokenName: 'author' });
+
+        const token = document.querySelector('.tokens-container .js-visual-token');
+
+        expect(token.classList.contains('filtered-search-token')).toEqual(true);
+        expect(token.querySelector('.name').textContent).toBe('author');
+        expect(getInputValue()).toBe('');
+      });
+
+      it('should replace tokenValue', () => {
+        FilteredSearchDropdownManager.addWordToInput({ tokenName: 'author' });
+        FilteredSearchDropdownManager.addWordToInput({ tokenName: 'author', tokenOperator: '=' });
+
+        setInputValue('roo');
+        FilteredSearchDropdownManager.addWordToInput({
+          tokenName: null,
+          tokenOperator: '=',
+          tokenValue: '@root',
+        });
+
+        const token = document.querySelector('.tokens-container .js-visual-token');
+
+        expect(token.classList.contains('filtered-search-token')).toEqual(true);
+        expect(token.querySelector('.name').textContent).toBe('author');
+        expect(token.querySelector('.operator').textContent).toBe('=');
+        expect(token.querySelector('.value').textContent).toBe('@root');
+        expect(getInputValue()).toBe('');
+      });
+
+      it('should add tokenValues containing spaces', () => {
+        FilteredSearchDropdownManager.addWordToInput({ tokenName: 'label' });
+
+        setInputValue('"test ');
+        FilteredSearchDropdownManager.addWordToInput({
+          tokenName: 'label',
+          tokenOperator: '=',
+          tokenValue: '~\'"test me"\'',
+        });
+
+        const token = document.querySelector('.tokens-container .js-visual-token');
+
+        expect(token.classList.contains('filtered-search-token')).toEqual(true);
+        expect(token.querySelector('.name').textContent).toBe('label');
+        expect(token.querySelector('.operator').textContent).toBe('=');
+        expect(token.querySelector('.value').textContent).toBe('~\'"test me"\'');
+        expect(getInputValue()).toBe('');
+      });
+    });
+  });
+});