Add feature highlight helper spec

2 files changed, 222 insertions, 1 deletions

diff --git a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
index c9e0fbfa133..9f741355cd7 100644
--- a/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
+++ b/app/assets/javascripts/feature_highlight/feature_highlight_helper.js
@@ -50,7 +50,8 @@ export const setupDismissButton = function setupDismissButton() {
   const popoverId = this.getAttribute('aria-describedby');
   const cookieId = this.dataset.highlight;
   const $popover = $(this);
+  const dismissWrapper = dismiss.bind($popover, cookieId);
 
   $(`#${popoverId} .dismiss-feature-highlight`)
-    .on('click', dismiss.bind($popover, cookieId));
+    .on('click', dismissWrapper);
 };
diff --git a/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js b/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js
new file mode 100644
index 00000000000..c9ed807614e
--- /dev/null
+++ b/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js
@@ -0,0 +1,220 @@
+
+import Cookies from 'js-cookie';
+import {
+  getCookieName,
+  getSelector,
+  showPopover,
+  hidePopover,
+  dismiss,
+  mouseleave,
+  mouseenter,
+  setupDismissButton,
+} from '~/feature_highlight/feature_highlight_helper';
+
+describe('feature highlight helper', () => {
+  describe('getCookieName', () => {
+    it('returns `feature-highlighted-` prefix', () => {
+      const cookieId = 'cookieId';
+      expect(getCookieName(cookieId)).toEqual(`feature-highlighted-${cookieId}`);
+    });
+  });
+
+  describe('getSelector', () => {
+    it('returns js-feature-highlight selector', () => {
+      const highlightId = 'highlightId';
+      expect(getSelector(highlightId)).toEqual(`.js-feature-highlight[data-highlight=${highlightId}]`);
+    });
+  });
+
+  describe('showPopover', () => {
+    it('returns true when popover is shown', () => {
+      const context = {
+        hasClass: () => false,
+        popover: () => {},
+        addClass: () => {},
+      };
+
+      expect(showPopover.call(context)).toEqual(true);
+    });
+
+    it('returns false when popover is already shown', () => {
+      const context = {
+        hasClass: () => true,
+      };
+
+      expect(showPopover.call(context)).toEqual(false);
+    });
+
+    it('shows popover', (done) => {
+      const context = {
+        hasClass: () => false,
+        popover: () => {},
+        addClass: () => {},
+      };
+
+      spyOn(context, 'popover').and.callFake((method) => {
+        expect(method).toEqual('show');
+        done();
+      });
+
+      showPopover.call(context);
+    });
+
+    it('adds disable-animation and js-popover-show class', (done) => {
+      const context = {
+        hasClass: () => false,
+        popover: () => {},
+        addClass: () => {},
+      };
+
+      spyOn(context, 'addClass').and.callFake((classNames) => {
+        expect(classNames).toEqual('disable-animation js-popover-show');
+        done();
+      });
+
+      showPopover.call(context);
+    });
+  });
+
+  describe('hidePopover', () => {
+    it('returns true when popover is hidden', () => {
+      const context = {
+        hasClass: () => true,
+        popover: () => {},
+        removeClass: () => {},
+      };
+
+      expect(hidePopover.call(context)).toEqual(true);
+    });
+
+    it('returns false when popover is already hidden', () => {
+      const context = {
+        hasClass: () => false,
+      };
+
+      expect(hidePopover.call(context)).toEqual(false);
+    });
+
+    it('hides popover', (done) => {
+      const context = {
+        hasClass: () => true,
+        popover: () => {},
+        removeClass: () => {},
+      };
+
+      spyOn(context, 'popover').and.callFake((method) => {
+        expect(method).toEqual('hide');
+        done();
+      });
+
+      hidePopover.call(context);
+    });
+
+    it('removes disable-animation and js-popover-show class', (done) => {
+      const context = {
+        hasClass: () => true,
+        popover: () => {},
+        removeClass: () => {},
+      };
+
+      spyOn(context, 'removeClass').and.callFake((classNames) => {
+        expect(classNames).toEqual('disable-animation js-popover-show');
+        done();
+      });
+
+      hidePopover.call(context);
+    });
+  });
+
+  describe('dismiss', () => {
+    const context = {
+      hide: () => {},
+    };
+
+    beforeEach(() => {
+      spyOn(Cookies, 'set').and.callFake(() => {});
+      spyOn(hidePopover, 'call').and.callFake(() => {});
+      spyOn(context, 'hide').and.callFake(() => {});
+      dismiss.call(context);
+    });
+
+    it('sets cookie to true', () => {
+      expect(Cookies.set).toHaveBeenCalled();
+    });
+
+    it('calls hide popover', () => {
+      expect(hidePopover.call).toHaveBeenCalled();
+    });
+
+    it('calls hide', () => {
+      expect(context.hide).toHaveBeenCalled();
+    });
+  });
+
+  describe('mouseleave', () => {
+    it('calls hide popover if .popover:hover is false', () => {
+      const fakeJquery = {
+        length: 0,
+      };
+
+      spyOn($.fn, 'init').and.callFake(selector => (selector === '.popover:hover' ? fakeJquery : $.fn));
+      spyOn(hidePopover, 'call');
+      mouseleave();
+      expect(hidePopover.call).toHaveBeenCalled();
+    });
+
+    it('does not call hide popover if .popover:hover is true', () => {
+      const fakeJquery = {
+        length: 1,
+      };
+
+      spyOn($.fn, 'init').and.callFake(selector => (selector === '.popover:hover' ? fakeJquery : $.fn));
+      spyOn(hidePopover, 'call');
+      mouseleave();
+      expect(hidePopover.call).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('mouseenter', () => {
+    const context = {};
+
+    it('shows popover', () => {
+      spyOn(showPopover, 'call').and.returnValue(false);
+      mouseenter.call(context);
+      expect(showPopover.call).toHaveBeenCalled();
+    });
+
+    it('registers mouseleave event if popover is showed', (done) => {
+      spyOn(showPopover, 'call').and.returnValue(true);
+      spyOn($.fn, 'on').and.callFake((eventName) => {
+        expect(eventName).toEqual('mouseleave');
+        done();
+      });
+      mouseenter.call(context);
+    });
+
+    it('does not register mouseleave event if popover is not showed', () => {
+      spyOn(showPopover, 'call').and.returnValue(false);
+      const spy = spyOn($.fn, 'on').and.callFake(() => {});
+      mouseenter.call(context);
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('setupDismissButton', () => {
+    it('registers click event callback', (done) => {
+      const context = {
+        getAttribute: () => 'popoverId',
+        dataset: {
+          highlight: 'cookieId',
+        },
+      };
+
+      spyOn($.fn, 'on').and.callFake((event) => {
+        expect(event).toEqual('click');
+        done();
+      });
+      setupDismissButton.call(context);
+    });
+  });
+});