Commit bbf7ea24 authored by Phil Hughes's avatar Phil Hughes

flash tests

added back in documentation comment to flash file
parent d668294f
import _ from 'underscore'; import _ from 'underscore';
const hideFlash = (flashEl) => { const hideFlash = (flashEl, fadeTransition = true) => {
Object.assign(flashEl.style, { if (fadeTransition) {
transition: 'opacity .3s', Object.assign(flashEl.style, {
opacity: '0', transition: 'opacity .3s',
}); opacity: '0',
});
}
flashEl.addEventListener('transitionend', () => { flashEl.addEventListener('transitionend', () => {
flashEl.remove(); flashEl.remove();
}, { }, {
once: true, once: true,
}); });
if (!fadeTransition) flashEl.dispatchEvent(new Event('transitionend'));
}; };
const createAction = config => ` const createAction = config => `
<a <a
href="${config.href || '#'}" href="${config.href || '#'}"
class="flash-action" class="flash-action"
${config.href ? 'role="button"' : ''} ${config.href ? '' : 'role="button"'}
> >
${_.escape(config.title)} ${_.escape(config.title)}
</a> </a>
...@@ -35,7 +39,27 @@ const createFlashEl = (message, type) => ` ...@@ -35,7 +39,27 @@ const createFlashEl = (message, type) => `
</div> </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'); const flashContainer = parent.querySelector('.flash-container');
if (!flashContainer) return null; if (!flashContainer) return null;
...@@ -43,7 +67,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum ...@@ -43,7 +67,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum
flashContainer.innerHTML = createFlashEl(message, type); flashContainer.innerHTML = createFlashEl(message, type);
const flashEl = flashContainer.querySelector(`.flash-${type}`); const flashEl = flashContainer.querySelector(`.flash-${type}`);
flashEl.addEventListener('click', () => hideFlash(flashEl)); flashEl.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
if (actionConfig) { if (actionConfig) {
flashEl.innerHTML += createAction(actionConfig); flashEl.innerHTML += createAction(actionConfig);
...@@ -55,9 +79,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum ...@@ -55,9 +79,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum
if (flashContainer.parentNode.classList.contains('content-wrapper')) { if (flashContainer.parentNode.classList.contains('content-wrapper')) {
const flashText = flashEl.querySelector('.flash-text'); const flashText = flashEl.querySelector('.flash-text');
flashText.className = `${flashText.className} container-fluid container-limited`;
flashText.classList.add('container-fluid');
flashText.classList.add('container-limited');
} }
flashContainer.style.display = 'block'; flashContainer.style.display = 'block';
...@@ -68,6 +90,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum ...@@ -68,6 +90,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum
export { export {
createFlash as default, createFlash as default,
createFlashEl, createFlashEl,
createAction,
hideFlash, hideFlash,
}; };
window.Flash = createFlash; window.Flash = createFlash;
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();
});
});
});
});
});
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