diff options
| -rw-r--r-- | app/assets/javascripts/flash.js | 45 | ||||
| -rw-r--r-- | spec/javascripts/flash_spec.js | 248 |
2 files changed, 282 insertions, 11 deletions
diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js index 1a52c5a07bf..d745483c93f 100644 --- a/app/assets/javascripts/flash.js +++ b/app/assets/javascripts/flash.js @@ -1,23 +1,27 @@ import _ from 'underscore'; -const hideFlash = (flashEl) => { - Object.assign(flashEl.style, { - transition: 'opacity .3s', - opacity: '0', - }); +const hideFlash = (flashEl, fadeTransition = true) => { + if (fadeTransition) { + Object.assign(flashEl.style, { + transition: 'opacity .3s', + opacity: '0', + }); + } flashEl.addEventListener('transitionend', () => { flashEl.remove(); }, { once: true, }); + + if (!fadeTransition) flashEl.dispatchEvent(new Event('transitionend')); }; const createAction = config => ` <a href="${config.href || '#'}" class="flash-action" - ${config.href ? 'role="button"' : ''} + ${config.href ? '' : 'role="button"'} > ${_.escape(config.title)} </a> @@ -35,7 +39,27 @@ const createFlashEl = (message, type) => ` </div> `; -const createFlash = function createFlash(message, type = 'alert', parent = document, actionConfig = null) { +/* + * Flash banner supports different types of Flash configurations + * along with ability to provide actionConfig which can be used to show + * additional action or link on banner next to message + * + * @param {String} message Flash message text + * @param {String} type Type of Flash, it can be `notice` or `alert` (default) + * @param {Object} parent Reference to parent element under which Flash needs to appear + * @param {Object} actonConfig Map of config to show action on banner + * @param {String} href URL to which action config should point to (default: '#') + * @param {String} title Title of action + * @param {Function} clickHandler Method to call when action is clicked on + * @param {Boolean} fadeTransition Boolean to determine whether to fade the alert out + */ +const createFlash = function createFlash( + message, + type = 'alert', + parent = document, + actionConfig = null, + fadeTransition = true, +) { const flashContainer = parent.querySelector('.flash-container'); if (!flashContainer) return null; @@ -43,7 +67,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum flashContainer.innerHTML = createFlashEl(message, type); const flashEl = flashContainer.querySelector(`.flash-${type}`); - flashEl.addEventListener('click', () => hideFlash(flashEl)); + flashEl.addEventListener('click', () => hideFlash(flashEl, fadeTransition)); if (actionConfig) { flashEl.innerHTML += createAction(actionConfig); @@ -55,9 +79,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum if (flashContainer.parentNode.classList.contains('content-wrapper')) { const flashText = flashEl.querySelector('.flash-text'); - - flashText.classList.add('container-fluid'); - flashText.classList.add('container-limited'); + flashText.className = `${flashText.className} container-fluid container-limited`; } flashContainer.style.display = 'block'; @@ -68,6 +90,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum export { createFlash as default, createFlashEl, + createAction, hideFlash, }; window.Flash = createFlash; diff --git a/spec/javascripts/flash_spec.js b/spec/javascripts/flash_spec.js new file mode 100644 index 00000000000..1feb31f5c4f --- /dev/null +++ b/spec/javascripts/flash_spec.js @@ -0,0 +1,248 @@ +import flash, { + createFlashEl, + createAction, + hideFlash, +} from '~/flash'; + +describe('Flash', () => { + describe('createFlashEl', () => { + let el; + + beforeEach(() => { + el = document.createElement('div'); + }); + + afterEach(() => { + el.innerHTML = ''; + }); + + it('creates flash element with type', () => { + el.innerHTML = createFlashEl('testing', 'alert'); + + expect( + el.querySelector('.flash-alert'), + ).not.toBeNull(); + }); + + it('escapes text', () => { + el.innerHTML = createFlashEl('<script>alert("a");</script>', 'alert'); + + expect( + el.querySelector('.flash-text').textContent.trim(), + ).toBe('<script>alert("a");</script>'); + }); + }); + + describe('hideFlash', () => { + let el; + + beforeEach(() => { + el = document.createElement('div'); + el.className = 'js-testing'; + }); + + it('sets transition style', () => { + hideFlash(el); + + expect( + el.style.transition, + ).toBe('opacity 0.3s'); + }); + + it('sets opacity style', () => { + hideFlash(el); + + expect( + el.style.opacity, + ).toBe('0'); + }); + + it('removes element after transitionend', () => { + document.body.appendChild(el); + + hideFlash(el); + el.dispatchEvent(new Event('transitionend')); + + expect( + document.querySelector('.js-testing'), + ).toBeNull(); + }); + + it('calls event listener callback once', () => { + spyOn(el, 'remove').and.callThrough(); + document.body.appendChild(el); + + hideFlash(el); + + el.dispatchEvent(new Event('transitionend')); + el.dispatchEvent(new Event('transitionend')); + + expect( + el.remove.calls.count(), + ).toBe(1); + }); + }); + + describe('createAction', () => { + let el; + + beforeEach(() => { + el = document.createElement('div'); + }); + + it('creates link with href', () => { + el.innerHTML = createAction({ + href: 'testing', + title: 'test', + }); + + expect( + el.querySelector('.flash-action').href, + ).toContain('testing'); + }); + + it('uses hash as href when no href is present', () => { + el.innerHTML = createAction({ + title: 'test', + }); + + expect( + el.querySelector('.flash-action').href, + ).toContain('#'); + }); + + it('adds role when no href is present', () => { + el.innerHTML = createAction({ + title: 'test', + }); + + expect( + el.querySelector('.flash-action').getAttribute('role'), + ).toBe('button'); + }); + + it('escapes the title text', () => { + el.innerHTML = createAction({ + title: '<script>alert("a")</script>', + }); + + expect( + el.querySelector('.flash-action').textContent.trim(), + ).toBe('<script>alert("a")</script>'); + }); + }); + + describe('createFlash', () => { + describe('no flash-container', () => { + it('does not add to the DOM', () => { + const el = flash('test'); + const flashEl = flash('testing'); + + expect( + flashEl, + ).toBeNull(); + expect( + document.querySelector('.flash-alert'), + ).toBeNull(); + }); + }); + + describe('with flash-container', () => { + beforeEach(() => { + document.body.innerHTML += ` + <div class="content-wrapper js-content-wrapper"> + <div class="flash-container"></div> + </div> + `; + }); + + afterEach(() => { + document.querySelector('.js-content-wrapper').remove(); + }); + + it('adds flash element into container', () => { + flash('test'); + + expect( + document.querySelector('.flash-alert'), + ).not.toBeNull(); + }); + + it('adds flash into specified parent', () => { + flash( + 'test', + 'alert', + document.querySelector('.content-wrapper'), + ); + + expect( + document.querySelector('.content-wrapper .flash-alert'), + ).not.toBeNull(); + }); + + it('adds container classes when inside content-wrapper', () => { + flash('test'); + + expect( + document.querySelector('.flash-text').className, + ).toBe('flash-text container-fluid container-limited') + }); + + it('does not add container when outside of content-wrapper', () => { + document.querySelector('.content-wrapper').className = 'js-content-wrapper'; + flash('test'); + + expect( + document.querySelector('.flash-text').className, + ).toBe('flash-text') + }); + + it('removes element after clicking', () => { + flash('test', 'alert', document, null, false); + + document.querySelector('.flash-alert').click(); + + expect( + document.querySelector('.flash-alert'), + ).toBeNull(); + }); + + describe('with actionConfig', () => { + it('adds action link', () => { + flash( + 'test', + 'alert', + document, + { + title: 'test', + }, + ); + + expect( + document.querySelector('.flash-action'), + ).not.toBeNull(); + }); + + it('calls actionConfig clickHandler on click', () => { + const actionConfig = { + title: 'test', + clickHandler: jasmine.createSpy('actionConfig'), + }; + + flash( + 'test', + 'alert', + document, + actionConfig, + ); + + document.querySelector('.flash-action').click(); + + expect( + actionConfig.clickHandler, + ).toHaveBeenCalled(); + }); + }); + }); + }); +}); |