1 files changed, 131 insertions, 0 deletions
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');
+    });
+  });
+});