Migrate spec/javascripts/behaviors/ to Jest

Migrate tests in spec/javascripts/behaviors/ to Jest as per the
Jestodus epic.

spec/frontend/behaviors/bind_in_out_spec.js

@@ -163,14 +163,8 @@ describe('BindInOut', () => {
 
   describe('init', () => {
     beforeEach(() => {
-      // eslint-disable-next-line func-names
-      jest.spyOn(BindInOut.prototype, 'addEvents').mockImplementation(function() {
-        return this;
-      });
-      // eslint-disable-next-line func-names
-      jest.spyOn(BindInOut.prototype, 'updateOut').mockImplementation(function() {
-        return this;
-      });
+      jest.spyOn(BindInOut.prototype, 'addEvents').mockReturnThis();
+      jest.spyOn(BindInOut.prototype, 'updateOut').mockReturnThis();
 
       testContext.init = BindInOut.init({}, {});
     });

spec/javascripts/behaviors/copy_as_gfm_spec.js → spec/frontend/behaviors/copy_as_gfm_spec.js

@@ -27,7 +27,7 @@ describe('CopyAsGFM', () => {
     }
 
     it('wraps pasted code when not already in code tags', () => {
-      spyOn(window.gl.utils, 'insertText').and.callFake((el, textFunc) => {
+      jest.spyOn(window.gl.utils, 'insertText').mockImplementation((el, textFunc) => {
         const insertedText = textFunc('This is code: ', '');
 
         expect(insertedText).toEqual('`code`');
@@ -37,7 +37,7 @@ describe('CopyAsGFM', () => {
     });
 
     it('does not wrap pasted code when already in code tags', () => {
-      spyOn(window.gl.utils, 'insertText').and.callFake((el, textFunc) => {
+      jest.spyOn(window.gl.utils, 'insertText').mockImplementation((el, textFunc) => {
         const insertedText = textFunc('This is code: `', '`');
 
         expect(insertedText).toEqual('code');
@@ -90,16 +90,16 @@ describe('CopyAsGFM', () => {
         .catch(done.fail);
     });
 
-    beforeEach(() => spyOn(clipboardData, 'setData'));
+    beforeEach(() => jest.spyOn(clipboardData, 'setData'));
 
     describe('list handling', () => {
       it('uses correct gfm for unordered lists', done => {
         const selection = stubSelection('<li>List Item1</li><li>List Item2</li>\n', 'UL');
 
-        spyOn(window, 'getSelection').and.returnValue(selection);
+        window.getSelection = jest.fn(() => selection);
         simulateCopy();
 
-        setTimeout(() => {
+        setImmediate(() => {
           const expectedGFM = '* List Item1\n* List Item2';
 
           expect(clipboardData.setData).toHaveBeenCalledWith('text/x-gfm', expectedGFM);
@@ -110,10 +110,10 @@ describe('CopyAsGFM', () => {
       it('uses correct gfm for ordered lists', done => {
         const selection = stubSelection('<li>List Item1</li><li>List Item2</li>\n', 'OL');
 
-        spyOn(window, 'getSelection').and.returnValue(selection);
+        window.getSelection = jest.fn(() => selection);
         simulateCopy();
 
-        setTimeout(() => {
+        setImmediate(() => {
           const expectedGFM = '1. List Item1\n1. List Item2';
 
           expect(clipboardData.setData).toHaveBeenCalledWith('text/x-gfm', expectedGFM);

spec/javascripts/behaviors/gl_emoji/unicode_support_map_spec.js → spec/frontend/behaviors/gl_emoji/unicode_support_map_spec.js

 import getUnicodeSupportMap from '~/emoji/support/unicode_support_map';
 import AccessorUtilities from '~/lib/utils/accessor';
+import { useLocalStorageSpy } from 'helpers/local_storage_helper';
 
 describe('Unicode Support Map', () => {
+  useLocalStorageSpy();
   describe('getUnicodeSupportMap', () => {
     const stringSupportMap = 'stringSupportMap';
 
     beforeEach(() => {
-      spyOn(AccessorUtilities, 'isLocalStorageAccessSafe');
-      spyOn(window.localStorage, 'getItem');
-      spyOn(window.localStorage, 'setItem');
-      spyOn(JSON, 'parse');
-      spyOn(JSON, 'stringify').and.returnValue(stringSupportMap);
+      jest.spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').mockImplementation(() => {});
+      jest.spyOn(JSON, 'parse').mockImplementation(() => {});
+      jest.spyOn(JSON, 'stringify').mockReturnValue(stringSupportMap);
     });
 
-    describe('if isLocalStorageAvailable is `true`', function() {
+    describe('if isLocalStorageAvailable is `true`', () => {
       beforeEach(() => {
-        AccessorUtilities.isLocalStorageAccessSafe.and.returnValue(true);
+        jest.spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').mockReturnValue(true);
 
         getUnicodeSupportMap();
       });
 
       it('should call .getItem and .setItem', () => {
-        const getArgs = window.localStorage.getItem.calls.allArgs();
-        const setArgs = window.localStorage.setItem.calls.allArgs();
+        const getArgs = window.localStorage.getItem.mock.calls;
+        const setArgs = window.localStorage.setItem.mock.calls;
 
         expect(getArgs[0][0]).toBe('gl-emoji-version');
         expect(getArgs[1][0]).toBe('gl-emoji-user-agent');
@@ -36,15 +36,15 @@ describe('Unicode Support Map', () => {
       });
     });
 
-    describe('if isLocalStorageAvailable is `false`', function() {
+    describe('if isLocalStorageAvailable is `false`', () => {
       beforeEach(() => {
-        AccessorUtilities.isLocalStorageAccessSafe.and.returnValue(false);
+        jest.spyOn(AccessorUtilities, 'isLocalStorageAccessSafe').mockReturnValue(false);
 
         getUnicodeSupportMap();
       });
 
       it('should not call .getItem or .setItem', () => {
-        expect(window.localStorage.getItem.calls.count()).toBe(1);
+        expect(window.localStorage.getItem.mock.calls.length).toBe(1);
         expect(window.localStorage.setItem).not.toHaveBeenCalled();
       });
     });

spec/javascripts/behaviors/shortcuts/shortcuts_issuable_spec.js → spec/frontend/behaviors/shortcuts/shortcuts_issuable_spec.js

-/* eslint-disable
-  no-underscore-dangle
-*/
-
 import $ from 'jquery';
+import 'mousetrap';
 import initCopyAsGFM, { CopyAsGFM } from '~/behaviors/markdown/copy_as_gfm';
 import ShortcutsIssuable from '~/behaviors/shortcuts/shortcuts_issuable';
+import { getSelectedFragment } from '~/lib/utils/common_utils';
 
 const FORM_SELECTOR = '.js-main-target-form .js-vue-comment-form';
 
-describe('ShortcutsIssuable', function() {
+jest.mock('~/lib/utils/common_utils', () => ({
+  ...jest.requireActual('~/lib/utils/common_utils'),
+  getSelectedFragment: jest.fn().mockName('getSelectedFragment'),
+}));
+
+describe('ShortcutsIssuable', () => {
   const fixtureName = 'snippets/show.html';
+
   preloadFixtures(fixtureName);
 
   beforeAll(done => {
@@ -27,21 +31,24 @@ describe('ShortcutsIssuable', function() {
     loadFixtures(fixtureName);
     $('body').append(
       `<div class="js-main-target-form">
-        <textare class="js-vue-comment-form"></textare>
+        <textarea class="js-vue-comment-form"></textarea>
       </div>`,
     );
     document.querySelector('.js-new-note-form').classList.add('js-main-target-form');
-    this.shortcut = new ShortcutsIssuable(true);
+
+    window.shortcut = new ShortcutsIssuable(true);
   });
 
   afterEach(() => {
     $(FORM_SELECTOR).remove();
+
+    delete window.shortcut;
   });
 
   describe('replyWithSelectedText', () => {
     // Stub window.gl.utils.getSelectedFragment to return a node with the provided HTML.
     const stubSelection = (html, invalidNode) => {
-      ShortcutsIssuable.__Rewire__('getSelectedFragment', () => {
+      getSelectedFragment.mockImplementation(() => {
         const documentFragment = document.createDocumentFragment();
         const node = document.createElement('div');
 
@@ -61,7 +68,7 @@ describe('ShortcutsIssuable', function() {
       });
 
       it('triggers `focus`', () => {
-        const spy = spyOn(document.querySelector(FORM_SELECTOR), 'focus');
+        const spy = jest.spyOn(document.querySelector(FORM_SELECTOR), 'focus');
         ShortcutsIssuable.replyWithSelectedText(true);
 
         expect(spy).toHaveBeenCalled();
@@ -80,7 +87,7 @@ describe('ShortcutsIssuable', function() {
 
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect($(FORM_SELECTOR).val()).toBe(
             'This text was already here.\n\n> Selected text.\n\n',
           );
@@ -96,17 +103,17 @@ describe('ShortcutsIssuable', function() {
 
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect(triggered).toBe(true);
           done();
         });
       });
 
       it('triggers `focus`', done => {
-        const spy = spyOn(document.querySelector(FORM_SELECTOR), 'focus');
+        const spy = jest.spyOn(document.querySelector(FORM_SELECTOR), 'focus');
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect(spy).toHaveBeenCalled();
           done();
         });
@@ -118,7 +125,7 @@ describe('ShortcutsIssuable', function() {
         stubSelection('<p>This text has been selected.</p>');
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect($(FORM_SELECTOR).val()).toBe('> This text has been selected.\n\n');
           done();
         });
@@ -132,7 +139,7 @@ describe('ShortcutsIssuable', function() {
         );
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect($(FORM_SELECTOR).val()).toBe(
             '> Selected line one.\n>\n> Selected line two.\n>\n> Selected line three.\n\n',
           );
@@ -149,17 +156,17 @@ describe('ShortcutsIssuable', function() {
       it('does not add anything to the input', done => {
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect($(FORM_SELECTOR).val()).toBe('');
           done();
         });
       });
 
       it('triggers `focus`', done => {
-        const spy = spyOn(document.querySelector(FORM_SELECTOR), 'focus');
+        const spy = jest.spyOn(document.querySelector(FORM_SELECTOR), 'focus');
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect(spy).toHaveBeenCalled();
           done();
         });
@@ -174,17 +181,17 @@ describe('ShortcutsIssuable', function() {
       it('only adds the valid part to the input', done => {
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect($(FORM_SELECTOR).val()).toBe('> Selected text.\n\n');
           done();
         });
       });
 
       it('triggers `focus`', done => {
-        const spy = spyOn(document.querySelector(FORM_SELECTOR), 'focus');
+        const spy = jest.spyOn(document.querySelector(FORM_SELECTOR), 'focus');
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect(spy).toHaveBeenCalled();
           done();
         });
@@ -198,7 +205,7 @@ describe('ShortcutsIssuable', function() {
 
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect(triggered).toBe(true);
           done();
         });
@@ -207,7 +214,7 @@ describe('ShortcutsIssuable', function() {
 
     describe('with a selection in a valid block', () => {
       beforeEach(() => {
-        ShortcutsIssuable.__Rewire__('getSelectedFragment', () => {
+        getSelectedFragment.mockImplementation(() => {
           const documentFragment = document.createDocumentFragment();
           const node = document.createElement('div');
           const originalNode = document.createElement('body');
@@ -228,17 +235,17 @@ describe('ShortcutsIssuable', function() {
       it('adds the quoted selection to the input', done => {
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect($(FORM_SELECTOR).val()).toBe('> *Selected text.*\n\n');
           done();
         });
       });
 
       it('triggers `focus`', done => {
-        const spy = spyOn(document.querySelector(FORM_SELECTOR), 'focus');
+        const spy = jest.spyOn(document.querySelector(FORM_SELECTOR), 'focus');
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect(spy).toHaveBeenCalled();
           done();
         });
@@ -252,7 +259,7 @@ describe('ShortcutsIssuable', function() {
 
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect(triggered).toBe(true);
           done();
         });
@@ -261,7 +268,7 @@ describe('ShortcutsIssuable', function() {
 
     describe('with a selection in an invalid block', () => {
       beforeEach(() => {
-        ShortcutsIssuable.__Rewire__('getSelectedFragment', () => {
+        getSelectedFragment.mockImplementation(() => {
           const documentFragment = document.createDocumentFragment();
           const node = document.createElement('div');
           const originalNode = document.createElement('body');
@@ -282,17 +289,17 @@ describe('ShortcutsIssuable', function() {
       it('does not add anything to the input', done => {
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect($(FORM_SELECTOR).val()).toBe('');
           done();
         });
       });
 
       it('triggers `focus`', done => {
-        const spy = spyOn(document.querySelector(FORM_SELECTOR), 'focus');
+        const spy = jest.spyOn(document.querySelector(FORM_SELECTOR), 'focus');
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
+        setImmediate(() => {
           expect(spy).toHaveBeenCalled();
           done();
         });
@@ -301,11 +308,11 @@ describe('ShortcutsIssuable', function() {
 
     describe('with a valid selection with no text content', () => {
       it('returns the proper markdown', done => {
-        stubSelection('<img src="foo" alt="image" />');
+        stubSelection('<img src="https://gitlab.com/logo.png" alt="logo" />');
         ShortcutsIssuable.replyWithSelectedText(true);
 
-        setTimeout(() => {
-          expect($(FORM_SELECTOR).val()).toBe('> ![image](http://localhost:9876/foo)\n\n');
+        setImmediate(() => {
+          expect($(FORM_SELECTOR).val()).toBe('> ![logo](https://gitlab.com/logo.png)\n\n');
 
           done();
         });

spec/frontend/helpers/dom_shims/image_element_properties.js

 Object.defineProperty(global.HTMLImageElement.prototype, 'src', {
   get() {
-    return this.$_jest_src;
+    return this.$_jest_src || this.getAttribute('src');
   },
   set(val) {
     this.$_jest_src = val;