flash tests

added back in documentation comment to flash file

app/assets/javascripts/flash.js

 import _ from 'underscore';
 
-const hideFlash = (flashEl) => {
-  Object.assign(flashEl.style, {
-    transition: 'opacity .3s',
-    opacity: '0',
-  });
+const hideFlash = (flashEl, fadeTransition = true) => {
+  if (fadeTransition) {
+    Object.assign(flashEl.style, {
+      transition: 'opacity .3s',
+      opacity: '0',
+    });
+  }
 
   flashEl.addEventListener('transitionend', () => {
     flashEl.remove();
   }, {
     once: true,
   });
+
+  if (!fadeTransition) flashEl.dispatchEvent(new Event('transitionend'));
 };
 
 const createAction = config => `
   <a
     href="${config.href || '#'}"
     class="flash-action"
-    ${config.href ? 'role="button"' : ''}
+    ${config.href ? '' : 'role="button"'}
   >
     ${_.escape(config.title)}
   </a>
@@ -35,7 +39,27 @@ const createFlashEl = (message, type) => `
   </div>
 `;
 
-const createFlash = function createFlash(message, type = 'alert', parent = document, actionConfig = null) {
+/*
+ *  Flash banner supports different types of Flash configurations
+ *  along with ability to provide actionConfig which can be used to show
+ *  additional action or link on banner next to message
+ *
+ *  @param {String} message             Flash message text
+ *  @param {String} type                Type of Flash, it can be `notice` or `alert` (default)
+ *  @param {Object} parent              Reference to parent element under which Flash needs to appear
+ *  @param {Object} actonConfig         Map of config to show action on banner
+ *    @param {String} href              URL to which action config should point to (default: '#')
+ *    @param {String} title             Title of action
+ *    @param {Function} clickHandler    Method to call when action is clicked on
+ *  @param {Boolean} fadeTransition     Boolean to determine whether to fade the alert out
+ */
+const createFlash = function createFlash(
+  message,
+  type = 'alert',
+  parent = document,
+  actionConfig = null,
+  fadeTransition = true,
+) {
   const flashContainer = parent.querySelector('.flash-container');
 
   if (!flashContainer) return null;
@@ -43,7 +67,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum
   flashContainer.innerHTML = createFlashEl(message, type);
 
   const flashEl = flashContainer.querySelector(`.flash-${type}`);
-  flashEl.addEventListener('click', () => hideFlash(flashEl));
+  flashEl.addEventListener('click', () => hideFlash(flashEl, fadeTransition));
 
   if (actionConfig) {
     flashEl.innerHTML += createAction(actionConfig);
@@ -55,9 +79,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum
 
   if (flashContainer.parentNode.classList.contains('content-wrapper')) {
     const flashText = flashEl.querySelector('.flash-text');
-
-    flashText.classList.add('container-fluid');
-    flashText.classList.add('container-limited');
+    flashText.className = `${flashText.className} container-fluid container-limited`;
   }
 
   flashContainer.style.display = 'block';
@@ -68,6 +90,7 @@ const createFlash = function createFlash(message, type = 'alert', parent = docum
 export {
   createFlash as default,
   createFlashEl,
+  createAction,
   hideFlash,
 };
 window.Flash = createFlash;

spec/javascripts/flash_spec.js

+import flash, {
+  createFlashEl,
+  createAction,
+  hideFlash,
+} from '~/flash';
+
+describe('Flash', () => {
+  describe('createFlashEl', () => {
+    let el;
+
+    beforeEach(() => {
+      el = document.createElement('div');
+    });
+
+    afterEach(() => {
+      el.innerHTML = '';
+    });
+
+    it('creates flash element with type', () => {
+      el.innerHTML = createFlashEl('testing', 'alert');
+
+      expect(
+        el.querySelector('.flash-alert'),
+      ).not.toBeNull();
+    });
+
+    it('escapes text', () => {
+      el.innerHTML = createFlashEl('<script>alert("a");</script>', 'alert');
+
+      expect(
+        el.querySelector('.flash-text').textContent.trim(),
+      ).toBe('<script>alert("a");</script>');
+    });
+  });
+
+  describe('hideFlash', () => {
+    let el;
+
+    beforeEach(() => {
+      el = document.createElement('div');
+      el.className = 'js-testing';
+    });
+
+    it('sets transition style', () => {
+      hideFlash(el);
+
+      expect(
+        el.style.transition,
+      ).toBe('opacity 0.3s');
+    });
+
+    it('sets opacity style', () => {
+      hideFlash(el);
+
+      expect(
+        el.style.opacity,
+      ).toBe('0');
+    });
+
+    it('removes element after transitionend', () => {
+      document.body.appendChild(el);
+
+      hideFlash(el);
+      el.dispatchEvent(new Event('transitionend'));
+
+      expect(
+        document.querySelector('.js-testing'),
+      ).toBeNull();
+    });
+
+    it('calls event listener callback once', () => {
+      spyOn(el, 'remove').and.callThrough();
+      document.body.appendChild(el);
+
+      hideFlash(el);
+
+      el.dispatchEvent(new Event('transitionend'));
+      el.dispatchEvent(new Event('transitionend'));
+
+      expect(
+        el.remove.calls.count(),
+      ).toBe(1);
+    });
+  });
+
+  describe('createAction', () => {
+    let el;
+
+    beforeEach(() => {
+      el = document.createElement('div');
+    });
+
+    it('creates link with href', () => {
+      el.innerHTML = createAction({
+        href: 'testing',
+        title: 'test',
+      });
+
+      expect(
+        el.querySelector('.flash-action').href,
+      ).toContain('testing');
+    });
+
+    it('uses hash as href when no href is present', () => {
+      el.innerHTML = createAction({
+        title: 'test',
+      });
+
+      expect(
+        el.querySelector('.flash-action').href,
+      ).toContain('#');
+    });
+
+    it('adds role when no href is present', () => {
+      el.innerHTML = createAction({
+        title: 'test',
+      });
+
+      expect(
+        el.querySelector('.flash-action').getAttribute('role'),
+      ).toBe('button');
+    });
+
+    it('escapes the title text', () => {
+      el.innerHTML = createAction({
+        title: '<script>alert("a")</script>',
+      });
+
+      expect(
+        el.querySelector('.flash-action').textContent.trim(),
+      ).toBe('<script>alert("a")</script>');
+    });
+  });
+
+  describe('createFlash', () => {
+    describe('no flash-container', () => {
+      it('does not add to the DOM', () => {
+        const el = flash('test');
+        const flashEl = flash('testing');
+
+        expect(
+          flashEl,
+        ).toBeNull();
+        expect(
+          document.querySelector('.flash-alert'),
+        ).toBeNull();
+      });
+    });
+
+    describe('with flash-container', () => {
+      beforeEach(() => {
+        document.body.innerHTML += `
+          <div class="content-wrapper js-content-wrapper">
+            <div class="flash-container"></div>
+          </div>
+        `;
+      });
+
+      afterEach(() => {
+        document.querySelector('.js-content-wrapper').remove();
+      });
+
+      it('adds flash element into container', () => {
+        flash('test');
+
+        expect(
+          document.querySelector('.flash-alert'),
+        ).not.toBeNull();
+      });
+
+      it('adds flash into specified parent', () => {
+        flash(
+          'test',
+          'alert',
+          document.querySelector('.content-wrapper'),
+        );
+
+        expect(
+          document.querySelector('.content-wrapper .flash-alert'),
+        ).not.toBeNull();
+      });
+
+      it('adds container classes when inside content-wrapper', () => {
+        flash('test');
+
+        expect(
+          document.querySelector('.flash-text').className,
+        ).toBe('flash-text container-fluid container-limited')
+      });
+
+      it('does not add container when outside of content-wrapper', () => {
+        document.querySelector('.content-wrapper').className = 'js-content-wrapper';
+        flash('test');
+
+        expect(
+          document.querySelector('.flash-text').className,
+        ).toBe('flash-text')
+      });
+
+      it('removes element after clicking', () => {
+        flash('test', 'alert', document, null, false);
+
+        document.querySelector('.flash-alert').click();
+
+        expect(
+          document.querySelector('.flash-alert'),
+        ).toBeNull();
+      });
+
+      describe('with actionConfig', () => {
+        it('adds action link', () => {
+          flash(
+            'test',
+            'alert',
+            document,
+            {
+              title: 'test',
+            },
+          );
+
+          expect(
+            document.querySelector('.flash-action'),
+          ).not.toBeNull();
+        });
+
+        it('calls actionConfig clickHandler on click', () => {
+          const actionConfig = {
+            title: 'test',
+            clickHandler: jasmine.createSpy('actionConfig'),
+          };
+
+          flash(
+            'test',
+            'alert',
+            document,
+            actionConfig,
+          );
+
+          document.querySelector('.flash-action').click();
+
+          expect(
+            actionConfig.clickHandler,
+          ).toHaveBeenCalled();
+        });
+      });
+    });
+  });
+});