Clean up integration form specs

Some new recommendations / techniques for writing
frontend specs that have not been applied to older
specs in the integrations/edit folder:
- Replace find with findComponent where possible.
- Get rid of "if (wrapper)" and "wrapper = null".
- Use mountExtended / shallowMountExtended from
utils helper to use findByTestId.

spec/frontend/integrations/edit/components/active_checkbox_spec.js

 import { GlFormCheckbox } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+
 import ActiveCheckbox from '~/integrations/edit/components/active_checkbox.vue';
 import { createStore } from '~/integrations/edit/store';
 

spec/frontend/integrations/edit/components/confirmation_modal_spec.js

 import { GlModal } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+
 import ConfirmationModal from '~/integrations/edit/components/confirmation_modal.vue';
 import { createStore } from '~/integrations/edit/store';
 
@@ -13,13 +14,10 @@ describe('ConfirmationModal', () => {
   };
 
   afterEach(() => {
-    if (wrapper) {
-      wrapper.destroy();
-      wrapper = null;
-    }
+    wrapper.destroy();
   });
 
-  const findGlModal = () => wrapper.find(GlModal);
+  const findGlModal = () => wrapper.findComponent(GlModal);
 
   describe('template', () => {
     beforeEach(() => {

spec/frontend/integrations/edit/components/dynamic_field_spec.js

 import { GlFormGroup, GlFormCheckbox, GlFormInput, GlFormSelect, GlFormTextarea } from '@gitlab/ui';
 import { mount } from '@vue/test-utils';
+
 import DynamicField from '~/integrations/edit/components/dynamic_field.vue';
 
 describe('DynamicField', () => {
@@ -24,17 +25,14 @@ describe('DynamicField', () => {
   };
 
   afterEach(() => {
-    if (wrapper) {
-      wrapper.destroy();
-      wrapper = null;
-    }
+    wrapper.destroy();
   });
 
-  const findGlFormGroup = () => wrapper.find(GlFormGroup);
-  const findGlFormCheckbox = () => wrapper.find(GlFormCheckbox);
-  const findGlFormInput = () => wrapper.find(GlFormInput);
-  const findGlFormSelect = () => wrapper.find(GlFormSelect);
-  const findGlFormTextarea = () => wrapper.find(GlFormTextarea);
+  const findGlFormGroup = () => wrapper.findComponent(GlFormGroup);
+  const findGlFormCheckbox = () => wrapper.findComponent(GlFormCheckbox);
+  const findGlFormInput = () => wrapper.findComponent(GlFormInput);
+  const findGlFormSelect = () => wrapper.findComponent(GlFormSelect);
+  const findGlFormTextarea = () => wrapper.findComponent(GlFormTextarea);
 
   describe('template', () => {
     describe.each([

spec/frontend/integrations/edit/components/integration_form_spec.js

-import { shallowMount } from '@vue/test-utils';
 import { setHTMLFixture } from 'helpers/fixtures';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+
 import { mockIntegrationProps } from 'jest/integrations/edit/mock_data';
 import ActiveCheckbox from '~/integrations/edit/components/active_checkbox.vue';
 import ConfirmationModal from '~/integrations/edit/components/confirmation_modal.vue';
@@ -23,42 +23,37 @@ describe('IntegrationForm', () => {
     initialState = {},
     props = {},
   } = {}) => {
-    wrapper = extendedWrapper(
-      shallowMount(IntegrationForm, {
-        propsData: { ...props },
-        store: createStore({
-          customState: { ...mockIntegrationProps, ...customStateProps },
-          ...initialState,
-        }),
-        stubs: {
-          OverrideDropdown,
-          ActiveCheckbox,
-          ConfirmationModal,
-          JiraTriggerFields,
-          TriggerFields,
-        },
-        provide: {
-          glFeatures: featureFlags,
-        },
+    wrapper = shallowMountExtended(IntegrationForm, {
+      propsData: { ...props },
+      store: createStore({
+        customState: { ...mockIntegrationProps, ...customStateProps },
+        ...initialState,
       }),
-    );
+      stubs: {
+        OverrideDropdown,
+        ActiveCheckbox,
+        ConfirmationModal,
+        JiraTriggerFields,
+        TriggerFields,
+      },
+      provide: {
+        glFeatures: featureFlags,
+      },
+    });
   };
 
   afterEach(() => {
-    if (wrapper) {
-      wrapper.destroy();
-      wrapper = null;
-    }
+    wrapper.destroy();
   });
 
-  const findOverrideDropdown = () => wrapper.find(OverrideDropdown);
-  const findActiveCheckbox = () => wrapper.find(ActiveCheckbox);
-  const findConfirmationModal = () => wrapper.find(ConfirmationModal);
-  const findResetConfirmationModal = () => wrapper.find(ResetConfirmationModal);
-  const findResetButton = () => wrapper.find('[data-testid="reset-button"]');
-  const findJiraTriggerFields = () => wrapper.find(JiraTriggerFields);
-  const findJiraIssuesFields = () => wrapper.find(JiraIssuesFields);
-  const findTriggerFields = () => wrapper.find(TriggerFields);
+  const findOverrideDropdown = () => wrapper.findComponent(OverrideDropdown);
+  const findActiveCheckbox = () => wrapper.findComponent(ActiveCheckbox);
+  const findConfirmationModal = () => wrapper.findComponent(ConfirmationModal);
+  const findResetConfirmationModal = () => wrapper.findComponent(ResetConfirmationModal);
+  const findResetButton = () => wrapper.findByTestId('reset-button');
+  const findJiraTriggerFields = () => wrapper.findComponent(JiraTriggerFields);
+  const findJiraIssuesFields = () => wrapper.findComponent(JiraIssuesFields);
+  const findTriggerFields = () => wrapper.findComponent(TriggerFields);
 
   describe('template', () => {
     describe('showActive is true', () => {
@@ -286,7 +281,7 @@ describe('IntegrationForm', () => {
         </div>
       `);
 
-      it('renders `helpHtml`', async () => {
+      it('renders `helpHtml`', () => {
         const mockHelpHtml = document.querySelector(`[data-testid="${mockTestId}"]`);
 
         createComponent({

spec/frontend/integrations/edit/components/jira_issues_fields_spec.js

 import { GlFormCheckbox, GlFormInput } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+
 import JiraIssuesFields from '~/integrations/edit/components/jira_issues_fields.vue';
 import JiraUpgradeCta from '~/integrations/edit/components/jira_upgrade_cta.vue';
 import eventHub from '~/integrations/edit/event_hub';
@@ -20,7 +21,7 @@ describe('JiraIssuesFields', () => {
       defaultState: isInheriting ? {} : undefined,
     });
 
-    wrapper = mount(JiraIssuesFields, {
+    wrapper = mountExtended(JiraIssuesFields, {
       propsData: { ...defaultProps, ...props },
       store,
       stubs: ['jira-issue-creation-vulnerabilities'],
@@ -37,7 +38,7 @@ describe('JiraIssuesFields', () => {
     findEnableCheckbox().find('[type=checkbox]').attributes('disabled');
   const findProjectKey = () => wrapper.findComponent(GlFormInput);
   const findJiraUpgradeCta = () => wrapper.findComponent(JiraUpgradeCta);
-  const findJiraForVulnerabilities = () => wrapper.find('[data-testid="jira-for-vulnerabilities"]');
+  const findJiraForVulnerabilities = () => wrapper.findByTestId('jira-for-vulnerabilities');
   const setEnableCheckbox = async (isEnabled = true) =>
     findEnableCheckbox().vm.$emit('input', isEnabled);
 

spec/frontend/integrations/edit/components/jira_trigger_fields_spec.js

 import { GlFormCheckbox } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+
 import JiraTriggerFields from '~/integrations/edit/components/jira_trigger_fields.vue';
 
 describe('JiraTriggerFields', () => {
@@ -12,7 +13,7 @@ describe('JiraTriggerFields', () => {
   };
 
   const createComponent = (props, isInheriting = false) => {
-    wrapper = mount(JiraTriggerFields, {
+    wrapper = mountExtended(JiraTriggerFields, {
       propsData: { ...defaultProps, ...props },
       computed: {
         isInheriting: () => isInheriting,
@@ -21,18 +22,15 @@ describe('JiraTriggerFields', () => {
   };
 
   afterEach(() => {
-    if (wrapper) {
-      wrapper.destroy();
-      wrapper = null;
-    }
+    wrapper.destroy();
   });
 
-  const findCommentSettings = () => wrapper.find('[data-testid="comment-settings"]');
-  const findCommentDetail = () => wrapper.find('[data-testid="comment-detail"]');
-  const findCommentSettingsCheckbox = () => findCommentSettings().find(GlFormCheckbox);
+  const findCommentSettings = () => wrapper.findByTestId('comment-settings');
+  const findCommentDetail = () => wrapper.findByTestId('comment-detail');
+  const findCommentSettingsCheckbox = () => findCommentSettings().findComponent(GlFormCheckbox);
   const findIssueTransitionEnabled = () =>
     wrapper.find('[data-testid="issue-transition-enabled"] input[type="checkbox"]');
-  const findIssueTransitionMode = () => wrapper.find('[data-testid="issue-transition-mode"]');
+  const findIssueTransitionMode = () => wrapper.findByTestId('issue-transition-mode');
   const findIssueTransitionModeRadios = () =>
     findIssueTransitionMode().findAll('input[type="radio"]');
   const findIssueTransitionIdsField = () =>

spec/frontend/integrations/edit/components/jira_upgrade_cta_spec.js

 import { shallowMount } from '@vue/test-utils';
+
 import JiraUpgradeCta from '~/integrations/edit/components/jira_upgrade_cta.vue';
 
 describe('JiraUpgradeCta', () => {
@@ -18,13 +19,13 @@ describe('JiraUpgradeCta', () => {
 
   it('displays the correct message for premium and lower users', () => {
     createComponent({ showPremiumMessage: true });
-    expect(wrapper.html()).toContain('This is a Premium feature');
-    expect(wrapper.html()).toContain(contentMessage);
+    expect(wrapper.text()).toContain('This is a Premium feature');
+    expect(wrapper.text()).toContain(contentMessage);
   });
 
   it('displays the correct message for ultimate and lower users', () => {
     createComponent({ showUltimateMessage: true });
-    expect(wrapper.html()).toContain('This is an Ultimate feature');
-    expect(wrapper.html()).toContain(contentMessage);
+    expect(wrapper.text()).toContain('This is an Ultimate feature');
+    expect(wrapper.text()).toContain(contentMessage);
   });
 });

spec/frontend/integrations/edit/components/override_dropdown_spec.js

 import { GlDropdown, GlLink } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
+
 import OverrideDropdown from '~/integrations/edit/components/override_dropdown.vue';
 import { integrationLevels, overrideDropdownDescriptions } from '~/integrations/edit/constants';
 import { createStore } from '~/integrations/edit/store';
@@ -26,14 +27,11 @@ describe('OverrideDropdown', () => {
   };
 
   afterEach(() => {
-    if (wrapper) {
-      wrapper.destroy();
-      wrapper = null;
-    }
+    wrapper.destroy();
   });
 
-  const findGlLink = () => wrapper.find(GlLink);
-  const findGlDropdown = () => wrapper.find(GlDropdown);
+  const findGlLink = () => wrapper.findComponent(GlLink);
+  const findGlDropdown = () => wrapper.findComponent(GlDropdown);
 
   describe('template', () => {
     describe('override prop is true', () => {

spec/frontend/integrations/edit/components/trigger_fields_spec.js

 import { GlFormGroup, GlFormCheckbox, GlFormInput } from '@gitlab/ui';
-import { mount } from '@vue/test-utils';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
+
 import TriggerFields from '~/integrations/edit/components/trigger_fields.vue';
 
 describe('TriggerFields', () => {
@@ -10,7 +11,7 @@ describe('TriggerFields', () => {
   };
 
   const createComponent = (props, isInheriting = false) => {
-    wrapper = mount(TriggerFields, {
+    wrapper = mountExtended(TriggerFields, {
       propsData: { ...defaultProps, ...props },
       computed: {
         isInheriting: () => isInheriting,
@@ -19,21 +20,19 @@ describe('TriggerFields', () => {
   };
 
   afterEach(() => {
-    if (wrapper) {
-      wrapper.destroy();
-      wrapper = null;
-    }
+    wrapper.destroy();
   });
 
+  const findTriggerLabel = () => wrapper.findByTestId('trigger-fields-group').find('label');
   const findAllGlFormGroups = () => wrapper.find('#trigger-fields').findAll(GlFormGroup);
-  const findAllGlFormCheckboxes = () => wrapper.findAll(GlFormCheckbox);
-  const findAllGlFormInputs = () => wrapper.findAll(GlFormInput);
+  const findAllGlFormCheckboxes = () => wrapper.findAllComponents(GlFormCheckbox);
+  const findAllGlFormInputs = () => wrapper.findAllComponents(GlFormInput);
 
   describe.each([true, false])('template, isInheriting = `%p`', (isInheriting) => {
     it('renders a label with text "Trigger"', () => {
       createComponent();
 
-      const triggerLabel = wrapper.find('[data-testid="trigger-fields-group"]').find('label');
+      const triggerLabel = findTriggerLabel();
       expect(triggerLabel.exists()).toBe(true);
       expect(triggerLabel.text()).toBe('Trigger');
     });
@@ -68,7 +67,7 @@ describe('TriggerFields', () => {
       });
 
       it('renders GlFormInput with description for each event', () => {
-        const groups = wrapper.find('#trigger-fields').findAll(GlFormGroup);
+        const groups = findAllGlFormGroups();
 
         expect(groups).toHaveLength(2);
         groups.wrappers.forEach((group, index) => {