debian-mirror-gitlab/spec/frontend/flash_spec.js

343 lines
9.2 KiB
JavaScript
Raw Normal View History

2020-10-24 23:57:45 +05:30
import createFlash, {
deprecatedCreateFlash,
createFlashEl,
createAction,
hideFlash,
removeFlashClickListener,
} from '~/flash';
2018-03-17 18:26:18 +05:30
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');
2018-12-13 13:39:08 +05:30
expect(el.querySelector('.flash-alert')).not.toBeNull();
2018-03-17 18:26:18 +05:30
});
it('escapes text', () => {
el.innerHTML = createFlashEl('<script>alert("a");</script>', 'alert');
2018-12-13 13:39:08 +05:30
expect(el.querySelector('.flash-text').textContent.trim()).toBe(
'<script>alert("a");</script>',
);
2018-03-17 18:26:18 +05:30
});
});
describe('hideFlash', () => {
let el;
beforeEach(() => {
el = document.createElement('div');
el.className = 'js-testing';
});
it('sets transition style', () => {
hideFlash(el);
2020-05-24 23:13:21 +05:30
expect(el.style.transition).toBe('opacity 0.15s');
2018-03-17 18:26:18 +05:30
});
it('sets opacity style', () => {
hideFlash(el);
2018-12-13 13:39:08 +05:30
expect(el.style.opacity).toBe('0');
2018-03-17 18:26:18 +05:30
});
it('does not set styles when fadeTransition is false', () => {
hideFlash(el, false);
2018-12-13 13:39:08 +05:30
expect(el.style.opacity).toBe('');
2020-05-24 23:13:21 +05:30
expect(el.style.transition).toBeFalsy();
2018-03-17 18:26:18 +05:30
});
it('removes element after transitionend', () => {
document.body.appendChild(el);
hideFlash(el);
el.dispatchEvent(new Event('transitionend'));
2018-12-13 13:39:08 +05:30
expect(document.querySelector('.js-testing')).toBeNull();
2018-03-17 18:26:18 +05:30
});
it('calls event listener callback once', () => {
2020-05-24 23:13:21 +05:30
jest.spyOn(el, 'remove');
2018-03-17 18:26:18 +05:30
document.body.appendChild(el);
hideFlash(el);
el.dispatchEvent(new Event('transitionend'));
el.dispatchEvent(new Event('transitionend'));
2020-05-24 23:13:21 +05:30
expect(el.remove.mock.calls.length).toBe(1);
2018-03-17 18:26:18 +05:30
});
});
describe('createAction', () => {
let el;
beforeEach(() => {
el = document.createElement('div');
});
it('creates link with href', () => {
el.innerHTML = createAction({
href: 'testing',
title: 'test',
});
2018-12-13 13:39:08 +05:30
expect(el.querySelector('.flash-action').href).toContain('testing');
2018-03-17 18:26:18 +05:30
});
it('uses hash as href when no href is present', () => {
el.innerHTML = createAction({
title: 'test',
});
2018-12-13 13:39:08 +05:30
expect(el.querySelector('.flash-action').href).toContain('#');
2018-03-17 18:26:18 +05:30
});
it('adds role when no href is present', () => {
el.innerHTML = createAction({
title: 'test',
});
2018-12-13 13:39:08 +05:30
expect(el.querySelector('.flash-action').getAttribute('role')).toBe('button');
2018-03-17 18:26:18 +05:30
});
it('escapes the title text', () => {
el.innerHTML = createAction({
title: '<script>alert("a")</script>',
});
2018-12-13 13:39:08 +05:30
expect(el.querySelector('.flash-action').textContent.trim()).toBe(
'<script>alert("a")</script>',
);
2018-03-17 18:26:18 +05:30
});
});
2020-10-24 23:57:45 +05:30
describe('deprecatedCreateFlash', () => {
2018-03-17 18:26:18 +05:30
describe('no flash-container', () => {
it('does not add to the DOM', () => {
2020-10-24 23:57:45 +05:30
const flashEl = deprecatedCreateFlash('testing');
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
expect(flashEl).toBeNull();
expect(document.querySelector('.flash-alert')).toBeNull();
2018-03-17 18:26:18 +05:30
});
});
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', () => {
2020-10-24 23:57:45 +05:30
deprecatedCreateFlash('test', 'alert', document, null, false, true);
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
expect(document.querySelector('.flash-alert')).not.toBeNull();
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
expect(document.body.className).toContain('flash-shown');
2018-03-17 18:26:18 +05:30
});
it('adds flash into specified parent', () => {
2020-10-24 23:57:45 +05:30
deprecatedCreateFlash('test', 'alert', document.querySelector('.content-wrapper'));
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
expect(document.querySelector('.content-wrapper .flash-alert')).not.toBeNull();
2018-03-17 18:26:18 +05:30
});
it('adds container classes when inside content-wrapper', () => {
2020-10-24 23:57:45 +05:30
deprecatedCreateFlash('test');
2018-03-17 18:26:18 +05:30
2019-12-04 20:38:33 +05:30
expect(document.querySelector('.flash-text').className).toBe('flash-text');
2018-03-17 18:26:18 +05:30
});
it('does not add container when outside of content-wrapper', () => {
document.querySelector('.content-wrapper').className = 'js-content-wrapper';
2020-10-24 23:57:45 +05:30
deprecatedCreateFlash('test');
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
expect(document.querySelector('.flash-text').className.trim()).toContain('flash-text');
2018-03-17 18:26:18 +05:30
});
it('removes element after clicking', () => {
2020-10-24 23:57:45 +05:30
deprecatedCreateFlash('test', 'alert', document, null, false, true);
2018-03-17 18:26:18 +05:30
2019-12-21 20:55:43 +05:30
document.querySelector('.flash-alert .js-close-icon').click();
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
expect(document.querySelector('.flash-alert')).toBeNull();
2018-03-17 18:26:18 +05:30
2018-12-13 13:39:08 +05:30
expect(document.body.className).not.toContain('flash-shown');
2018-03-17 18:26:18 +05:30
});
describe('with actionConfig', () => {
it('adds action link', () => {
2020-10-24 23:57:45 +05:30
deprecatedCreateFlash('test', 'alert', document, {
title: 'test',
});
expect(document.querySelector('.flash-action')).not.toBeNull();
});
it('calls actionConfig clickHandler on click', () => {
const actionConfig = {
2018-12-13 13:39:08 +05:30
title: 'test',
2020-10-24 23:57:45 +05:30
clickHandler: jest.fn(),
};
deprecatedCreateFlash('test', 'alert', document, actionConfig);
document.querySelector('.flash-action').click();
expect(actionConfig.clickHandler).toHaveBeenCalled();
});
});
});
});
describe('createFlash', () => {
const message = 'test';
const type = 'alert';
const parent = document;
const fadeTransition = false;
const addBodyClass = true;
const defaultParams = {
message,
type,
parent,
actionConfig: null,
fadeTransition,
addBodyClass,
};
describe('no flash-container', () => {
it('does not add to the DOM', () => {
const flashEl = createFlash({ message });
expect(flashEl).toBeNull();
expect(document.querySelector('.flash-alert')).toBeNull();
});
});
describe('with flash-container', () => {
beforeEach(() => {
setFixtures(
'<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', () => {
createFlash({ ...defaultParams });
expect(document.querySelector('.flash-alert')).not.toBeNull();
expect(document.body.className).toContain('flash-shown');
});
it('adds flash into specified parent', () => {
createFlash({ ...defaultParams, parent: document.querySelector('.content-wrapper') });
expect(document.querySelector('.content-wrapper .flash-alert')).not.toBeNull();
expect(document.querySelector('.content-wrapper').innerText.trim()).toEqual(message);
});
it('adds container classes when inside content-wrapper', () => {
createFlash(defaultParams);
expect(document.querySelector('.flash-text').className).toBe('flash-text');
expect(document.querySelector('.content-wrapper').innerText.trim()).toEqual(message);
});
it('does not add container when outside of content-wrapper', () => {
document.querySelector('.content-wrapper').className = 'js-content-wrapper';
createFlash(defaultParams);
expect(document.querySelector('.flash-text').className.trim()).toContain('flash-text');
});
it('removes element after clicking', () => {
createFlash({ ...defaultParams });
document.querySelector('.flash-alert .js-close-icon').click();
expect(document.querySelector('.flash-alert')).toBeNull();
expect(document.body.className).not.toContain('flash-shown');
});
describe('with actionConfig', () => {
it('adds action link', () => {
createFlash({
...defaultParams,
actionConfig: {
title: 'test',
},
2018-12-13 13:39:08 +05:30
});
expect(document.querySelector('.flash-action')).not.toBeNull();
2018-03-17 18:26:18 +05:30
});
it('calls actionConfig clickHandler on click', () => {
const actionConfig = {
title: 'test',
2020-05-24 23:13:21 +05:30
clickHandler: jest.fn(),
2018-03-17 18:26:18 +05:30
};
2020-10-24 23:57:45 +05:30
createFlash({ ...defaultParams, actionConfig });
2018-03-17 18:26:18 +05:30
document.querySelector('.flash-action').click();
2018-12-13 13:39:08 +05:30
expect(actionConfig.clickHandler).toHaveBeenCalled();
2018-03-17 18:26:18 +05:30
});
});
});
});
describe('removeFlashClickListener', () => {
beforeEach(() => {
2019-12-21 20:55:43 +05:30
document.body.innerHTML += `
<div class="flash-container">
<div class="flash">
<div class="close-icon js-close-icon"></div>
</div>
</div>
`;
2018-03-17 18:26:18 +05:30
});
2021-03-08 18:12:59 +05:30
it('removes global flash on click', (done) => {
2018-03-17 18:26:18 +05:30
const flashEl = document.querySelector('.flash');
removeFlashClickListener(flashEl, false);
2019-12-21 20:55:43 +05:30
flashEl.querySelector('.js-close-icon').click();
2018-03-17 18:26:18 +05:30
2020-05-24 23:13:21 +05:30
setImmediate(() => {
2018-03-17 18:26:18 +05:30
expect(document.querySelector('.flash')).toBeNull();
done();
});
});
});
});