flash tests
added back in documentation comment to flash file
This commit is contained in:
parent
d668294f28
commit
bbf7ea24a5
|
@ -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;
|
||||
|
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
||||
});
|
Loading…
Reference in New Issue