Merge branch '34723-move-tests-to-jest' into 'master'

Move some board tests to jest

See merge request gitlab-org/gitlab!24365

ee/spec/javascripts/boards/components/board_list_selector/assignees_list_item_spec.js → ee/spec/frontend/boards/components/board_list_selector/assignees_list_item_spec.js

 import Vue from 'vue';
 
 import AssigneesListItem from 'ee/boards/components/boards_list_selector/assignees_list_item.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 
-import { mockAssigneesList } from 'spec/boards/mock_data';
+import { mockAssigneesList } from 'jest/boards/mock_data';
 
 const createComponent = () => {
   const Component = Vue.extend(AssigneesListItem);
@@ -35,7 +35,7 @@ describe('AssigneesListItem', () => {
   describe('methods', () => {
     describe('handleItemClick', () => {
       it('emits `onItemSelect` event on component and sends `assignee` as event param', () => {
-        spyOn(vm, '$emit');
+        jest.spyOn(vm, '$emit');
         const assignee = mockAssigneesList[0];
 
         vm.handleItemClick();

ee/spec/javascripts/boards/components/board_list_selector/list_container_spec.js → ee/spec/frontend/boards/components/board_list_selector/list_container_spec.js

 import Vue from 'vue';
 
 import ListContainer from 'ee/boards/components/boards_list_selector/list_container.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 
-import { mockAssigneesList } from 'spec/boards/mock_data';
+import { mockAssigneesList } from 'jest/boards/mock_data';
 
 const createComponent = () => {
   const Component = Vue.extend(ListContainer);
@@ -66,7 +66,7 @@ describe('ListContainer', () => {
 
     describe('handleItemClick', () => {
       it('emits `onItemSelect` event on component and sends `assignee` as event param', () => {
-        spyOn(vm, '$emit');
+        jest.spyOn(vm, '$emit');
         const assignee = mockAssigneesList[0];
 
         vm.handleItemClick(assignee);
@@ -81,14 +81,11 @@ describe('ListContainer', () => {
       expect(vm.$el.classList.contains('dropdown-assignees-list')).toBe(true);
     });
 
-    it('renders loading animation when prop `loading` is true', done => {
+    it('renders loading animation when prop `loading` is true', () => {
       vm.loading = true;
-      Vue.nextTick()
-        .then(() => {
-          expect(vm.$el.querySelector('.dropdown-loading')).not.toBeNull();
-        })
-        .then(done)
-        .catch(done.fail);
+      return Vue.nextTick().then(() => {
+        expect(vm.$el.querySelector('.dropdown-loading')).not.toBeNull();
+      });
     });
 
     it('renders dropdown body elements', () => {

ee/spec/javascripts/boards/components/board_list_selector/list_content_spec.js → ee/spec/frontend/boards/components/board_list_selector/list_content_spec.js

 import Vue from 'vue';
 
 import ListContent from 'ee/boards/components/boards_list_selector/list_content.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 
-import { mockAssigneesList } from 'spec/boards/mock_data';
+import { mockAssigneesList } from 'jest/boards/mock_data';
 
 const createComponent = () => {
   const Component = Vue.extend(ListContent);
@@ -28,7 +28,7 @@ describe('ListContent', () => {
   describe('methods', () => {
     describe('handleItemClick', () => {
       it('emits `onItemSelect` event on component and sends `assignee` as event param', () => {
-        spyOn(vm, '$emit');
+        jest.spyOn(vm, '$emit');
         const assignee = mockAssigneesList[0];
 
         vm.handleItemClick(assignee);

ee/spec/javascripts/boards/components/board_list_selector/list_filter_spec.js → ee/spec/frontend/boards/components/board_list_selector/list_filter_spec.js

 import Vue from 'vue';
 
 import ListFilter from 'ee/boards/components/boards_list_selector/list_filter.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 
 const createComponent = () => {
   const Component = Vue.extend(ListFilter);
@@ -23,7 +23,7 @@ describe('ListFilter', () => {
   describe('methods', () => {
     describe('handleInputChange', () => {
       it('emits `onSearchInput` event on component and sends `query` as event param', () => {
-        spyOn(vm, '$emit');
+        jest.spyOn(vm, '$emit');
         const query = 'foobar';
         vm.query = query;
 
@@ -35,7 +35,7 @@ describe('ListFilter', () => {
 
     describe('handleInputClear', () => {
       it('clears value of prop `query` and calls `handleInputChange` method on component', () => {
-        spyOn(vm, 'handleInputChange');
+        jest.spyOn(vm, 'handleInputChange');
         vm.query = 'foobar';
 
         vm.handleInputClear();
@@ -51,24 +51,18 @@ describe('ListFilter', () => {
       expect(vm.$el.classList.contains('dropdown-input')).toBe(true);
     });
 
-    it('renders class `has-value` on container element when prop `query` is not empty', done => {
+    it('renders class `has-value` on container element when prop `query` is not empty', () => {
       vm.query = 'foobar';
-      Vue.nextTick()
-        .then(() => {
-          expect(vm.$el.classList.contains('has-value')).toBe(true);
-        })
-        .then(done)
-        .catch(done.fail);
+      return Vue.nextTick().then(() => {
+        expect(vm.$el.classList.contains('has-value')).toBe(true);
+      });
     });
 
-    it('removes class `has-value` from container element when prop `query` is empty', done => {
+    it('removes class `has-value` from container element when prop `query` is empty', () => {
       vm.query = '';
-      Vue.nextTick()
-        .then(() => {
-          expect(vm.$el.classList.contains('has-value')).toBe(false);
-        })
-        .then(done)
-        .catch(done.fail);
+      return Vue.nextTick().then(() => {
+        expect(vm.$el.classList.contains('has-value')).toBe(false);
+      });
     });
 
     it('renders search input element', () => {

ee/spec/javascripts/boards/components/issue_card_weight_spec.js → ee/spec/frontend/boards/components/issue_card_weight_spec.js

 import Vue from 'vue';
 import IssueCardWeight from 'ee/boards/components/issue_card_weight.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 
 describe('IssueCardWeight component', () => {
   let vm;
@@ -19,7 +19,7 @@ describe('IssueCardWeight component', () => {
       weight: 5,
     });
 
-    expect(vm.$el.querySelector('.board-card-info-text')).toContainText('5');
+    expect(vm.$el.querySelector('.board-card-info-text').innerText).toContain('5');
   });
 
   it('renders a link when no tag is specified', () => {
@@ -53,7 +53,7 @@ describe('IssueCardWeight component', () => {
 
     it('renders weight', () => {
       expect(vm.$el.querySelector('.board-card-info-text')).toBeDefined();
-      expect(vm.$el.querySelector('.board-card-info-text')).toContainText(0);
+      expect(vm.$el.querySelector('.board-card-info-text').innerText).toContain(0);
     });
   });
 });

ee/spec/javascripts/boards/models/list_spec.js → ee/spec/frontend/boards/models/list_spec.js

-import { listObj } from 'spec/boards/mock_data';
+import axios from 'axios';
+import MockAdapter from 'axios-mock-adapter';
+import { listObj } from 'jest/boards/mock_data';
 import List from 'ee/boards/models/list';
 import Issue from 'ee/boards/models/issue';
 import CeList from '~/boards/models/list';
@@ -6,8 +8,14 @@ import CeList from '~/boards/models/list';
 describe('List model', () => {
   let list;
   let issue;
+  let axiosMock;
 
   beforeEach(() => {
+    axiosMock = new MockAdapter(axios);
+
+    // We need to mock axios since `new List` below makes a network request
+    axiosMock.onGet().replyOnce(200);
+
     list = new List(listObj);
     issue = new Issue({
       title: 'Testing',
@@ -22,6 +30,7 @@ describe('List model', () => {
   afterEach(() => {
     list = null;
     issue = null;
+    axiosMock.restore();
   });
 
   it('inits totalWeight', () => {
@@ -29,32 +38,26 @@ describe('List model', () => {
   });
 
   describe('getIssues', () => {
-    it('calls CE getIssues', done => {
-      const ceGetIssues = spyOn(CeList.prototype, 'getIssues').and.returnValue(Promise.resolve({}));
-
-      list
-        .getIssues()
-        .then(() => {
-          expect(ceGetIssues).toHaveBeenCalled();
-          done();
-        })
-        .catch(done.fail);
+    it('calls CE getIssues', () => {
+      const ceGetIssues = jest
+        .spyOn(CeList.prototype, 'getIssues')
+        .mockReturnValue(Promise.resolve({}));
+
+      return list.getIssues().then(() => {
+        expect(ceGetIssues).toHaveBeenCalled();
+      });
     });
 
-    it('sets total weight', done => {
-      spyOn(CeList.prototype, 'getIssues').and.returnValue(
+    it('sets total weight', () => {
+      jest.spyOn(CeList.prototype, 'getIssues').mockReturnValue(
         Promise.resolve({
           total_weight: 11,
         }),
       );
 
-      list
-        .getIssues()
-        .then(() => {
-          expect(list.totalWeight).toBe(11);
-          done();
-        })
-        .catch(done.fail);
+      return list.getIssues().then(() => {
+        expect(list.totalWeight).toBe(11);
+      });
     });
   });
 
@@ -66,7 +69,7 @@ describe('List model', () => {
     });
 
     it('calls CE addIssue with all args', () => {
-      const ceAddIssue = spyOn(CeList.prototype, 'addIssue');
+      const ceAddIssue = jest.spyOn(CeList.prototype, 'addIssue');
 
       list.addIssue(issue, list, 2);
 
@@ -86,7 +89,7 @@ describe('List model', () => {
     });
 
     it('calls CE removeIssue', () => {
-      const ceRemoveIssue = spyOn(CeList.prototype, 'removeIssue');
+      const ceRemoveIssue = jest.spyOn(CeList.prototype, 'removeIssue');
 
       list.removeIssue(issue);
 

spec/javascripts/boards/components/issue_card_inner_scoped_label_spec.js → spec/frontend/boards/components/issue_card_inner_scoped_label_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import IssueCardInnerScopedLabel from '~/boards/components/issue_card_inner_scoped_label.vue';
 
 describe('IssueCardInnerScopedLabel Component', () => {