Move some utils karma specs to jest

**How?**

Used [migrate-karma-to-jest][1] utility with some manual
intervention

[1]: https://gitlab.com/gitlab-org/frontend/playground/migrate-karma-to-jest

spec/javascripts/lib/utils/accessor_spec.js → spec/frontend/lib/utils/accessor_spec.js

+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 import AccessorUtilities from '~/lib/utils/accessor';
 
 describe('AccessorUtilities', () => {
+  useLocalStorageSpy();
+
   const testError = new Error('test error');
 
   describe('isPropertyAccessSafe', () => {
     let base;
 
     it('should return `true` if access is safe', () => {
-      base = { testProp: 'testProp' };
-
+      base = {
+        testProp: 'testProp',
+      };
       expect(AccessorUtilities.isPropertyAccessSafe(base, 'testProp')).toBe(true);
     });
 
@@ -54,17 +58,12 @@ describe('AccessorUtilities', () => {
   });
 
   describe('isLocalStorageAccessSafe', () => {
-    beforeEach(() => {
-      spyOn(window.localStorage, 'setItem');
-      spyOn(window.localStorage, 'removeItem');
-    });
-
     it('should return `true` if access is safe', () => {
       expect(AccessorUtilities.isLocalStorageAccessSafe()).toBe(true);
     });
 
     it('should return `false` if access to .setItem isnt safe', () => {
-      window.localStorage.setItem.and.callFake(() => {
+      window.localStorage.setItem.mockImplementation(() => {
         throw testError;
       });
 

spec/javascripts/lib/utils/dom_utils_spec.js → spec/frontend/lib/utils/dom_utils_spec.js

@@ -25,7 +25,7 @@ describe('DOM Utils', () => {
 
       addClassIfElementExists(childElement, className);
 
-      expect(childElement.classList).toContain(className);
+      expect(childElement.classList).toContainEqual(className);
     });
 
     it('does not throw if element does not exist', () => {
@@ -40,22 +40,44 @@ describe('DOM Utils', () => {
   describe('canScrollUp', () => {
     [1, 100].forEach(scrollTop => {
       it(`is true if scrollTop is > 0 (${scrollTop})`, () => {
-        expect(canScrollUp({ scrollTop })).toBe(true);
+        expect(
+          canScrollUp({
+            scrollTop,
+          }),
+        ).toBe(true);
       });
     });
 
     [0, -10].forEach(scrollTop => {
       it(`is false if scrollTop is <= 0 (${scrollTop})`, () => {
-        expect(canScrollUp({ scrollTop })).toBe(false);
+        expect(
+          canScrollUp({
+            scrollTop,
+          }),
+        ).toBe(false);
       });
     });
 
     it('is true if scrollTop is > margin', () => {
-      expect(canScrollUp({ scrollTop: TEST_MARGIN + 1 }, TEST_MARGIN)).toBe(true);
+      expect(
+        canScrollUp(
+          {
+            scrollTop: TEST_MARGIN + 1,
+          },
+          TEST_MARGIN,
+        ),
+      ).toBe(true);
     });
 
     it('is false if scrollTop is <= margin', () => {
-      expect(canScrollUp({ scrollTop: TEST_MARGIN }, TEST_MARGIN)).toBe(false);
+      expect(
+        canScrollUp(
+          {
+            scrollTop: TEST_MARGIN,
+          },
+          TEST_MARGIN,
+        ),
+      ).toBe(false);
     });
   });
 
@@ -63,7 +85,11 @@ describe('DOM Utils', () => {
     let element;
 
     beforeEach(() => {
-      element = { scrollTop: 7, offsetHeight: 22, scrollHeight: 30 };
+      element = {
+        scrollTop: 7,
+        offsetHeight: 22,
+        scrollHeight: 30,
+      };
     });
 
     it('is true if element can be scrolled down', () => {

spec/javascripts/lib/utils/file_upload_spec.js → spec/frontend/lib/utils/file_upload_spec.js

@@ -20,7 +20,7 @@ describe('File upload', () => {
       const btn = document.querySelector('.js-button');
       const input = document.querySelector('.js-input');
 
-      spyOn(input, 'click');
+      jest.spyOn(input, 'click').mockReturnValue();
 
       btn.click();
 
@@ -43,7 +43,7 @@ describe('File upload', () => {
     const btn = document.querySelector('.js-button');
     fileUpload('.js-not-button', '.js-input');
 
-    spyOn(input, 'click');
+    jest.spyOn(input, 'click').mockReturnValue();
 
     btn.click();
 
@@ -55,7 +55,7 @@ describe('File upload', () => {
     const btn = document.querySelector('.js-button');
     fileUpload('.js-button', '.js-not-input');
 
-    spyOn(input, 'click');
+    jest.spyOn(input, 'click').mockReturnValue();
 
     btn.click();
 

spec/javascripts/lib/utils/icon_utils_spec.js → spec/frontend/lib/utils/icon_utils_spec.js

@@ -17,51 +17,44 @@ describe('Icon utils', () => {
 
     let axiosMock;
     let mockEndpoint;
-    let getIcon;
     const mockName = 'mockIconName';
     const mockPath = 'mockPath';
+    const getIcon = () => iconUtils.getSvgIconPathContent(mockName);
 
     beforeEach(() => {
       axiosMock = new MockAdapter(axios);
       mockEndpoint = axiosMock.onGet(gon.sprite_icons);
-      getIcon = iconUtils.getSvgIconPathContent(mockName);
     });
 
     afterEach(() => {
       axiosMock.restore();
     });
 
-    it('extracts svg icon path content from sprite icons', done => {
+    it('extracts svg icon path content from sprite icons', () => {
       mockEndpoint.replyOnce(
         200,
         `<svg><symbol id="${mockName}"><path d="${mockPath}"/></symbol></svg>`,
       );
-      getIcon
-        .then(path => {
-          expect(path).toBe(mockPath);
-          done();
-        })
-        .catch(done.fail);
+
+      return getIcon().then(path => {
+        expect(path).toBe(mockPath);
+      });
     });
 
-    it('returns null if icon path content does not exist', done => {
+    it('returns null if icon path content does not exist', () => {
       mockEndpoint.replyOnce(200, ``);
-      getIcon
-        .then(path => {
-          expect(path).toBe(null);
-          done();
-        })
-        .catch(done.fail);
+
+      return getIcon().then(path => {
+        expect(path).toBe(null);
+      });
     });
 
-    it('returns null if an http error occurs', done => {
+    it('returns null if an http error occurs', () => {
       mockEndpoint.replyOnce(500);
-      getIcon
-        .then(path => {
-          expect(path).toBe(null);
-          done();
-        })
-        .catch(done.fail);
+
+      return getIcon().then(path => {
+        expect(path).toBe(null);
+      });
     });
   });
 });

spec/javascripts/lib/utils/text_markdown_spec.js → spec/frontend/lib/utils/text_markdown_spec.js

@@ -243,7 +243,7 @@ describe('init markdown', () => {
     });
 
     it('uses ace editor insert text when editor is passed in', () => {
-      spyOn(editor, 'insert');
+      jest.spyOn(editor, 'insert').mockReturnValue();
 
       insertMarkdownText({
         text: editor.getValue,
@@ -258,7 +258,7 @@ describe('init markdown', () => {
     });
 
     it('adds block tags on line above and below selection', () => {
-      spyOn(editor, 'insert');
+      jest.spyOn(editor, 'insert').mockReturnValue();
 
       const selected = 'this text \n is multiple \n lines';
       const text = `before \n ${selected} \n after`;
@@ -276,7 +276,7 @@ describe('init markdown', () => {
     });
 
     it('uses ace editor to navigate back tag length when nothing is selected', () => {
-      spyOn(editor, 'navigateLeft');
+      jest.spyOn(editor, 'navigateLeft').mockReturnValue();
 
       insertMarkdownText({
         text: editor.getValue,
@@ -291,7 +291,7 @@ describe('init markdown', () => {
     });
 
     it('ace editor does not navigate back when there is selected text', () => {
-      spyOn(editor, 'navigateLeft');
+      jest.spyOn(editor, 'navigateLeft').mockReturnValue();
 
       insertMarkdownText({
         text: editor.getValue,

spec/javascripts/lib/utils/users_cache_spec.js → spec/frontend/lib/utils/users_cache_spec.js

@@ -4,7 +4,10 @@ import UsersCache from '~/lib/utils/users_cache';
 describe('UsersCache', () => {
   const dummyUsername = 'win';
   const dummyUserId = 123;
-  const dummyUser = { name: 'has a farm', username: 'farmer' };
+  const dummyUser = {
+    name: 'has a farm',
+    username: 'farmer',
+  };
   const dummyUserStatus = 'my status';
 
   beforeEach(() => {
@@ -68,7 +71,6 @@ describe('UsersCache', () => {
 
     it('does nothing if cache contains no matching data', () => {
       UsersCache.internalStorage['no body'] = 'no data';
-
       UsersCache.remove(dummyUsername);
 
       expect(UsersCache.internalStorage['no body']).toBe('no data');
@@ -76,7 +78,6 @@ describe('UsersCache', () => {
 
     it('removes matching data', () => {
       UsersCache.internalStorage[dummyUsername] = dummyUser;
-
       UsersCache.remove(dummyUsername);
 
       expect(UsersCache.internalStorage).toEqual({});
@@ -87,13 +88,16 @@ describe('UsersCache', () => {
     let apiSpy;
 
     beforeEach(() => {
-      spyOn(Api, 'users').and.callFake((query, options) => apiSpy(query, options));
+      jest.spyOn(Api, 'users').mockImplementation((query, options) => apiSpy(query, options));
     });
 
     it('stores and returns data from API call if cache is empty', done => {
       apiSpy = (query, options) => {
         expect(query).toBe('');
-        expect(options).toEqual({ username: dummyUsername });
+        expect(options).toEqual({
+          username: dummyUsername,
+        });
+
         return Promise.resolve({
           data: [dummyUser],
         });
@@ -110,14 +114,18 @@ describe('UsersCache', () => {
 
     it('returns undefined if Ajax call fails and cache is empty', done => {
       const dummyError = new Error('server exploded');
+
       apiSpy = (query, options) => {
         expect(query).toBe('');
-        expect(options).toEqual({ username: dummyUsername });
+        expect(options).toEqual({
+          username: dummyUsername,
+        });
+
         return Promise.reject(dummyError);
       };
 
       UsersCache.retrieve(dummyUsername)
-        .then(user => fail(`Received unexpected user: ${JSON.stringify(user)}`))
+        .then(user => done.fail(`Received unexpected user: ${JSON.stringify(user)}`))
         .catch(error => {
           expect(error).toBe(dummyError);
         })
@@ -127,7 +135,8 @@ describe('UsersCache', () => {
 
     it('makes no Ajax call if matching data exists', done => {
       UsersCache.internalStorage[dummyUsername] = dummyUser;
-      apiSpy = () => fail(new Error('expected no Ajax call!'));
+
+      apiSpy = () => done.fail(new Error('expected no Ajax call!'));
 
       UsersCache.retrieve(dummyUsername)
         .then(user => {
@@ -142,12 +151,13 @@ describe('UsersCache', () => {
     let apiSpy;
 
     beforeEach(() => {
-      spyOn(Api, 'user').and.callFake(id => apiSpy(id));
+      jest.spyOn(Api, 'user').mockImplementation(id => apiSpy(id));
     });
 
     it('stores and returns data from API call if cache is empty', done => {
       apiSpy = id => {
         expect(id).toBe(dummyUserId);
+
         return Promise.resolve({
           data: dummyUser,
         });
@@ -164,13 +174,15 @@ describe('UsersCache', () => {
 
     it('returns undefined if Ajax call fails and cache is empty', done => {
       const dummyError = new Error('server exploded');
+
       apiSpy = id => {
         expect(id).toBe(dummyUserId);
+
         return Promise.reject(dummyError);
       };
 
       UsersCache.retrieveById(dummyUserId)
-        .then(user => fail(`Received unexpected user: ${JSON.stringify(user)}`))
+        .then(user => done.fail(`Received unexpected user: ${JSON.stringify(user)}`))
         .catch(error => {
           expect(error).toBe(dummyError);
         })
@@ -180,7 +192,8 @@ describe('UsersCache', () => {
 
     it('makes no Ajax call if matching data exists', done => {
       UsersCache.internalStorage[dummyUserId] = dummyUser;
-      apiSpy = () => fail(new Error('expected no Ajax call!'));
+
+      apiSpy = () => done.fail(new Error('expected no Ajax call!'));
 
       UsersCache.retrieveById(dummyUserId)
         .then(user => {
@@ -195,12 +208,13 @@ describe('UsersCache', () => {
     let apiSpy;
 
     beforeEach(() => {
-      spyOn(Api, 'userStatus').and.callFake(id => apiSpy(id));
+      jest.spyOn(Api, 'userStatus').mockImplementation(id => apiSpy(id));
     });
 
     it('stores and returns data from API call if cache is empty', done => {
       apiSpy = id => {
         expect(id).toBe(dummyUserId);
+
         return Promise.resolve({
           data: dummyUserStatus,
         });
@@ -217,13 +231,15 @@ describe('UsersCache', () => {
 
     it('returns undefined if Ajax call fails and cache is empty', done => {
       const dummyError = new Error('server exploded');
+
       apiSpy = id => {
         expect(id).toBe(dummyUserId);
+
         return Promise.reject(dummyError);
       };
 
       UsersCache.retrieveStatusById(dummyUserId)
-        .then(userStatus => fail(`Received unexpected user: ${JSON.stringify(userStatus)}`))
+        .then(userStatus => done.fail(`Received unexpected user: ${JSON.stringify(userStatus)}`))
         .catch(error => {
           expect(error).toBe(dummyError);
         })
@@ -232,8 +248,11 @@ describe('UsersCache', () => {
     });
 
     it('makes no Ajax call if matching data exists', done => {
-      UsersCache.internalStorage[dummyUserId] = { status: dummyUserStatus };
-      apiSpy = () => fail(new Error('expected no Ajax call!'));
+      UsersCache.internalStorage[dummyUserId] = {
+        status: dummyUserStatus,
+      };
+
+      apiSpy = () => done.fail(new Error('expected no Ajax call!'));
 
       UsersCache.retrieveStatusById(dummyUserId)
         .then(userStatus => {