diff options
Diffstat (limited to 'spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js')
| -rw-r--r-- | spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js | 190 |
1 files changed, 107 insertions, 83 deletions
diff --git a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js index b1fb474e755..0c1d5f5b0b4 100644 --- a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js +++ b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js @@ -9,7 +9,7 @@ import FilteredSearchSpecHelper from '../helpers/filtered_search_spec_helper'; describe('Filtered Search Visual Tokens', () => { const subject = FilteredSearchVisualTokens; - const findElements = (tokenElement) => { + const findElements = tokenElement => { const tokenNameElement = tokenElement.querySelector('.name'); const tokenValueContainer = tokenElement.querySelector('.value-container'); const tokenValueElement = tokenValueContainer.querySelector('.value'); @@ -34,8 +34,7 @@ describe('Filtered Search Visual Tokens', () => { describe('getLastVisualTokenBeforeInput', () => { it('returns when there are no visual tokens', () => { - const { lastVisualToken, isLastVisualTokenValid } - = subject.getLastVisualTokenBeforeInput(); + const { lastVisualToken, isLastVisualTokenValid } = subject.getLastVisualTokenBeforeInput(); expect(lastVisualToken).toEqual(null); expect(isLastVisualTokenValid).toEqual(true); @@ -47,8 +46,7 @@ describe('Filtered Search Visual Tokens', () => { bugLabelToken.outerHTML, ); - const { lastVisualToken, isLastVisualTokenValid } - = subject.getLastVisualTokenBeforeInput(); + const { lastVisualToken, isLastVisualTokenValid } = subject.getLastVisualTokenBeforeInput(); expect(lastVisualToken).toEqual(document.querySelector('.filtered-search-token')); expect(isLastVisualTokenValid).toEqual(true); @@ -59,8 +57,7 @@ describe('Filtered Search Visual Tokens', () => { FilteredSearchSpecHelper.createNameFilterVisualTokenHTML('Author'), ); - const { lastVisualToken, isLastVisualTokenValid } - = subject.getLastVisualTokenBeforeInput(); + const { lastVisualToken, isLastVisualTokenValid } = subject.getLastVisualTokenBeforeInput(); expect(lastVisualToken).toEqual(document.querySelector('.filtered-search-token')); expect(isLastVisualTokenValid).toEqual(false); @@ -73,8 +70,7 @@ describe('Filtered Search Visual Tokens', () => { ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('author', '@root')} `); - const { lastVisualToken, isLastVisualTokenValid } - = subject.getLastVisualTokenBeforeInput(); + const { lastVisualToken, isLastVisualTokenValid } = subject.getLastVisualTokenBeforeInput(); const items = document.querySelectorAll('.tokens-container .js-visual-token'); expect(lastVisualToken.isEqualNode(items[items.length - 1])).toEqual(true); @@ -88,8 +84,7 @@ describe('Filtered Search Visual Tokens', () => { ${FilteredSearchSpecHelper.createNameFilterVisualTokenHTML('assignee')} `); - const { lastVisualToken, isLastVisualTokenValid } - = subject.getLastVisualTokenBeforeInput(); + const { lastVisualToken, isLastVisualTokenValid } = subject.getLastVisualTokenBeforeInput(); const items = document.querySelectorAll('.tokens-container .js-visual-token'); expect(lastVisualToken.isEqualNode(items[items.length - 1])).toEqual(true); @@ -105,8 +100,7 @@ describe('Filtered Search Visual Tokens', () => { ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('author', '@root')} `); - const { lastVisualToken, isLastVisualTokenValid } - = subject.getLastVisualTokenBeforeInput(); + const { lastVisualToken, isLastVisualTokenValid } = subject.getLastVisualTokenBeforeInput(); expect(lastVisualToken).toEqual(document.querySelector('.filtered-search-token')); expect(isLastVisualTokenValid).toEqual(true); @@ -119,8 +113,7 @@ describe('Filtered Search Visual Tokens', () => { ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('author', '@root')} `); - const { lastVisualToken, isLastVisualTokenValid } - = subject.getLastVisualTokenBeforeInput(); + const { lastVisualToken, isLastVisualTokenValid } = subject.getLastVisualTokenBeforeInput(); expect(lastVisualToken).toEqual(document.querySelector('.filtered-search-token')); expect(isLastVisualTokenValid).toEqual(false); @@ -142,8 +135,13 @@ describe('Filtered Search Visual Tokens', () => { const singleQueryParams = '{"foo":"true"}'; const multipleQueryParams = '{"foo":"true","bar":"true"}'; - expect(subject.getEndpointWithQueryParams(endpoint, singleQueryParams)).toBe(`${endpoint}?foo=true`); - expect(subject.getEndpointWithQueryParams(endpoint, multipleQueryParams)).toBe(`${endpoint}?foo=true&bar=true`); + expect(subject.getEndpointWithQueryParams(endpoint, singleQueryParams)).toBe( + `${endpoint}?foo=true`, + ); + + expect(subject.getEndpointWithQueryParams(endpoint, multipleQueryParams)).toBe( + `${endpoint}?foo=true&bar=true`, + ); }); }); @@ -275,7 +273,9 @@ describe('Filtered Search Visual Tokens', () => { describe('remove token', () => { it('contains remove-token button', () => { - expect(tokenElement.querySelector('.value-container .remove-token')).toEqual(jasmine.anything()); + expect(tokenElement.querySelector('.value-container .remove-token')).toEqual( + jasmine.anything(), + ); }); it('contains fa-close icon', () => { @@ -313,7 +313,9 @@ describe('Filtered Search Visual Tokens', () => { }); it('inserts visual token before input', () => { - tokensContainer.appendChild(FilteredSearchSpecHelper.createFilterVisualToken('assignee', '@root')); + tokensContainer.appendChild( + FilteredSearchSpecHelper.createFilterVisualToken('assignee', '@root'), + ); subject.addVisualTokenElement('label', 'Frontend'); const tokens = tokensContainer.querySelectorAll('.js-visual-token'); @@ -552,7 +554,7 @@ describe('Filtered Search Visual Tokens', () => { token = document.querySelector('.js-visual-token'); }); - it('tokenize\'s existing input', () => { + it("tokenize's existing input", () => { input.value = 'some text'; spyOn(subject, 'tokenizeInput').and.callThrough(); @@ -625,7 +627,7 @@ describe('Filtered Search Visual Tokens', () => { expect(subject.getLastVisualTokenBeforeInput).not.toHaveBeenCalled(); }); - it('tokenize\'s input', () => { + it("tokenize's input", () => { tokensContainer.innerHTML = ` ${FilteredSearchSpecHelper.createNameFilterVisualTokenHTML('label')} ${FilteredSearchSpecHelper.createInputHTML()} @@ -684,7 +686,10 @@ describe('Filtered Search Visual Tokens', () => { describe('renderVisualTokenValue', () => { const keywordToken = FilteredSearchSpecHelper.createFilterVisualToken('search'); - const milestoneToken = FilteredSearchSpecHelper.createFilterVisualToken('milestone', 'upcoming'); + const milestoneToken = FilteredSearchSpecHelper.createFilterVisualToken( + 'milestone', + 'upcoming', + ); let updateLabelTokenColorSpy; let updateUserTokenAppearanceSpy; @@ -705,8 +710,9 @@ describe('Filtered Search Visual Tokens', () => { }); it('renders a author token value element', () => { - const { tokenNameElement, tokenValueContainer, tokenValueElement } = - findElements(authorToken); + const { tokenNameElement, tokenValueContainer, tokenValueElement } = findElements( + authorToken, + ); const tokenName = tokenNameElement.innerText; const tokenValue = 'new value'; @@ -721,8 +727,9 @@ describe('Filtered Search Visual Tokens', () => { }); it('renders a label token value element', () => { - const { tokenNameElement, tokenValueContainer, tokenValueElement } = - findElements(bugLabelToken); + const { tokenNameElement, tokenValueContainer, tokenValueElement } = findElements( + bugLabelToken, + ); const tokenName = tokenNameElement.innerText; const tokenValue = 'new value'; @@ -756,98 +763,103 @@ describe('Filtered Search Visual Tokens', () => { spyOn(UsersCache, 'retrieve').and.callFake(username => usersCacheSpy(username)); }); - it('ignores special value "none"', (done) => { - usersCacheSpy = (username) => { + it('ignores special value "none"', done => { + usersCacheSpy = username => { expect(username).toBe('none'); done.fail('Should not resolve "none"!'); }; const { tokenValueContainer, tokenValueElement } = findElements(authorToken); - subject.updateUserTokenAppearance(tokenValueContainer, tokenValueElement, 'none') - .then(done) - .catch(done.fail); + subject + .updateUserTokenAppearance(tokenValueContainer, tokenValueElement, 'none') + .then(done) + .catch(done.fail); }); - it('ignores error if UsersCache throws', (done) => { + it('ignores error if UsersCache throws', done => { spyOn(window, 'Flash'); const dummyError = new Error('Earth rotated backwards'); const { tokenValueContainer, tokenValueElement } = findElements(authorToken); const tokenValue = tokenValueElement.innerText; - usersCacheSpy = (username) => { + usersCacheSpy = username => { expect(`@${username}`).toBe(tokenValue); return Promise.reject(dummyError); }; - subject.updateUserTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) - .then(() => { - expect(window.Flash.calls.count()).toBe(0); - }) - .then(done) - .catch(done.fail); + subject + .updateUserTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) + .then(() => { + expect(window.Flash.calls.count()).toBe(0); + }) + .then(done) + .catch(done.fail); }); - it('does nothing if user cannot be found', (done) => { + it('does nothing if user cannot be found', done => { const { tokenValueContainer, tokenValueElement } = findElements(authorToken); const tokenValue = tokenValueElement.innerText; - usersCacheSpy = (username) => { + usersCacheSpy = username => { expect(`@${username}`).toBe(tokenValue); return Promise.resolve(undefined); }; - subject.updateUserTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) - .then(() => { - expect(tokenValueElement.innerText).toBe(tokenValue); - }) - .then(done) - .catch(done.fail); + subject + .updateUserTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) + .then(() => { + expect(tokenValueElement.innerText).toBe(tokenValue); + }) + .then(done) + .catch(done.fail); }); - it('replaces author token with avatar and display name', (done) => { + it('replaces author token with avatar and display name', done => { const dummyUser = { name: 'Important Person', avatar_url: 'https://host.invalid/mypics/avatar.png', }; const { tokenValueContainer, tokenValueElement } = findElements(authorToken); const tokenValue = tokenValueElement.innerText; - usersCacheSpy = (username) => { + usersCacheSpy = username => { expect(`@${username}`).toBe(tokenValue); return Promise.resolve(dummyUser); }; - subject.updateUserTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) - .then(() => { - expect(tokenValueContainer.dataset.originalValue).toBe(tokenValue); - expect(tokenValueElement.innerText.trim()).toBe(dummyUser.name); - const avatar = tokenValueElement.querySelector('img.avatar'); + subject + .updateUserTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) + .then(() => { + expect(tokenValueContainer.dataset.originalValue).toBe(tokenValue); + expect(tokenValueElement.innerText.trim()).toBe(dummyUser.name); + const avatar = tokenValueElement.querySelector('img.avatar'); - expect(avatar.src).toBe(dummyUser.avatar_url); - expect(avatar.alt).toBe(''); - }) - .then(done) - .catch(done.fail); + expect(avatar.src).toBe(dummyUser.avatar_url); + expect(avatar.alt).toBe(''); + }) + .then(done) + .catch(done.fail); }); - it('escapes user name when creating token', (done) => { + it('escapes user name when creating token', done => { const dummyUser = { name: '<script>', avatar_url: `${gl.TEST_HOST}/mypics/avatar.png`, }; const { tokenValueContainer, tokenValueElement } = findElements(authorToken); const tokenValue = tokenValueElement.innerText; - usersCacheSpy = (username) => { + usersCacheSpy = username => { expect(`@${username}`).toBe(tokenValue); return Promise.resolve(dummyUser); }; - subject.updateUserTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) - .then(() => { - expect(tokenValueElement.innerText.trim()).toBe(dummyUser.name); - tokenValueElement.querySelector('.avatar').remove(); + subject + .updateUserTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) + .then(() => { + expect(tokenValueElement.innerText.trim()).toBe(dummyUser.name); + tokenValueElement.querySelector('.avatar').remove(); - expect(tokenValueElement.innerHTML.trim()).toBe(_.escape(dummyUser.name)); - }) - .then(done) - .catch(done.fail); + expect(tokenValueElement.innerHTML.trim()).toBe(_.escape(dummyUser.name)); + }) + .then(done) + .catch(done.fail); }); }); @@ -867,7 +879,11 @@ describe('Filtered Search Visual Tokens', () => { }); it('should not set backgroundColor when it is a linear-gradient', () => { - const token = subject.setTokenStyle(bugLabelToken, 'linear-gradient(135deg, red, blue)', 'white'); + const token = subject.setTokenStyle( + bugLabelToken, + 'linear-gradient(135deg, red, blue)', + 'white', + ); expect(token.style.backgroundColor).toEqual(bugLabelToken.style.backgroundColor); }); @@ -933,8 +949,14 @@ describe('Filtered Search Visual Tokens', () => { labelData = getJSONFixture(jsonFixtureName); }); - const missingLabelToken = FilteredSearchSpecHelper.createFilterVisualToken('label', '~doesnotexist'); - const spaceLabelToken = FilteredSearchSpecHelper.createFilterVisualToken('label', '~"some space"'); + const missingLabelToken = FilteredSearchSpecHelper.createFilterVisualToken( + 'label', + '~doesnotexist', + ); + const spaceLabelToken = FilteredSearchSpecHelper.createFilterVisualToken( + 'label', + '~"some space"', + ); beforeEach(() => { tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(` @@ -946,11 +968,11 @@ describe('Filtered Search Visual Tokens', () => { const filteredSearchInput = document.querySelector('.filtered-search'); filteredSearchInput.dataset.baseEndpoint = dummyEndpoint; - AjaxCache.internalStorage = { }; + AjaxCache.internalStorage = {}; AjaxCache.internalStorage[`${dummyEndpoint}/labels.json`] = labelData; }); - const parseColor = (color) => { + const parseColor = color => { const dummyElement = document.createElement('div'); dummyElement.style.color = color; return dummyElement.style.color; @@ -962,16 +984,16 @@ describe('Filtered Search Visual Tokens', () => { expect(tokenValueContainer.style.color).toBe(parseColor(label.text_color)); }; - const findLabel = tokenValue => labelData.find( - label => tokenValue === `~${DropdownUtils.getEscapedText(label.title)}`, - ); + const findLabel = tokenValue => + labelData.find(label => tokenValue === `~${DropdownUtils.getEscapedText(label.title)}`); - it('updates the color of a label token', (done) => { + it('updates the color of a label token', done => { const { tokenValueContainer, tokenValueElement } = findElements(bugLabelToken); const tokenValue = tokenValueElement.innerText; const matchingLabel = findLabel(tokenValue); - subject.updateLabelTokenColor(tokenValueContainer, tokenValue) + subject + .updateLabelTokenColor(tokenValueContainer, tokenValue) .then(() => { expectValueContainerStyle(tokenValueContainer, matchingLabel); }) @@ -979,12 +1001,13 @@ describe('Filtered Search Visual Tokens', () => { .catch(done.fail); }); - it('updates the color of a label token with spaces', (done) => { + it('updates the color of a label token with spaces', done => { const { tokenValueContainer, tokenValueElement } = findElements(spaceLabelToken); const tokenValue = tokenValueElement.innerText; const matchingLabel = findLabel(tokenValue); - subject.updateLabelTokenColor(tokenValueContainer, tokenValue) + subject + .updateLabelTokenColor(tokenValueContainer, tokenValue) .then(() => { expectValueContainerStyle(tokenValueContainer, matchingLabel); }) @@ -992,14 +1015,15 @@ describe('Filtered Search Visual Tokens', () => { .catch(done.fail); }); - it('does not change color of a missing label', (done) => { + it('does not change color of a missing label', done => { const { tokenValueContainer, tokenValueElement } = findElements(missingLabelToken); const tokenValue = tokenValueElement.innerText; const matchingLabel = findLabel(tokenValue); expect(matchingLabel).toBe(undefined); - subject.updateLabelTokenColor(tokenValueContainer, tokenValue) + subject + .updateLabelTokenColor(tokenValueContainer, tokenValue) .then(() => { expect(tokenValueContainer.getAttribute('style')).toBe(null); }) |