Merge branch 'fix-flash-setup-when-close-el-does-not-exist' into 'master'

Fix JavaScript initialization in readonly mode

See merge request gitlab-org/gitlab!62427

app/assets/javascripts/flash.js

@@ -60,7 +60,9 @@ const createFlashEl = (message, type) => `
 `;
 
 const removeFlashClickListener = (flashEl, fadeTransition) => {
-  getCloseEl(flashEl).addEventListener('click', () => hideFlash(flashEl, fadeTransition));
+  // There are some flash elements which do not have a closeEl.
+  // https://gitlab.com/gitlab-org/gitlab/blob/763426ef344488972eb63ea5be8744e0f8459e6b/ee/app/views/layouts/header/_read_only_banner.html.haml
+  getCloseEl(flashEl)?.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
 };
 
 /*

spec/frontend/flash_spec.js

@@ -357,27 +357,46 @@ describe('Flash', () => {
   });
 
   describe('removeFlashClickListener', () => {
-    beforeEach(() => {
-      document.body.innerHTML += `
-        <div class="flash-container">
-          <div class="flash">
-            <div class="close-icon js-close-icon"></div>
+    let el;
+
+    describe('with close icon', () => {
+      beforeEach(() => {
+        el = document.createElement('div');
+        el.innerHTML = `
+          <div class="flash-container">
+            <div class="flash">
+              <div class="close-icon js-close-icon"></div>
+            </div>
           </div>
-        </div>
-      `;
-    });
+        `;
+      });
 
-    it('removes global flash on click', (done) => {
-      const flashEl = document.querySelector('.flash');
+      it('removes global flash on click', (done) => {
+        removeFlashClickListener(el, false);
 
-      removeFlashClickListener(flashEl, false);
+        el.querySelector('.js-close-icon').click();
 
-      flashEl.querySelector('.js-close-icon').click();
+        setImmediate(() => {
+          expect(document.querySelector('.flash')).toBeNull();
 
-      setImmediate(() => {
-        expect(document.querySelector('.flash')).toBeNull();
+          done();
+        });
+      });
+    });
+
+    describe('without close icon', () => {
+      beforeEach(() => {
+        el = document.createElement('div');
+        el.innerHTML = `
+          <div class="flash-container">
+            <div class="flash">
+            </div>
+          </div>
+        `;
+      });
 
-        done();
+      it('does not throw', () => {
+        expect(() => removeFlashClickListener(el, false)).not.toThrow();
       });
     });
   });