Migrate javascripts/* specs to Jest

Migrate spec/javascripts/* specs from Karma to Jest

spec/javascripts/ajax_loading_spinner_spec.js → spec/frontend/ajax_loading_spinner_spec.js

@@ -11,7 +11,7 @@ describe('Ajax Loading Spinner', () => {
   });
 
   it('change current icon with spinner icon and disable link while waiting ajax response', done => {
-    spyOn($, 'ajax').and.callFake(req => {
+    jest.spyOn($, 'ajax').mockImplementation(req => {
       const xhr = new XMLHttpRequest();
       const ajaxLoadingSpinner = document.querySelector('.js-ajax-loading-spinner');
       const icon = ajaxLoadingSpinner.querySelector('i');
@@ -34,7 +34,7 @@ describe('Ajax Loading Spinner', () => {
   });
 
   it('use original icon again and enabled the link after complete the ajax request', done => {
-    spyOn($, 'ajax').and.callFake(req => {
+    jest.spyOn($, 'ajax').mockImplementation(req => {
       const xhr = new XMLHttpRequest();
       const ajaxLoadingSpinner = document.querySelector('.js-ajax-loading-spinner');
 

spec/javascripts/bootstrap_linked_tabs_spec.js → spec/frontend/bootstrap_linked_tabs_spec.js

@@ -9,7 +9,7 @@ describe('Linked Tabs', () => {
 
   describe('when is initialized', () => {
     beforeEach(() => {
-      spyOn(window.history, 'replaceState').and.callFake(function() {});
+      jest.spyOn(window.history, 'replaceState').mockImplementation(() => {});
     });
 
     it('should activate the tab correspondent to the given action', () => {
@@ -37,7 +37,7 @@ describe('Linked Tabs', () => {
 
   describe('on click', () => {
     it('should change the url according to the clicked tab', () => {
-      const historySpy = spyOn(window.history, 'replaceState').and.callFake(() => {});
+      const historySpy = jest.spyOn(window.history, 'replaceState').mockImplementation(() => {});
 
       const linkedTabs = new LinkedTabs({
         action: 'show',

spec/javascripts/close_reopen_report_toggle_spec.js → spec/frontend/close_reopen_report_toggle_spec.js

-/* eslint-disable jasmine/no-unsafe-spy */
-
 import CloseReopenReportToggle from '~/close_reopen_report_toggle';
 import DropLab from '~/droplab/drop_lab';
 
