Migrate feature flags table specs to Jest

Migrated feature_flags_table_spec.js from Karma to Jest

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,
@@ -10,21 +10,26 @@ import {
 const localVue = createLocalVue();
 
 describe('Feature flag table', () => {
-  let Component;
   let wrapper;
 
+  const createWrapper = (propsData, opts = {}) => {
+    wrapper = shallowMount(FeatureFlagsTable, {
+      propsData,
+      sync: false,
+      localVue,
+      ...opts,
+    });
+  };
+
   afterEach(() => {
     wrapper.destroy();
+    wrapper = null;
   });
 
   describe('with an active scope and a standard rollout strategy', () => {
     beforeEach(() => {
-      Component = localVue.extend(featureFlagsTableComponent);
-
-      wrapper = shallowMount(Component, {
-        localVue,
-        provide: { glFeatures: { featureFlagIID: true } },
-        propsData: {
+      createWrapper(
+        {
           featureFlags: [
             {
               id: 1,
@@ -50,7 +55,10 @@ describe('Feature flag table', () => {
           ],
           csrfToken: 'fakeToken',
         },
-      });
+        {
+          provide: { glFeatures: { featureFlagIID: true } },
+        },
+      );
     });
 
     it('Should render a table', () => {
@@ -103,35 +111,30 @@ 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',
-        },
+      createWrapper({
+        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',
       });
     });
 
@@ -144,35 +147,30 @@ 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',
-        },
+      createWrapper({
+        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',
       });
     });