Restore feature_highlight code41672-emphasize-gke-cluster-to-new-users

From https://gitlab.com/gitlab-org/gitlab-ce/issues/36760

Was reverted in
https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/14373

3 files changed, 392 insertions, 0 deletions

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..34ffc7b1016
--- /dev/null
+++ b/spec/javascripts/feature_highlight/feature_highlight_helper_spec.js
@@ -0,0 +1,231 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import {
+  getSelector,
+  togglePopover,
+  dismiss,
+  mouseleave,
+  mouseenter,
+  inserted,
+} from '~/feature_highlight/feature_highlight_helper';
+import getSetTimeoutPromise from '../helpers/set_timeout_promise_helper';
+
+describe('feature highlight helper', () => {
+  describe('getSelector', () => {
+    it('returns js-feature-highlight selector', () => {
+      const highlightId = 'highlightId';
+      expect(getSelector(highlightId)).toEqual(`.js-feature-highlight[data-highlight=${highlightId}]`);
+    });
+  });
+
+  describe('togglePopover', () => {
+    describe('togglePopover(true)', () => {
+      it('returns true when popover is shown', () => {
+        const context = {
+          hasClass: () => false,
+          popover: () => {},
+          toggleClass: () => {},
+        };
+
+        expect(togglePopover.call(context, true)).toEqual(true);
+      });
+
+      it('returns false when popover is already shown', () => {
+        const context = {
+          hasClass: () => true,
+        };
+
+        expect(togglePopover.call(context, true)).toEqual(false);
+      });
+
+      it('shows popover', (done) => {
+        const context = {
+          hasClass: () => false,
+          popover: () => {},
+          toggleClass: () => {},
+        };
+
+        spyOn(context, 'popover').and.callFake((method) => {
+          expect(method).toEqual('show');
+          done();
+        });
+
+        togglePopover.call(context, true);
+      });
+
+      it('adds disable-animation and js-popover-show class', (done) => {
+        const context = {
+          hasClass: () => false,
+          popover: () => {},
+          toggleClass: () => {},
+        };
+
+        spyOn(context, 'toggleClass').and.callFake((classNames, show) => {
+          expect(classNames).toEqual('disable-animation js-popover-show');
+          expect(show).toEqual(true);
+          done();
+        });
+
+        togglePopover.call(context, true);
+      });
+    });
+
+    describe('togglePopover(false)', () => {
+      it('returns true when popover is hidden', () => {
+        const context = {
+          hasClass: () => true,
+          popover: () => {},
+          toggleClass: () => {},
+        };
+
+        expect(togglePopover.call(context, false)).toEqual(true);
+      });
+
+      it('returns false when popover is already hidden', () => {
+        const context = {
+          hasClass: () => false,
+        };
+
+        expect(togglePopover.call(context, false)).toEqual(false);
+      });
+
+      it('hides popover', (done) => {
+        const context = {
+          hasClass: () => true,
+          popover: () => {},
+          toggleClass: () => {},
+        };
+
+        spyOn(context, 'popover').and.callFake((method) => {
+          expect(method).toEqual('hide');
+          done();
+        });
+
+        togglePopover.call(context, false);
+      });
+
+      it('removes disable-animation and js-popover-show class', (done) => {
+        const context = {
+          hasClass: () => true,
+          popover: () => {},
+          toggleClass: () => {},
+        };
+
+        spyOn(context, 'toggleClass').and.callFake((classNames, show) => {
+          expect(classNames).toEqual('disable-animation js-popover-show');
+          expect(show).toEqual(false);
+          done();
+        });
+
+        togglePopover.call(context, false);
+      });
+    });
+  });
+
+  describe('dismiss', () => {
+    let mock;
+    const context = {
+      hide: () => {},
+      attr: () => '/-/callouts/dismiss',
+    };
+
+    beforeEach(() => {
+      mock = new MockAdapter(axios);
+
+      spyOn(togglePopover, 'call').and.callFake(() => {});
+      spyOn(context, 'hide').and.callFake(() => {});
+      dismiss.call(context);
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    it('calls persistent dismissal endpoint', (done) => {
+      const spy = jasmine.createSpy('dismiss-endpoint-hit');
+      mock.onPost('/-/callouts/dismiss').reply(spy);
+
+      getSetTimeoutPromise()
+        .then(() => {
+          expect(spy).toHaveBeenCalled();
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('calls hide popover', () => {
+      expect(togglePopover.call).toHaveBeenCalledWith(context, false);
+    });
+
+    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(togglePopover, 'call');
+      mouseleave();
+      expect(togglePopover.call).toHaveBeenCalledWith(jasmine.any(Object), false);
+    });
+
+    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(togglePopover, 'call');
+      mouseleave();
+      expect(togglePopover.call).not.toHaveBeenCalledWith(false);
+    });
+  });
+
+  describe('mouseenter', () => {
+    const context = {};
+
+    it('shows popover', () => {
+      spyOn(togglePopover, 'call').and.returnValue(false);
+      mouseenter.call(context);
+      expect(togglePopover.call).toHaveBeenCalledWith(jasmine.any(Object), true);
+    });
+
+    it('registers mouseleave event if popover is showed', (done) => {
+      spyOn(togglePopover, '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(togglePopover, 'call').and.returnValue(false);
+      const spy = spyOn($.fn, 'on').and.callFake(() => {});
+      mouseenter.call(context);
+      expect(spy).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('inserted', () => {
+    it('registers click event callback', (done) => {
+      const context = {
+        getAttribute: () => 'popoverId',
+        dataset: {
+          highlight: 'some-feature',
+        },
+      };
+
+      spyOn($.fn, 'on').and.callFake((event) => {
+        expect(event).toEqual('click');
+        done();
+      });
+      inserted.call(context);
+    });
+  });
+});
diff --git a/spec/javascripts/feature_highlight/feature_highlight_options_spec.js b/spec/javascripts/feature_highlight/feature_highlight_options_spec.js
new file mode 100644
index 00000000000..7f9425d8abe
--- /dev/null
+++ b/spec/javascripts/feature_highlight/feature_highlight_options_spec.js
@@ -0,0 +1,30 @@
+import domContentLoaded from '~/feature_highlight/feature_highlight_options';
+import bp from '~/breakpoints';
+
+describe('feature highlight options', () => {
+  describe('domContentLoaded', () => {
+    it('should not call highlightFeatures when breakpoint is xs', () => {
+      spyOn(bp, 'getBreakpointSize').and.returnValue('xs');
+
+      expect(domContentLoaded()).toBe(false);
+    });
+
+    it('should not call highlightFeatures when breakpoint is sm', () => {
+      spyOn(bp, 'getBreakpointSize').and.returnValue('sm');
+
+      expect(domContentLoaded()).toBe(false);
+    });
+
+    it('should not call highlightFeatures when breakpoint is md', () => {
+      spyOn(bp, 'getBreakpointSize').and.returnValue('md');
+
+      expect(domContentLoaded()).toBe(false);
+    });
+
+    it('should call highlightFeatures when breakpoint is lg', () => {
+      spyOn(bp, 'getBreakpointSize').and.returnValue('lg');
+
+      expect(domContentLoaded()).toBe(true);
+    });
+  });
+});
diff --git a/spec/javascripts/feature_highlight/feature_highlight_spec.js b/spec/javascripts/feature_highlight/feature_highlight_spec.js
new file mode 100644
index 00000000000..6e1b0429ab7
--- /dev/null
+++ b/spec/javascripts/feature_highlight/feature_highlight_spec.js
@@ -0,0 +1,131 @@
+import * as featureHighlightHelper from '~/feature_highlight/feature_highlight_helper';
+import * as featureHighlight from '~/feature_highlight/feature_highlight';
+
+describe('feature highlight', () => {
+  beforeEach(() => {
+    setFixtures(`
+      <div>
+        <div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled>
+          Trigger
+        </div>
+      </div>
+      <div class="feature-highlight-popover-content">
+        Content
+        <div class="dismiss-feature-highlight">
+          Dismiss
+        </div>
+      </div>
+    `);
+  });
+
+  describe('setupFeatureHighlightPopover', () => {
+    const selector = '.js-feature-highlight[data-highlight=test]';
+    beforeEach(() => {
+      spyOn(window, 'addEventListener');
+      spyOn(window, 'removeEventListener');
+      featureHighlight.setupFeatureHighlightPopover('test', 0);
+    });
+
+    it('setup popover content', () => {
+      const $popoverContent = $('.feature-highlight-popover-content');
+      const outerHTML = $popoverContent.prop('outerHTML');
+
+      expect($(selector).data('content')).toEqual(outerHTML);
+    });
+
+    it('setup mouseenter', () => {
+      const toggleSpy = spyOn(featureHighlightHelper.togglePopover, 'call');
+      $(selector).trigger('mouseenter');
+
+      expect(toggleSpy).toHaveBeenCalledWith(jasmine.any(Object), true);
+    });
+
+    it('setup debounced mouseleave', (done) => {
+      const toggleSpy = spyOn(featureHighlightHelper.togglePopover, 'call');
+      $(selector).trigger('mouseleave');
+
+      // Even though we've set the debounce to 0ms, setTimeout is needed for the debounce
+      setTimeout(() => {
+        expect(toggleSpy).toHaveBeenCalledWith(jasmine.any(Object), false);
+        done();
+      }, 0);
+    });
+
+    it('setup inserted.bs.popover', () => {
+      $(selector).trigger('mouseenter');
+      const popoverId = $(selector).attr('aria-describedby');
+      const spyEvent = spyOnEvent(`#${popoverId} .dismiss-feature-highlight`, 'click');
+
+      $(`#${popoverId} .dismiss-feature-highlight`).click();
+      expect(spyEvent).toHaveBeenTriggered();
+    });
+
+    it('setup show.bs.popover', () => {
+      $(selector).trigger('show.bs.popover');
+      expect(window.addEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function));
+    });
+
+    it('setup hide.bs.popover', () => {
+      $(selector).trigger('hide.bs.popover');
+      expect(window.removeEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function));
+    });
+
+    it('removes disabled attribute', () => {
+      expect($('.js-feature-highlight').is(':disabled')).toEqual(false);
+    });
+
+    it('displays popover', () => {
+      expect($(selector).attr('aria-describedby')).toBeFalsy();
+      $(selector).trigger('mouseenter');
+      expect($(selector).attr('aria-describedby')).toBeTruthy();
+    });
+  });
+
+  describe('findHighestPriorityFeature', () => {
+    beforeEach(() => {
+      setFixtures(`
+        <div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-high-priority" data-highlight-priority="20" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-low-priority" data-highlight-priority="0" disabled></div>
+      `);
+    });
+
+    it('should pick the highest priority feature highlight', () => {
+      setFixtures(`
+        <div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-high-priority" data-highlight-priority="20" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-low-priority" data-highlight-priority="0" disabled></div>
+      `);
+
+      expect($('.js-feature-highlight').length).toBeGreaterThan(1);
+      expect(featureHighlight.findHighestPriorityFeature()).toEqual('test-high-priority');
+    });
+
+    it('should work when no priority is set', () => {
+      setFixtures(`
+        <div class="js-feature-highlight" data-highlight="test" disabled></div>
+      `);
+
+      expect(featureHighlight.findHighestPriorityFeature()).toEqual('test');
+    });
+
+    it('should pick the highest priority feature highlight when some have no priority set', () => {
+      setFixtures(`
+        <div class="js-feature-highlight" data-highlight="test-no-priority1" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test" data-highlight-priority="10" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-no-priority2" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-high-priority" data-highlight-priority="20" disabled></div>
+        <div class="js-feature-highlight" data-highlight="test-low-priority" data-highlight-priority="0" disabled></div>
+      `);
+
+      expect($('.js-feature-highlight').length).toBeGreaterThan(1);
+      expect(featureHighlight.findHighestPriorityFeature()).toEqual('test-high-priority');
+    });
+  });
+
+  describe('highlightFeatures', () => {
+    it('calls setupFeatureHighlightPopover', () => {
+      expect(featureHighlight.highlightFeatures()).toEqual('test');
+    });
+  });
+});