Merge branch '194237-migrate-spec-javascripts-groups-to-jest' into 'master'

Migrate groups to Jest

Closes #194237

See merge request gitlab-org/gitlab!30605

app/assets/javascripts/groups/components/app.vue

@@ -111,8 +111,8 @@ export default {
       const filterGroupsBy = getParameterByName('filter') || null;
 
       this.isLoading = true;
-      // eslint-disable-next-line promise/catch-or-return
-      this.fetchGroups({
+
+      return this.fetchGroups({
         page,
         filterGroupsBy,
         sortBy,
@@ -126,8 +126,7 @@ export default {
     fetchPage(page, filterGroupsBy, sortBy, archived) {
       this.isLoading = true;
 
-      // eslint-disable-next-line promise/catch-or-return
-      this.fetchGroups({
+      return this.fetchGroups({
         page,
         filterGroupsBy,
         sortBy,

spec/javascripts/groups/components/group_folder_spec.js → spec/frontend/groups/components/group_folder_spec.js

@@ -18,15 +18,13 @@ const createComponent = (groups = mockGroups, parentGroup = mockParentGroupItem)
 describe('GroupFolderComponent', () => {
   let vm;
 
-  beforeEach(done => {
+  beforeEach(() => {
     Vue.component('group-item', groupItemComponent);
 
     vm = createComponent();
     vm.$mount();
 
-    Vue.nextTick(() => {
-      done();
-    });
+    return Vue.nextTick();
   });
 
   afterEach(() => {

spec/javascripts/groups/components/group_item_spec.js → spec/frontend/groups/components/group_item_spec.js

 import Vue from 'vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import groupItemComponent from '~/groups/components/group_item.vue';
 import groupFolderComponent from '~/groups/components/group_folder.vue';
 import eventHub from '~/groups/event_hub';
+import * as urlUtilities from '~/lib/utils/url_utility';
 import { mockParentGroupItem, mockChildren } from '../mock_data';
 
 const createComponent = (group = mockParentGroupItem, parentGroup = mockChildren[0]) => {
@@ -17,14 +18,12 @@ const createComponent = (group = mockParentGroupItem, parentGroup = mockChildren
 describe('GroupItemComponent', () => {
   let vm;
 
-  beforeEach(done => {
+  beforeEach(() => {
     Vue.component('group-folder', groupFolderComponent);
 
     vm = createComponent();
 
-    Vue.nextTick(() => {
-      done();
-    });
+    return Vue.nextTick();
   });
 
   afterEach(() => {
@@ -130,26 +129,24 @@ describe('GroupItemComponent', () => {
       });
 
       it('should emit `toggleChildren` event when expand is clicked on a group and it has children present', () => {
-        spyOn(eventHub, '$emit');
+        jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
 
         vm.onClickRowGroup(event);
 
         expect(eventHub.$emit).toHaveBeenCalledWith('toggleChildren', vm.group);
       });
 
-      it('should navigate page to group homepage if group does not have any children present', done => {
+      it('should navigate page to group homepage if group does not have any children present', () => {
+        jest.spyOn(urlUtilities, 'visitUrl').mockImplementation();
         const group = Object.assign({}, mockParentGroupItem);
         group.childrenCount = 0;
         const newVm = createComponent(group);
-        const visitUrl = spyOnDependency(groupItemComponent, 'visitUrl').and.stub();
-        spyOn(eventHub, '$emit');
+        jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
 
         newVm.onClickRowGroup(event);
-        setTimeout(() => {
-          expect(eventHub.$emit).not.toHaveBeenCalled();
-          expect(visitUrl).toHaveBeenCalledWith(newVm.group.relativePath);
-          done();
-        }, 0);
+
+        expect(eventHub.$emit).not.toHaveBeenCalled();
+        expect(urlUtilities.visitUrl).toHaveBeenCalledWith(newVm.group.relativePath);
       });
     });
   });
@@ -167,7 +164,7 @@ describe('GroupItemComponent', () => {
         const badgeEl = vm.$el.querySelector('.badge-warning');
 
         expect(badgeEl).toBeDefined();
-        expect(badgeEl).toContainText('pending removal');
+        expect(badgeEl.innerHTML).toContain('pending removal');
       });
     });
 
@@ -180,7 +177,7 @@ describe('GroupItemComponent', () => {
       it('does not render the group pending removal badge', () => {
         const groupTextContainer = vm.$el.querySelector('.group-text-container');
 
-        expect(groupTextContainer).not.toContainText('pending removal');
+        expect(groupTextContainer).not.toContain('pending removal');
       });
     });
 

spec/javascripts/groups/components/groups_spec.js → spec/frontend/groups/components/groups_spec.js

 import Vue from 'vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import groupsComponent from '~/groups/components/groups.vue';
 import groupFolderComponent from '~/groups/components/group_folder.vue';
 import groupItemComponent from '~/groups/components/group_item.vue';
@@ -21,15 +21,13 @@ const createComponent = (searchEmpty = false) => {
 describe('GroupsComponent', () => {
   let vm;
 
-  beforeEach(done => {
+  beforeEach(() => {
     Vue.component('group-folder', groupFolderComponent);
     Vue.component('group-item', groupItemComponent);
 
     vm = createComponent();
 
-    Vue.nextTick(() => {
-      done();
-    });
+    return vm.$nextTick();
   });
 
   afterEach(() => {
@@ -39,37 +37,35 @@ describe('GroupsComponent', () => {
   describe('methods', () => {
     describe('change', () => {
       it('should emit `fetchPage` event when page is changed via pagination', () => {
-        spyOn(eventHub, '$emit').and.stub();
+        jest.spyOn(eventHub, '$emit').mockImplementation();
 
         vm.change(2);
 
         expect(eventHub.$emit).toHaveBeenCalledWith(
           'fetchPage',
           2,
-          jasmine.any(Object),
-          jasmine.any(Object),
-          jasmine.any(Object),
+          expect.any(Object),
+          expect.any(Object),
+          expect.any(Object),
         );
       });
     });
   });
 
   describe('template', () => {
-    it('should render component template correctly', done => {
-      Vue.nextTick(() => {
+    it('should render component template correctly', () => {
+      return vm.$nextTick().then(() => {
         expect(vm.$el.querySelector('.groups-list-tree-container')).toBeDefined();
         expect(vm.$el.querySelector('.group-list-tree')).toBeDefined();
         expect(vm.$el.querySelector('.gl-pagination')).toBeDefined();
         expect(vm.$el.querySelectorAll('.has-no-search-results').length).toBe(0);
-        done();
       });
     });
 
-    it('should render empty search message when `searchEmpty` is `true`', done => {
+    it('should render empty search message when `searchEmpty` is `true`', () => {
       vm.searchEmpty = true;
-      Vue.nextTick(() => {
+      return vm.$nextTick().then(() => {
         expect(vm.$el.querySelector('.has-no-search-results')).toBeDefined();
-        done();
       });
     });
   });

spec/javascripts/groups/components/item_actions_spec.js → spec/frontend/groups/components/item_actions_spec.js

 import Vue from 'vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import itemActionsComponent from '~/groups/components/item_actions.vue';
 import eventHub from '~/groups/event_hub';
 import { mockParentGroupItem, mockChildren } from '../mock_data';
@@ -28,7 +28,7 @@ describe('ItemActionsComponent', () => {
   describe('methods', () => {
     describe('onLeaveGroup', () => {
       it('emits `showLeaveGroupModal` event with `group` and `parentGroup` props', () => {
-        spyOn(eventHub, '$emit');
+        jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
         vm.onLeaveGroup();
 
         expect(eventHub.$emit).toHaveBeenCalledWith(

spec/javascripts/groups/components/item_caret_spec.js → spec/frontend/groups/components/item_caret_spec.js

 import Vue from 'vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import itemCaretComponent from '~/groups/components/item_caret.vue';
 
 const createComponent = (isGroupOpen = false) => {
@@ -12,27 +12,27 @@ const createComponent = (isGroupOpen = false) => {
 };
 
 describe('ItemCaretComponent', () => {
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
   describe('template', () => {
     it('should render component template correctly', () => {
-      const vm = createComponent();
-
+      vm = createComponent();
       expect(vm.$el.classList.contains('folder-caret')).toBeTruthy();
       expect(vm.$el.querySelectorAll('svg').length).toBe(1);
-      vm.$destroy();
     });
 
     it('should render caret down icon if `isGroupOpen` prop is `true`', () => {
-      const vm = createComponent(true);
-
+      vm = createComponent(true);
       expect(vm.$el.querySelector('svg use').getAttribute('xlink:href')).toContain('angle-down');
-      vm.$destroy();
     });
 
     it('should render caret right icon if `isGroupOpen` prop is `false`', () => {
-      const vm = createComponent();
-
+      vm = createComponent();
       expect(vm.$el.querySelector('svg use').getAttribute('xlink:href')).toContain('angle-right');
-      vm.$destroy();
     });
   });
 });

spec/javascripts/groups/components/item_stats_spec.js → spec/frontend/groups/components/item_stats_spec.js

 import Vue from 'vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import itemStatsComponent from '~/groups/components/item_stats.vue';
 import {
   mockParentGroupItem,

spec/javascripts/groups/components/item_stats_value_spec.js → spec/frontend/groups/components/item_stats_value_spec.js

 import Vue from 'vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import itemStatsValueComponent from '~/groups/components/item_stats_value.vue';
 
 const createComponent = ({ title, cssClass, iconName, tooltipPlacement, value }) => {
@@ -56,6 +56,10 @@ describe('ItemStatsValueComponent', () => {
       });
     });
 
+    afterEach(() => {
+      vm.$destroy();
+    });
+
     it('renders component element correctly', () => {
       expect(vm.$el.classList.contains('number-subgroups')).toBeTruthy();
       expect(vm.$el.querySelectorAll('svg').length).toBeGreaterThan(0);
@@ -74,9 +78,5 @@ describe('ItemStatsValueComponent', () => {
     it('renders value count correctly', () => {
       expect(vm.$el.querySelector('.stat-value').innerText.trim()).toContain('10');
     });
-
-    afterEach(() => {
-      vm.$destroy();
-    });
   });
 });

spec/javascripts/groups/components/item_type_icon_spec.js → spec/frontend/groups/components/item_type_icon_spec.js

 import Vue from 'vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 import itemTypeIconComponent from '~/groups/components/item_type_icon.vue';
 import { ITEM_TYPE } from '../mock_data';
 
@@ -17,7 +17,6 @@ describe('ItemTypeIconComponent', () => {
   describe('template', () => {
     it('should render component template correctly', () => {
       const vm = createComponent();
-      vm.$mount();
 
       expect(vm.$el.classList.contains('item-type-icon')).toBeTruthy();
       vm.$destroy();
@@ -27,13 +26,11 @@ describe('ItemTypeIconComponent', () => {
       let vm;
 
       vm = createComponent(ITEM_TYPE.GROUP, true);
-      vm.$mount();
 
       expect(vm.$el.querySelector('use').getAttribute('xlink:href')).toContain('folder-open');
       vm.$destroy();
 
       vm = createComponent(ITEM_TYPE.GROUP);
-      vm.$mount();
 
       expect(vm.$el.querySelector('use').getAttribute('xlink:href')).toContain('folder');
       vm.$destroy();
@@ -43,13 +40,11 @@ describe('ItemTypeIconComponent', () => {
       let vm;
 
       vm = createComponent(ITEM_TYPE.PROJECT);
-      vm.$mount();
 
       expect(vm.$el.querySelector('use').getAttribute('xlink:href')).toContain('bookmark');
       vm.$destroy();
 
       vm = createComponent(ITEM_TYPE.GROUP);
-      vm.$mount();
 
       expect(vm.$el.querySelector('use').getAttribute('xlink:href')).not.toContain('bookmark');
       vm.$destroy();

spec/javascripts/groups/service/groups_service_spec.js → spec/frontend/groups/service/groups_service_spec.js

@@ -12,7 +12,7 @@ describe('GroupsService', () => {
 
   describe('getGroups', () => {
     it('should return promise for `GET` request on provided endpoint', () => {
-      spyOn(axios, 'get').and.stub();
+      jest.spyOn(axios, 'get').mockResolvedValue();
       const params = {
         page: 2,
         filter: 'git',
@@ -32,7 +32,7 @@ describe('GroupsService', () => {
 
   describe('leaveGroup', () => {
     it('should return promise for `DELETE` request on provided endpoint', () => {
-      spyOn(axios, 'delete').and.stub();
+      jest.spyOn(axios, 'delete').mockResolvedValue();
 
       service.leaveGroup(mockParentGroupItem.leavePath);
 

spec/javascripts/groups/store/groups_store_spec.js → spec/frontend/groups/store/groups_store_spec.js

@@ -28,12 +28,12 @@ describe('ProjectsStore', () => {
   describe('setGroups', () => {
     it('should set groups to state', () => {
       const store = new GroupsStore();
-      spyOn(store, 'formatGroupItem').and.callThrough();
+      jest.spyOn(store, 'formatGroupItem');
 
       store.setGroups(mockGroups);
 
       expect(store.state.groups.length).toBe(mockGroups.length);
-      expect(store.formatGroupItem).toHaveBeenCalledWith(jasmine.any(Object));
+      expect(store.formatGroupItem).toHaveBeenCalledWith(expect.any(Object));
       expect(Object.keys(store.state.groups[0]).indexOf('fullName')).toBeGreaterThan(-1);
     });
   });
@@ -41,12 +41,12 @@ describe('ProjectsStore', () => {
   describe('setSearchedGroups', () => {
     it('should set searched groups to state', () => {
       const store = new GroupsStore();
-      spyOn(store, 'formatGroupItem').and.callThrough();
+      jest.spyOn(store, 'formatGroupItem');
 
       store.setSearchedGroups(mockSearchedGroups);
 
       expect(store.state.groups.length).toBe(mockSearchedGroups.length);
-      expect(store.formatGroupItem).toHaveBeenCalledWith(jasmine.any(Object));
+      expect(store.formatGroupItem).toHaveBeenCalledWith(expect.any(Object));
       expect(Object.keys(store.state.groups[0]).indexOf('fullName')).toBeGreaterThan(-1);
       expect(Object.keys(store.state.groups[0].children[0]).indexOf('fullName')).toBeGreaterThan(
         -1,
@@ -57,11 +57,11 @@ describe('ProjectsStore', () => {
   describe('setGroupChildren', () => {
     it('should set children to group item in state', () => {
       const store = new GroupsStore();
-      spyOn(store, 'formatGroupItem').and.callThrough();
+      jest.spyOn(store, 'formatGroupItem');
 
       store.setGroupChildren(mockParentGroupItem, mockRawChildren);
 
-      expect(store.formatGroupItem).toHaveBeenCalledWith(jasmine.any(Object));
+      expect(store.formatGroupItem).toHaveBeenCalledWith(expect.any(Object));
       expect(mockParentGroupItem.children.length).toBe(1);
       expect(Object.keys(mockParentGroupItem.children[0]).indexOf('fullName')).toBeGreaterThan(-1);
       expect(mockParentGroupItem.isOpen).toBeTruthy();