Merge branch '194236-migrate-spec-javascripts-feature_highlight-to-jest' into 'master'

Migrate feature_highlight to Jest

Closes #194236

See merge request gitlab-org/gitlab!30375

spec/javascripts/feature_highlight/feature_highlight_helper_spec.js → spec/frontend/feature_highlight/feature_highlight_helper_spec.js

 import $ from 'jquery';
-import MockAdapter from 'axios-mock-adapter';
-import getSetTimeoutPromise from 'spec/helpers/set_timeout_promise_helper';
 import axios from '~/lib/utils/axios_utils';
 import { getSelector, dismiss, inserted } from '~/feature_highlight/feature_highlight_helper';
 import { togglePopover } from '~/shared/popover';
@@ -17,34 +15,23 @@ describe('feature highlight helper', () => {
   });
 
   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(() => {});
+      jest.spyOn(axios, 'post').mockResolvedValue();
+      jest.spyOn(togglePopover, 'call').mockImplementation(() => {});
+      jest.spyOn(context, 'hide').mockImplementation(() => {});
       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 persistent dismissal endpoint', () => {
+      expect(axios.post).toHaveBeenCalledWith(
+        '/-/callouts/dismiss',
+        expect.objectContaining({ feature_name: undefined }),
+      );
     });
 
     it('calls hide popover', () => {
@@ -65,7 +52,7 @@ describe('feature highlight helper', () => {
         },
       };
 
-      spyOn($.fn, 'on').and.callFake(event => {
+      jest.spyOn($.fn, 'on').mockImplementation(event => {
         expect(event).toEqual('click');
         done();
       });

spec/frontend/feature_highlight/feature_highlight_options_spec.js

@@ -3,34 +3,20 @@ import domContentLoaded from '~/feature_highlight/feature_highlight_options';
 
 describe('feature highlight options', () => {
   describe('domContentLoaded', () => {
-    it('should not call highlightFeatures when breakpoint is xs', () => {
-      jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('xs');
-
-      expect(domContentLoaded()).toBe(false);
-    });
-
-    it('should not call highlightFeatures when breakpoint is sm', () => {
-      jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('sm');
-
-      expect(domContentLoaded()).toBe(false);
-    });
-
-    it('should not call highlightFeatures when breakpoint is md', () => {
-      jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('md');
-
-      expect(domContentLoaded()).toBe(false);
-    });
-
-    it('should not call highlightFeatures when breakpoint is not xl', () => {
-      jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('lg');
-
-      expect(domContentLoaded()).toBe(false);
-    });
-
-    it('should call highlightFeatures when breakpoint is xl', () => {
-      jest.spyOn(bp, 'getBreakpointSize').mockReturnValue('xl');
-
-      expect(domContentLoaded()).toBe(true);
-    });
+    it.each`
+      breakPoint | shouldCall
+      ${'xs'}    | ${false}
+      ${'sm'}    | ${false}
+      ${'md'}    | ${false}
+      ${'lg'}    | ${false}
+      ${'xl'}    | ${true}
+    `(
+      'when breakpoint is $breakPoint should call highlightFeatures is $shouldCall',
+      ({ breakPoint, shouldCall }) => {
+        jest.spyOn(bp, 'getBreakpointSize').mockReturnValue(breakPoint);
+
+        expect(domContentLoaded()).toBe(shouldCall);
+      },
+    );
   });
 });

spec/javascripts/feature_highlight/feature_highlight_spec.js → spec/frontend/feature_highlight/feature_highlight_spec.js

@@ -4,6 +4,8 @@ import * as featureHighlight from '~/feature_highlight/feature_highlight';
 import * as popover from '~/shared/popover';
 import axios from '~/lib/utils/axios_utils';
 
+jest.mock('~/shared/popover');
+
 describe('feature highlight', () => {
   beforeEach(() => {
     setFixtures(`
@@ -28,7 +30,7 @@ describe('feature highlight', () => {
     beforeEach(() => {
       mock = new MockAdapter(axios);
       mock.onGet('/test').reply(200);
-      spyOn(window, 'addEventListener');
+      jest.spyOn(window, 'addEventListener').mockImplementation(() => {});
       featureHighlight.setupFeatureHighlightPopover('test', 0);
     });
 
@@ -44,27 +46,21 @@ describe('feature highlight', () => {
     });
 
     it('setup mouseenter', () => {
-      const toggleSpy = spyOn(popover.togglePopover, 'call');
       $(selector).trigger('mouseenter');
 
-      expect(toggleSpy).toHaveBeenCalledWith(jasmine.any(Object), true);
+      expect(popover.mouseenter).toHaveBeenCalledWith(expect.any(Object));
     });
 
-    it('setup debounced mouseleave', done => {
-      const toggleSpy = spyOn(popover.togglePopover, 'call');
+    it('setup debounced mouseleave', () => {
       $(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);
+      expect(popover.debouncedMouseleave).toHaveBeenCalled();
     });
 
     it('setup show.bs.popover', () => {
       $(selector).trigger('show.bs.popover');
 
-      expect(window.addEventListener).toHaveBeenCalledWith('scroll', jasmine.any(Function), {
+      expect(window.addEventListener).toHaveBeenCalledWith('scroll', expect.any(Function), {
         once: true,
       });
     });
@@ -72,23 +68,6 @@ describe('feature highlight', () => {
     it('removes disabled attribute', () => {
       expect($('.js-feature-highlight').is(':disabled')).toEqual(false);
     });
-
-    it('displays popover', () => {
-      expect(document.querySelector(selector).getAttribute('aria-describedby')).toBeFalsy();
-      $(selector).trigger('mouseenter');
-
-      expect(document.querySelector(selector).getAttribute('aria-describedby')).toBeTruthy();
-    });
-
-    it('toggles when clicked', () => {
-      $(selector).trigger('mouseenter');
-      const popoverId = $(selector).attr('aria-describedby');
-      const toggleSpy = spyOn(popover.togglePopover, 'call');
-
-      $(`#${popoverId} .dismiss-feature-highlight`).click();
-
-      expect(toggleSpy).toHaveBeenCalled();
-    });
   });
 
   describe('findHighestPriorityFeature', () => {