@@ -10,7 +8,7 @@ describe('CloseReopenReportToggle', () => {
     const button = {};
     let commentTypeToggle;
 
-    beforeEach(function() {
+    beforeEach(() => {
       commentTypeToggle = new CloseReopenReportToggle({
         dropdownTrigger,
         dropdownList,
@@ -18,22 +16,24 @@ describe('CloseReopenReportToggle', () => {
       });
     });
 
-    it('sets .dropdownTrigger', function() {
+    it('sets .dropdownTrigger', () => {
       expect(commentTypeToggle.dropdownTrigger).toBe(dropdownTrigger);
     });
 
-    it('sets .dropdownList', function() {
+    it('sets .dropdownList', () => {
       expect(commentTypeToggle.dropdownList).toBe(dropdownList);
     });
 
-    it('sets .button', function() {
+    it('sets .button', () => {
       expect(commentTypeToggle.button).toBe(button);
     });
   });
 
   describe('initDroplab', () => {
     let closeReopenReportToggle;
-    const dropdownList = jasmine.createSpyObj('dropdownList', ['querySelector']);
+    const dropdownList = {
+      querySelector: jest.fn(),
+    };
     const dropdownTrigger = {};
     const button = {};
     const reopenItem = {};
@@ -41,8 +41,8 @@ describe('CloseReopenReportToggle', () => {
     const config = {};
 
     beforeEach(() => {
-      spyOn(DropLab.prototype, 'init');
-      dropdownList.querySelector.and.returnValues(reopenItem, closeItem);
+      jest.spyOn(DropLab.prototype, 'init').mockImplementation(() => {});
+      dropdownList.querySelector.mockReturnValueOnce(reopenItem).mockReturnValueOnce(closeItem);
 
       closeReopenReportToggle = new CloseReopenReportToggle({
         dropdownTrigger,
@@ -50,7 +50,7 @@ describe('CloseReopenReportToggle', () => {
         button,
       });
 
-      spyOn(closeReopenReportToggle, 'setConfig').and.returnValue(config);
+      jest.spyOn(closeReopenReportToggle, 'setConfig').mockReturnValue(config);
 
       closeReopenReportToggle.initDroplab();
     });
@@ -63,7 +63,7 @@ describe('CloseReopenReportToggle', () => {
     });
 
     it('sets .droplab', () => {
-      expect(closeReopenReportToggle.droplab).toEqual(jasmine.any(Object));
+      expect(closeReopenReportToggle.droplab).toEqual(expect.any(Object));
     });
 
     it('calls .setConfig', () => {
@@ -74,7 +74,7 @@ describe('CloseReopenReportToggle', () => {
       expect(DropLab.prototype.init).toHaveBeenCalledWith(
         dropdownTrigger,
         dropdownList,
-        jasmine.any(Array),
+        expect.any(Array),
         config,
       );
     });
@@ -84,7 +84,9 @@ describe('CloseReopenReportToggle', () => {
     let closeReopenReportToggle;
     const dropdownList = {};
     const dropdownTrigger = {};
-    const button = jasmine.createSpyObj('button', ['blur']);
+    const button = {
+      blur: jest.fn(),
+    };
     const isClosed = true;
 
     beforeEach(() => {
@@ -94,7 +96,7 @@ describe('CloseReopenReportToggle', () => {
         button,
       });
 
-      spyOn(closeReopenReportToggle, 'toggleButtonType');
+      jest.spyOn(closeReopenReportToggle, 'toggleButtonType').mockImplementation(() => {});
 
       closeReopenReportToggle.updateButton(isClosed);
     });
@@ -114,10 +116,18 @@ describe('CloseReopenReportToggle', () => {
     const dropdownTrigger = {};
     const button = {};
     const isClosed = true;
-    const showItem = jasmine.createSpyObj('showItem', ['click']);
+    const showItem = {
+      click: jest.fn(),
+    };
     const hideItem = {};
-    showItem.classList = jasmine.createSpyObj('classList', ['add', 'remove']);
-    hideItem.classList = jasmine.createSpyObj('classList', ['add', 'remove']);
+    showItem.classList = {
+      add: jest.fn(),
+      remove: jest.fn(),
+    };
+    hideItem.classList = {
+      add: jest.fn(),
+      remove: jest.fn(),
+    };
 
     beforeEach(() => {
       closeReopenReportToggle = new CloseReopenReportToggle({
@@ -126,7 +136,7 @@ describe('CloseReopenReportToggle', () => {
         button,
       });
 
-      spyOn(closeReopenReportToggle, 'getButtonTypes').and.returnValue([showItem, hideItem]);
+      jest.spyOn(closeReopenReportToggle, 'getButtonTypes').mockReturnValue([showItem, hideItem]);
 
       closeReopenReportToggle.toggleButtonType(isClosed);
     });
@@ -182,8 +192,14 @@ describe('CloseReopenReportToggle', () => {
   describe('setDisable', () => {
     let closeReopenReportToggle;
     const dropdownList = {};
-    const dropdownTrigger = jasmine.createSpyObj('button', ['setAttribute', 'removeAttribute']);
-    const button = jasmine.createSpyObj('button', ['setAttribute', 'removeAttribute']);
+    const dropdownTrigger = {
+      setAttribute: jest.fn(),
+      removeAttribute: jest.fn(),
+    };
+    const button = {
+      setAttribute: jest.fn(),
+      removeAttribute: jest.fn(),
+    };
 
     beforeEach(() => {
       closeReopenReportToggle = new CloseReopenReportToggle({

spec/javascripts/commits_spec.js → spec/frontend/commits_spec.js

@@ -15,7 +15,7 @@ describe('Commits List', () => {
       </form>
       <ol id="commits-list"></ol>
       `);
-    spyOn(Pager, 'init').and.stub();
+    jest.spyOn(Pager, 'init').mockImplementation(() => {});
     commitsList = new CommitsList(25);
   });
 
@@ -56,14 +56,14 @@ describe('Commits List', () => {
     beforeEach(() => {
       commitsList.searchField.val('');
 
-      spyOn(window.history, 'replaceState').and.stub();
+      jest.spyOn(window.history, 'replaceState').mockImplementation(() => {});
       mock = new MockAdapter(axios);
 
       mock.onGet('/h5bp/html5-boilerplate/commits/master').reply(200, {
         html: '<li>Result</li>',
       });
 
-      ajaxSpy = spyOn(axios, 'get').and.callThrough();
+      ajaxSpy = jest.spyOn(axios, 'get');
     });
 
     afterEach(() => {

spec/javascripts/diff_comments_store_spec.js → spec/frontend/diff_comments_store_spec.js

-/* eslint-disable jasmine/no-global-setup, dot-notation, jasmine/no-expect-in-setup-teardown */
 /* global CommentsStore */
 
 import '~/diff_notes/models/discussion';
@@ -34,7 +33,7 @@ describe('New discussion', () => {
     createDiscussion();
     createDiscussion(2);
 
-    const discussion = CommentsStore.state['a'];
+    const discussion = CommentsStore.state.a;
 
     expect(Object.keys(discussion.notes).length).toBe(2);
   });
@@ -71,7 +70,7 @@ describe('Delete discussion', () => {
     createDiscussion(2);
 
     expect(Object.keys(CommentsStore.state).length).toBe(1);
-    expect(Object.keys(CommentsStore.state['a'].notes).length).toBe(2);
+    expect(Object.keys(CommentsStore.state.a.notes).length).toBe(2);
 
     CommentsStore.delete('a', 1);
     CommentsStore.delete('a', 2);
@@ -102,27 +101,27 @@ describe('Discussion resolved', () => {
   });
 
   it('is resolved with single note', () => {
-    const discussion = CommentsStore.state['a'];
+    const discussion = CommentsStore.state.a;
 
     expect(discussion.isResolved()).toBe(true);
   });
 
   it('is unresolved with 2 notes', () => {
-    const discussion = CommentsStore.state['a'];
+    const discussion = CommentsStore.state.a;
     createDiscussion(2, false);
 
     expect(discussion.isResolved()).toBe(false);
   });
 
   it('is resolved with 2 notes', () => {
-    const discussion = CommentsStore.state['a'];
+    const discussion = CommentsStore.state.a;
     createDiscussion(2);
 
     expect(discussion.isResolved()).toBe(true);
   });
 
   it('resolve all notes', () => {
-    const discussion = CommentsStore.state['a'];
+    const discussion = CommentsStore.state.a;
     createDiscussion(2, false);
 
     discussion.resolveAllNotes();
@@ -131,7 +130,7 @@ describe('Discussion resolved', () => {
   });
 
   it('unresolve all notes', () => {
-    const discussion = CommentsStore.state['a'];
+    const discussion = CommentsStore.state.a;
     createDiscussion(2);
 
     discussion.unResolveAllNotes();

spec/javascripts/flash_spec.js → spec/frontend/flash_spec.js

@@ -38,9 +38,7 @@ describe('Flash', () => {
     it('sets transition style', () => {
       hideFlash(el);
 
-      expect(el.style['transition-property']).toBe('opacity');
-
-      expect(el.style['transition-duration']).toBe('0.15s');
+      expect(el.style.transition).toBe('opacity 0.15s');
     });
 
     it('sets opacity style', () => {
@@ -53,8 +51,7 @@ describe('Flash', () => {
       hideFlash(el, false);
 
       expect(el.style.opacity).toBe('');
-
-      expect(el.style.transition).toBe('');
+      expect(el.style.transition).toBeFalsy();
     });
 
     it('removes element after transitionend', () => {
@@ -67,7 +64,7 @@ describe('Flash', () => {
     });
 
     it('calls event listener callback once', () => {
-      spyOn(el, 'remove').and.callThrough();
+      jest.spyOn(el, 'remove');
       document.body.appendChild(el);
 
       hideFlash(el);
@@ -75,7 +72,7 @@ describe('Flash', () => {
       el.dispatchEvent(new Event('transitionend'));
       el.dispatchEvent(new Event('transitionend'));
 
-      expect(el.remove.calls.count()).toBe(1);
+      expect(el.remove.mock.calls.length).toBe(1);
     });
   });
 
@@ -195,7 +192,7 @@ describe('Flash', () => {
         it('calls actionConfig clickHandler on click', () => {
           const actionConfig = {
             title: 'test',
-            clickHandler: jasmine.createSpy('actionConfig'),
+            clickHandler: jest.fn(),
           };
 
           flash('test', 'alert', document, actionConfig);
@@ -226,7 +223,7 @@ describe('Flash', () => {
 
       flashEl.querySelector('.js-close-icon').click();
 
-      setTimeout(() => {
+      setImmediate(() => {
         expect(document.querySelector('.flash')).toBeNull();
 
         done();

spec/javascripts/issuable_spec.js → spec/frontend/issuable_spec.js

@@ -50,10 +50,10 @@ describe('Issuable', () => {
     });
 
     it('should send request to reset email token', done => {
-      spyOn(axios, 'put').and.callThrough();
+      jest.spyOn(axios, 'put');
       document.querySelector('.incoming-email-token-reset').click();
 
-      setTimeout(() => {
+      setImmediate(() => {
         expect(axios.put).toHaveBeenCalledWith('foo');
         expect($('#issuable_email').val()).toBe('testing123');
 

spec/frontend/landing_spec.js

+import Cookies from 'js-cookie';
+import Landing from '~/landing';
+
+describe('Landing', () => {
+  const test = {};
+
+  describe('class constructor', () => {
+    beforeEach(() => {
+      test.landingElement = {};
+      test.dismissButton = {};
+      test.cookieName = 'cookie_name';
+
+      test.landing = new Landing(test.landingElement, test.dismissButton, test.cookieName);
+    });
+
+    it('should set .landing', () => {
+      expect(test.landing.landingElement).toBe(test.landingElement);
+    });
+
+    it('should set .cookieName', () => {
+      expect(test.landing.cookieName).toBe(test.cookieName);
+    });
+
+    it('should set .dismissButton', () => {
+      expect(test.landing.dismissButton).toBe(test.dismissButton);
+    });
+
+    it('should set .eventWrapper', () => {
+      expect(test.landing.eventWrapper).toEqual({});
+    });
+  });
+
+  describe('toggle', () => {
+    beforeEach(() => {
+      test.isDismissed = false;
+      test.landingElement = {
+        classList: {
+          toggle: jest.fn(),
+        },
+      };
+      test.landing = {
+        isDismissed: () => {},
+        addEvents: () => {},
+        landingElement: test.landingElement,
+      };
+
+      jest.spyOn(test.landing, 'isDismissed').mockReturnValue(test.isDismissed);
+      jest.spyOn(test.landing, 'addEvents').mockImplementation(() => {});
+
+      Landing.prototype.toggle.call(test.landing);
+    });
+
+    it('should call .isDismissed', () => {
+      expect(test.landing.isDismissed).toHaveBeenCalled();
+    });
+
+    it('should call .classList.toggle', () => {
+      expect(test.landingElement.classList.toggle).toHaveBeenCalledWith('hidden', test.isDismissed);
+    });
+
+    it('should call .addEvents', () => {
+      expect(test.landing.addEvents).toHaveBeenCalled();
+    });
+
+    describe('if isDismissed is true', () => {
+      beforeEach(() => {
+        test.isDismissed = true;
+        test.landingElement = {
+          classList: {
+            toggle: jest.fn(),
+          },
+        };
+        test.landing = {
+          isDismissed: () => {},
+          addEvents: () => {},
+          landingElement: test.landingElement,
+        };
+
+        jest.spyOn(test.landing, 'isDismissed').mockReturnValue(test.isDismissed);
+        jest.spyOn(test.landing, 'addEvents').mockImplementation(() => {});
+
+        test.landing.isDismissed.mockClear();
+
+        Landing.prototype.toggle.call(test.landing);
+      });
+
+      it('should not call .addEvents', () => {
+        expect(test.landing.addEvents).not.toHaveBeenCalled();
+      });
+    });
+  });
+
+  describe('addEvents', () => {
+    beforeEach(() => {
+      test.dismissButton = {
+        addEventListener: jest.fn(),
+      };
+      test.eventWrapper = {};
+      test.landing = {
+        eventWrapper: test.eventWrapper,
+        dismissButton: test.dismissButton,
+        dismissLanding: () => {},
+      };
+
+      Landing.prototype.addEvents.call(test.landing);
+    });
+
+    it('should set .eventWrapper.dismissLanding', () => {
+      expect(test.eventWrapper.dismissLanding).toEqual(expect.any(Function));
+    });
+
+    it('should call .addEventListener', () => {
+      expect(test.dismissButton.addEventListener).toHaveBeenCalledWith(
+        'click',
+        test.eventWrapper.dismissLanding,
+      );
+    });
+  });
+
+  describe('removeEvents', () => {
+    beforeEach(() => {
+      test.dismissButton = {
+        removeEventListener: jest.fn(),
+      };
+      test.eventWrapper = { dismissLanding: () => {} };
+      test.landing = {
+        eventWrapper: test.eventWrapper,
+        dismissButton: test.dismissButton,
+      };
+
+      Landing.prototype.removeEvents.call(test.landing);
+    });
+
+    it('should call .removeEventListener', () => {
+      expect(test.dismissButton.removeEventListener).toHaveBeenCalledWith(
+        'click',
+        test.eventWrapper.dismissLanding,
+      );
+    });
+  });
+
+  describe('dismissLanding', () => {
+    beforeEach(() => {
+      test.landingElement = {
+        classList: {
+          add: jest.fn(),
+        },
+      };
+      test.cookieName = 'cookie_name';
+      test.landing = { landingElement: test.landingElement, cookieName: test.cookieName };
+
+      jest.spyOn(Cookies, 'set').mockImplementation(() => {});
+
+      Landing.prototype.dismissLanding.call(test.landing);
+    });
+
+    it('should call .classList.add', () => {
+      expect(test.landingElement.classList.add).toHaveBeenCalledWith('hidden');
+    });
+
+    it('should call Cookies.set', () => {
+      expect(Cookies.set).toHaveBeenCalledWith(test.cookieName, 'true', { expires: 365 });
+    });
+  });
+
+  describe('isDismissed', () => {
+    beforeEach(() => {
+      test.cookieName = 'cookie_name';
+      test.landing = { cookieName: test.cookieName };
+
+      jest.spyOn(Cookies, 'get').mockReturnValue('true');
+
+      test.isDismissed = Landing.prototype.isDismissed.call(test.landing);
+    });
+
+    it('should call Cookies.get', () => {
+      expect(Cookies.get).toHaveBeenCalledWith(test.cookieName);
+    });
+
+    it('should return a boolean', () => {
+      expect(typeof test.isDismissed).toEqual('boolean');
+    });
+  });
+});

spec/javascripts/landing_spec.js

-import Cookies from 'js-cookie';
-import Landing from '~/landing';
-
-describe('Landing', function() {
-  describe('class constructor', function() {
-    beforeEach(function() {
-      this.landingElement = {};
-      this.dismissButton = {};
-      this.cookieName = 'cookie_name';
-
-      this.landing = new Landing(this.landingElement, this.dismissButton, this.cookieName);
-    });
-
-    it('should set .landing', function() {
-      expect(this.landing.landingElement).toBe(this.landingElement);
-    });
-
-    it('should set .cookieName', function() {
-      expect(this.landing.cookieName).toBe(this.cookieName);
-    });
-
-    it('should set .dismissButton', function() {
-      expect(this.landing.dismissButton).toBe(this.dismissButton);
-    });
-
-    it('should set .eventWrapper', function() {
-      expect(this.landing.eventWrapper).toEqual({});
-    });
-  });
-
-  describe('toggle', function() {
-    beforeEach(function() {
-      this.isDismissed = false;
-      this.landingElement = { classList: jasmine.createSpyObj('classList', ['toggle']) };
-      this.landing = {
-        isDismissed: () => {},
-        addEvents: () => {},
-        landingElement: this.landingElement,
-      };
-
-      spyOn(this.landing, 'isDismissed').and.returnValue(this.isDismissed);
-      spyOn(this.landing, 'addEvents');
-
-      Landing.prototype.toggle.call(this.landing);
-    });
-
-    it('should call .isDismissed', function() {
-      expect(this.landing.isDismissed).toHaveBeenCalled();
-    });
-
-    it('should call .classList.toggle', function() {
-      expect(this.landingElement.classList.toggle).toHaveBeenCalledWith('hidden', this.isDismissed);
-    });
-
-    it('should call .addEvents', function() {
-      expect(this.landing.addEvents).toHaveBeenCalled();
-    });
-
-    describe('if isDismissed is true', function() {
-      beforeEach(function() {
-        this.isDismissed = true;
-        this.landingElement = { classList: jasmine.createSpyObj('classList', ['toggle']) };
-        this.landing = {
-          isDismissed: () => {},
-          addEvents: () => {},
-          landingElement: this.landingElement,
-        };
-
-        spyOn(this.landing, 'isDismissed').and.returnValue(this.isDismissed);
-        spyOn(this.landing, 'addEvents');
-
-        this.landing.isDismissed.calls.reset();
-
-        Landing.prototype.toggle.call(this.landing);
-      });
-
-      it('should not call .addEvents', function() {
-        expect(this.landing.addEvents).not.toHaveBeenCalled();
-      });
-    });
-  });
-
-  describe('addEvents', function() {
-    beforeEach(function() {
-      this.dismissButton = jasmine.createSpyObj('dismissButton', ['addEventListener']);
-      this.eventWrapper = {};
-      this.landing = {
-        eventWrapper: this.eventWrapper,
-        dismissButton: this.dismissButton,
-        dismissLanding: () => {},
-      };
-
-      Landing.prototype.addEvents.call(this.landing);
-    });
-
-    it('should set .eventWrapper.dismissLanding', function() {
-      expect(this.eventWrapper.dismissLanding).toEqual(jasmine.any(Function));
-    });
-
-    it('should call .addEventListener', function() {
-      expect(this.dismissButton.addEventListener).toHaveBeenCalledWith(
-        'click',
-        this.eventWrapper.dismissLanding,
-      );
-    });
-  });
-
-  describe('removeEvents', function() {
-    beforeEach(function() {
-      this.dismissButton = jasmine.createSpyObj('dismissButton', ['removeEventListener']);
-      this.eventWrapper = { dismissLanding: () => {} };
-      this.landing = {
-        eventWrapper: this.eventWrapper,
-        dismissButton: this.dismissButton,
-      };
-
-      Landing.prototype.removeEvents.call(this.landing);
-    });
-
-    it('should call .removeEventListener', function() {
-      expect(this.dismissButton.removeEventListener).toHaveBeenCalledWith(
-        'click',
-        this.eventWrapper.dismissLanding,
-      );
-    });
-  });
-
-  describe('dismissLanding', function() {
-    beforeEach(function() {
-      this.landingElement = { classList: jasmine.createSpyObj('classList', ['add']) };
-      this.cookieName = 'cookie_name';
-      this.landing = { landingElement: this.landingElement, cookieName: this.cookieName };
-
-      spyOn(Cookies, 'set');
-
-      Landing.prototype.dismissLanding.call(this.landing);
-    });
-
-    it('should call .classList.add', function() {
-      expect(this.landingElement.classList.add).toHaveBeenCalledWith('hidden');
-    });
-
-    it('should call Cookies.set', function() {
-      expect(Cookies.set).toHaveBeenCalledWith(this.cookieName, 'true', { expires: 365 });
-    });
-  });
-
-  describe('isDismissed', function() {
-    beforeEach(function() {
-      this.cookieName = 'cookie_name';
-      this.landing = { cookieName: this.cookieName };
-
-      spyOn(Cookies, 'get').and.returnValue('true');
-
-      this.isDismissed = Landing.prototype.isDismissed.call(this.landing);
-    });
-
-    it('should call Cookies.get', function() {
-      expect(Cookies.get).toHaveBeenCalledWith(this.cookieName);
-    });
-
-    it('should return a boolean', function() {
-      expect(typeof this.isDismissed).toEqual('boolean');
-    });
-  });
-});