Merge branch 'migrate-feature-flags-specs' into 'master'

Migrate feature flags table specs to Jest

See merge request gitlab-org/gitlab!19880

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

-import featureFlagsTableComponent from 'ee/feature_flags/components/feature_flags_table.vue';
+import FeatureFlagsTable from 'ee/feature_flags/components/feature_flags_table.vue';
 import { createLocalVue, shallowMount } from '@vue/test-utils';
-import { trimText } from 'spec/helpers/text_helper';
+import { trimText } from 'helpers/text_helper';
 import {
   ROLLOUT_STRATEGY_ALL_USERS,
   ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
@@ -9,26 +9,10 @@ import {
 
 const localVue = createLocalVue();
 
-describe('Feature flag table', () => {
-  let Component;
-  let wrapper;
-
-  afterEach(() => {
-    wrapper.destroy();
-  });
-
-  describe('with an active scope and a standard rollout strategy', () => {
-    beforeEach(() => {
-      Component = localVue.extend(featureFlagsTableComponent);
-
-      wrapper = shallowMount(Component, {
-        localVue,
-        provide: { glFeatures: { featureFlagIID: true } },
-        propsData: {
+const getDefaultProps = () => ({
   featureFlags: [
     {
       id: 1,
-              iid: 1,
       active: true,
       name: 'flag name',
       description: 'flag description',
@@ -49,7 +33,35 @@ describe('Feature flag table', () => {
     },
   ],
   csrfToken: 'fakeToken',
-        },
+});
+
+describe('Feature flag table', () => {
+  let wrapper;
+  let props;
+
+  const createWrapper = (propsData, opts = {}) => {
+    wrapper = shallowMount(FeatureFlagsTable, {
+      propsData,
+      sync: false,
+      localVue,
+      ...opts,
+    });
+  };
+
+  beforeEach(() => {
+    props = getDefaultProps();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  describe('with an active scope and a standard rollout strategy', () => {
+    beforeEach(() => {
+      props.featureFlags[0].iid = 1;
+      createWrapper(props, {
+        provide: { glFeatures: { featureFlagIID: true } },
       });
     });
 
@@ -103,36 +115,9 @@ describe('Feature flag table', () => {
 
   describe('with an active scope and a percentage rollout strategy', () => {
     beforeEach(() => {
-      Component = localVue.extend(featureFlagsTableComponent);
-
-      wrapper = shallowMount(Component, {
-        localVue,
-        propsData: {
-          featureFlags: [
-            {
-              id: 1,
-              active: true,
-              name: 'flag name',
-              description: 'flag description',
-              destroy_path: 'destroy/path',
-              edit_path: 'edit/path',
-              scopes: [
-                {
-                  id: 1,
-                  active: true,
-                  environmentScope: 'scope',
-                  canUpdate: true,
-                  protected: false,
-                  rolloutStrategy: ROLLOUT_STRATEGY_PERCENT_ROLLOUT,
-                  rolloutPercentage: '54',
-                  shouldBeDestroyed: false,
-                },
-              ],
-            },
-          ],
-          csrfToken: 'fakeToken',
-        },
-      });
+      props.featureFlags[0].scopes[0].rolloutStrategy = ROLLOUT_STRATEGY_PERCENT_ROLLOUT;
+      props.featureFlags[0].scopes[0].rolloutPercentage = '54';
+      createWrapper(props);
     });
 
     it('should render an environments specs badge with percentage', () => {
@@ -144,36 +129,8 @@ describe('Feature flag table', () => {
 
   describe('with an inactive scope', () => {
     beforeEach(() => {
-      Component = localVue.extend(featureFlagsTableComponent);
-
-      wrapper = shallowMount(Component, {
-        localVue,
-        propsData: {
-          featureFlags: [
-            {
-              id: 1,
-              active: true,
-              name: 'flag name',
-              description: 'flag description',
-              destroy_path: 'destroy/path',
-              edit_path: 'edit/path',
-              scopes: [
-                {
-                  id: 1,
-                  active: false,
-                  environmentScope: 'scope',
-                  canUpdate: true,
-                  protected: false,
-                  rolloutStrategy: ROLLOUT_STRATEGY_ALL_USERS,
-                  rolloutPercentage: DEFAULT_PERCENT_ROLLOUT,
-                  shouldBeDestroyed: false,
-                },
-              ],
-            },
-          ],
-          csrfToken: 'fakeToken',
-        },
-      });
+      props.featureFlags[0].scopes[0].active = false;
+      createWrapper(props);
     });
 
     it('should render an environments specs badge with inactive class', () => {