1 files changed, 55 insertions, 10 deletions

diff --git a/spec/frontend/alert_handler_spec.js b/spec/frontend/alert_handler_spec.js
index ba2f4f24aa5..0cee28112a8 100644
--- a/spec/frontend/alert_handler_spec.js
+++ b/spec/frontend/alert_handler_spec.js
@@ -2,18 +2,26 @@ import { setHTMLFixture } from 'helpers/fixtures';
 import initAlertHandler from '~/alert_handler';
 
 describe('Alert Handler', () => {
-  const ALERT_SELECTOR = 'gl-alert';
-  const CLOSE_SELECTOR = 'gl-alert-dismiss';
-  const ALERT_HTML = `<div class="${ALERT_SELECTOR}"><button class="${CLOSE_SELECTOR}">Dismiss</button></div>`;
+  const ALERT_CLASS = 'gl-alert';
+  const BANNER_CLASS = 'gl-banner';
+  const DISMISS_CLASS = 'gl-alert-dismiss';
+  const DISMISS_LABEL = 'Dismiss';
 
-  const findFirstAlert = () => document.querySelector(`.${ALERT_SELECTOR}`);
-  const findAllAlerts = () => document.querySelectorAll(`.${ALERT_SELECTOR}`);
-  const findFirstCloseButton = () => document.querySelector(`.${CLOSE_SELECTOR}`);
+  const generateHtml = parentClass =>
+    `<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}`);
 
   describe('initAlertHandler', () => {
     describe('with one alert', () => {
       beforeEach(() => {
-        setHTMLFixture(ALERT_HTML);
+        setHTMLFixture(generateHtml(ALERT_CLASS));
         initAlertHandler();
       });
 
@@ -22,14 +30,14 @@ describe('Alert Handler', () => {
       });
 
       it('should dismiss the alert on click', () => {
-        findFirstCloseButton().click();
+        findFirstDismissButton().click();
         expect(findFirstAlert()).not.toExist();
       });
     });
 
     describe('with two alerts', () => {
       beforeEach(() => {
-        setHTMLFixture(ALERT_HTML + ALERT_HTML);
+        setHTMLFixture(generateHtml(ALERT_CLASS) + generateHtml(ALERT_CLASS));
         initAlertHandler();
       });
 
@@ -38,9 +46,46 @@ describe('Alert Handler', () => {
       });
 
       it('should dismiss only one alert on click', () => {
-        findFirstCloseButton().click();
+        findFirstDismissButton().click();
         expect(findAllAlerts()).toHaveLength(1);
       });
     });
+
+    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();
+      });
+    });
   });
 });