Migrate ee/group_member_contributions to Jest

Closes https://gitlab.com/gitlab-org/gitlab/-/issues/194287

ee/app/assets/javascripts/group_member_contributions/components/app.vue

@@ -43,7 +43,7 @@ export default {
     <gl-loading-icon
       v-if="isLoading"
       :label="__('Loading contribution stats for group members')"
-      :size="2"
+      size="md"
       class="loading-animation prepend-top-20 append-bottom-20"
     />
     <table v-else class="table gl-sortable">

ee/spec/javascripts/group_member_contributions/components/app_spec.js → ee/spec/frontend/group_member_contributions/components/app_spec.js

 import Vue from 'vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 
 import AppComponent from 'ee/group_member_contributions/components/app.vue';
 import GroupMemberStore from 'ee/group_member_contributions/store/group_member_store';
@@ -30,7 +30,7 @@ describe('AppComponent', () => {
   describe('methods', () => {
     describe('handleColumnClick', () => {
       it('calls store.sortMembers with columnName param', () => {
-        spyOn(vm.store, 'sortMembers');
+        jest.spyOn(vm.store, 'sortMembers').mockImplementation(() => {});
 
         const columnName = 'fullname';
         vm.handleColumnClick(columnName);
@@ -49,29 +49,25 @@ describe('AppComponent', () => {
       expect(vm.$el.querySelector('h3').innerText.trim()).toBe('Contributions per group member');
     });
 
-    it('shows loading icon when isLoading prop is true', done => {
+    it('shows loading icon when isLoading prop is true', () => {
       vm.store.state.isLoading = true;
-      vm.$nextTick()
-        .then(() => {
-          const loadingEl = vm.$el.querySelector('.loading-animation');
-
-          expect(loadingEl).not.toBeNull();
-          expect(loadingEl.querySelector('span').getAttribute('aria-label')).toBe(
-            'Loading contribution stats for group members',
-          );
-        })
-        .then(done)
-        .catch(done.fail);
+
+      return vm.$nextTick().then(() => {
+        const loadingEl = vm.$el.querySelector('.loading-animation');
+
+        expect(loadingEl).not.toBeNull();
+        expect(loadingEl.querySelector('span').getAttribute('aria-label')).toBe(
+          'Loading contribution stats for group members',
+        );
+      });
     });
 
-    it('renders table container element', done => {
+    it('renders table container element', () => {
       vm.store.state.isLoading = false;
-      vm.$nextTick()
-        .then(() => {
-          expect(vm.$el.querySelector('table.table.gl-sortable')).not.toBeNull();
-        })
-        .then(done)
-        .catch(done.fail);
+
+      return vm.$nextTick().then(() => {
+        expect(vm.$el.querySelector('table.table.gl-sortable')).not.toBeNull();
+      });
     });
   });
 });

ee/spec/javascripts/group_member_contributions/components/table_body_spec.js → ee/spec/frontend/group_member_contributions/components/table_body_spec.js

 import Vue from 'vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 
 import TableBodyComponent from 'ee/group_member_contributions/components/table_body.vue';
 import GroupMemberStore from 'ee/group_member_contributions/store/group_member_store';

ee/spec/javascripts/group_member_contributions/components/table_header_spec.js → ee/spec/frontend/group_member_contributions/components/table_header_spec.js

 import Vue from 'vue';
 
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
 
 import TableHeaderComponent from 'ee/group_member_contributions/components/table_header.vue';
 import defaultColumns from 'ee/group_member_contributions/constants';
@@ -66,14 +66,14 @@ describe('TableHeaderComponent', () => {
 
     describe('onColumnClick', () => {
       it('emits `onColumnClick` event with columnName param on component instance', () => {
-        spyOn(vm, '$emit');
+        jest.spyOn(vm, '$emit').mockImplementation(() => {});
         vm.onColumnClick(columnName);
 
         expect(vm.$emit).toHaveBeenCalledWith('onColumnClick', columnName);
       });
 
       it('updates columnIconMeta prop for provided columnName', () => {
-        spyOn(vm, 'getColumnIconMeta');
+        jest.spyOn(vm, 'getColumnIconMeta');
         vm.onColumnClick(columnName);
 
         expect(vm.getColumnIconMeta).toHaveBeenCalledWith(columnName, vm.sortOrders);

ee/spec/javascripts/group_member_contributions/store/group_member_store_spec.js → ee/spec/frontend/group_member_contributions/store/group_member_store_spec.js

 import MockAdapter from 'axios-mock-adapter';
-
+import createFlash from '~/flash';
 import GroupMemberStore from 'ee/group_member_contributions/store/group_member_store';
 import defaultColumns from 'ee/group_member_contributions/constants';
 import axios from '~/lib/utils/axios_utils';
 
 import { rawMembers, contributionsPath } from '../mock_data';
 
+jest.mock('~/flash');
+
 describe('GroupMemberStore', () => {
   let store;
 
@@ -13,6 +15,10 @@ describe('GroupMemberStore', () => {
     store = new GroupMemberStore(contributionsPath);
   });
 
+  afterEach(() => {
+    createFlash.mockClear();
+  });
+
   describe('setColumns', () => {
     beforeEach(() => {
       store.setColumns(defaultColumns);
@@ -58,7 +64,6 @@ describe('GroupMemberStore', () => {
 
     beforeEach(() => {
       mock = new MockAdapter(axios);
-      setFixtures('<div class="flash-container"></div>');
     });
 
     afterEach(() => {
@@ -67,8 +72,8 @@ describe('GroupMemberStore', () => {
 
     it('calls service.getContributedMembers and sets response to the store on success', done => {
       mock.onGet(contributionsPath).reply(200, rawMembers);
-      spyOn(store, 'setColumns');
-      spyOn(store, 'setMembers');
+      jest.spyOn(store, 'setColumns').mockImplementation(() => {});
+      jest.spyOn(store, 'setMembers').mockImplementation(() => {});
 
       store
         .fetchContributedMembers()
@@ -92,7 +97,7 @@ describe('GroupMemberStore', () => {
         .catch(e => {
           expect(e.message).toBe('Request failed with status code 500');
           expect(store.isLoading).toBe(false);
-          expect(document.querySelector('.flash-text').innerText.trim()).toBe(
+          expect(createFlash).toHaveBeenCalledWith(
             'Something went wrong while fetching group member contributions',
           );
         })