Add latest changes from gitlab-org/gitlab@master

1 files changed, 233 insertions, 0 deletions

diff --git a/spec/frontend/flash_spec.js b/spec/frontend/flash_spec.js
new file mode 100644
index 00000000000..fa7c1904339
--- /dev/null
+++ b/spec/frontend/flash_spec.js
@@ -0,0 +1,233 @@
+import flash, { createFlashEl, createAction, hideFlash, removeFlashClickListener } 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.15s');
+    });
+
+    it('sets opacity style', () => {
+      hideFlash(el);
+
+      expect(el.style.opacity).toBe('0');
+    });
+
+    it('does not set styles when fadeTransition is false', () => {
+      hideFlash(el, false);
+
+      expect(el.style.opacity).toBe('');
+      expect(el.style.transition).toBeFalsy();
+    });
+
+    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', () => {
+      jest.spyOn(el, 'remove');
+      document.body.appendChild(el);
+
+      hideFlash(el);
+
+      el.dispatchEvent(new Event('transitionend'));
+      el.dispatchEvent(new Event('transitionend'));
+
+      expect(el.remove.mock.calls.length).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 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', 'alert', document, null, false, true);
+
+        expect(document.querySelector('.flash-alert')).not.toBeNull();
+
+        expect(document.body.className).toContain('flash-shown');
+      });
+
+      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');
+      });
+
+      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.trim()).toContain('flash-text');
+      });
+
+      it('removes element after clicking', () => {
+        flash('test', 'alert', document, null, false, true);
+
+        document.querySelector('.flash-alert .js-close-icon').click();
+
+        expect(document.querySelector('.flash-alert')).toBeNull();
+
+        expect(document.body.className).not.toContain('flash-shown');
+      });
+
+      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: jest.fn(),
+          };
+
+          flash('test', 'alert', document, actionConfig);
+
+          document.querySelector('.flash-action').click();
+
+          expect(actionConfig.clickHandler).toHaveBeenCalled();
+        });
+      });
+    });
+  });
+
+  describe('removeFlashClickListener', () => {
+    beforeEach(() => {
+      document.body.innerHTML += `
+        <div class="flash-container">
+          <div class="flash">
+            <div class="close-icon js-close-icon"></div>
+          </div>
+        </div>
+      `;
+    });
+
+    it('removes global flash on click', done => {
+      const flashEl = document.querySelector('.flash');
+
+      removeFlashClickListener(flashEl, false);
+
+      flashEl.querySelector('.js-close-icon').click();
+
+      setImmediate(() => {
+        expect(document.querySelector('.flash')).toBeNull();
+
+        done();
+      });
+    });
+  });
+});