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

277 lines
8.4 KiB
JavaScript
Raw Normal View History

2022-01-26 12:08:38 +05:30
import * as Sentry from '@sentry/browser';
2022-07-16 23:28:13 +05:30
import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
2023-05-27 22:25:52 +05:30
import { createAlert, VARIANT_WARNING } from '~/alert';
2018-03-17 18:26:18 +05:30
2022-01-26 12:08:38 +05:30
jest.mock('@sentry/browser');
2018-03-17 18:26:18 +05:30
2022-01-26 12:08:38 +05:30
describe('Flash', () => {
2023-03-04 22:38:38 +05:30
const findTextContent = (containerSelector = '.flash-container') =>
document.querySelector(containerSelector).textContent.replace(/\s+/g, ' ').trim();
2022-03-02 08:16:31 +05:30
describe('createAlert', () => {
const mockMessage = 'a message';
let alert;
describe('no flash-container', () => {
it('does not add to the DOM', () => {
alert = createAlert({ message: mockMessage });
expect(alert).toBeNull();
expect(document.querySelector('.gl-alert')).toBeNull();
});
});
describe('with flash-container', () => {
beforeEach(() => {
setHTMLFixture('<div class="flash-container"></div>');
});
afterEach(() => {
if (alert) {
alert.$destroy();
}
2022-07-16 23:28:13 +05:30
resetHTMLFixture();
2022-03-02 08:16:31 +05:30
});
it('adds alert element into the document by default', () => {
alert = createAlert({ message: mockMessage });
2023-03-04 22:38:38 +05:30
expect(findTextContent()).toBe(mockMessage);
2022-03-02 08:16:31 +05:30
expect(document.querySelector('.flash-container .gl-alert')).not.toBeNull();
});
it('adds flash of a warning type', () => {
alert = createAlert({ message: mockMessage, variant: VARIANT_WARNING });
expect(
document.querySelector('.flash-container .gl-alert.gl-alert-warning'),
).not.toBeNull();
});
it('escapes text', () => {
alert = createAlert({ message: '<script>alert("a");</script>' });
const html = document.querySelector('.flash-container').innerHTML;
expect(html).toContain('&lt;script&gt;alert("a");&lt;/script&gt;');
expect(html).not.toContain('<script>alert("a");</script>');
});
it('adds alert into specified container', () => {
setHTMLFixture(`
<div class="my-alert-container"></div>
<div class="my-other-container"></div>
`);
alert = createAlert({ message: mockMessage, containerSelector: '.my-alert-container' });
expect(document.querySelector('.my-alert-container .gl-alert')).not.toBeNull();
expect(document.querySelector('.my-alert-container').innerText.trim()).toBe(mockMessage);
expect(document.querySelector('.my-other-container .gl-alert')).toBeNull();
expect(document.querySelector('.my-other-container').innerText.trim()).toBe('');
});
it('adds alert into specified parent', () => {
setHTMLFixture(`
<div id="my-parent">
<div class="flash-container"></div>
</div>
<div id="my-other-parent">
<div class="flash-container"></div>
</div>
`);
alert = createAlert({ message: mockMessage, parent: document.getElementById('my-parent') });
expect(document.querySelector('#my-parent .flash-container .gl-alert')).not.toBeNull();
expect(document.querySelector('#my-parent .flash-container').innerText.trim()).toBe(
mockMessage,
);
expect(document.querySelector('#my-other-parent .flash-container .gl-alert')).toBeNull();
expect(document.querySelector('#my-other-parent .flash-container').innerText.trim()).toBe(
'',
);
});
it('removes element after clicking', () => {
alert = createAlert({ message: mockMessage });
expect(document.querySelector('.flash-container .gl-alert')).not.toBeNull();
document.querySelector('.gl-dismiss-btn').click();
expect(document.querySelector('.flash-container .gl-alert')).toBeNull();
});
it('does not capture error using Sentry', () => {
alert = createAlert({
message: mockMessage,
captureError: false,
error: new Error('Error!'),
});
expect(Sentry.captureException).not.toHaveBeenCalled();
});
it('captures error using Sentry', () => {
alert = createAlert({
message: mockMessage,
captureError: true,
error: new Error('Error!'),
});
expect(Sentry.captureException).toHaveBeenCalledWith(expect.any(Error));
expect(Sentry.captureException).toHaveBeenCalledWith(
expect.objectContaining({
message: 'Error!',
}),
);
});
2023-01-13 00:05:48 +05:30
describe('with title', () => {
const mockTitle = 'my title';
it('shows title and message', () => {
createAlert({
title: mockTitle,
message: mockMessage,
});
2023-03-04 22:38:38 +05:30
expect(findTextContent()).toBe(`${mockTitle} ${mockMessage}`);
2023-01-13 00:05:48 +05:30
});
});
2022-03-02 08:16:31 +05:30
describe('with buttons', () => {
const findAlertAction = () => document.querySelector('.flash-container .gl-alert-action');
it('adds primary button', () => {
alert = createAlert({
message: mockMessage,
primaryButton: {
text: 'Ok',
},
});
expect(findAlertAction().textContent.trim()).toBe('Ok');
});
it('creates link with href', () => {
alert = createAlert({
message: mockMessage,
primaryButton: {
link: '/url',
text: 'Ok',
},
});
const action = findAlertAction();
expect(action.textContent.trim()).toBe('Ok');
expect(action.nodeName).toBe('A');
expect(action.getAttribute('href')).toBe('/url');
});
it('create button as href when no href is present', () => {
alert = createAlert({
message: mockMessage,
primaryButton: {
text: 'Ok',
},
});
const action = findAlertAction();
expect(action.nodeName).toBe('BUTTON');
expect(action.getAttribute('href')).toBe(null);
});
it('escapes the title text', () => {
alert = createAlert({
message: mockMessage,
primaryButton: {
text: '<script>alert("a")</script>',
},
});
const html = findAlertAction().innerHTML;
expect(html).toContain('&lt;script&gt;alert("a")&lt;/script&gt;');
expect(html).not.toContain('<script>alert("a")</script>');
});
it('calls actionConfig clickHandler on click', () => {
const clickHandler = jest.fn();
alert = createAlert({
message: mockMessage,
primaryButton: {
text: 'Ok',
clickHandler,
},
});
expect(clickHandler).toHaveBeenCalledTimes(0);
findAlertAction().click();
expect(clickHandler).toHaveBeenCalledTimes(1);
expect(clickHandler).toHaveBeenCalledWith(expect.any(MouseEvent));
});
});
describe('Alert API', () => {
describe('dismiss', () => {
it('dismiss programmatically with .dismiss()', () => {
expect(document.querySelector('.gl-alert')).toBeNull();
alert = createAlert({ message: mockMessage });
expect(document.querySelector('.gl-alert')).not.toBeNull();
alert.dismiss();
expect(document.querySelector('.gl-alert')).toBeNull();
});
2022-11-25 23:54:43 +05:30
it('does not crash if calling .dismiss() twice', () => {
alert = createAlert({ message: mockMessage });
alert.dismiss();
expect(() => alert.dismiss()).not.toThrow();
});
2022-03-02 08:16:31 +05:30
it('calls onDismiss when dismissed', () => {
const dismissHandler = jest.fn();
alert = createAlert({ message: mockMessage, onDismiss: dismissHandler });
expect(dismissHandler).toHaveBeenCalledTimes(0);
alert.dismiss();
expect(dismissHandler).toHaveBeenCalledTimes(1);
});
});
});
2023-03-04 22:38:38 +05:30
describe('when called multiple times', () => {
it('clears previous alerts', () => {
createAlert({ message: 'message 1' });
createAlert({ message: 'message 2' });
expect(findTextContent()).toBe('message 2');
});
it('preserves alerts when `preservePrevious` is true', () => {
createAlert({ message: 'message 1' });
createAlert({ message: 'message 2', preservePrevious: true });
expect(findTextContent()).toBe('message 1 message 2');
});
});
2022-03-02 08:16:31 +05:30
});
});
2018-03-17 18:26:18 +05:30
});