Port Feature Flags Table Tests to VTU

Using vue test utils instead of raw mounting things for speed.

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

@@ -140,7 +140,7 @@ export default {
             v-if="canUserRotateToken"
             v-gl-tooltip.hover
             :title="$options.regenerateInstanceIdTooltip"
-            class="input-group-text js-ff-rotate-token-button"
+            class="input-group-text"
             @click="rotateToken"
           >
             <icon name="retry" />

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

@@ -175,7 +175,7 @@ export default {
 
       <input
         type="text"
-        class="js-env-input form-control pl-4"
+        class="form-control pl-4 js-env-input"
         :aria-label="placeholder"
         :value="filter"
         :placeholder="placeholder"

ee/spec/frontend/feature_flags/components/configure_feature_flags_modal_spec.js

 import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
 import component from 'ee/feature_flags/components/configure_feature_flags_modal.vue';
 
 const localVue = createLocalVue();
@@ -31,8 +32,8 @@ describe('Configure Feature Flags Modal', () => {
 
   describe('rotate token', () => {
     it('should emit a `token` event on click', () => {
-      wrapper.find('.js-ff-rotate-token-button').trigger('click');
-      expect(wrapper.emitted('token')).not.toBeEmpty();
+      wrapper.find(GlButton).vm.$emit('click');
+      expect(wrapper.emitted('token')).toEqual([[]]);
     });
 
     it('should display an error if there is a rotate error', () => {

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

@@ -77,13 +77,12 @@ describe('Edit feature flag form', () => {
   });
 
   describe('with error', () => {
-    it('should render the error', done => {
+    it('should render the error', () => {
       store.dispatch('edit/receiveUpdateFeatureFlagError', { message: ['The name is required'] });
 
-      wrapper.vm.$nextTick(() => {
+      return wrapper.vm.$nextTick(() => {
         expect(wrapper.find('.alert-danger').exists()).toEqual(true);
         expect(wrapper.find('.alert-danger').text()).toContain('The name is required');
-        done();
       });
     });
   });

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 { createLocalVue, shallowMount } from '@vue/test-utils';
+import { GlLoadingIcon, GlButton } from '@gitlab/ui';
 import EnvironmentsDropdown from 'ee/feature_flags/components/environments_dropdown.vue';
 import { TEST_HOST } from 'spec/test_constants';
 import axios from '~/lib/utils/axios_utils';
@@ -12,7 +12,7 @@ describe('Feature flags > Environments dropdown ', () => {
   let mock;
 
   const factory = props => {
-    wrapper = mount(localVue.extend(EnvironmentsDropdown), {
+    wrapper = shallowMount(EnvironmentsDropdown, {
       localVue,
       propsData: {
         endpoint: `${TEST_HOST}/environments.json'`,
@@ -78,20 +78,19 @@ describe('Feature flags > Environments dropdown ', () => {
           expect(wrapper.vm.showSuggestions).toEqual(true);
         });
 
-        it('emits even when a suggestion is clicked', () => {
-          jest.spyOn(wrapper.vm, '$emit');
+        it('emits event when a suggestion is clicked', () => {
+          const button = wrapper
+            .findAll(GlButton)
+            .filter(b => b.text() === 'production')
+            .at(0);
+          button.vm.$emit('click');
 
-          wrapper.find('ul button').trigger('click');
-
-          expect(wrapper.vm.$emit).toHaveBeenCalledWith('selectEnvironment', 'production');
-        });
-      });
+          expect(wrapper.emitted('selectEnvironment')).toEqual([['production']]);
         });
       });
-
       describe('on click clear button', () => {
         beforeEach(() => {
-      wrapper.find('.js-clear-search-input').trigger('click');
+          wrapper.find(GlButton).vm.$emit('click');
         });
 
         it('resets filter value', () => {
@@ -102,6 +101,8 @@ describe('Feature flags > Environments dropdown ', () => {
           expect(wrapper.vm.showSuggestions).toEqual(false);
         });
       });
+    });
+  });
 
   describe('on click create button', () => {
     beforeEach(done => {
@@ -115,10 +116,12 @@ describe('Feature flags > Environments dropdown ', () => {
     });
 
     it('emits create event', () => {
-      jest.spyOn(wrapper.vm, '$emit');
-      wrapper.find('.js-create-button').trigger('click');
+      wrapper
+        .findAll(GlButton)
+        .at(1)
+        .vm.$emit('click');
 
-      expect(wrapper.vm.$emit).toHaveBeenCalledWith('createClicked', 'production');
+      expect(wrapper.emitted('createClicked')).toEqual([['production']]);
     });
   });
 });

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

 import _ from 'underscore';
-import { createLocalVue, mount } from '@vue/test-utils';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
 import { GlFormTextarea, GlFormCheckbox } from '@gitlab/ui';
 import Form from 'ee/feature_flags/components/form.vue';
 import EnvironmentsDropdown from 'ee/feature_flags/components/environments_dropdown.vue';
@@ -33,7 +33,7 @@ describe('feature flag form', () => {
   const factory = (props = {}) => {
     const localVue = createLocalVue();
 
-    wrapper = mount(localVue.extend(Form), {
+    wrapper = shallowMount(Form, {
       localVue,
       propsData: props,
       provide: {
@@ -183,7 +183,7 @@ describe('feature flag form', () => {
 
       describe('deleting an existing scope', () => {
         beforeEach(() => {
-          wrapper.find('.js-delete-scope').trigger('click');
+          wrapper.find('.js-delete-scope').vm.$emit('click');
         });
 
         it('should add `shouldBeDestroyed` key the clicked scope', () => {
@@ -218,7 +218,7 @@ describe('feature flag form', () => {
             ],
           });
 
-          wrapper.find('.js-delete-scope').trigger('click');
+          wrapper.find('.js-delete-scope').vm.$emit('click');
 
           expect(wrapper.vm.formScopes).toEqual([]);
         });
@@ -280,7 +280,7 @@ describe('feature flag form', () => {
           .setSelected();
       };
 
-      beforeEach(done => {
+      beforeEach(() => {
         factory({
           ...requiredProps,
           name: 'feature_flag_1',
@@ -300,10 +300,10 @@ describe('feature flag form', () => {
           ],
         });
 
-        wrapper.vm.$nextTick(done, done.fail);
+        return wrapper.vm.$nextTick();
       });
 
-      it('should emit handleSubmit with the updated data', done => {
+      it('should emit handleSubmit with the updated data', () => {
         wrapper.find('#feature-flag-name').setValue('feature_flag_2');
 
         wrapper
@@ -318,7 +318,7 @@ describe('feature flag form', () => {
 
         wrapper.find(ToggleButton).vm.$emit('change', true);
 
-        wrapper.vm
+        return wrapper.vm
           .$nextTick()
 
           .then(() => {
@@ -333,7 +333,7 @@ describe('feature flag form', () => {
             return wrapper.vm.$nextTick();
           })
           .then(() => {
-            wrapper.find({ ref: 'submitButton' }).trigger('click');
+            wrapper.find({ ref: 'submitButton' }).vm.$emit('click');
 
             const data = wrapper.emitted().handleSubmit[0][0];
 
@@ -373,9 +373,7 @@ describe('feature flag form', () => {
                 rolloutUserIds: '',
               },
             ]);
-          })
-          .then(done)
-          .catch(done.fail);
+          });
       });
     });
   });

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

 import Vuex from 'vuex';
-import Vue from 'vue';
-import { createLocalVue, mount } from '@vue/test-utils';
+import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Form from 'ee/feature_flags/components/form.vue';
 import newModule from 'ee/feature_flags/store/modules/new';
 import NewFeatureFlag from 'ee/feature_flags/components/new_feature_flag.vue';
@@ -19,7 +18,7 @@ describe('New feature flag form', () => {
   });
 
   const factory = () => {
-    wrapper = mount(localVue.extend(NewFeatureFlag), {
+    wrapper = shallowMount(NewFeatureFlag, {
       localVue,
       propsData: {
         endpoint: 'feature_flags.json',
@@ -40,12 +39,11 @@ describe('New feature flag form', () => {
   });
 
   describe('with error', () => {
-    it('should render the error', done => {
+    it('should render the error', () => {
       store.dispatch('new/receiveCreateFeatureFlagError', { message: ['The name is required'] });
-      Vue.nextTick(() => {
+      return wrapper.vm.$nextTick(() => {
         expect(wrapper.find('.alert').exists()).toEqual(true);
         expect(wrapper.find('.alert').text()).toContain('The name is required');
-        done();
       });
     });
   });
@@ -59,17 +57,16 @@ describe('New feature flag form', () => {
   });
 
   it('should render default * row', () => {
-    expect(wrapper.vm.scopes).toEqual([
-      {
+    const defaultScope = {
       id: expect.any(String),
       environmentScope: '*',
       active: true,
       rolloutStrategy: ROLLOUT_STRATEGY_ALL_USERS,
       rolloutPercentage: DEFAULT_PERCENT_ROLLOUT,
       rolloutUserIds: [],
-      },
-    ]);
+    };
+    expect(wrapper.vm.scopes).toEqual([defaultScope]);
 
-    expect(wrapper.find('.js-scope-all').exists()).toEqual(true);
+    expect(wrapper.find(Form).props('scopes')).toContainEqual(defaultScope);
   });
 });