1 files changed, 26 insertions, 21 deletions

diff --git a/spec/frontend/feature_flags/components/form_spec.js b/spec/frontend/feature_flags/components/form_spec.js
index 3a057aedde9..a05e23a4250 100644
--- a/spec/frontend/feature_flags/components/form_spec.js
+++ b/spec/frontend/feature_flags/components/form_spec.js
@@ -1,9 +1,10 @@
-import { uniqueId } from 'lodash';
+import { GlFormTextarea, GlFormCheckbox, GlButton, GlToggle } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
-import { GlFormTextarea, GlFormCheckbox, GlButton } from '@gitlab/ui';
+import { uniqueId } from 'lodash';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import Api from '~/api';
-import Form from '~/feature_flags/components/form.vue';
 import EnvironmentsDropdown from '~/feature_flags/components/environments_dropdown.vue';
+import Form from '~/feature_flags/components/form.vue';
 import Strategy from '~/feature_flags/components/strategy.vue';
 import {
   ROLLOUT_STRATEGY_ALL_USERS,
@@ -14,7 +15,6 @@ import {
   NEW_VERSION_FLAG,
 } from '~/feature_flags/constants';
 import RelatedIssuesRoot from '~/related_issues/components/related_issues_root.vue';
-import ToggleButton from '~/vue_shared/components/toggle_button.vue';
 import { featureFlag, userList, allUsersStrategy } from '../mock_data';
 
 jest.mock('~/api.js');
@@ -35,14 +35,19 @@ describe('feature flag form', () => {
     },
   };
 
+  const findAddNewScopeRow = () => wrapper.findByTestId('add-new-scope');
+  const findGlToggle = () => wrapper.find(GlToggle);
+
   const factory = (props = {}, provide = {}) => {
-    wrapper = shallowMount(Form, {
-      propsData: { ...requiredProps, ...props },
-      provide: {
-        ...requiredInjections,
-        ...provide,
-      },
-    });
+    wrapper = extendedWrapper(
+      shallowMount(Form, {
+        propsData: { ...requiredProps, ...props },
+        provide: {
+          ...requiredInjections,
+          ...provide,
+        },
+      }),
+    );
   };
 
   beforeEach(() => {
@@ -102,13 +107,13 @@ describe('feature flag form', () => {
       });
 
       it('should render scopes table with a new row ', () => {
-        expect(wrapper.find('.js-add-new-scope').exists()).toBe(true);
+        expect(findAddNewScopeRow().exists()).toBe(true);
       });
 
       describe('status toggle', () => {
         describe('without filled text input', () => {
           it('should add a new scope with the text value empty and the status', () => {
-            wrapper.find(ToggleButton).vm.$emit('change', true);
+            findGlToggle().vm.$emit('change', true);
 
             expect(wrapper.vm.formScopes).toHaveLength(1);
             expect(wrapper.vm.formScopes[0].active).toEqual(true);
@@ -121,7 +126,7 @@ describe('feature flag form', () => {
         it('should be disabled if the feature flag is not active', (done) => {
           wrapper.setProps({ active: false });
           wrapper.vm.$nextTick(() => {
-            expect(wrapper.find(ToggleButton).props('disabledInput')).toBe(true);
+            expect(findGlToggle().props('disabled')).toBe(true);
             done();
           });
         });
@@ -166,11 +171,11 @@ describe('feature flag form', () => {
 
     describe('scopes', () => {
       it('should be possible to remove a scope', () => {
-        expect(wrapper.find('.js-feature-flag-delete').exists()).toEqual(true);
+        expect(wrapper.findByTestId('feature-flag-delete').exists()).toEqual(true);
       });
 
       it('renders empty row to add a new scope', () => {
-        expect(wrapper.find('.js-add-new-scope').exists()).toEqual(true);
+        expect(findAddNewScopeRow().exists()).toEqual(true);
       });
 
       it('renders the user id checkbox', () => {
@@ -186,7 +191,7 @@ describe('feature flag form', () => {
       describe('update scope', () => {
         describe('on click on toggle', () => {
           it('should update the scope', () => {
-            wrapper.find(ToggleButton).vm.$emit('change', false);
+            findGlToggle().vm.$emit('change', false);
 
             expect(wrapper.vm.formScopes[0].active).toBe(false);
           });
@@ -195,7 +200,7 @@ describe('feature flag form', () => {
             wrapper.setProps({ active: false });
 
             wrapper.vm.$nextTick(() => {
-              expect(wrapper.find(ToggleButton).props('disabledInput')).toBe(true);
+              expect(findGlToggle().props('disabled')).toBe(true);
               done();
             });
           });
@@ -294,7 +299,7 @@ describe('feature flag form', () => {
           const row = wrapper.findAll('.gl-responsive-table-row').at(2);
 
           expect(row.find(EnvironmentsDropdown).vm.disabled).toBe(true);
-          expect(row.find(ToggleButton).vm.disabledInput).toBe(true);
+          expect(row.find(GlToggle).props('disabled')).toBe(true);
           expect(row.find('.js-delete-scope').exists()).toBe(false);
         });
       });
@@ -347,10 +352,10 @@ describe('feature flag form', () => {
             return wrapper.vm.$nextTick();
           })
           .then(() => {
-            wrapper.find('.js-add-new-scope').find(ToggleButton).vm.$emit('change', true);
+            findAddNewScopeRow().find(GlToggle).vm.$emit('change', true);
           })
           .then(() => {
-            wrapper.find(ToggleButton).vm.$emit('change', true);
+            findGlToggle().vm.$emit('change', true);
             return wrapper.vm.$nextTick();
           })