summaryrefslogtreecommitdiff
path: root/spec/javascripts/filtered_search/filtered_search_dropdown_manager_spec.js.es6
blob: 7ddc22380a5fadd775e6b306122e970a9aec4d1f (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
require('~/extensions/array');
require('~/filtered_search/filtered_search_visual_tokens');
require('~/filtered_search/filtered_search_tokenizer');
require('~/filtered_search/filtered_search_dropdown_manager');

(() => {
  describe('Filtered Search Dropdown Manager', () => {
    describe('addWordToInput', () => {
      function getInputValue() {
        return document.querySelector('.filtered-search').value;
      }

      function setInputValue(value) {
        document.querySelector('.filtered-search').value = value;
      }

      beforeEach(() => {
        // spyOn(gl.FilteredSearchVisualTokens, 'addVisualToken').and.callFake(() => {});
        const div = document.createElement('div');
        // div.classList.add('spec-container');

        div.innerHTML = `
          <ul class="tokens-container"></ul>
          <input class="filtered-search">
        `;
        document.body.appendChild(div);
      });

      afterEach(() => {
        document.querySelector('.filtered-search').outerHTML = '';
        document.querySelector('.tokens-container').innerHTML = '';
      });

      describe('input has no existing value', () => {
        it('should add just tokenName', () => {
          gl.FilteredSearchDropdownManager.addWordToInput('milestone');

          const tokensContainer = document.querySelector('.tokens-container');
          const token = tokensContainer.children[0];

          expect(tokensContainer.children.length).toBe(1);
          expect(token.classList.contains('js-visual-token')).toEqual(true);
          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');

          const tokensContainer = document.querySelector('.tokens-container');
          let token = tokensContainer.children[0];

          expect(tokensContainer.children.length).toBe(1);
          expect(token.classList.contains('js-visual-token')).toEqual(true);
          expect(token.classList.contains('filtered-search-token')).toEqual(true);
          expect(token.querySelector('.name').innerText).toBe('label');
          expect(getInputValue()).toBe('');

          gl.FilteredSearchDropdownManager.addWordToInput('label', 'none');
          // We have to get that reference again
          // Because gl.FilteredSearchDropdownManager deletes the previous token
          token = tokensContainer.children[0];

          expect(tokensContainer.children.length).toBe(1);
          expect(token.classList.contains('js-visual-token')).toEqual(true);
          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('');
        });
      });

      describe('input has existing value', () => {
        it('should be able to just add tokenName', () => {
          setInputValue('a');
          gl.FilteredSearchDropdownManager.addWordToInput('author');

          const tokensContainer = document.querySelector('.tokens-container');
          const token = tokensContainer.children[0];

          expect(tokensContainer.children.length).toBe(1);
          expect(token.classList.contains('js-visual-token')).toEqual(true);
          expect(token.classList.contains('filtered-search-token')).toEqual(true);
          expect(token.querySelector('.name').innerText).toBe('author');
          expect(getInputValue()).toBe('');
        });

        it('should replace tokenValue', () => {
          gl.FilteredSearchDropdownManager.addWordToInput('author');

          setInputValue('roo');
          gl.FilteredSearchDropdownManager.addWordToInput(null, '@root');

          const tokensContainer = document.querySelector('.tokens-container');
          const token = tokensContainer.children[0];

          expect(tokensContainer.children.length).toBe(1);
          expect(token.classList.contains('js-visual-token')).toEqual(true);
          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', () => {
          gl.FilteredSearchDropdownManager.addWordToInput('label');

          setInputValue('"test ');
          gl.FilteredSearchDropdownManager.addWordToInput('label', '~\'"test me"\'');

          const tokensContainer = document.querySelector('.tokens-container');
          const token = tokensContainer.children[0];

          expect(tokensContainer.children.length).toBe(1);
          expect(token.classList.contains('js-visual-token')).toEqual(true);
          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('');
        });
      });
    });
  });
})();