Migrate some IDE component specs to Jest

Migrate spec/javascripts/ide/components from Jasmine to Jest

spec/javascripts/ide/components/commit_sidebar/radio_group_spec.js → spec/frontend/ide/components/commit_sidebar/radio_group_spec.js

 import Vue from 'vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { resetStore } from 'spec/ide/helpers';
+import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { resetStore } from 'jest/ide/helpers';
 import store from '~/ide/stores';
 import radioGroup from '~/ide/components/commit_sidebar/radio_group.vue';
 
@@ -41,13 +41,8 @@ describe('IDE commit sidebar radio group', () => {
         radioGroup,
       },
       store,
-      template: `
-        <radio-group
-          value="1"
-        >
-          Testing slot
-        </radio-group>
-      `,
+      render: createElement =>
+        createElement('radio-group', { props: { value: '1' } }, 'Testing slot'),
     });
 
     vm.$mount();

spec/javascripts/ide/components/file_row_extra_spec.js → spec/frontend/ide/components/file_row_extra_spec.js

 import Vue from 'vue';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
+import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
 import { createStore } from '~/ide/stores';
 import FileRowExtra from '~/ide/components/file_row_extra.vue';
 import { file, resetStore } from '../helpers';
@@ -23,9 +23,9 @@ describe('IDE extra file row component', () => {
       dropdownOpen: false,
     });
 
-    spyOnProperty(vm, 'getUnstagedFilesCountForPath').and.returnValue(() => unstagedFilesCount);
-    spyOnProperty(vm, 'getStagedFilesCountForPath').and.returnValue(() => stagedFilesCount);
-    spyOnProperty(vm, 'getChangesInFolder').and.returnValue(() => changesCount);
+    jest.spyOn(vm, 'getUnstagedFilesCountForPath', 'get').mockReturnValue(() => unstagedFilesCount);
+    jest.spyOn(vm, 'getStagedFilesCountForPath', 'get').mockReturnValue(() => stagedFilesCount);
+    jest.spyOn(vm, 'getChangesInFolder', 'get').mockReturnValue(() => changesCount);
 
     vm.$mount();
   });

spec/javascripts/ide/components/ide_review_spec.js → spec/frontend/ide/components/ide_review_spec.js

 import Vue from 'vue';
 import IdeReview from '~/ide/components/ide_review.vue';
-import store from '~/ide/stores';
+import { createStore } from '~/ide/stores';
 import { createComponentWithStore } from '../../helpers/vue_mount_component_helper';
 import { trimText } from '../../helpers/text_helper';
 import { resetStore, file } from '../helpers';
