Merge branch 'port-ff-tests-to-jest' into 'master'

Port Feature Flag Tests to Jest

See merge request gitlab-org/gitlab!20882

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

@@ -247,7 +247,7 @@ export default {
     <gl-loading-icon
       v-if="isLoading"
       :label="s__('FeatureFlags|Loading feature flags')"
-      :size="3"
+      size="md"
       class="js-loading-state prepend-top-20"
     />
 

ee/spec/javascripts/feature_flags/components/edit_feature_flag_spec.js → ee/spec/frontend/feature_flags/components/edit_feature_flag_spec.js

 import Vuex from 'vuex';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import MockAdapter from 'axios-mock-adapter';
-import axios from '~/lib/utils/axios_utils';
+import { TEST_HOST } from 'spec/test_constants';
 import Form from 'ee/feature_flags/components/form.vue';
 import editModule from 'ee/feature_flags/store/modules/edit';
 import EditFeatureFlag from 'ee/feature_flags/components/edit_feature_flag.vue';
-import { TEST_HOST } from 'spec/test_constants';
+import axios from '~/lib/utils/axios_utils';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -38,7 +38,7 @@ describe('Edit feature flag form', () => {
     });
   };
 
-  beforeEach(() => {
+  beforeEach(done => {
     mock = new MockAdapter(axios);
 
     mock.onGet(`${TEST_HOST}/feature_flags.json'`).replyOnce(200, {
@@ -63,6 +63,8 @@ describe('Edit feature flag form', () => {
     });
 
     factory();
+
+    setImmediate(() => done());
   });
 
   afterEach(() => {
@@ -70,41 +72,29 @@ describe('Edit feature flag form', () => {
     mock.restore();
   });
 
-  it('should display the iid', done => {
-    setTimeout(() => {
-      expect(wrapper.find('h3').text()).toContain('^5');
-
-      done();
-    });
+  it('should display the iid', () => {
+    expect(wrapper.find('h3').text()).toContain('^5');
   });
 
   describe('with error', () => {
     it('should render the error', done => {
-      setTimeout(() => {
-        store.dispatch('edit/receiveUpdateFeatureFlagError', { message: ['The name is required'] });
+      store.dispatch('edit/receiveUpdateFeatureFlagError', { message: ['The name is required'] });
 
-        wrapper.vm.$nextTick(() => {
-          expect(wrapper.find('.alert-danger').exists()).toEqual(true);
-          expect(wrapper.find('.alert-danger').text()).toContain('The name is required');
-          done();
-        });
-      }, 0);
+      wrapper.vm.$nextTick(() => {
+        expect(wrapper.find('.alert-danger').exists()).toEqual(true);
+        expect(wrapper.find('.alert-danger').text()).toContain('The name is required');
+        done();
+      });
     });
   });
 
   describe('without error', () => {
-    it('renders form title', done => {
-      setTimeout(() => {
-        expect(wrapper.text()).toContain('^5 feature_flag');
-        done();
-      }, 0);
+    it('renders form title', () => {
+      expect(wrapper.text()).toContain('^5 feature_flag');
     });
 
-    it('should render feature flag form', done => {
-      setTimeout(() => {
-        expect(wrapper.find(Form).exists()).toEqual(true);
-        done();
-      }, 0);
+    it('should render feature flag form', () => {
+      expect(wrapper.find(Form).exists()).toEqual(true);
     });
   });
 });

ee/spec/javascripts/feature_flags/components/environments_dropdown_spec.js → ee/spec/frontend/feature_flags/components/environments_dropdown_spec.js

 import MockAdapter from 'axios-mock-adapter';
 import { createLocalVue, mount } from '@vue/test-utils';
 import { GlLoadingIcon } from '@gitlab/ui';
-import axios from '~/lib/utils/axios_utils';
 import EnvironmentsDropdown from 'ee/feature_flags/components/environments_dropdown.vue';
 import { TEST_HOST } from 'spec/test_constants';
+import axios from '~/lib/utils/axios_utils';
 
 const localVue = createLocalVue();
 
@@ -63,38 +63,27 @@ describe('Feature flags > Environments dropdown ', () => {
       });
 
       describe('with received data', () => {
-        it('sets is loading to false', done => {
-          setTimeout(() => {
-            expect(wrapper.vm.isLoading).toEqual(false);
+        beforeEach(done => setImmediate(() => done()));
+        it('sets is loading to false', () => {
+          expect(wrapper.vm.isLoading).toEqual(false);
 
-            expect(wrapper.find(GlLoadingIcon).exists()).toEqual(false);
-            done();
-          });
+          expect(wrapper.find(GlLoadingIcon).exists()).toEqual(false);
         });
 
-        it('sets results with the received data', done => {
-          setTimeout(() => {
-            expect(wrapper.vm.results).toEqual(results);
-            done();
-          });
+        it('sets results with the received data', () => {
+          expect(wrapper.vm.results).toEqual(results);
         });
 
-        it('sets showSuggestions to true', done => {
-          setTimeout(() => {
-            expect(wrapper.vm.showSuggestions).toEqual(true);
-            done();
-          });
+        it('sets showSuggestions to true', () => {
+          expect(wrapper.vm.showSuggestions).toEqual(true);
         });
 
-        it('emits even when a suggestion is clicked', done => {
-          setTimeout(() => {
-            spyOn(wrapper.vm, '$emit');
+        it('emits even when a suggestion is clicked', () => {
+          jest.spyOn(wrapper.vm, '$emit');
 
-            wrapper.find('ul button').trigger('click');
+          wrapper.find('ul button').trigger('click');
 
-            expect(wrapper.vm.$emit).toHaveBeenCalledWith('selectEnvironment', 'production');
-            done();
-          });
+          expect(wrapper.vm.$emit).toHaveBeenCalledWith('selectEnvironment', 'production');
         });
       });
     });
@@ -115,23 +104,21 @@ describe('Feature flags > Environments dropdown ', () => {
   });
 
   describe('on click create button', () => {
-    beforeEach(() => {
+    beforeEach(done => {
       mock.onGet(`${TEST_HOST}/environments.json'`).replyOnce(200, []);
 
       factory();
 
       wrapper.find('input').setValue('production');
-    });
 
-    it('emits create event', done => {
-      setTimeout(() => {
-        spyOn(wrapper.vm, '$emit');
-        wrapper.find('.js-create-button').trigger('click');
+      setImmediate(() => done());
+    });
 
-        expect(wrapper.vm.$emit).toHaveBeenCalledWith('createClicked', 'production');
+    it('emits create event', () => {
+      jest.spyOn(wrapper.vm, '$emit');
+      wrapper.find('.js-create-button').trigger('click');
 
-        done();
-      });
+      expect(wrapper.vm.$emit).toHaveBeenCalledWith('createClicked', 'production');
     });
   });
 });

ee/spec/javascripts/feature_flags/components/feature_flags_spec.js → ee/spec/frontend/feature_flags/components/feature_flags_spec.js

 import Vue from 'vue';
 import MockAdapter from 'axios-mock-adapter';
-import axios from '~/lib/utils/axios_utils';
 import featureFlagsComponent from 'ee/feature_flags/components/feature_flags.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-import { trimText } from 'spec/helpers/text_helper';
+import mountComponent from 'helpers/vue_mount_component_helper';
+import { trimText } from 'helpers/text_helper';
 import { TEST_HOST } from 'spec/test_constants';
+import axios from '~/lib/utils/axios_utils';
 import { getRequestData } from '../mock_data';
 
 describe('Feature flags', () => {
@@ -56,9 +56,9 @@ describe('Feature flags', () => {
 
       component = mountComponent(FeatureFlagsComponent, props);
 
-      setTimeout(() => {
+      setImmediate(() => {
         done();
-      }, 0);
+      });
     });
 
     it('does not render configure button', () => {
@@ -71,7 +71,7 @@ describe('Feature flags', () => {
   });
 
   describe('loading state', () => {
-    it('renders a loading icon', done => {
+    it('renders a loading icon', () => {
       mock
         .onGet(`${TEST_HOST}/endpoint.json`, { params: { scope: 'all', page: '1' } })
         .replyOnce(200, getRequestData, {});
@@ -84,10 +84,6 @@ describe('Feature flags', () => {
       expect(loadingElement.querySelector('span').getAttribute('aria-label')).toEqual(
         'Loading feature flags',
       );
-
-      setTimeout(() => {
-        done();
-      }, 0);
     });
   });
 
@@ -109,9 +105,9 @@ describe('Feature flags', () => {
 
         component = mountComponent(FeatureFlagsComponent, mockData);
 
-        setTimeout(() => {
+        setImmediate(() => {
           done();
-        }, 0);
+        });
       });
 
       it('should render the empty state', () => {
@@ -175,9 +171,9 @@ describe('Feature flags', () => {
           });
 
         component = mountComponent(FeatureFlagsComponent, mockData);
-        setTimeout(() => {
+        setImmediate(() => {
           done();
-        }, 0);
+        });
       });
 
       it('should render a table with feature flags', () => {
@@ -204,30 +200,24 @@ describe('Feature flags', () => {
           expect(component.$el.querySelectorAll('.gl-pagination')).not.toBeNull();
         });
 
-        it('should make an API request when page is clicked', done => {
-          spyOn(component, 'updateFeatureFlagOptions');
-          setTimeout(() => {
-            component.$el.querySelector('.gl-pagination li:nth-child(5) .page-link').click();
+        it('should make an API request when page is clicked', () => {
+          jest.spyOn(component, 'updateFeatureFlagOptions');
+          component.$el.querySelector('.gl-pagination li:nth-child(5) .page-link').click();
 
-            expect(component.updateFeatureFlagOptions).toHaveBeenCalledWith({
-              scope: 'all',
-              page: '4',
-            });
-            done();
-          }, 0);
+          expect(component.updateFeatureFlagOptions).toHaveBeenCalledWith({
+            scope: 'all',
+            page: '4',
+          });
         });
 
-        it('should make an API request when using tabs', done => {
-          setTimeout(() => {
-            spyOn(component, 'updateFeatureFlagOptions');
-            component.$el.querySelector('.js-featureflags-tab-enabled').click();
+        it('should make an API request when using tabs', () => {
+          jest.spyOn(component, 'updateFeatureFlagOptions');
+          component.$el.querySelector('.js-featureflags-tab-enabled').click();
 
-            expect(component.updateFeatureFlagOptions).toHaveBeenCalledWith({
-              scope: 'enabled',
-              page: '1',
-            });
-            done();
-          }, 0);
+          expect(component.updateFeatureFlagOptions).toHaveBeenCalledWith({
+            scope: 'enabled',
+            page: '1',
+          });
         });
       });
     });
@@ -239,9 +229,9 @@ describe('Feature flags', () => {
 
       component = mountComponent(FeatureFlagsComponent, mockData);
 
-      setTimeout(() => {
+      setImmediate(() => {
         done();
-      }, 0);
+      });
     });
 
     it('should render error state', () => {
@@ -263,13 +253,13 @@ describe('Feature flags', () => {
     beforeEach(done => {
       component = mountComponent(FeatureFlagsComponent, mockData);
 
-      setTimeout(() => {
+      setImmediate(() => {
         done();
-      }, 0);
+      });
     });
 
     it('should fire the rotate action when a `token` event is received', () => {
-      const actionSpy = spyOn(component, 'rotateInstanceId');
+      const actionSpy = jest.spyOn(component, 'rotateInstanceId');
       const [modal] = component.$children;
       modal.$emit('token');
 

ee/spec/javascripts/feature_flags/components/form_spec.js → ee/spec/frontend/feature_flags/components/form_spec.js

@@ -2,7 +2,6 @@ import _ from 'underscore';
 import { createLocalVue, mount } from '@vue/test-utils';
 import { GlFormTextarea, GlFormCheckbox } from '@gitlab/ui';
 import Form from 'ee/feature_flags/components/form.vue';
-import ToggleButton from '~/vue_shared/components/toggle_button.vue';
 import EnvironmentsDropdown from 'ee/feature_flags/components/environments_dropdown.vue';
 import {
   ROLLOUT_STRATEGY_ALL_USERS,
@@ -10,6 +9,7 @@ import {
   INTERNAL_ID_PREFIX,
   DEFAULT_PERCENT_ROLLOUT,
 } from 'ee/feature_flags/constants';
+import ToggleButton from '~/vue_shared/components/toggle_button.vue';
 import { featureFlag } from '../mock_data';
 
 describe('feature flag form', () => {
@@ -169,7 +169,7 @@ describe('feature flag form', () => {
         });
 
         it('should not render deleted scopes', () => {
-          expect(wrapper.vm.filteredScopes).toEqual([jasmine.objectContaining({ id: 2 })]);
+          expect(wrapper.vm.filteredScopes).toEqual([expect.objectContaining({ id: 2 })]);
         });
       });
 
@@ -329,7 +329,7 @@ describe('feature flag form', () => {
                 rolloutUserIds: '',
               },
               {
-                id: jasmine.any(String),
+                id: expect.any(String),
                 active: false,
                 environmentScope: 'review',
                 canUpdate: true,
@@ -339,7 +339,7 @@ describe('feature flag form', () => {
                 rolloutUserIds: '',
               },
               {
-                id: jasmine.any(String),
+                id: expect.any(String),
                 active: true,
                 environmentScope: '',
                 canUpdate: true,

ee/spec/javascripts/feature_flags/components/new_feature_flag_spec.js → ee/spec/frontend/feature_flags/components/new_feature_flag_spec.js

@@ -61,7 +61,7 @@ describe('New feature flag form', () => {
   it('should render default * row', () => {
     expect(wrapper.vm.scopes).toEqual([
       {
-        id: jasmine.any(String),
+        id: expect.any(String),
         environmentScope: '*',
         active: true,
         rolloutStrategy: ROLLOUT_STRATEGY_ALL_USERS,

ee/spec/javascripts/feature_flags/store/edit/actions_spec.js → ee/spec/frontend/feature_flags/store/edit/actions_spec.js

 import MockAdapter from 'axios-mock-adapter';
-import axios from '~/lib/utils/axios_utils';
-import actions, {
+import {
   setEndpoint,
   setPath,
   updateFeatureFlag,
@@ -15,8 +14,11 @@ import actions, {
 } from 'ee/feature_flags/store/modules/edit/actions';
 import state from 'ee/feature_flags/store/modules/edit/state';
 import * as types from 'ee/feature_flags/store/modules/edit/mutation_types';
-import testAction from 'spec/helpers/vuex_action_helper';
+import testAction from 'helpers/vuex_action_helper';
 import { TEST_HOST } from 'spec/test_constants';
+import axios from '~/lib/utils/axios_utils';
+
+jest.mock('~/lib/utils/url_utility');
 
 describe('Feature flags Edit Module actions', () => {
   let mockedState;
@@ -57,7 +59,6 @@ describe('Feature flags Edit Module actions', () => {
     beforeEach(() => {
       mockedState.endpoint = `${TEST_HOST}/endpoint.json`;
       mock = new MockAdapter(axios);
-      spyOnDependency(actions, 'visitUrl');
     });
 
     afterEach(() => {

ee/spec/javascripts/feature_flags/store/index/actions_spec.js → ee/spec/frontend/feature_flags/store/index/actions_spec.js

 import MockAdapter from 'axios-mock-adapter';
-import axios from '~/lib/utils/axios_utils';
 import {
   requestFeatureFlags,
   receiveFeatureFlagsSuccess,
@@ -16,8 +15,9 @@ import {
 } from 'ee/feature_flags/store/modules/index/actions';
 import state from 'ee/feature_flags/store/modules/index/state';
 import * as types from 'ee/feature_flags/store/modules/index/mutation_types';
-import testAction from 'spec/helpers/vuex_action_helper';
+import testAction from 'helpers/vuex_action_helper';
 import { TEST_HOST } from 'spec/test_constants';
+import axios from '~/lib/utils/axios_utils';
 import { getRequestData, rotateData } from '../../mock_data';
 
 describe('Feature flags actions', () => {

ee/spec/javascripts/feature_flags/store/new/actions_spec.js → ee/spec/frontend/feature_flags/store/new/actions_spec.js

 import MockAdapter from 'axios-mock-adapter';
-import axios from '~/lib/utils/axios_utils';
-import actions, {
+import {
   setEndpoint,
   setPath,
   createFeatureFlag,
@@ -10,13 +9,16 @@ import actions, {
 } from 'ee/feature_flags/store/modules/new/actions';
 import state from 'ee/feature_flags/store/modules/new/state';
 import * as types from 'ee/feature_flags/store/modules/new/mutation_types';
-import testAction from 'spec/helpers/vuex_action_helper';
+import testAction from 'helpers/vuex_action_helper';
 import { TEST_HOST } from 'spec/test_constants';
 import {
   ROLLOUT_STRATEGY_ALL_USERS,
   ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
 } from 'ee/feature_flags/constants';
 import { mapFromScopesViewModel } from 'ee/feature_flags/store/modules/helpers';
+import axios from '~/lib/utils/axios_utils';
+
+jest.mock('~/lib/utils/url_utility');
 
 describe('Feature flags New Module Actions', () => {
   let mockedState;
@@ -74,7 +76,6 @@ describe('Feature flags New Module Actions', () => {
     beforeEach(() => {
       mockedState.endpoint = `${TEST_HOST}/endpoint.json`;
       mock = new MockAdapter(axios);
-      spyOnDependency(actions, 'visitUrl');
     });
 
     afterEach(() => {