fixed notes specs

changed how the container class is added onto the text element
more specs

3 files changed, 33 insertions, 13 deletions

diff --git a/app/assets/javascripts/flash.js b/app/assets/javascripts/flash.js
index 8ac2b96a22d..bc5cd818e1c 100644
--- a/app/assets/javascripts/flash.js
+++ b/app/assets/javascripts/flash.js
@@ -12,6 +12,7 @@ const hideFlash = (flashEl, fadeTransition = true) => {
     flashEl.remove();
   }, {
     once: true,
+    passive: true,
   });
 
   if (!fadeTransition) flashEl.dispatchEvent(new Event('transitionend'));
@@ -27,12 +28,12 @@ const createAction = config => `
   </a>
 `;
 
-const createFlashEl = (message, type) => `
+const createFlashEl = (message, type, isInContentWrapper = false) => `
   <div
     class="flash-${type}"
   >
     <div
-      class="flash-text"
+      class="flash-text ${isInContentWrapper ? 'container-fluid container-limited' : ''}"
     >
       ${_.escape(message)}
     </div>
@@ -64,7 +65,9 @@ const createFlash = function createFlash(
 
   if (!flashContainer) return null;
 
-  flashContainer.innerHTML = createFlashEl(message, type);
+  const isInContentWrapper = flashContainer.parentNode.classList.contains('content-wrapper');
+
+  flashContainer.innerHTML = createFlashEl(message, type, isInContentWrapper);
 
   const flashEl = flashContainer.querySelector(`.flash-${type}`);
   flashEl.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
@@ -77,11 +80,6 @@ const createFlash = function createFlash(
     }
   }
 
-  if (flashContainer.parentNode.classList.contains('content-wrapper')) {
-    const flashText = flashEl.querySelector('.flash-text');
-    flashText.className = `${flashText.className} container-fluid container-limited`;
-  }
-
   flashContainer.style.display = 'block';
 
   return flashContainer;
diff --git a/app/assets/javascripts/notes.js b/app/assets/javascripts/notes.js
index dafbfb59c99..cf7322ba1da 100644
--- a/app/assets/javascripts/notes.js
+++ b/app/assets/javascripts/notes.js
@@ -1213,13 +1213,13 @@ export default class Notes {
   }
 
   addFlash(...flashParams) {
-    this.flashInstance = new Flash(...flashParams);
+    this.flashContainer = new Flash(...flashParams);
   }
 
   clearFlash() {
-    if (this.flashInstance && this.flashInstance.flashContainer) {
-      this.flashInstance.flashContainer.hide();
-      this.flashInstance = null;
+    if (this.flashContainer) {
+      this.flashContainer.style.display = 'none';
+      this.flashContainer = null;
     }
   }
 
diff --git a/spec/javascripts/flash_spec.js b/spec/javascripts/flash_spec.js
index 66cc76ee626..060ffaa339b 100644
--- a/spec/javascripts/flash_spec.js
+++ b/spec/javascripts/flash_spec.js
@@ -31,6 +31,17 @@ describe('Flash', () => {
         el.querySelector('.flash-text').textContent.trim(),
       ).toBe('<script>alert("a");</script>');
     });
+
+    it('adds container classes when inside content wrapper', () => {
+      el.innerHTML = createFlashEl('testing', 'alert', true);
+
+      expect(
+        el.querySelector('.flash-text').classList.contains('container-fluid'),
+      ).toBeTruthy();
+      expect(
+        el.querySelector('.flash-text').classList.contains('container-limited'),
+      ).toBeTruthy();
+    });
   });
 
   describe('hideFlash', () => {
@@ -57,6 +68,17 @@ describe('Flash', () => {
       ).toBe('0');
     });
 
+    it('does not set styles when fadeTransition is false', () => {
+      hideFlash(el, false);
+
+      expect(
+        el.style.opacity,
+      ).toBe('');
+      expect(
+        el.style.transition,
+      ).toBe('');
+    });
+
     it('removes element after transitionend', () => {
       document.body.appendChild(el);
 
@@ -192,7 +214,7 @@ describe('Flash', () => {
         flash('test');
 
         expect(
-          document.querySelector('.flash-text').className,
+          document.querySelector('.flash-text').className.trim(),
         ).toBe('flash-text');
       });