@@ -9,8 +9,10 @@ import { projectData } from '../mock_data';
 describe('IDE review mode', () => {
   const Component = Vue.extend(IdeReview);
   let vm;
+  let store;
 
   beforeEach(() => {
+    store = createStore();
     store.state.currentProjectId = 'abcproject';
     store.state.currentBranchId = 'master';
     store.state.projects.abcproject = Object.assign({}, projectData);
@@ -33,14 +35,14 @@ describe('IDE review mode', () => {
   });
 
   describe('merge request', () => {
-    beforeEach(done => {
+    beforeEach(() => {
       store.state.currentMergeRequestId = '1';
       store.state.projects.abcproject.mergeRequests['1'] = {
         iid: 123,
         web_url: 'testing123',
       };
 
-      vm.$nextTick(done);
+      return vm.$nextTick();
     });
 
     it('renders edit dropdown', () => {
@@ -48,21 +50,23 @@ describe('IDE review mode', () => {
     });
 
     it('renders merge request link & IID', () => {
-      const link = vm.$el.querySelector('.ide-review-sub-header');
+      store.state.viewer = 'mrdiff';
 
-      expect(link.querySelector('a').getAttribute('href')).toBe('testing123');
-      expect(trimText(link.textContent)).toBe('Merge request (!123)');
+      return vm.$nextTick(() => {
+        const link = vm.$el.querySelector('.ide-review-sub-header');
+
+        expect(link.querySelector('a').getAttribute('href')).toBe('testing123');
+        expect(trimText(link.textContent)).toBe('Merge request (!123)');
+      });
     });
 
-    it('changes text to latest changes when viewer is not mrdiff', done => {
+    it('changes text to latest changes when viewer is not mrdiff', () => {
       store.state.viewer = 'diff';
 
-      vm.$nextTick(() => {
+      return vm.$nextTick(() => {
         expect(trimText(vm.$el.querySelector('.ide-review-sub-header').textContent)).toBe(
           'Latest changes',
         );
-
-        done();
       });
     });
   });

spec/javascripts/ide/components/ide_status_bar_spec.js → spec/frontend/ide/components/ide_status_bar_spec.js

 import Vue from 'vue';
 import _ from 'lodash';
-import { createComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { TEST_HOST } from 'spec/test_constants';
+import { createComponentWithStore } from 'helpers/vue_mount_component_helper';
+import { TEST_HOST } from '../../helpers/test_constants';
 import { createStore } from '~/ide/stores';
 import IdeStatusBar from '~/ide/components/ide_status_bar.vue';
 import { rightSidebarViews } from '~/ide/constants';
@@ -45,26 +45,24 @@ describe('ideStatusBar', () => {
     });
 
     describe('commitAgeUpdate', () => {
-      beforeEach(function() {
-        jasmine.clock().install();
-        spyOn(vm, 'commitAgeUpdate').and.callFake(() => {});
-        vm.startTimer();
+      beforeEach(() => {
+        jest.spyOn(vm, 'commitAgeUpdate').mockImplementation(() => {});
       });
 
-      afterEach(function() {
-        jasmine.clock().uninstall();
+      afterEach(() => {
+        jest.clearAllTimers();
       });
 
       it('gets called every second', () => {
         expect(vm.commitAgeUpdate).not.toHaveBeenCalled();
 
-        jasmine.clock().tick(1100);
+        jest.advanceTimersByTime(1000);
 
-        expect(vm.commitAgeUpdate.calls.count()).toEqual(1);
+        expect(vm.commitAgeUpdate.mock.calls.length).toEqual(1);
 
-        jasmine.clock().tick(1000);
+        jest.advanceTimersByTime(1000);
 
-        expect(vm.commitAgeUpdate.calls.count()).toEqual(2);
+        expect(vm.commitAgeUpdate.mock.calls.length).toEqual(2);
       });
     });
 
@@ -76,7 +74,7 @@ describe('ideStatusBar', () => {
 
     describe('pipeline status', () => {
       it('opens right sidebar on clicking icon', done => {
-        spyOn(vm, 'openRightPane');
+        jest.spyOn(vm, 'openRightPane').mockImplementation(() => {});
         Vue.set(vm.$store.state.pipelines, 'latestPipeline', {
           details: {
             status: {

spec/javascripts/ide/components/merge_requests/item_spec.js → spec/frontend/ide/components/merge_requests/item_spec.js

@@ -33,7 +33,7 @@ describe('IDE merge request item', () => {
       `/project/${vm.item.projectPathWithNamespace}/merge_requests/${vm.item.iid}`,
     ).href;
 
-    expect(vm.$el).toMatch('a');
+    expect(vm.$el.tagName.toLowerCase()).toBe('a');
     expect(vm.$el).toHaveAttr('href', expectedHref);
   });
 

spec/javascripts/ide/components/new_dropdown/upload_spec.js → spec/frontend/ide/components/new_dropdown/upload_spec.js

 import Vue from 'vue';
-import createComponent from 'spec/helpers/vue_mount_component_helper';
+import createComponent from 'helpers/vue_mount_component_helper';
 import upload from '~/ide/components/new_dropdown/upload.vue';
 
 describe('new dropdown upload', () => {
@@ -14,7 +14,7 @@ describe('new dropdown upload', () => {
 
     vm.entryName = 'testing';
 
-    spyOn(vm, '$emit').and.callThrough();
+    jest.spyOn(vm, '$emit');
   });
 
   afterEach(() => {
@@ -25,22 +25,22 @@ describe('new dropdown upload', () => {
     it('calls for each file', () => {
       const files = ['test', 'test2', 'test3'];
 
-      spyOn(vm, 'readFile');
-      spyOnProperty(vm.$refs.fileUpload, 'files').and.returnValue(files);
+      jest.spyOn(vm, 'readFile').mockImplementation(() => {});
+      jest.spyOn(vm.$refs.fileUpload, 'files', 'get').mockReturnValue(files);
 
       vm.openFile();
 
-      expect(vm.readFile.calls.count()).toBe(3);
+      expect(vm.readFile.mock.calls.length).toBe(3);
 
       files.forEach((file, i) => {
-        expect(vm.readFile.calls.argsFor(i)).toEqual([file]);
+        expect(vm.readFile.mock.calls[i]).toEqual([file]);
       });
     });
   });
 
   describe('readFile', () => {
     beforeEach(() => {
-      spyOn(FileReader.prototype, 'readAsDataURL');
+      jest.spyOn(FileReader.prototype, 'readAsDataURL').mockImplementation(() => {});
     });
 
     it('calls readAsDataURL for all files', () => {
@@ -69,7 +69,7 @@ describe('new dropdown upload', () => {
     };
 
     beforeEach(() => {
-      spyOn(FileReader.prototype, 'readAsText').and.callThrough();
+      jest.spyOn(FileReader.prototype, 'readAsText');
     });
 
     it('calls readAsText and creates file in plain text (without encoding) if the file content is plain text', done => {