Commit 7b973da3 authored by Himanshu Kapoor's avatar Himanshu Kapoor

Migrate filtered_search specs to Jest

Migrate all remaining specs in spec/javascripts/filtered_search to Jest
parent 38a08da5
......@@ -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;
......
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('');
});
});
......
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);
});
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment