Migrate filtered_search specs to Jest

Migrate all remaining specs in spec/javascripts/filtered_search to Jest

app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js

@@ -95,7 +95,7 @@ export default class FilteredSearchVisualTokens {
     const tokenType = tokenName.toLowerCase();
     const tokenValueContainer = parentElement.querySelector('.value-container');
     const tokenValueElement = tokenValueContainer.querySelector('.value');
-    tokenValueElement.innerText = tokenValue;
+    tokenValueElement.textContent = tokenValue;
 
     const visualTokenValue = new VisualTokenValue(tokenValue, tokenType, tokenOperator);
 
@@ -140,9 +140,9 @@ export default class FilteredSearchVisualTokens {
       li.innerHTML = nameHTML + operatorHTML;
     }
 
-    li.querySelector('.name').innerText = name;
+    li.querySelector('.name').textContent = name;
     if (hasOperator) {
-      li.querySelector('.operator').innerText = operator;
+      li.querySelector('.operator').textContent = operator;
     }
 
     const tokensContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
@@ -162,8 +162,8 @@ export default class FilteredSearchVisualTokens {
       lastVisualToken.innerHTML = FilteredSearchVisualTokens.createVisualTokenElementHTML({
         hasOperator: Boolean(operator),
       });
-      lastVisualToken.querySelector('.name').innerText = name;
-      lastVisualToken.querySelector('.operator').innerText = operator;
+      lastVisualToken.querySelector('.name').textContent = name;
+      lastVisualToken.querySelector('.operator').textContent = operator;
       FilteredSearchVisualTokens.renderVisualTokenValue(lastVisualToken, name, value, operator);
     }
   }
