Add latest changes from gitlab-org/gitlab@master

spec/javascripts/jobs/components/job_log_controllers_spec.js → spec/frontend/jobs/components/job_log_controllers_spec.js

@@ -100,7 +100,7 @@ describe('Job log controllers', () => {
         });
         it('emits scrollJobLogTop event on click', () => {
-          spyOn(vm, '$emit');
+          jest.spyOn(vm, '$emit').mockImplementation(() => {});
           vm.$el.querySelector('.js-scroll-top').click();
           expect(vm.$emit).toHaveBeenCalledWith('scrollJobLogTop');
@@ -127,7 +127,7 @@ describe('Job log controllers', () => {
         });
         it('does not emit scrollJobLogTop event on click', () => {
-          spyOn(vm, '$emit');
+          jest.spyOn(vm, '$emit').mockImplementation(() => {});
           vm.$el.querySelector('.js-scroll-top').click();
           expect(vm.$emit).not.toHaveBeenCalledWith('scrollJobLogTop');
@@ -146,7 +146,7 @@ describe('Job log controllers', () => {
         });
         it('emits scrollJobLogBottom event on click', () => {
-          spyOn(vm, '$emit');
+          jest.spyOn(vm, '$emit').mockImplementation(() => {});
           vm.$el.querySelector('.js-scroll-bottom').click();
           expect(vm.$emit).toHaveBeenCalledWith('scrollJobLogBottom');
@@ -173,7 +173,7 @@ describe('Job log controllers', () => {
         });
         it('does not emit scrollJobLogBottom event on click', () => {
-          spyOn(vm, '$emit');
+          jest.spyOn(vm, '$emit').mockImplementation(() => {});
           vm.$el.querySelector('.js-scroll-bottom').click();
           expect(vm.$emit).not.toHaveBeenCalledWith('scrollJobLogBottom');

spec/javascripts/namespace_select_spec.js → spec/frontend/namespace_select_spec.js

@@ -3,7 +3,7 @@ import NamespaceSelect from '~/namespace_select';
 describe('NamespaceSelect', () => {
   beforeEach(() => {
-    spyOn($.fn, 'glDropdown');
+    jest.spyOn($.fn, 'glDropdown').mockImplementation(() => {});
   });
   it('initializes glDropdown', () => {
@@ -22,12 +22,12 @@ describe('NamespaceSelect', () => {
       const dropdown = document.createElement('div');
       // eslint-disable-next-line no-new
       new NamespaceSelect({ dropdown });
-      [glDropdownOptions] = $.fn.glDropdown.calls.argsFor(0);
+      [[glDropdownOptions]] = $.fn.glDropdown.mock.calls;
     });
     it('prevents click events', () => {
       const dummyEvent = new Event('dummy');
-      spyOn(dummyEvent, 'preventDefault');
+      jest.spyOn(dummyEvent, 'preventDefault').mockImplementation(() => {});
       glDropdownOptions.clicked({ e: dummyEvent });
@@ -43,12 +43,12 @@ describe('NamespaceSelect', () => {
       dropdown.dataset.isFilter = 'true';
       // eslint-disable-next-line no-new
       new NamespaceSelect({ dropdown });
-      [glDropdownOptions] = $.fn.glDropdown.calls.argsFor(0);
+      [[glDropdownOptions]] = $.fn.glDropdown.mock.calls;
     });
     it('does not prevent click events', () => {
       const dummyEvent = new Event('dummy');
-      spyOn(dummyEvent, 'preventDefault');
+      jest.spyOn(dummyEvent, 'preventDefault').mockImplementation(() => {});
       glDropdownOptions.clicked({ e: dummyEvent });

spec/javascripts/new_branch_spec.js → spec/frontend/new_branch_spec.js

 import $ from 'jquery';
 import NewBranchForm from '~/new_branch_form';
-describe('Branch', function() {
-  describe('create a new branch', function() {
+describe('Branch', () => {
+  let testContext;
+
+  beforeEach(() => {
+    testContext = {};
+  });
+
+  describe('create a new branch', () => {
     preloadFixtures('branches/new_branch.html');
     function fillNameWith(value) {
@@ -15,30 +21,28 @@ describe('Branch', function() {
       expect($('.js-branch-name-error span').text()).toEqual(error);
     }
-    beforeEach(function() {
+    beforeEach(() => {
       loadFixtures('branches/new_branch.html');
-      $('form').on('submit', function(e) {
-        return e.preventDefault();
-      });
-      this.form = new NewBranchForm($('.js-create-branch-form'), []);
+      $('form').on('submit', e => e.preventDefault());
+      testContext.form = new NewBranchForm($('.js-create-branch-form'), []);
     });
-    it("can't start with a dot", function() {
+    it("can't start with a dot", () => {
       fillNameWith('.foo');
       expectToHaveError("can't start with '.'");
     });
-    it("can't start with a slash", function() {
+    it("can't start with a slash", () => {
       fillNameWith('/foo');
       expectToHaveError("can't start with '/'");
     });
-    it("can't have two consecutive dots", function() {
+    it("can't have two consecutive dots", () => {
       fillNameWith('foo..bar');
       expectToHaveError("can't contain '..'");
     });
-    it("can't have spaces anywhere", function() {
+    it("can't have spaces anywhere", () => {
       fillNameWith(' foo');
       expectToHaveError("can't contain spaces");
       fillNameWith('foo bar');
@@ -47,7 +51,7 @@ describe('Branch', function() {
       expectToHaveError("can't contain spaces");
     });
-    it("can't have ~ anywhere", function() {
+    it("can't have ~ anywhere", () => {
       fillNameWith('~foo');
       expectToHaveError("can't contain '~'");
       fillNameWith('foo~bar');
@@ -56,7 +60,7 @@ describe('Branch', function() {
       expectToHaveError("can't contain '~'");
     });
-    it("can't have tilde anwhere", function() {
+    it("can't have tilde anwhere", () => {
       fillNameWith('~foo');
       expectToHaveError("can't contain '~'");
       fillNameWith('foo~bar');
@@ -65,7 +69,7 @@ describe('Branch', function() {
       expectToHaveError("can't contain '~'");
     });
-    it("can't have caret anywhere", function() {
+    it("can't have caret anywhere", () => {
       fillNameWith('^foo');
       expectToHaveError("can't contain '^'");
       fillNameWith('foo^bar');
@@ -74,7 +78,7 @@ describe('Branch', function() {
       expectToHaveError("can't contain '^'");
     });
-    it("can't have : anywhere", function() {
+    it("can't have : anywhere", () => {
       fillNameWith(':foo');
       expectToHaveError("can't contain ':'");
       fillNameWith('foo:bar');
@@ -83,7 +87,7 @@ describe('Branch', function() {
       expectToHaveError("can't contain ':'");
     });
-    it("can't have question mark anywhere", function() {
+    it("can't have question mark anywhere", () => {
       fillNameWith('?foo');
       expectToHaveError("can't contain '?'");
       fillNameWith('foo?bar');
@@ -92,7 +96,7 @@ describe('Branch', function() {
       expectToHaveError("can't contain '?'");
     });
-    it("can't have asterisk anywhere", function() {
+    it("can't have asterisk anywhere", () => {
       fillNameWith('*foo');
       expectToHaveError("can't contain '*'");
       fillNameWith('foo*bar');
@@ -101,7 +105,7 @@ describe('Branch', function() {
       expectToHaveError("can't contain '*'");
     });
-    it("can't have open bracket anywhere", function() {
+    it("can't have open bracket anywhere", () => {
       fillNameWith('[foo');
       expectToHaveError("can't contain '['");
       fillNameWith('foo[bar');
@@ -110,7 +114,7 @@ describe('Branch', function() {
       expectToHaveError("can't contain '['");
     });
-    it("can't have a backslash anywhere", function() {
+    it("can't have a backslash anywhere", () => {
       fillNameWith('\\foo');
       expectToHaveError("can't contain '\\'");
       fillNameWith('foo\\bar');
@@ -119,7 +123,7 @@ describe('Branch', function() {
       expectToHaveError("can't contain '\\'");
     });
-    it("can't contain a sequence @{ anywhere", function() {
+    it("can't contain a sequence @{ anywhere", () => {
       fillNameWith('@{foo');
       expectToHaveError("can't contain '@{'");
       fillNameWith('foo@{bar');
@@ -128,42 +132,42 @@ describe('Branch', function() {
       expectToHaveError("can't contain '@{'");
     });
-    it("can't have consecutive slashes", function() {
+    it("can't have consecutive slashes", () => {
       fillNameWith('foo//bar');
       expectToHaveError("can't contain consecutive slashes");
     });
-    it("can't end with a slash", function() {
+    it("can't end with a slash", () => {
       fillNameWith('foo/');
       expectToHaveError("can't end in '/'");
     });
-    it("can't end with a dot", function() {
+    it("can't end with a dot", () => {
       fillNameWith('foo.');
       expectToHaveError("can't end in '.'");
     });
-    it("can't end with .lock", function() {
+    it("can't end with .lock", () => {
       fillNameWith('foo.lock');
       expectToHaveError("can't end in '.lock'");
     });
-    it("can't be the single character @", function() {
+    it("can't be the single character @", () => {
       fillNameWith('@');
       expectToHaveError("can't be '@'");
     });
-    it('concatenates all error messages', function() {
+    it('concatenates all error messages', () => {
       fillNameWith('/foo bar?~.');
       expectToHaveError("can't start with '/', can't contain spaces, '?', '~', can't end in '.'");
     });
-    it("doesn't duplicate error messages", function() {
+    it("doesn't duplicate error messages", () => {
       fillNameWith('?foo?bar?zoo?');
       expectToHaveError("can't contain '?'");
     });
-    it('removes the error message when is a valid name', function() {
+    it('removes the error message when is a valid name', () => {
       fillNameWith('foo?bar');
       expect($('.js-branch-name-error span').length).toEqual(1);
@@ -172,25 +176,25 @@ describe('Branch', function() {
       expect($('.js-branch-name-error span').length).toEqual(0);
     });
-    it('can have dashes anywhere', function() {
+    it('can have dashes anywhere', () => {
       fillNameWith('-foo-bar-zoo-');
       expect($('.js-branch-name-error span').length).toEqual(0);
     });
-    it('can have underscores anywhere', function() {
+    it('can have underscores anywhere', () => {
       fillNameWith('_foo_bar_zoo_');
       expect($('.js-branch-name-error span').length).toEqual(0);
     });
-    it('can have numbers anywhere', function() {
+    it('can have numbers anywhere', () => {
       fillNameWith('1foo2bar3zoo4');
       expect($('.js-branch-name-error span').length).toEqual(0);
     });
-    it('can be only letters', function() {
+    it('can be only letters', () => {
       fillNameWith('foo');
       expect($('.js-branch-name-error span').length).toEqual(0);

spec/javascripts/notes/components/discussion_filter_note_spec.js → spec/frontend/notes/components/discussion_filter_note_spec.js

@@ -34,7 +34,7 @@ describe('DiscussionFilterNote component', () => {
   describe('methods', () => {
     describe('selectFilter', () => {
       it('emits `dropdownSelect` event on `eventHub` with provided param', () => {
-        spyOn(eventHub, '$emit');
+        jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
         vm.selectFilter(1);
@@ -74,7 +74,7 @@ describe('DiscussionFilterNote component', () => {
     it('clicking `Show all activity` button calls `selectFilter("all")` method', () => {
       const showAllBtn = vm.$el.querySelector('.discussion-filter-actions button:first-child');
-      spyOn(vm, 'selectFilter');
+      jest.spyOn(vm, 'selectFilter').mockImplementation(() => {});
       showAllBtn.dispatchEvent(new Event('click'));
@@ -83,7 +83,7 @@ describe('DiscussionFilterNote component', () => {
     it('clicking `Show comments only` button calls `selectFilter("comments")` method', () => {
       const showAllBtn = vm.$el.querySelector('.discussion-filter-actions button:last-child');
-      spyOn(vm, 'selectFilter');
+      jest.spyOn(vm, 'selectFilter').mockImplementation(() => {});
       showAllBtn.dispatchEvent(new Event('click'));

spec/javascripts/notes/components/note_header_spec.js → spec/frontend/notes/components/note_header_spec.js

@@ -90,7 +90,7 @@ describe('note_header component', () => {
     });
     it('emits toggle event on click', done => {
-      spyOn(vm, '$emit');
+      jest.spyOn(vm, '$emit').mockImplementation(() => {});
       vm.$el.querySelector('.js-vue-toggle-button').click();

spec/javascripts/notes/stores/getters_spec.js → spec/frontend/notes/stores/getters_spec.js

@@ -327,7 +327,7 @@ describe('Getters Notes Store', () => {
     beforeEach(() => {
       neighbor = {};
-      findUnresolvedDiscussionIdNeighbor = jasmine.createSpy().and.returnValue(neighbor);
+      findUnresolvedDiscussionIdNeighbor = jest.fn(() => neighbor);
       localGetters = { findUnresolvedDiscussionIdNeighbor };
     });

spec/javascripts/notes/stores/mutation_spec.js → spec/frontend/notes/stores/mutation_spec.js

@@ -498,7 +498,7 @@ describe('Notes Store mutations', () => {
       mutations.UPDATE_RESOLVABLE_DISCUSSIONS_COUNTS(state);
       expect(state).toEqual(
-        jasmine.objectContaining({
+        expect.objectContaining({
           resolvableDiscussionsCount: 1,
           unresolvedDiscussionsCount: 1,
           hasUnresolvedDiscussions: false,
@@ -535,7 +535,7 @@ describe('Notes Store mutations', () => {
       mutations.UPDATE_RESOLVABLE_DISCUSSIONS_COUNTS(state);
       expect(state).toEqual(
-        jasmine.objectContaining({
+        expect.objectContaining({
           resolvableDiscussionsCount: 4,
           unresolvedDiscussionsCount: 2,
           hasUnresolvedDiscussions: true,

spec/javascripts/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js → spec/frontend/pages/projects/pipeline_schedules/shared/components/timezone_dropdown_spec.js

@@ -6,7 +6,7 @@ import TimezoneDropdown, {
   findTimezoneByIdentifier,
 } from '~/pages/projects/pipeline_schedules/shared/components/timezone_dropdown';
-describe('Timezone Dropdown', function() {
+describe('Timezone Dropdown', () => {
   preloadFixtures('pipeline_schedules/edit.html');
   let $inputEl = null;
@@ -81,7 +81,7 @@ describe('Timezone Dropdown', function() {
       });
       it('will call a provided handler when a new timezone is selected', () => {
-        const onSelectTimezone = jasmine.createSpy('onSelectTimezoneMock');
+        const onSelectTimezone = jest.fn();
         // eslint-disable-next-line no-new
         new TimezoneDropdown({
           $inputEl,
@@ -111,7 +111,7 @@ describe('Timezone Dropdown', function() {
       });
       it('will call a provided `displayFormat` handler to format the dropdown value', () => {
-        const displayFormat = jasmine.createSpy('displayFormat');
+        const displayFormat = jest.fn();
         // eslint-disable-next-line no-new
         new TimezoneDropdown({
           $inputEl,

spec/javascripts/pipelines/nav_controls_spec.js → spec/frontend/pipelines/nav_controls_spec.js

@@ -75,7 +75,7 @@ describe('Pipelines Nav Controls', () => {
     });
     it('should emit postAction event when reset runner cache button is clicked', () => {
-      spyOn(component, '$emit');
+      jest.spyOn(component, '$emit').mockImplementation(() => {});
       component.$el.querySelector('.js-clear-cache').click();

spec/javascripts/polyfills/element_spec.js → spec/frontend/polyfills/element_spec.js

 import '~/commons/polyfills/element';
-describe('Element polyfills', function() {
+describe('Element polyfills', () => {
+  let testContext;
+
+  beforeEach(() => {
+    testContext = {};
+  });
+
   beforeEach(() => {
-    this.element = document.createElement('ul');
+    testContext.element = document.createElement('ul');
   });
   describe('matches', () => {
     it('returns true if element matches the selector', () => {
-      expect(this.element.matches('ul')).toBeTruthy();
+      expect(testContext.element.matches('ul')).toBeTruthy();
     });
     it("returns false if element doesn't match the selector", () => {
-      expect(this.element.matches('.not-an-element')).toBeFalsy();
+      expect(testContext.element.matches('.not-an-element')).toBeFalsy();
     });
   });
   describe('closest', () => {
     beforeEach(() => {
-      this.childElement = document.createElement('li');
-      this.element.appendChild(this.childElement);
+      testContext.childElement = document.createElement('li');
+      testContext.element.appendChild(testContext.childElement);
     });
     it('returns the closest parent that matches the selector', () => {
-      expect(this.childElement.closest('ul').toString()).toBe(this.element.toString());
+      expect(testContext.childElement.closest('ul').toString()).toBe(
+        testContext.element.toString(),
+      );
     });
     it('returns itself if it matches the selector', () => {
-      expect(this.childElement.closest('li').toString()).toBe(this.childElement.toString());
+      expect(testContext.childElement.closest('li').toString()).toBe(
+        testContext.childElement.toString(),
+      );
     });
     it('returns undefined if nothing matches the selector', () => {
-      expect(this.childElement.closest('.no-an-element')).toBeFalsy();
+      expect(testContext.childElement.closest('.no-an-element')).toBeFalsy();
     });
   });
 });

spec/javascripts/profile/add_ssh_key_validation_spec.js → spec/frontend/profile/add_ssh_key_validation_spec.js

@@ -4,16 +4,18 @@ describe('AddSshKeyValidation', () => {
   describe('submit', () => {
     it('returns true if isValid is true', () => {
       const addSshKeyValidation = new AddSshKeyValidation({});
-      spyOn(AddSshKeyValidation, 'isPublicKey').and.returnValue(true);
+      jest.spyOn(AddSshKeyValidation, 'isPublicKey').mockReturnValue(true);
       expect(addSshKeyValidation.submit()).toBeTruthy();
     });
     it('calls preventDefault and toggleWarning if isValid is false', () => {
       const addSshKeyValidation = new AddSshKeyValidation({});
-      const event = jasmine.createSpyObj('event', ['preventDefault']);
-      spyOn(AddSshKeyValidation, 'isPublicKey').and.returnValue(false);
-      spyOn(addSshKeyValidation, 'toggleWarning');
+      const event = {
+        preventDefault: jest.fn(),
+      };
+      jest.spyOn(AddSshKeyValidation, 'isPublicKey').mockReturnValue(false);
+      jest.spyOn(addSshKeyValidation, 'toggleWarning').mockImplementation(() => {});
       addSshKeyValidation.submit(event);

spec/javascripts/project_select_combo_button_spec.js → spec/frontend/project_select_combo_button_spec.js

@@ -3,11 +3,17 @@ import ProjectSelectComboButton from '~/project_select_combo_button';
 const fixturePath = 'static/project_select_combo_button.html';
-describe('Project Select Combo Button', function() {
+describe('Project Select Combo Button', () => {
+  let testContext;
+
+  beforeEach(() => {
+    testContext = {};
+  });
+
   preloadFixtures(fixturePath);
-  beforeEach(function() {
-    this.defaults = {
+  beforeEach(() => {
+    testContext.defaults = {
       label: 'Select project to create issue',
       groupId: 12345,
       projectMeta: {
@@ -24,97 +30,107 @@ describe('Project Select Combo Button', function() {
     loadFixtures(fixturePath);
-    this.newItemBtn = document.querySelector('.new-project-item-link');
-    this.projectSelectInput = document.querySelector('.project-item-select');
+    testContext.newItemBtn = document.querySelector('.new-project-item-link');
+    testContext.projectSelectInput = document.querySelector('.project-item-select');
   });
-  describe('on page load when localStorage is empty', function() {
-    beforeEach(function() {
-      this.comboButton = new ProjectSelectComboButton(this.projectSelectInput);
+  describe('on page load when localStorage is empty', () => {
+    beforeEach(() => {
+      testContext.comboButton = new ProjectSelectComboButton(testContext.projectSelectInput);
     });
-    it('newItemBtn href is null', function() {
-      expect(this.newItemBtn.getAttribute('href')).toBe('');
+    it('newItemBtn href is null', () => {
+      expect(testContext.newItemBtn.getAttribute('href')).toBe('');
     });
-    it('newItemBtn text is the plain default label', function() {
-      expect(this.newItemBtn.textContent).toBe(this.defaults.label);
+    it('newItemBtn text is the plain default label', () => {
+      expect(testContext.newItemBtn.textContent).toBe(testContext.defaults.label);
     });
   });
-  describe('on page load when localStorage is filled', function() {
-    beforeEach(function() {
+  describe('on page load when localStorage is filled', () => {
+    beforeEach(() => {
       window.localStorage.setItem(
-        this.defaults.localStorageKey,
-        JSON.stringify(this.defaults.projectMeta),
+        testContext.defaults.localStorageKey,
+        JSON.stringify(testContext.defaults.projectMeta),
       );
-      this.comboButton = new ProjectSelectComboButton(this.projectSelectInput);
+      testContext.comboButton = new ProjectSelectComboButton(testContext.projectSelectInput);
     });
-    it('newItemBtn href is correctly set', function() {
-      expect(this.newItemBtn.getAttribute('href')).toBe(this.defaults.projectMeta.url);
+    it('newItemBtn href is correctly set', () => {
+      expect(testContext.newItemBtn.getAttribute('href')).toBe(
+        testContext.defaults.projectMeta.url,
+      );
     });
-    it('newItemBtn text is the cached label', function() {
-      expect(this.newItemBtn.textContent).toBe(`New issue in ${this.defaults.projectMeta.name}`);
+    it('newItemBtn text is the cached label', () => {
+      expect(testContext.newItemBtn.textContent).toBe(
+        `New issue in ${testContext.defaults.projectMeta.name}`,
+      );
     });
-    afterEach(function() {
+    afterEach(() => {
       window.localStorage.clear();
     });
   });
-  describe('after selecting a new project', function() {
-    beforeEach(function() {
-      this.comboButton = new ProjectSelectComboButton(this.projectSelectInput);
+  describe('after selecting a new project', () => {
+    beforeEach(() => {
+      testContext.comboButton = new ProjectSelectComboButton(testContext.projectSelectInput);
       // mock the effect of selecting an item from the projects dropdown (select2)
       $('.project-item-select')
-        .val(JSON.stringify(this.defaults.newProjectMeta))
+        .val(JSON.stringify(testContext.defaults.newProjectMeta))
         .trigger('change');
     });
-    it('newItemBtn href is correctly set', function() {
-      expect(this.newItemBtn.getAttribute('href')).toBe('http://myothercoolproject.com/issues/new');
+    it('newItemBtn href is correctly set', () => {
+      expect(testContext.newItemBtn.getAttribute('href')).toBe(
+        'http://myothercoolproject.com/issues/new',
+      );
     });
-    it('newItemBtn text is the selected project label', function() {
-      expect(this.newItemBtn.textContent).toBe(`New issue in ${this.defaults.newProjectMeta.name}`);
+    it('newItemBtn text is the selected project label', () => {
+      expect(testContext.newItemBtn.textContent).toBe(
+        `New issue in ${testContext.defaults.newProjectMeta.name}`,
+      );
     });
-    afterEach(function() {
+    afterEach(() => {
       window.localStorage.clear();
     });
   });
-  describe('deriveTextVariants', function() {
-    beforeEach(function() {
-      this.mockExecutionContext = {
+  describe('deriveTextVariants', () => {
+    beforeEach(() => {
+      testContext.mockExecutionContext = {
         resourceType: '',
         resourceLabel: '',
       };
-      this.comboButton = new ProjectSelectComboButton(this.projectSelectInput);
-      this.method = this.comboButton.deriveTextVariants.bind(this.mockExecutionContext);
+      testContext.comboButton = new ProjectSelectComboButton(testContext.projectSelectInput);
+      testContext.method = testContext.comboButton.deriveTextVariants.bind(
+        testContext.mockExecutionContext,
+      );
     });
-    it('correctly derives test variants for merge requests', function() {
-      this.mockExecutionContext.resourceType = 'merge_requests';
-      this.mockExecutionContext.resourceLabel = 'New merge request';
-      const returnedVariants = this.method();
+    it('correctly derives test variants for merge requests', () => {
+      testContext.mockExecutionContext.resourceType = 'merge_requests';
+      testContext.mockExecutionContext.resourceLabel = 'New merge request';
+      const returnedVariants = testContext.method();
       expect(returnedVariants.localStorageItemType).toBe('new-merge-request');
       expect(returnedVariants.defaultTextPrefix).toBe('New merge request');
       expect(returnedVariants.presetTextSuffix).toBe('merge request');
     });
-    it('correctly derives text variants for issues', function() {
-      this.mockExecutionContext.resourceType = 'issues';
-      this.mockExecutionContext.resourceLabel = 'New issue';
-      const returnedVariants = this.method();
+    it('correctly derives text variants for issues', () => {
+      testContext.mockExecutionContext.resourceType = 'issues';
+      testContext.mockExecutionContext.resourceLabel = 'New issue';
+      const returnedVariants = testContext.method();
       expect(returnedVariants.localStorageItemType).toBe('new-issue');
       expect(returnedVariants.defaultTextPrefix).toBe('New issue');

spec/javascripts/shared/popover_spec.js → spec/frontend/shared/popover_spec.js

@@ -29,7 +29,7 @@ describe('popover', () => {
           toggleClass: () => {},
         };
-        spyOn(context, 'popover').and.callFake(method => {
+        jest.spyOn(context, 'popover').mockImplementation(method => {
           expect(method).toEqual('show');
           done();
         });
@@ -44,7 +44,7 @@ describe('popover', () => {
           toggleClass: () => {},
         };
-        spyOn(context, 'toggleClass').and.callFake((classNames, show) => {
+        jest.spyOn(context, 'toggleClass').mockImplementation((classNames, show) => {
           expect(classNames).toEqual('disable-animation js-popover-show');
           expect(show).toEqual(true);
           done();
@@ -80,7 +80,7 @@ describe('popover', () => {
           toggleClass: () => {},
         };
-        spyOn(context, 'popover').and.callFake(method => {
+        jest.spyOn(context, 'popover').mockImplementation(method => {
           expect(method).toEqual('hide');
           done();
         });
@@ -95,7 +95,7 @@ describe('popover', () => {
           toggleClass: () => {},
         };
-        spyOn(context, 'toggleClass').and.callFake((classNames, show) => {
+        jest.spyOn(context, 'toggleClass').mockImplementation((classNames, show) => {
           expect(classNames).toEqual('disable-animation js-popover-show');
           expect(show).toEqual(false);
           done();
@@ -112,13 +112,13 @@ describe('popover', () => {
         length: 0,
       };
-      spyOn($.fn, 'init').and.callFake(selector =>
-        selector === '.popover:hover' ? fakeJquery : $.fn,
-      );
-      spyOn(togglePopover, 'call');
+      jest
+        .spyOn($.fn, 'init')
+        .mockImplementation(selector => (selector === '.popover:hover' ? fakeJquery : $.fn));
+      jest.spyOn(togglePopover, 'call').mockImplementation(() => {});
       mouseleave();
-      expect(togglePopover.call).toHaveBeenCalledWith(jasmine.any(Object), false);
+      expect(togglePopover.call).toHaveBeenCalledWith(expect.any(Object), false);
     });
     it('does not call hide popover if .popover:hover is true', () => {
@@ -126,10 +126,10 @@ describe('popover', () => {
         length: 1,
       };
-      spyOn($.fn, 'init').and.callFake(selector =>
-        selector === '.popover:hover' ? fakeJquery : $.fn,
-      );
-      spyOn(togglePopover, 'call');
+      jest
+        .spyOn($.fn, 'init')
+        .mockImplementation(selector => (selector === '.popover:hover' ? fakeJquery : $.fn));
+      jest.spyOn(togglePopover, 'call').mockImplementation(() => {});
       mouseleave();
       expect(togglePopover.call).not.toHaveBeenCalledWith(false);
@@ -140,15 +140,15 @@ describe('popover', () => {
     const context = {};
     it('shows popover', () => {
-      spyOn(togglePopover, 'call').and.returnValue(false);
+      jest.spyOn(togglePopover, 'call').mockReturnValue(false);
       mouseenter.call(context);
-      expect(togglePopover.call).toHaveBeenCalledWith(jasmine.any(Object), true);
+      expect(togglePopover.call).toHaveBeenCalledWith(expect.any(Object), true);
     });
     it('registers mouseleave event if popover is showed', done => {
-      spyOn(togglePopover, 'call').and.returnValue(true);
-      spyOn($.fn, 'on').and.callFake(eventName => {
+      jest.spyOn(togglePopover, 'call').mockReturnValue(true);
+      jest.spyOn($.fn, 'on').mockImplementation(eventName => {
         expect(eventName).toEqual('mouseleave');
         done();
       });
@@ -156,8 +156,8 @@ describe('popover', () => {
     });
     it('does not register mouseleave event if popover is not showed', () => {
-      spyOn(togglePopover, 'call').and.returnValue(false);
-      const spy = spyOn($.fn, 'on').and.callFake(() => {});
+      jest.spyOn(togglePopover, 'call').mockReturnValue(false);
+      const spy = jest.spyOn($.fn, 'on').mockImplementation(() => {});
       mouseenter.call(context);
       expect(spy).not.toHaveBeenCalled();

spec/javascripts/sidebar/sidebar_store_spec.js → spec/frontend/sidebar/sidebar_store_spec.js

@@ -27,9 +27,15 @@ const PARTICIPANT = {
 const PARTICIPANT_LIST = [PARTICIPANT, { ...PARTICIPANT, id: 2 }, { ...PARTICIPANT, id: 3 }];
-describe('Sidebar store', function() {
+describe('Sidebar store', () => {
+  let testContext;
+
+  beforeEach(() => {
+    testContext = {};
+  });
+
   beforeEach(() => {
-    this.store = new SidebarStore({
+    testContext.store = new SidebarStore({
       currentUser: {
         id: 1,
         name: 'Administrator',
@@ -48,60 +54,60 @@ describe('Sidebar store', function() {
   });
   it('has default isFetching values', () => {
-    expect(this.store.isFetching.assignees).toBe(true);
+    expect(testContext.store.isFetching.assignees).toBe(true);
   });
   it('adds a new assignee', () => {
-    this.store.addAssignee(ASSIGNEE);
-    expect(this.store.assignees.length).toEqual(1);
+    testContext.store.addAssignee(ASSIGNEE);
+    expect(testContext.store.assignees.length).toEqual(1);
   });
   it('removes an assignee', () => {
-    this.store.removeAssignee(ASSIGNEE);
-    expect(this.store.assignees.length).toEqual(0);
+    testContext.store.removeAssignee(ASSIGNEE);
+    expect(testContext.store.assignees.length).toEqual(0);
   });
   it('finds an existent assignee', () => {
     let foundAssignee;
-    this.store.addAssignee(ASSIGNEE);
-    foundAssignee = this.store.findAssignee(ASSIGNEE);
+    testContext.store.addAssignee(ASSIGNEE);
+    foundAssignee = testContext.store.findAssignee(ASSIGNEE);
     expect(foundAssignee).toBeDefined();
     expect(foundAssignee).toEqual(ASSIGNEE);
-    foundAssignee = this.store.findAssignee(ANOTHER_ASSINEE);
+    foundAssignee = testContext.store.findAssignee(ANOTHER_ASSINEE);
     expect(foundAssignee).toBeUndefined();
   });
   it('removes all assignees', () => {
-    this.store.removeAllAssignees();
-    expect(this.store.assignees.length).toEqual(0);
+    testContext.store.removeAllAssignees();
+    expect(testContext.store.assignees.length).toEqual(0);
   });
   it('sets participants data', () => {
-    expect(this.store.participants.length).toEqual(0);
-    this.store.setParticipantsData({
+    expect(testContext.store.participants.length).toEqual(0);
+    testContext.store.setParticipantsData({
       participants: PARTICIPANT_LIST,
     });
-    expect(this.store.isFetching.participants).toEqual(false);
-    expect(this.store.participants.length).toEqual(PARTICIPANT_LIST.length);
+    expect(testContext.store.isFetching.participants).toEqual(false);
+    expect(testContext.store.participants.length).toEqual(PARTICIPANT_LIST.length);
   });
   it('sets subcriptions data', () => {
-    expect(this.store.subscribed).toEqual(null);
-    this.store.setSubscriptionsData({
+    expect(testContext.store.subscribed).toEqual(null);
+    testContext.store.setSubscriptionsData({
       subscribed: true,
     });
-    expect(this.store.isFetching.subscriptions).toEqual(false);
-    expect(this.store.subscribed).toEqual(true);
+    expect(testContext.store.isFetching.subscriptions).toEqual(false);
+    expect(testContext.store.subscribed).toEqual(true);
   });
   it('set assigned data', () => {
@@ -109,54 +115,54 @@ describe('Sidebar store', function() {
       assignees: UsersMockHelper.createNumberRandomUsers(3),
     };
-    this.store.setAssigneeData(users);
-    expect(this.store.isFetching.assignees).toBe(false);
-    expect(this.store.assignees.length).toEqual(3);
+    testContext.store.setAssigneeData(users);
+    expect(testContext.store.isFetching.assignees).toBe(false);
+    expect(testContext.store.assignees.length).toEqual(3);
   });
   it('sets fetching state', () => {
-    expect(this.store.isFetching.participants).toEqual(true);
-    this.store.setFetchingState('participants', false);
-    expect(this.store.isFetching.participants).toEqual(false);
+    expect(testContext.store.isFetching.participants).toEqual(true);
+    testContext.store.setFetchingState('participants', false);
+    expect(testContext.store.isFetching.participants).toEqual(false);
   });
   it('sets loading state', () => {
-    this.store.setLoadingState('assignees', true);
-    expect(this.store.isLoading.assignees).toEqual(true);
+    testContext.store.setLoadingState('assignees', true);
+    expect(testContext.store.isLoading.assignees).toEqual(true);
   });
   it('set time tracking data', () => {
-    this.store.setTimeTrackingData(Mock.time);
-    expect(this.store.timeEstimate).toEqual(Mock.time.time_estimate);
-    expect(this.store.totalTimeSpent).toEqual(Mock.time.total_time_spent);
-    expect(this.store.humanTimeEstimate).toEqual(Mock.time.human_time_estimate);
-    expect(this.store.humanTotalTimeSpent).toEqual(Mock.time.human_total_time_spent);
+    testContext.store.setTimeTrackingData(Mock.time);
+    expect(testContext.store.timeEstimate).toEqual(Mock.time.time_estimate);
+    expect(testContext.store.totalTimeSpent).toEqual(Mock.time.total_time_spent);
+    expect(testContext.store.humanTimeEstimate).toEqual(Mock.time.human_time_estimate);
+    expect(testContext.store.humanTotalTimeSpent).toEqual(Mock.time.human_total_time_spent);
   });
   it('set autocomplete projects', () => {
     const projects = [{ id: 0 }];
-    this.store.setAutocompleteProjects(projects);
-    expect(this.store.autocompleteProjects).toEqual(projects);
+    testContext.store.setAutocompleteProjects(projects);
+    expect(testContext.store.autocompleteProjects).toEqual(projects);
   });
   it('sets subscribed state', () => {
-    expect(this.store.subscribed).toEqual(null);
-    this.store.setSubscribedState(true);
-    expect(this.store.subscribed).toEqual(true);
+    expect(testContext.store.subscribed).toEqual(null);
+    testContext.store.setSubscribedState(true);
+    expect(testContext.store.subscribed).toEqual(true);
   });
   it('set move to project ID', () => {
     const projectId = 7;
-    this.store.setMoveToProjectId(projectId);
-    expect(this.store.moveToProjectId).toEqual(projectId);
+    testContext.store.setMoveToProjectId(projectId);
+    expect(testContext.store.moveToProjectId).toEqual(projectId);
   });
 });

spec/javascripts/syntax_highlight_spec.js → spec/frontend/syntax_highlight_spec.js

@@ -3,19 +3,19 @@
 import $ from 'jquery';
 import syntaxHighlight from '~/syntax_highlight';
-describe('Syntax Highlighter', function() {
-  const stubUserColorScheme = function(value) {
+describe('Syntax Highlighter', () => {
+  const stubUserColorScheme = value => {
     if (window.gon == null) {
       window.gon = {};
     }
     return (window.gon.user_color_scheme = value);
   };
-  describe('on a js-syntax-highlight element', function() {
-    beforeEach(function() {
-      return setFixtures('<div class="js-syntax-highlight"></div>');
+  describe('on a js-syntax-highlight element', () => {
+    beforeEach(() => {
+      setFixtures('<div class="js-syntax-highlight"></div>');
     });
-    it('applies syntax highlighting', function() {
+    it('applies syntax highlighting', () => {
       stubUserColorScheme('monokai');
       syntaxHighlight($('.js-syntax-highlight'));
@@ -23,14 +23,14 @@ describe('Syntax Highlighter', function() {
     });
   });
-  describe('on a parent element', function() {
-    beforeEach(function() {
-      return setFixtures(
+  describe('on a parent element', () => {
+    beforeEach(() => {
+      setFixtures(
         '<div class="parent">\n  <div class="js-syntax-highlight"></div>\n  <div class="foo"></div>\n  <div class="js-syntax-highlight"></div>\n</div>',
       );
     });
-    it('applies highlighting to all applicable children', function() {
+    it('applies highlighting to all applicable children', () => {
       stubUserColorScheme('monokai');
       syntaxHighlight($('.parent'));
@@ -38,11 +38,9 @@ describe('Syntax Highlighter', function() {
       expect($('.monokai').length).toBe(2);
     });
-    it('prevents an infinite loop when no matches exist', function() {
+    it('prevents an infinite loop when no matches exist', () => {
       setFixtures('<div></div>');
-      const highlight = function() {
-        return syntaxHighlight($('div'));
-      };
+      const highlight = () => syntaxHighlight($('div'));
       expect(highlight).not.toThrow();
     });

spec/javascripts/task_list_spec.js → spec/frontend/task_list_spec.js

@@ -25,10 +25,10 @@ describe('TaskList', () => {
   });
   it('should call init when the class constructed', () => {
-    spyOn(TaskList.prototype, 'init').and.callThrough();
-    spyOn(TaskList.prototype, 'disable');
-    spyOn($.prototype, 'taskList');
-    spyOn($.prototype, 'on');
+    jest.spyOn(TaskList.prototype, 'init');
+    jest.spyOn(TaskList.prototype, 'disable').mockImplementation(() => {});
+    jest.spyOn($.prototype, 'taskList').mockImplementation(() => {});
+    jest.spyOn($.prototype, 'on').mockImplementation(() => {});
     taskList = createTaskList();
     const $taskListEl = $(taskList.taskListContainerSelector);
@@ -59,7 +59,7 @@ describe('TaskList', () => {
   describe('disableTaskListItems', () => {
     it('should call taskList method with disable param', () => {
-      spyOn($.prototype, 'taskList');
+      jest.spyOn($.prototype, 'taskList').mockImplementation(() => {});
       taskList.disableTaskListItems({ currentTarget });
@@ -69,7 +69,7 @@ describe('TaskList', () => {
   describe('enableTaskListItems', () => {
     it('should call taskList method with enable param', () => {
-      spyOn($.prototype, 'taskList');
+      jest.spyOn($.prototype, 'taskList').mockImplementation(() => {});
       taskList.enableTaskListItems({ currentTarget });
@@ -79,8 +79,8 @@ describe('TaskList', () => {
   describe('disable', () => {
     it('should disable task list items and off document event', () => {
-      spyOn(taskList, 'disableTaskListItems');
-      spyOn($.prototype, 'off');
+      jest.spyOn(taskList, 'disableTaskListItems').mockImplementation(() => {});
+      jest.spyOn($.prototype, 'off').mockImplementation(() => {});
       taskList.disable();
@@ -95,10 +95,10 @@ describe('TaskList', () => {
   describe('update', () => {
     it('should disable task list items and make a patch request then enable them again', done => {
       const response = { data: { lock_version: 3 } };
-      spyOn(taskList, 'enableTaskListItems');
-      spyOn(taskList, 'disableTaskListItems');
-      spyOn(taskList, 'onSuccess');
-      spyOn(axios, 'patch').and.returnValue(Promise.resolve(response));
+      jest.spyOn(taskList, 'enableTaskListItems').mockImplementation(() => {});
+      jest.spyOn(taskList, 'disableTaskListItems').mockImplementation(() => {});
+      jest.spyOn(taskList, 'onSuccess').mockImplementation(() => {});
+      jest.spyOn(axios, 'patch').mockReturnValue(Promise.resolve(response));
       const value = 'hello world';
       const endpoint = '/foo';
@@ -139,9 +139,9 @@ describe('TaskList', () => {
   it('should handle request error and enable task list items', done => {
     const response = { data: { error: 1 } };
-    spyOn(taskList, 'enableTaskListItems');
-    spyOn(taskList, 'onError');
-    spyOn(axios, 'patch').and.returnValue(Promise.reject({ response })); // eslint-disable-line prefer-promise-reject-errors
+    jest.spyOn(taskList, 'enableTaskListItems').mockImplementation(() => {});
+    jest.spyOn(taskList, 'onError').mockImplementation(() => {});
+    jest.spyOn(axios, 'patch').mockReturnValue(Promise.reject({ response })); // eslint-disable-line prefer-promise-reject-errors
     const event = { detail: {} };
     taskList

spec/javascripts/version_check_image_spec.js → spec/frontend/version_check_image_spec.js

@@ -2,32 +2,39 @@ import $ from 'jquery';
 import VersionCheckImage from '~/version_check_image';
 import ClassSpecHelper from './helpers/class_spec_helper';
-describe('VersionCheckImage', function() {
-  describe('bindErrorEvent', function() {
+describe('VersionCheckImage', () => {
+  let testContext;
+
+  beforeEach(() => {
+    testContext = {};
+  });
+
+  describe('bindErrorEvent', () => {
     ClassSpecHelper.itShouldBeAStaticMethod(VersionCheckImage, 'bindErrorEvent');
-    beforeEach(function() {
-      this.imageElement = $('<div></div>');
+    beforeEach(() => {
+      testContext.imageElement = $('<div></div>');
     });
-    it('registers an error event', function() {
-      spyOn($.prototype, 'on');
-      spyOn($.prototype, 'off').and.callFake(function() {
+    it('registers an error event', () => {
+      jest.spyOn($.prototype, 'on').mockImplementation(() => {});
+      // eslint-disable-next-line func-names
+      jest.spyOn($.prototype, 'off').mockImplementation(function() {
         return this;
       });
-      VersionCheckImage.bindErrorEvent(this.imageElement);
+      VersionCheckImage.bindErrorEvent(testContext.imageElement);
       expect($.prototype.off).toHaveBeenCalledWith('error');
-      expect($.prototype.on).toHaveBeenCalledWith('error', jasmine.any(Function));
+      expect($.prototype.on).toHaveBeenCalledWith('error', expect.any(Function));
     });
-    it('hides the imageElement on error', function() {
-      spyOn($.prototype, 'hide');
-      VersionCheckImage.bindErrorEvent(this.imageElement);
-      this.imageElement.trigger('error');
+    it('hides the imageElement on error', () => {
+      jest.spyOn($.prototype, 'hide').mockImplementation(() => {});
+      VersionCheckImage.bindErrorEvent(testContext.imageElement);
+      testContext.imageElement.trigger('error');
       expect($.prototype.hide).toHaveBeenCalled();
     });

spec/javascripts/vue_shared/components/gl_modal_vuex_spec.js → spec/frontend/vue_shared/components/gl_modal_vuex_spec.js

@@ -45,8 +45,8 @@ describe('GlModalVuex', () => {
     state = createState();
     actions = {
-      show: jasmine.createSpy('show'),
-      hide: jasmine.createSpy('hide'),
+      show: jest.fn(),
+      hide: jest.fn(),
     };
   });
@@ -81,7 +81,7 @@ describe('GlModalVuex', () => {
   });
   it('passes listeners through to gl-modal', () => {
-    const ok = jasmine.createSpy('ok');
+    const ok = jest.fn();
     factory({
       listeners: { ok },
@@ -119,7 +119,7 @@ describe('GlModalVuex', () => {
     state.isVisible = false;
     factory();
-    const rootEmit = spyOn(wrapper.vm.$root, '$emit');
+    const rootEmit = jest.spyOn(wrapper.vm.$root, '$emit');
     state.isVisible = true;
@@ -136,7 +136,7 @@ describe('GlModalVuex', () => {
     state.isVisible = true;
     factory();
-    const rootEmit = spyOn(wrapper.vm.$root, '$emit');
+    const rootEmit = jest.spyOn(wrapper.vm.$root, '$emit');
     state.isVisible = false;

spec/javascripts/vue_shared/components/markdown/suggestion_diff_spec.js → spec/frontend/vue_shared/components/markdown/suggestion_diff_spec.js

@@ -92,7 +92,7 @@ describe('Suggestion Diff component', () => {
   describe('applySuggestion', () => {
     it('emits apply event when applySuggestion is called', () => {
       const callback = () => {};
-      spyOn(vm, '$emit');
+      jest.spyOn(vm, '$emit').mockImplementation(() => {});
       vm.applySuggestion(callback);
       expect(vm.$emit).toHaveBeenCalledWith('apply', { suggestionId: vm.suggestion.id, callback });

spec/javascripts/vue_shared/components/user_avatar/user_avatar_list_spec.js → spec/frontend/vue_shared/components/user_avatar/user_avatar_list_spec.js

@@ -86,7 +86,7 @@ describe('UserAvatarList', () => {
       expect(linkProps).toEqual(
         items.map(x =>
-          jasmine.objectContaining({
+          expect.objectContaining({
             linkHref: x.web_url,
             imgSrc: x.avatar_url,
             imgAlt: x.name,