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,8 +357,12 @@ describe('Flash', () => {
   });
 
   describe('removeFlashClickListener', () => {
+    let el;
+
+    describe('with close icon', () => {
       beforeEach(() => {
-      document.body.innerHTML += `
+        el = document.createElement('div');
+        el.innerHTML = `
           <div class="flash-container">
             <div class="flash">
               <div class="close-icon js-close-icon"></div>
@@ -368,11 +372,9 @@ describe('Flash', () => {
       });
 
       it('removes global flash on click', (done) => {
-      const flashEl = document.querySelector('.flash');
+        removeFlashClickListener(el, false);
 
-      removeFlashClickListener(flashEl, false);
-
-      flashEl.querySelector('.js-close-icon').click();
+        el.querySelector('.js-close-icon').click();
 
         setImmediate(() => {
           expect(document.querySelector('.flash')).toBeNull();
@@ -381,4 +383,21 @@ describe('Flash', () => {
         });
       });
     });
+
+    describe('without close icon', () => {
+      beforeEach(() => {
+        el = document.createElement('div');
+        el.innerHTML = `
+          <div class="flash-container">
+            <div class="flash">
+            </div>
+          </div>
+        `;
+      });
+
+      it('does not throw', () => {
+        expect(() => removeFlashClickListener(el, false)).not.toThrow();
+      });
+    });
+  });
 });