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

92 lines
2.9 KiB
JavaScript
Raw Normal View History

2020-11-24 15:15:51 +05:30
import { setHTMLFixture } from 'helpers/fixtures';
import initAlertHandler from '~/alert_handler';
describe('Alert Handler', () => {
2021-01-03 14:25:43 +05:30
const ALERT_CLASS = 'gl-alert';
const BANNER_CLASS = 'gl-banner';
const DISMISS_CLASS = 'gl-alert-dismiss';
const DISMISS_LABEL = 'Dismiss';
2020-11-24 15:15:51 +05:30
2021-03-08 18:12:59 +05:30
const generateHtml = (parentClass) =>
2021-01-03 14:25:43 +05:30
`<div class="${parentClass}">
<button aria-label="${DISMISS_LABEL}">Dismiss</button>
</div>`;
const findFirstAlert = () => document.querySelector(`.${ALERT_CLASS}`);
const findFirstBanner = () => document.querySelector(`.${BANNER_CLASS}`);
const findAllAlerts = () => document.querySelectorAll(`.${ALERT_CLASS}`);
const findFirstDismissButton = () => document.querySelector(`[aria-label="${DISMISS_LABEL}"]`);
const findFirstDismissButtonByClass = () => document.querySelector(`.${DISMISS_CLASS}`);
2020-11-24 15:15:51 +05:30
describe('initAlertHandler', () => {
describe('with one alert', () => {
beforeEach(() => {
2021-01-03 14:25:43 +05:30
setHTMLFixture(generateHtml(ALERT_CLASS));
2020-11-24 15:15:51 +05:30
initAlertHandler();
});
it('should render the alert', () => {
expect(findFirstAlert()).toExist();
});
it('should dismiss the alert on click', () => {
2021-01-03 14:25:43 +05:30
findFirstDismissButton().click();
2020-11-24 15:15:51 +05:30
expect(findFirstAlert()).not.toExist();
});
});
describe('with two alerts', () => {
beforeEach(() => {
2021-01-03 14:25:43 +05:30
setHTMLFixture(generateHtml(ALERT_CLASS) + generateHtml(ALERT_CLASS));
2020-11-24 15:15:51 +05:30
initAlertHandler();
});
it('should render two alerts', () => {
expect(findAllAlerts()).toHaveLength(2);
});
it('should dismiss only one alert on click', () => {
2021-01-03 14:25:43 +05:30
findFirstDismissButton().click();
2020-11-24 15:15:51 +05:30
expect(findAllAlerts()).toHaveLength(1);
});
});
2021-01-03 14:25:43 +05:30
describe('with a dismissible banner', () => {
beforeEach(() => {
setHTMLFixture(generateHtml(BANNER_CLASS));
initAlertHandler();
});
it('should render the banner', () => {
expect(findFirstBanner()).toExist();
});
it('should dismiss the banner on click', () => {
findFirstDismissButton().click();
expect(findFirstBanner()).not.toExist();
});
});
// Dismiss buttons *should* have the correct aria labels, but some of them won't
// because legacy code isn't always a11y compliant.
// This tests that the fallback for the incorrectly labelled buttons works.
describe('with a mislabelled dismiss button', () => {
beforeEach(() => {
setHTMLFixture(`<div class="${ALERT_CLASS}">
<button class="${DISMISS_CLASS}">Dismiss</button>
</div>`);
initAlertHandler();
});
it('should render the banner', () => {
expect(findFirstAlert()).toExist();
});
it('should dismiss the banner on click', () => {
findFirstDismissButtonByClass().click();
expect(findFirstAlert()).not.toExist();
});
});
2020-11-24 15:15:51 +05:30
});
});