@@ -208,8 +208,8 @@ export default class FilteredSearchVisualTokens {
         },
       });
     } else {
-      const previousTokenName = lastVisualToken.querySelector('.name').innerText;
-      const previousTokenOperator = lastVisualToken.querySelector('.operator').innerText;
+      const previousTokenName = lastVisualToken.querySelector('.name').textContent;
+      const previousTokenOperator = lastVisualToken.querySelector('.operator').textContent;
       const tokensContainer = FilteredSearchContainer.container.querySelector('.tokens-container');
       tokensContainer.removeChild(lastVisualToken);
 
@@ -234,7 +234,7 @@ export default class FilteredSearchVisualTokens {
     const { lastVisualToken } = FilteredSearchVisualTokens.getLastVisualTokenBeforeInput();
 
     if (lastVisualToken && lastVisualToken.classList.contains('filtered-search-term')) {
-      lastVisualToken.querySelector('.name').innerText += ` ${searchTerm}`;
+      lastVisualToken.querySelector('.name').textContent += ` ${searchTerm}`;
     } else {
       FilteredSearchVisualTokens.addVisualTokenElement({
         name: searchTerm,
@@ -261,12 +261,12 @@ export default class FilteredSearchVisualTokens {
     const value = lastVisualToken.querySelector('.value');
     const name = lastVisualToken.querySelector('.name');
 
-    const valueText = value ? value.innerText : '';
-    const nameText = name ? name.innerText : '';
+    const valueText = value ? value.textContent : '';
+    const nameText = name ? name.textContent : '';
 
     if (includeOperator) {
       const operator = lastVisualToken.querySelector('.operator');
-      const operatorText = operator ? operator.innerText : '';
+      const operatorText = operator ? operator.textContent : '';
       return valueText || operatorText || nameText;
     }
 
@@ -278,7 +278,7 @@ export default class FilteredSearchVisualTokens {
 
     const operator = lastVisualToken && lastVisualToken.querySelector('.operator');
 
-    return operator?.innerText;
+    return operator?.textContent;
   }
 
   static removeLastTokenPartial() {
@@ -346,8 +346,8 @@ export default class FilteredSearchVisualTokens {
 
     if (token.classList.contains('filtered-search-token')) {
       FilteredSearchVisualTokens.addFilterVisualToken(
-        nameElement.innerText,
-        operatorElement.innerText,
+        nameElement.textContent,
+        operatorElement.textContent,
         null,
         {
           uppercaseTokenName: nameElement.classList.contains('text-uppercase'),
@@ -359,13 +359,13 @@ export default class FilteredSearchVisualTokens {
 
       if (!value) {
         const valueElement = valueContainerElement.querySelector('.value');
-        value = valueElement.innerText;
+        value = valueElement.textContent;
       }
     }
 
     // token is a search term
     if (!value) {
-      value = nameElement.innerText;
+      value = nameElement.textContent;
     }
 
     input.value = value;

spec/javascripts/filtered_search/filtered_search_dropdown_manager_spec.js → spec/frontend/filtered_search/filtered_search_dropdown_manager_spec.js

-import $ from 'jquery';
+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(() => {
-    spyOn($, 'ajax');
+    mock = new MockAdapter(axios);
+    mock.onGet().reply(200);
   });
 
   describe('addWordToInput', () => {
@@ -32,7 +36,7 @@ describe('Filtered Search Dropdown Manager', () => {
         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(token.querySelector('.name').textContent).toBe('milestone');
         expect(getInputValue()).toBe('');
       });
 
@@ -42,7 +46,7 @@ describe('Filtered Search Dropdown Manager', () => {
         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(token.querySelector('.name').textContent).toBe('label');
         expect(getInputValue()).toBe('');
 
         FilteredSearchDropdownManager.addWordToInput({ tokenName: 'label', tokenOperator: '=' });
@@ -50,8 +54,8 @@ describe('Filtered Search Dropdown Manager', () => {
         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('.operator').innerText).toBe('=');
+        expect(token.querySelector('.name').textContent).toBe('label');
+        expect(token.querySelector('.operator').textContent).toBe('=');
         expect(getInputValue()).toBe('');
 
         FilteredSearchDropdownManager.addWordToInput({
@@ -64,9 +68,9 @@ describe('Filtered Search Dropdown Manager', () => {
         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('.operator').innerText).toBe('=');
-        expect(token.querySelector('.value').innerText).toBe('none');
+        expect(token.querySelector('.name').textContent).toBe('label');
+        expect(token.querySelector('.operator').textContent).toBe('=');
+        expect(token.querySelector('.value').textContent).toBe('none');
         expect(getInputValue()).toBe('');
       });
     });
@@ -79,7 +83,7 @@ describe('Filtered Search Dropdown Manager', () => {
         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('.name').textContent).toBe('author');
         expect(getInputValue()).toBe('');
       });
 
@@ -97,9 +101,9 @@ describe('Filtered Search Dropdown Manager', () => {
         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('.operator').innerText).toBe('=');
-        expect(token.querySelector('.value').innerText).toBe('@root');
+        expect(token.querySelector('.name').textContent).toBe('author');
+        expect(token.querySelector('.operator').textContent).toBe('=');
+        expect(token.querySelector('.value').textContent).toBe('@root');
         expect(getInputValue()).toBe('');
       });
 
@@ -116,9 +120,9 @@ describe('Filtered Search Dropdown Manager', () => {
         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('.operator').innerText).toBe('=');
-        expect(token.querySelector('.value').innerText).toBe('~\'"test me"\'');
+        expect(token.querySelector('.name').textContent).toBe('label');
+        expect(token.querySelector('.operator').textContent).toBe('=');
+        expect(token.querySelector('.value').textContent).toBe('~\'"test me"\'');
         expect(getInputValue()).toBe('');
       });
     });

spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js → spec/frontend/filtered_search/filtered_search_visual_tokens_spec.js

+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
 import FilteredSearchVisualTokens from '~/filtered_search/filtered_search_visual_tokens';
 import FilteredSearchSpecHelper from '../helpers/filtered_search_spec_helper';
 
 describe('Filtered Search Visual Tokens', () => {
+  let mock;
   const subject = FilteredSearchVisualTokens;
 
   const findElements = tokenElement => {
@@ -17,6 +20,9 @@ describe('Filtered Search Visual Tokens', () => {
   let bugLabelToken;
 
   beforeEach(() => {
+    mock = new MockAdapter(axios);
+    mock.onGet().reply(200);
+
     setFixtures(`
       <ul class="tokens-container">
         ${FilteredSearchSpecHelper.createInputHTML()}
@@ -248,15 +254,15 @@ describe('Filtered Search Visual Tokens', () => {
     });
 
     it('contains name div', () => {
-      expect(tokenElement.querySelector('.name')).toEqual(jasmine.anything());
+      expect(tokenElement.querySelector('.name')).toEqual(expect.anything());
     });
 
     it('contains value container div', () => {
-      expect(tokenElement.querySelector('.value-container')).toEqual(jasmine.anything());
+      expect(tokenElement.querySelector('.value-container')).toEqual(expect.anything());
     });
 
     it('contains value div', () => {
-      expect(tokenElement.querySelector('.value-container .value')).toEqual(jasmine.anything());
+      expect(tokenElement.querySelector('.value-container .value')).toEqual(expect.anything());
     });
 
     it('contains selectable class', () => {
@@ -270,12 +276,12 @@ describe('Filtered Search Visual Tokens', () => {
     describe('remove token', () => {
       it('contains remove-token button', () => {
         expect(tokenElement.querySelector('.value-container .remove-token')).toEqual(
-          jasmine.anything(),
+          expect.anything(),
         );
       });
 
       it('contains fa-close icon', () => {
-        expect(tokenElement.querySelector('.remove-token .fa-close')).toEqual(jasmine.anything());
+        expect(tokenElement.querySelector('.remove-token .fa-close')).toEqual(expect.anything());
       });
     });
   });
@@ -453,7 +459,7 @@ describe('Filtered Search Visual Tokens', () => {
       valueContainer.dataset.originalValue = originalValue;
       const avatar = document.createElement('img');
       const valueElement = valueContainer.querySelector('.value');
-      valueElement.insertAdjacentElement('afterbegin', avatar);
+      valueElement.appendChild(avatar);
       tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(
         authorToken.outerHTML,
       );
@@ -573,7 +579,7 @@ describe('Filtered Search Visual Tokens', () => {
 
     it("tokenize's existing input", () => {
       input.value = 'some text';
-      spyOn(subject, 'tokenizeInput').and.callThrough();
+      jest.spyOn(subject, 'tokenizeInput');
 
       subject.editToken(token);
 
@@ -635,8 +641,8 @@ describe('Filtered Search Visual Tokens', () => {
         FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '=', 'none'),
       );
 
-      spyOn(subject, 'tokenizeInput').and.callFake(() => {});
-      spyOn(subject, 'getLastVisualTokenBeforeInput').and.callThrough();
+      jest.spyOn(subject, 'tokenizeInput').mockImplementation(() => {});
+      jest.spyOn(subject, 'getLastVisualTokenBeforeInput');
 
       subject.moveInputToTheRight();
 
@@ -711,12 +717,16 @@ describe('Filtered Search Visual Tokens', () => {
 
     it('renders a author token value element', () => {
       const { tokenNameElement, tokenValueElement } = findElements(authorToken);
-      const tokenName = tokenNameElement.innerText;
+      const tokenName = tokenNameElement.textContent;
       const tokenValue = 'new value';
 
       subject.renderVisualTokenValue(authorToken, tokenName, tokenValue);
 
-      expect(tokenValueElement.innerText).toBe(tokenValue);
+      jest.runOnlyPendingTimers();
+
+      setImmediate(() => {
+        expect(tokenValueElement.textContent).toBe(tokenValue);
+      });
     });
   });
 });