From 67e5235e79cd351936f2f8ea33f437588a50a39f Mon Sep 17 00:00:00 2001 From: winh Date: Tue, 16 May 2017 10:06:00 +0200 Subject: [PATCH 1/4] Simplify filtered_search_visual_tokens_spec.js --- .../filtered_search_visual_tokens_spec.js | 283 ++++++++++-------- 1 file changed, 164 insertions(+), 119 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 c5fa2b17106..39df072573e 100644 --- a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js +++ b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js @@ -4,7 +4,18 @@ import '~/filtered_search/filtered_search_visual_tokens'; import FilteredSearchSpecHelper from '../helpers/filtered_search_spec_helper'; describe('Filtered Search Visual Tokens', () => { + const subject = gl.FilteredSearchVisualTokens; + + const findElements = (tokenElement) => { + const tokenNameElement = tokenElement.querySelector('.name'); + const tokenValueContainer = tokenElement.querySelector('.value-container'); + const tokenValueElement = tokenValueContainer.querySelector('.value'); + return { tokenNameElement, tokenValueContainer, tokenValueElement }; + }; + let tokensContainer; + let authorToken; + let bugLabelToken; beforeEach(() => { setFixtures(` @@ -13,12 +24,15 @@ describe('Filtered Search Visual Tokens', () => { `); tokensContainer = document.querySelector('.tokens-container'); + + authorToken = FilteredSearchSpecHelper.createFilterVisualToken('author', '@user'); + bugLabelToken = FilteredSearchSpecHelper.createFilterVisualToken('label', '~bug'); }); describe('getLastVisualTokenBeforeInput', () => { it('returns when there are no visual tokens', () => { const { lastVisualToken, isLastVisualTokenValid } - = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput(); + = subject.getLastVisualTokenBeforeInput(); expect(lastVisualToken).toEqual(null); expect(isLastVisualTokenValid).toEqual(true); @@ -27,11 +41,11 @@ describe('Filtered Search Visual Tokens', () => { describe('input is the last item in tokensContainer', () => { it('returns when there is one visual token', () => { tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML( - FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '~bug'), + bugLabelToken.outerHTML, ); const { lastVisualToken, isLastVisualTokenValid } - = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput(); + = subject.getLastVisualTokenBeforeInput(); expect(lastVisualToken).toEqual(document.querySelector('.filtered-search-token')); expect(isLastVisualTokenValid).toEqual(true); @@ -43,7 +57,7 @@ describe('Filtered Search Visual Tokens', () => { ); const { lastVisualToken, isLastVisualTokenValid } - = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput(); + = subject.getLastVisualTokenBeforeInput(); expect(lastVisualToken).toEqual(document.querySelector('.filtered-search-token')); expect(isLastVisualTokenValid).toEqual(false); @@ -51,13 +65,13 @@ describe('Filtered Search Visual Tokens', () => { it('returns when there are multiple visual tokens', () => { tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(` - ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '~bug')} + ${bugLabelToken.outerHTML} ${FilteredSearchSpecHelper.createSearchVisualTokenHTML('search term')} ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('author', '@root')} `); const { lastVisualToken, isLastVisualTokenValid } - = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput(); + = subject.getLastVisualTokenBeforeInput(); const items = document.querySelectorAll('.tokens-container .js-visual-token'); expect(lastVisualToken.isEqualNode(items[items.length - 1])).toEqual(true); @@ -66,13 +80,13 @@ describe('Filtered Search Visual Tokens', () => { it('returns when there are multiple visual tokens and an incomplete visual token', () => { tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(` - ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '~bug')} + ${bugLabelToken.outerHTML} ${FilteredSearchSpecHelper.createSearchVisualTokenHTML('search term')} ${FilteredSearchSpecHelper.createNameFilterVisualTokenHTML('assignee')} `); const { lastVisualToken, isLastVisualTokenValid } - = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput(); + = subject.getLastVisualTokenBeforeInput(); const items = document.querySelectorAll('.tokens-container .js-visual-token'); expect(lastVisualToken.isEqualNode(items[items.length - 1])).toEqual(true); @@ -83,13 +97,13 @@ describe('Filtered Search Visual Tokens', () => { describe('input is a middle item in tokensContainer', () => { it('returns last token before input', () => { tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(` - ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '~bug')} + ${bugLabelToken.outerHTML} ${FilteredSearchSpecHelper.createInputHTML()} ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('author', '@root')} `); const { lastVisualToken, isLastVisualTokenValid } - = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput(); + = subject.getLastVisualTokenBeforeInput(); expect(lastVisualToken).toEqual(document.querySelector('.filtered-search-token')); expect(isLastVisualTokenValid).toEqual(true); @@ -103,7 +117,7 @@ describe('Filtered Search Visual Tokens', () => { `); const { lastVisualToken, isLastVisualTokenValid } - = gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput(); + = subject.getLastVisualTokenBeforeInput(); expect(lastVisualToken).toEqual(document.querySelector('.filtered-search-token')); expect(isLastVisualTokenValid).toEqual(false); @@ -114,7 +128,7 @@ describe('Filtered Search Visual Tokens', () => { describe('unselectTokens', () => { it('does nothing when there are no tokens', () => { const beforeHTML = tokensContainer.innerHTML; - gl.FilteredSearchVisualTokens.unselectTokens(); + subject.unselectTokens(); expect(tokensContainer.innerHTML).toEqual(beforeHTML); }); @@ -128,7 +142,7 @@ describe('Filtered Search Visual Tokens', () => { const selected = tokensContainer.querySelector('.js-visual-token .selected'); expect(selected.classList.contains('selected')).toEqual(true); - gl.FilteredSearchVisualTokens.unselectTokens(); + subject.unselectTokens(); expect(selected.classList.contains('selected')).toEqual(false); }); @@ -137,7 +151,7 @@ describe('Filtered Search Visual Tokens', () => { describe('selectToken', () => { beforeEach(() => { tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(` - ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '~bug')} + ${bugLabelToken.outerHTML} ${FilteredSearchSpecHelper.createSearchVisualTokenHTML('search term')} ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '~awesome')} `); @@ -147,7 +161,7 @@ describe('Filtered Search Visual Tokens', () => { const firstTokenButton = tokensContainer.querySelector('.js-visual-token .selectable'); firstTokenButton.classList.add('selected'); - gl.FilteredSearchVisualTokens.selectToken(firstTokenButton); + subject.selectToken(firstTokenButton); expect(firstTokenButton.classList.contains('selected')).toEqual(false); }); @@ -156,7 +170,7 @@ describe('Filtered Search Visual Tokens', () => { it('adds selected class', () => { const firstTokenButton = tokensContainer.querySelector('.js-visual-token .selectable'); - gl.FilteredSearchVisualTokens.selectToken(firstTokenButton); + subject.selectToken(firstTokenButton); expect(firstTokenButton.classList.contains('selected')).toEqual(true); }); @@ -165,7 +179,7 @@ describe('Filtered Search Visual Tokens', () => { const tokenButtons = tokensContainer.querySelectorAll('.js-visual-token .selectable'); tokenButtons[1].classList.add('selected'); - gl.FilteredSearchVisualTokens.selectToken(tokenButtons[0]); + subject.selectToken(tokenButtons[0]); expect(tokenButtons[0].classList.contains('selected')).toEqual(true); expect(tokenButtons[1].classList.contains('selected')).toEqual(false); @@ -181,7 +195,7 @@ describe('Filtered Search Visual Tokens', () => { expect(tokensContainer.querySelector('.js-visual-token .selectable')).not.toEqual(null); - gl.FilteredSearchVisualTokens.removeSelectedToken(); + subject.removeSelectedToken(); expect(tokensContainer.querySelector('.js-visual-token .selectable')).not.toEqual(null); }); @@ -193,7 +207,7 @@ describe('Filtered Search Visual Tokens', () => { expect(tokensContainer.querySelector('.js-visual-token .selectable')).not.toEqual(null); - gl.FilteredSearchVisualTokens.removeSelectedToken(); + subject.removeSelectedToken(); expect(tokensContainer.querySelector('.js-visual-token .selectable')).toEqual(null); }); @@ -205,7 +219,7 @@ describe('Filtered Search Visual Tokens', () => { beforeEach(() => { setFixtures(`
- ${gl.FilteredSearchVisualTokens.createVisualTokenElementHTML()} + ${subject.createVisualTokenElementHTML()}
`); @@ -245,7 +259,7 @@ describe('Filtered Search Visual Tokens', () => { describe('addVisualTokenElement', () => { it('renders search visual tokens', () => { - gl.FilteredSearchVisualTokens.addVisualTokenElement('search term', null, true); + subject.addVisualTokenElement('search term', null, true); const token = tokensContainer.querySelector('.js-visual-token'); expect(token.classList.contains('filtered-search-term')).toEqual(true); @@ -254,7 +268,7 @@ describe('Filtered Search Visual Tokens', () => { }); it('renders filter visual token name', () => { - gl.FilteredSearchVisualTokens.addVisualTokenElement('milestone'); + subject.addVisualTokenElement('milestone'); const token = tokensContainer.querySelector('.js-visual-token'); expect(token.classList.contains('filtered-search-token')).toEqual(true); @@ -263,7 +277,7 @@ describe('Filtered Search Visual Tokens', () => { }); it('renders filter visual token name and value', () => { - gl.FilteredSearchVisualTokens.addVisualTokenElement('label', 'Frontend'); + subject.addVisualTokenElement('label', 'Frontend'); const token = tokensContainer.querySelector('.js-visual-token'); expect(token.classList.contains('filtered-search-token')).toEqual(true); @@ -274,7 +288,7 @@ describe('Filtered Search Visual Tokens', () => { it('inserts visual token before input', () => { tokensContainer.appendChild(FilteredSearchSpecHelper.createFilterVisualToken('assignee', '@root')); - gl.FilteredSearchVisualTokens.addVisualTokenElement('label', 'Frontend'); + subject.addVisualTokenElement('label', 'Frontend'); const tokens = tokensContainer.querySelectorAll('.js-visual-token'); const labelToken = tokens[0]; const assigneeToken = tokens[1]; @@ -296,7 +310,7 @@ describe('Filtered Search Visual Tokens', () => { ); const original = tokensContainer.innerHTML; - gl.FilteredSearchVisualTokens.addValueToPreviousVisualTokenElement('value'); + subject.addValueToPreviousVisualTokenElement('value'); expect(original).toEqual(tokensContainer.innerHTML); }); @@ -308,7 +322,7 @@ describe('Filtered Search Visual Tokens', () => { `); const original = tokensContainer.innerHTML; - gl.FilteredSearchVisualTokens.addValueToPreviousVisualTokenElement('value'); + subject.addValueToPreviousVisualTokenElement('value'); expect(original).toEqual(tokensContainer.innerHTML); }); @@ -319,7 +333,7 @@ describe('Filtered Search Visual Tokens', () => { ); const original = tokensContainer.innerHTML; - gl.FilteredSearchVisualTokens.addValueToPreviousVisualTokenElement('value'); + subject.addValueToPreviousVisualTokenElement('value'); const updatedToken = tokensContainer.querySelector('.js-visual-token'); expect(updatedToken.querySelector('.name').innerText).toEqual('label'); @@ -330,7 +344,7 @@ describe('Filtered Search Visual Tokens', () => { describe('addFilterVisualToken', () => { it('creates visual token with just tokenName', () => { - gl.FilteredSearchVisualTokens.addFilterVisualToken('milestone'); + subject.addFilterVisualToken('milestone'); const token = tokensContainer.querySelector('.js-visual-token'); expect(token.classList.contains('filtered-search-token')).toEqual(true); @@ -339,8 +353,8 @@ describe('Filtered Search Visual Tokens', () => { }); it('creates visual token with just tokenValue', () => { - gl.FilteredSearchVisualTokens.addFilterVisualToken('milestone'); - gl.FilteredSearchVisualTokens.addFilterVisualToken('%8.17'); + subject.addFilterVisualToken('milestone'); + subject.addFilterVisualToken('%8.17'); const token = tokensContainer.querySelector('.js-visual-token'); expect(token.classList.contains('filtered-search-token')).toEqual(true); @@ -349,7 +363,7 @@ describe('Filtered Search Visual Tokens', () => { }); it('creates full visual token', () => { - gl.FilteredSearchVisualTokens.addFilterVisualToken('assignee', '@john'); + subject.addFilterVisualToken('assignee', '@john'); const token = tokensContainer.querySelector('.js-visual-token'); expect(token.classList.contains('filtered-search-token')).toEqual(true); @@ -360,7 +374,7 @@ describe('Filtered Search Visual Tokens', () => { describe('addSearchVisualToken', () => { it('creates search visual token', () => { - gl.FilteredSearchVisualTokens.addSearchVisualToken('search term'); + subject.addSearchVisualToken('search term'); const token = tokensContainer.querySelector('.js-visual-token'); expect(token.classList.contains('filtered-search-term')).toEqual(true); @@ -374,7 +388,7 @@ describe('Filtered Search Visual Tokens', () => { ${FilteredSearchSpecHelper.createSearchVisualTokenHTML('search term')} `); - gl.FilteredSearchVisualTokens.addSearchVisualToken('append this'); + subject.addSearchVisualToken('append this'); const token = tokensContainer.querySelector('.filtered-search-term'); expect(token.querySelector('.name').innerText).toEqual('search term append this'); @@ -386,10 +400,10 @@ describe('Filtered Search Visual Tokens', () => { it('should get last token value', () => { const value = '~bug'; tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML( - FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', value), + bugLabelToken.outerHTML, ); - expect(gl.FilteredSearchVisualTokens.getLastTokenPartial()).toEqual(value); + expect(subject.getLastTokenPartial()).toEqual(value); }); it('should get last token name if there is no value', () => { @@ -398,11 +412,11 @@ describe('Filtered Search Visual Tokens', () => { FilteredSearchSpecHelper.createNameFilterVisualTokenHTML(name), ); - expect(gl.FilteredSearchVisualTokens.getLastTokenPartial()).toEqual(name); + expect(subject.getLastTokenPartial()).toEqual(name); }); it('should return empty when there are no tokens', () => { - expect(gl.FilteredSearchVisualTokens.getLastTokenPartial()).toEqual(''); + expect(subject.getLastTokenPartial()).toEqual(''); }); }); @@ -414,7 +428,7 @@ describe('Filtered Search Visual Tokens', () => { expect(tokensContainer.querySelector('.js-visual-token .value')).not.toEqual(null); - gl.FilteredSearchVisualTokens.removeLastTokenPartial(); + subject.removeLastTokenPartial(); expect(tokensContainer.querySelector('.js-visual-token .value')).toEqual(null); }); @@ -426,14 +440,14 @@ describe('Filtered Search Visual Tokens', () => { expect(tokensContainer.querySelector('.js-visual-token .name')).not.toEqual(null); - gl.FilteredSearchVisualTokens.removeLastTokenPartial(); + subject.removeLastTokenPartial(); expect(tokensContainer.querySelector('.js-visual-token .name')).toEqual(null); }); it('should not remove anything when there are no tokens', () => { const html = tokensContainer.innerHTML; - gl.FilteredSearchVisualTokens.removeLastTokenPartial(); + subject.removeLastTokenPartial(); expect(tokensContainer.innerHTML).toEqual(html); }); @@ -442,7 +456,7 @@ describe('Filtered Search Visual Tokens', () => { describe('tokenizeInput', () => { it('does not do anything if there is no input', () => { const original = tokensContainer.innerHTML; - gl.FilteredSearchVisualTokens.tokenizeInput(); + subject.tokenizeInput(); expect(tokensContainer.innerHTML).toEqual(original); }); @@ -454,7 +468,7 @@ describe('Filtered Search Visual Tokens', () => { const input = document.querySelector('.filtered-search'); input.value = 'some value'; - gl.FilteredSearchVisualTokens.tokenizeInput(); + subject.tokenizeInput(); const newToken = tokensContainer.querySelector('.filtered-search-term'); @@ -470,7 +484,7 @@ describe('Filtered Search Visual Tokens', () => { const input = document.querySelector('.filtered-search'); input.value = '@john'; - gl.FilteredSearchVisualTokens.tokenizeInput(); + subject.tokenizeInput(); const updatedToken = tokensContainer.querySelector('.filtered-search-token'); @@ -497,25 +511,25 @@ describe('Filtered Search Visual Tokens', () => { it('tokenize\'s existing input', () => { input.value = 'some text'; - spyOn(gl.FilteredSearchVisualTokens, 'tokenizeInput').and.callThrough(); + spyOn(subject, 'tokenizeInput').and.callThrough(); - gl.FilteredSearchVisualTokens.editToken(token); + subject.editToken(token); - expect(gl.FilteredSearchVisualTokens.tokenizeInput).toHaveBeenCalled(); + expect(subject.tokenizeInput).toHaveBeenCalled(); expect(input.value).not.toEqual('some text'); }); it('moves input to the token position', () => { expect(tokensContainer.children[3].querySelector('.filtered-search')).not.toEqual(null); - gl.FilteredSearchVisualTokens.editToken(token); + subject.editToken(token); expect(tokensContainer.children[1].querySelector('.filtered-search')).not.toEqual(null); expect(tokensContainer.children[3].querySelector('.filtered-search')).toEqual(null); }); it('input contains the visual token value', () => { - gl.FilteredSearchVisualTokens.editToken(token); + subject.editToken(token); expect(input.value).toEqual('none'); }); @@ -528,7 +542,7 @@ describe('Filtered Search Visual Tokens', () => { it('token is removed', () => { expect(tokensContainer.querySelector('.filtered-search-term')).not.toEqual(null); - gl.FilteredSearchVisualTokens.editToken(token); + subject.editToken(token); expect(tokensContainer.querySelector('.filtered-search-term')).toEqual(null); }); @@ -536,7 +550,7 @@ describe('Filtered Search Visual Tokens', () => { it('input has the same value as removed token', () => { expect(input.value).toEqual(''); - gl.FilteredSearchVisualTokens.editToken(token); + subject.editToken(token); expect(input.value).toEqual('search'); }); @@ -549,25 +563,25 @@ describe('Filtered Search Visual Tokens', () => { FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', 'none'), ); - spyOn(gl.FilteredSearchVisualTokens, 'tokenizeInput').and.callFake(() => {}); - spyOn(gl.FilteredSearchVisualTokens, 'getLastVisualTokenBeforeInput').and.callThrough(); + spyOn(subject, 'tokenizeInput').and.callFake(() => {}); + spyOn(subject, 'getLastVisualTokenBeforeInput').and.callThrough(); - gl.FilteredSearchVisualTokens.moveInputToTheRight(); + subject.moveInputToTheRight(); - expect(gl.FilteredSearchVisualTokens.tokenizeInput).toHaveBeenCalled(); - expect(gl.FilteredSearchVisualTokens.getLastVisualTokenBeforeInput).not.toHaveBeenCalled(); + expect(subject.tokenizeInput).toHaveBeenCalled(); + expect(subject.getLastVisualTokenBeforeInput).not.toHaveBeenCalled(); }); it('tokenize\'s input', () => { tokensContainer.innerHTML = ` ${FilteredSearchSpecHelper.createNameFilterVisualTokenHTML('label')} ${FilteredSearchSpecHelper.createInputHTML()} - ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '~bug')} + ${bugLabelToken.outerHTML} `; document.querySelector('.filtered-search').value = 'none'; - gl.FilteredSearchVisualTokens.moveInputToTheRight(); + subject.moveInputToTheRight(); const value = tokensContainer.querySelector('.js-visual-token .value'); expect(value.innerText).toEqual('none'); @@ -577,12 +591,12 @@ describe('Filtered Search Visual Tokens', () => { tokensContainer.innerHTML = ` ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', 'none')} ${FilteredSearchSpecHelper.createInputHTML()} - ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '~bug')} + ${bugLabelToken.outerHTML} `; document.querySelector('.filtered-search').value = 'test'; - gl.FilteredSearchVisualTokens.moveInputToTheRight(); + subject.moveInputToTheRight(); const searchValue = tokensContainer.querySelector('.filtered-search-term .name'); expect(searchValue.innerText).toEqual('test'); @@ -592,10 +606,10 @@ describe('Filtered Search Visual Tokens', () => { tokensContainer.innerHTML = ` ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', 'none')} ${FilteredSearchSpecHelper.createInputHTML()} - ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', '~bug')} + ${bugLabelToken.outerHTML} `; - gl.FilteredSearchVisualTokens.moveInputToTheRight(); + subject.moveInputToTheRight(); expect(tokensContainer.children[2].querySelector('.filtered-search')).not.toEqual(null); }); @@ -607,7 +621,7 @@ describe('Filtered Search Visual Tokens', () => { ${FilteredSearchSpecHelper.createInputHTML('', '~bug')} `; - gl.FilteredSearchVisualTokens.moveInputToTheRight(); + subject.moveInputToTheRight(); const token = tokensContainer.children[1]; expect(token.querySelector('.value').innerText).toEqual('~bug'); @@ -615,42 +629,46 @@ describe('Filtered Search Visual Tokens', () => { }); describe('renderVisualTokenValue', () => { - let searchTokens; + const keywordToken = FilteredSearchSpecHelper.createFilterVisualToken('search'); + const milestoneToken = FilteredSearchSpecHelper.createFilterVisualToken('milestone', 'upcoming'); + + let updateLabelTokenColorSpy; beforeEach(() => { tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(` - ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('label', 'none')} - ${FilteredSearchSpecHelper.createSearchVisualTokenHTML('search')} - ${FilteredSearchSpecHelper.createFilterVisualTokenHTML('milestone', 'upcoming')} + ${authorToken.outerHTML} + ${bugLabelToken.outerHTML} + ${keywordToken.outerHTML} + ${milestoneToken.outerHTML} `); - searchTokens = document.querySelectorAll('.filtered-search-token'); + spyOn(subject, 'updateLabelTokenColor'); + updateLabelTokenColorSpy = subject.updateLabelTokenColor; }); - it('renders a token value element', () => { - spyOn(gl.FilteredSearchVisualTokens, 'updateLabelTokenColor'); - const updateLabelTokenColorSpy = gl.FilteredSearchVisualTokens.updateLabelTokenColor; + it('renders a label token value element', () => { + const { tokenNameElement, tokenValueContainer, tokenValueElement } = + findElements(bugLabelToken); + const tokenName = tokenNameElement.innerText; + const tokenValue = 'new value'; - expect(searchTokens.length).toBe(2); - Array.prototype.forEach.call(searchTokens, (token) => { - updateLabelTokenColorSpy.calls.reset(); + subject.renderVisualTokenValue(bugLabelToken, tokenName, tokenValue); - const tokenName = token.querySelector('.name').innerText; - const tokenValue = 'new value'; - gl.FilteredSearchVisualTokens.renderVisualTokenValue(token, tokenName, tokenValue); + expect(tokenValueElement.innerText).toBe(tokenValue); + expect(updateLabelTokenColorSpy.calls.count()).toBe(1); + const expectedArgs = [tokenValueContainer, tokenValue]; + expect(updateLabelTokenColorSpy.calls.argsFor(0)).toEqual(expectedArgs); + }); - const tokenValueElement = token.querySelector('.value'); - expect(tokenValueElement.innerText).toBe(tokenValue); + it('renders a milestone token value element', () => { + const { tokenNameElement, tokenValueElement } = findElements(milestoneToken); + const tokenName = tokenNameElement.innerText; + const tokenValue = 'new value'; - if (tokenName.toLowerCase() === 'label') { - const tokenValueContainer = token.querySelector('.value-container'); - expect(updateLabelTokenColorSpy.calls.count()).toBe(1); - const expectedArgs = [tokenValueContainer, tokenValue]; - expect(updateLabelTokenColorSpy.calls.argsFor(0)).toEqual(expectedArgs); - } else { - expect(updateLabelTokenColorSpy.calls.count()).toBe(0); - } - }); + subject.renderVisualTokenValue(milestoneToken, tokenName, tokenValue); + + expect(tokenValueElement.innerText).toBe(tokenValue); + expect(updateLabelTokenColorSpy.calls.count()).toBe(0); }); }); @@ -659,21 +677,16 @@ describe('Filtered Search Visual Tokens', () => { const dummyEndpoint = '/dummy/endpoint'; preloadFixtures(jsonFixtureName); - const labelData = getJSONFixture(jsonFixtureName); - const findLabel = tokenValue => labelData.find( - label => tokenValue === `~${gl.DropdownUtils.getEscapedText(label.title)}`, - ); - const bugLabelToken = FilteredSearchSpecHelper.createFilterVisualToken('label', '~bug'); + let labelData; + + beforeAll(() => { + labelData = getJSONFixture(jsonFixtureName); + }); + const missingLabelToken = FilteredSearchSpecHelper.createFilterVisualToken('label', '~doesnotexist'); const spaceLabelToken = FilteredSearchSpecHelper.createFilterVisualToken('label', '~"some space"'); - const parseColor = (color) => { - const dummyElement = document.createElement('div'); - dummyElement.style.color = color; - return dummyElement.style.color; - }; - beforeEach(() => { tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(` ${bugLabelToken.outerHTML} @@ -688,28 +701,60 @@ describe('Filtered Search Visual Tokens', () => { AjaxCache.internalStorage[`${dummyEndpoint}/labels.json`] = labelData; }); - const testCase = (token, done) => { - const tokenValueContainer = token.querySelector('.value-container'); - const tokenValue = token.querySelector('.value').innerText; - const label = findLabel(tokenValue); - - gl.FilteredSearchVisualTokens.updateLabelTokenColor(tokenValueContainer, tokenValue) - .then(() => { - if (label) { - expect(tokenValueContainer.getAttribute('style')).not.toBe(null); - expect(tokenValueContainer.style.backgroundColor).toBe(parseColor(label.color)); - expect(tokenValueContainer.style.color).toBe(parseColor(label.text_color)); - } else { - expect(token).toBe(missingLabelToken); - expect(tokenValueContainer.getAttribute('style')).toBe(null); - } - }) - .then(done) - .catch(fail); + const parseColor = (color) => { + const dummyElement = document.createElement('div'); + dummyElement.style.color = color; + return dummyElement.style.color; }; - it('updates the color of a label token', done => testCase(bugLabelToken, done)); - it('updates the color of a label token with spaces', done => testCase(spaceLabelToken, done)); - it('does not change color of a missing label', done => testCase(missingLabelToken, done)); + const expectValueContainerStyle = (tokenValueContainer, label) => { + expect(tokenValueContainer.getAttribute('style')).not.toBe(null); + expect(tokenValueContainer.style.backgroundColor).toBe(parseColor(label.color)); + expect(tokenValueContainer.style.color).toBe(parseColor(label.text_color)); + }; + + const findLabel = tokenValue => labelData.find( + label => tokenValue === `~${gl.DropdownUtils.getEscapedText(label.title)}`, + ); + + 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) + .then(() => { + expectValueContainerStyle(tokenValueContainer, matchingLabel); + }) + .then(done) + .catch(done.fail); + }); + + 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) + .then(() => { + expectValueContainerStyle(tokenValueContainer, matchingLabel); + }) + .then(done) + .catch(done.fail); + }); + + 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) + .then(() => { + expect(tokenValueContainer.getAttribute('style')).toBe(null); + }) + .then(done) + .catch(done.fail); + }); }); }); From b22970648efd384fc3dbda379e1506a336d154f8 Mon Sep 17 00:00:00 2001 From: winh Date: Mon, 22 May 2017 13:27:08 +0200 Subject: [PATCH 2/4] Add frontend fixture for issue list --- spec/javascripts/fixtures/issues.rb | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/spec/javascripts/fixtures/issues.rb b/spec/javascripts/fixtures/issues.rb index 88e3f860809..1a30909977e 100644 --- a/spec/javascripts/fixtures/issues.rb +++ b/spec/javascripts/fixtures/issues.rb @@ -36,6 +36,17 @@ describe Projects::IssuesController, '(JavaScript fixtures)', type: :controller render_issue(example.description, issue) end + it 'issues/issue_list.html.raw' do |example| + create(:issue, project: project) + + get :index, + namespace_id: project.namespace.to_param, + project_id: project + + expect(response).to be_success + store_frontend_fixture(response, example.description) + end + private def render_issue(fixture_file_name, issue) From f032731e47f2ce1c2feb6ff866754202efb6844b Mon Sep 17 00:00:00 2001 From: winh Date: Tue, 30 May 2017 12:45:33 +0200 Subject: [PATCH 3/4] Move clear search button out of issuable search bar --- app/assets/stylesheets/framework/filters.scss | 2 +- app/views/shared/issuable/_search_bar.html.haml | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 90051ffe753..52c9c3c88d4 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -239,7 +239,7 @@ width: 35px; background-color: $white-light; border: none; - position: absolute; + position: static; right: 0; height: 100%; outline: none; diff --git a/app/views/shared/issuable/_search_bar.html.haml b/app/views/shared/issuable/_search_bar.html.haml index a9a4792faae..be9f9ee29c4 100644 --- a/app/views/shared/issuable/_search_bar.html.haml +++ b/app/views/shared/issuable/_search_bar.html.haml @@ -26,8 +26,6 @@ %li.input-token %input.form-control.filtered-search{ id: "filtered-search-#{type.to_s}", placeholder: 'Search or filter results...', data: { 'project-id' => @project.id, 'username-params' => @users.to_json(only: [:id, :username]), 'base-endpoint' => namespace_project_path(@project.namespace, @project) } } = icon('filter') - %button.clear-search.hidden{ type: 'button' } - = icon('times') #js-dropdown-hint.filtered-search-input-dropdown-menu.dropdown-menu.hint-dropdown %ul{ data: { dropdown: true } } %li.filter-dropdown-item{ data: { action: 'submit' } } @@ -95,6 +93,8 @@ %span.dropdown-label-box{ style: 'background: {{color}}' } %span.label-title.js-data-value {{title}} + %button.clear-search.hidden{ type: 'button' } + = icon('times') .filter-dropdown-container - if type == :boards - if can?(current_user, :admin_list, @project) From 0583916d2d9ad19ae342a13ff2a31c9e3bb76547 Mon Sep 17 00:00:00 2001 From: winh Date: Thu, 18 May 2017 20:53:14 +0200 Subject: [PATCH 4/4] Style people in issuable search bar (!11402) --- .../filtered_search/dropdown_utils.js | 5 +- .../filtered_search_visual_tokens.js | 72 ++++++++-- app/assets/stylesheets/framework/filters.scss | 1 + .../winh-styled-people-search-bar.yml | 4 + spec/features/boards/modal_filter_spec.rb | 4 +- .../filtered_search/filter_issues_spec.rb | 2 +- .../filtered_search/visual_tokens_spec.rb | 4 +- .../filtered_search/dropdown_utils_spec.js | 29 ++++ .../filtered_search_visual_tokens_spec.js | 125 ++++++++++++++++++ .../helpers/filtered_search_spec_helper.js | 13 +- 10 files changed, 237 insertions(+), 22 deletions(-) create mode 100644 changelogs/unreleased/winh-styled-people-search-bar.yml diff --git a/app/assets/javascripts/filtered_search/dropdown_utils.js b/app/assets/javascripts/filtered_search/dropdown_utils.js index 5c02a7a53d3..ef8fe071012 100644 --- a/app/assets/javascripts/filtered_search/dropdown_utils.js +++ b/app/assets/javascripts/filtered_search/dropdown_utils.js @@ -102,10 +102,13 @@ class DropdownUtils { if (token.classList.contains('js-visual-token')) { const name = token.querySelector('.name'); const value = token.querySelector('.value'); + const valueContainer = token.querySelector('.value-container'); const symbol = value && value.dataset.symbol ? value.dataset.symbol : ''; let valueText = ''; - if (value && value.innerText) { + if (valueContainer && valueContainer.dataset.originalValue) { + valueText = valueContainer.dataset.originalValue; + } else if (value && value.innerText) { valueText = value.innerText; } diff --git a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js index bc1226f5879..e9278140af0 100644 --- a/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js +++ b/app/assets/javascripts/filtered_search/filtered_search_visual_tokens.js @@ -1,6 +1,7 @@ -import AjaxCache from '~/lib/utils/ajax_cache'; -import '~/flash'; /* global Flash */ +import AjaxCache from '../lib/utils/ajax_cache'; +import '../flash'; /* global Flash */ import FilteredSearchContainer from './container'; +import UsersCache from '../lib/utils/users_cache'; class FilteredSearchVisualTokens { static getLastVisualTokenBeforeInput() { @@ -82,12 +83,42 @@ class FilteredSearchVisualTokens { .catch(() => new Flash('An error occurred while fetching label colors.')); } + static updateUserTokenAppearance(tokenValueContainer, tokenValueElement, tokenValue) { + if (tokenValue === 'none') { + return Promise.resolve(); + } + + const username = tokenValue.replace(/^@/, ''); + return UsersCache.retrieve(username) + .then((user) => { + if (!user) { + return; + } + + /* eslint-disable no-param-reassign */ + tokenValueContainer.dataset.originalValue = tokenValue; + tokenValueElement.innerHTML = ` + ${user.name}'s avatar + ${user.name} + `; + /* eslint-enable no-param-reassign */ + }) + // ignore error and leave username in the search bar + .catch(() => { }); + } + static renderVisualTokenValue(parentElement, tokenName, tokenValue) { const tokenValueContainer = parentElement.querySelector('.value-container'); - tokenValueContainer.querySelector('.value').innerText = tokenValue; + const tokenValueElement = tokenValueContainer.querySelector('.value'); + tokenValueElement.innerText = tokenValue; - if (tokenName.toLowerCase() === 'label') { + const tokenType = tokenName.toLowerCase(); + if (tokenType === 'label') { FilteredSearchVisualTokens.updateLabelTokenColor(tokenValueContainer, tokenValue); + } else if ((tokenType === 'author') || (tokenType === 'assignee')) { + FilteredSearchVisualTokens.updateUserTokenAppearance( + tokenValueContainer, tokenValueElement, tokenValue, + ); } } @@ -153,6 +184,12 @@ class FilteredSearchVisualTokens { if (!lastVisualToken) return ''; + const valueContainer = lastVisualToken.querySelector('.value-container'); + const originalValue = valueContainer && valueContainer.dataset.originalValue; + if (originalValue) { + return originalValue; + } + const value = lastVisualToken.querySelector('.value'); const name = lastVisualToken.querySelector('.name'); @@ -205,17 +242,28 @@ class FilteredSearchVisualTokens { const inputLi = input.parentElement; tokenContainer.replaceChild(inputLi, token); - const name = token.querySelector('.name'); - const value = token.querySelector('.value'); + const nameElement = token.querySelector('.name'); + let value; - if (token.classList.contains('filtered-search-token') && value) { - FilteredSearchVisualTokens.addFilterVisualToken(name.innerText); - input.value = value.innerText; - } else { - // token is a search term - input.value = name.innerText; + if (token.classList.contains('filtered-search-token')) { + FilteredSearchVisualTokens.addFilterVisualToken(nameElement.innerText); + + const valueContainerElement = token.querySelector('.value-container'); + value = valueContainerElement.dataset.originalValue; + + if (!value) { + const valueElement = valueContainerElement.querySelector('.value'); + value = valueElement.innerText; + } } + // token is a search term + if (!value) { + value = nameElement.innerText; + } + + input.value = value; + // Opens dropdown const inputEvent = new Event('input'); input.dispatchEvent(inputEvent); diff --git a/app/assets/stylesheets/framework/filters.scss b/app/assets/stylesheets/framework/filters.scss index 52c9c3c88d4..585f4871f5f 100644 --- a/app/assets/stylesheets/framework/filters.scss +++ b/app/assets/stylesheets/framework/filters.scss @@ -90,6 +90,7 @@ .filtered-search-term { display: -webkit-flex; display: flex; + flex-shrink: 0; margin-top: 5px; margin-bottom: 5px; diff --git a/changelogs/unreleased/winh-styled-people-search-bar.yml b/changelogs/unreleased/winh-styled-people-search-bar.yml new file mode 100644 index 00000000000..a088af37d8d --- /dev/null +++ b/changelogs/unreleased/winh-styled-people-search-bar.yml @@ -0,0 +1,4 @@ +--- +title: Style people in issuable search bar +merge_request: 11402 +author: diff --git a/spec/features/boards/modal_filter_spec.rb b/spec/features/boards/modal_filter_spec.rb index ce132bfd979..b6de6143354 100644 --- a/spec/features/boards/modal_filter_spec.rb +++ b/spec/features/boards/modal_filter_spec.rb @@ -89,7 +89,7 @@ describe 'Issue Boards add issue modal filtering', :feature, :js do page.within('.add-issues-modal') do wait_for_requests - expect(page).to have_selector('.js-visual-token', text: user2.username) + expect(page).to have_selector('.js-visual-token', text: user2.name) expect(page).to have_selector('.card', count: 1) end end @@ -125,7 +125,7 @@ describe 'Issue Boards add issue modal filtering', :feature, :js do page.within('.add-issues-modal') do wait_for_requests - expect(page).to have_selector('.js-visual-token', text: user2.username) + expect(page).to have_selector('.js-visual-token', text: user2.name) expect(page).to have_selector('.card', count: 1) end end diff --git a/spec/features/issues/filtered_search/filter_issues_spec.rb b/spec/features/issues/filtered_search/filter_issues_spec.rb index 7958ad7e24f..e5e4ba06b5a 100644 --- a/spec/features/issues/filtered_search/filter_issues_spec.rb +++ b/spec/features/issues/filtered_search/filter_issues_spec.rb @@ -6,7 +6,7 @@ describe 'Filter issues', js: true, feature: true do let!(:group) { create(:group) } let!(:project) { create(:project, group: group) } - let!(:user) { create(:user, username: 'joe') } + let!(:user) { create(:user, username: 'joe', name: 'Joe') } let!(:user2) { create(:user, username: 'jane') } let!(:label) { create(:label, project: project) } let!(:wontfix) { create(:label, project: project, title: "Won't fix") } diff --git a/spec/features/issues/filtered_search/visual_tokens_spec.rb b/spec/features/issues/filtered_search/visual_tokens_spec.rb index 96e87c82d2c..dbbafc9e004 100644 --- a/spec/features/issues/filtered_search/visual_tokens_spec.rb +++ b/spec/features/issues/filtered_search/visual_tokens_spec.rb @@ -2,6 +2,7 @@ require 'rails_helper' describe 'Visual tokens', js: true, feature: true do include FilteredSearchHelpers + include WaitForRequests let!(:project) { create(:empty_project) } let!(:user) { create(:user, name: 'administrator', username: 'root') } @@ -70,7 +71,8 @@ describe 'Visual tokens', js: true, feature: true do end it 'changes value in visual token' do - expect(first('.tokens-container .filtered-search-token .value').text).to eq("@#{user_rock.username}") + wait_for_requests + expect(first('.tokens-container .filtered-search-token .value').text).to eq("#{user_rock.name}") end it 'moves input to the right' do diff --git a/spec/javascripts/filtered_search/dropdown_utils_spec.js b/spec/javascripts/filtered_search/dropdown_utils_spec.js index bb02abdeea2..f55726379f3 100644 --- a/spec/javascripts/filtered_search/dropdown_utils_spec.js +++ b/spec/javascripts/filtered_search/dropdown_utils_spec.js @@ -2,8 +2,12 @@ import '~/extensions/array'; import '~/filtered_search/dropdown_utils'; import '~/filtered_search/filtered_search_tokenizer'; import '~/filtered_search/filtered_search_dropdown_manager'; +import FilteredSearchSpecHelper from '../helpers/filtered_search_spec_helper'; describe('Dropdown Utils', () => { + const issueListFixture = 'issues/issue_list.html.raw'; + preloadFixtures(issueListFixture); + describe('getEscapedText', () => { it('should return same word when it has no space', () => { const escaped = gl.DropdownUtils.getEscapedText('textWithoutSpace'); @@ -314,4 +318,29 @@ describe('Dropdown Utils', () => { }); }); }); + + describe('getSearchQuery', () => { + let authorToken; + + beforeEach(() => { + loadFixtures(issueListFixture); + + authorToken = FilteredSearchSpecHelper.createFilterVisualToken('author', '@user'); + const searchTermToken = FilteredSearchSpecHelper.createSearchVisualToken('search term'); + + const tokensContainer = document.querySelector('.tokens-container'); + tokensContainer.appendChild(searchTermToken); + tokensContainer.appendChild(authorToken); + }); + + it('uses original value if present', () => { + const originalValue = 'original dance'; + const valueContainer = authorToken.querySelector('.value-container'); + valueContainer.dataset.originalValue = originalValue; + + const searchQuery = gl.DropdownUtils.getSearchQuery(); + + expect(searchQuery).toBe(' search term author:original dance'); + }); + }); }); 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 39df072573e..fa4343ffbc8 100644 --- a/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js +++ b/spec/javascripts/filtered_search/filtered_search_visual_tokens_spec.js @@ -1,4 +1,5 @@ import AjaxCache from '~/lib/utils/ajax_cache'; +import UsersCache from '~/lib/utils/users_cache'; import '~/filtered_search/filtered_search_visual_tokens'; import FilteredSearchSpecHelper from '../helpers/filtered_search_spec_helper'; @@ -406,6 +407,22 @@ describe('Filtered Search Visual Tokens', () => { expect(subject.getLastTokenPartial()).toEqual(value); }); + it('should get last token original value if available', () => { + const originalValue = '@user'; + const valueContainer = authorToken.querySelector('.value-container'); + valueContainer.dataset.originalValue = originalValue; + const avatar = document.createElement('img'); + const valueElement = valueContainer.querySelector('.value'); + valueElement.insertAdjacentElement('afterbegin', avatar); + tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML( + authorToken.outerHTML, + ); + + const lastTokenValue = subject.getLastTokenPartial(); + + expect(lastTokenValue).toEqual(originalValue); + }); + it('should get last token name if there is no value', () => { const name = 'assignee'; tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML( @@ -534,6 +551,16 @@ describe('Filtered Search Visual Tokens', () => { expect(input.value).toEqual('none'); }); + it('input contains the original value if present', () => { + const originalValue = '@user'; + const valueContainer = token.querySelector('.value-container'); + valueContainer.dataset.originalValue = originalValue; + + subject.editToken(token); + + expect(input.value).toEqual(originalValue); + }); + describe('selected token is a search term token', () => { beforeEach(() => { token = document.querySelector('.filtered-search-term'); @@ -633,6 +660,7 @@ describe('Filtered Search Visual Tokens', () => { const milestoneToken = FilteredSearchSpecHelper.createFilterVisualToken('milestone', 'upcoming'); let updateLabelTokenColorSpy; + let updateUserTokenAppearanceSpy; beforeEach(() => { tokensContainer.innerHTML = FilteredSearchSpecHelper.createTokensContainerHTML(` @@ -644,6 +672,24 @@ describe('Filtered Search Visual Tokens', () => { spyOn(subject, 'updateLabelTokenColor'); updateLabelTokenColorSpy = subject.updateLabelTokenColor; + + spyOn(subject, 'updateUserTokenAppearance'); + updateUserTokenAppearanceSpy = subject.updateUserTokenAppearance; + }); + + it('renders a author token value element', () => { + const { tokenNameElement, tokenValueContainer, tokenValueElement } = + findElements(authorToken); + const tokenName = tokenNameElement.innerText; + const tokenValue = 'new value'; + + subject.renderVisualTokenValue(authorToken, tokenName, tokenValue); + + expect(tokenValueElement.innerText).toBe(tokenValue); + expect(updateUserTokenAppearanceSpy.calls.count()).toBe(1); + const expectedArgs = [tokenValueContainer, tokenValueElement, tokenValue]; + expect(updateUserTokenAppearanceSpy.calls.argsFor(0)).toEqual(expectedArgs); + expect(updateLabelTokenColorSpy.calls.count()).toBe(0); }); it('renders a label token value element', () => { @@ -658,6 +704,7 @@ describe('Filtered Search Visual Tokens', () => { expect(updateLabelTokenColorSpy.calls.count()).toBe(1); const expectedArgs = [tokenValueContainer, tokenValue]; expect(updateLabelTokenColorSpy.calls.argsFor(0)).toEqual(expectedArgs); + expect(updateUserTokenAppearanceSpy.calls.count()).toBe(0); }); it('renders a milestone token value element', () => { @@ -669,6 +716,84 @@ describe('Filtered Search Visual Tokens', () => { expect(tokenValueElement.innerText).toBe(tokenValue); expect(updateLabelTokenColorSpy.calls.count()).toBe(0); + expect(updateUserTokenAppearanceSpy.calls.count()).toBe(0); + }); + }); + + describe('updateUserTokenAppearance', () => { + let usersCacheSpy; + + beforeEach(() => { + spyOn(UsersCache, 'retrieve').and.callFake(username => 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); + }); + + 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) => { + 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); + }); + + it('does nothing if user cannot be found', (done) => { + const { tokenValueContainer, tokenValueElement } = findElements(authorToken); + const tokenValue = tokenValueElement.innerText; + 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); + }); + + 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) => { + 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'); + expect(avatar.src).toBe(dummyUser.avatar_url); + }) + .then(done) + .catch(done.fail); }); }); diff --git a/spec/javascripts/helpers/filtered_search_spec_helper.js b/spec/javascripts/helpers/filtered_search_spec_helper.js index 0d7092a2357..8933dd5def4 100644 --- a/spec/javascripts/helpers/filtered_search_spec_helper.js +++ b/spec/javascripts/helpers/filtered_search_spec_helper.js @@ -30,12 +30,15 @@ export default class FilteredSearchSpecHelper { `; } + static createSearchVisualToken(name) { + const li = document.createElement('li'); + li.classList.add('js-visual-token', 'filtered-search-term'); + li.innerHTML = `
${name}
`; + return li; + } + static createSearchVisualTokenHTML(name) { - return ` -
  • -
    ${name}
    -
    • - `; + return FilteredSearchSpecHelper.createSearchVisualToken(name).outerHTML; } static createInputHTML(placeholder = '', value = '') {