gitlab-org--gitlab-foss/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js

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);
    });
  });
});