Merge branch '337964-cleanup-dast-profiles-specs' into 'master'

Cleanup DAST profile forms specs

See merge request gitlab-org/gitlab!67995

ee/app/assets/javascripts/security_configuration/dast_profiles/components/base_dast_profile_form.vue

@@ -125,7 +125,7 @@ export default {
 
 <template>
   <gl-form novalidate @submit.prevent="onSubmit">
-    <h2 v-if="showHeader" class="gl-mb-6">
+    <h2 v-if="showHeader" class="gl-mb-6" data-testid="header">
       <slot name="title"></slot>
     </h2>
 

ee/spec/frontend/security_configuration/dast_profiles/components/base_dast_profile_form_spec.js

+import { GlAlert, GlForm, GlModal } from '@gitlab/ui';
+import { createLocalVue } from '@vue/test-utils';
+import merge from 'lodash/merge';
+import { createMockClient } from 'mock-apollo-client';
+import VueApollo from 'vue-apollo';
+import BaseDastProfileForm from 'ee/security_configuration/dast_profiles/components/base_dast_profile_form.vue';
+import dastSiteProfileCreateMutation from 'ee/security_configuration/dast_profiles/dast_site_profiles/graphql/dast_site_profile_create.mutation.graphql';
+import { dastSiteProfileCreate } from 'ee_jest/security_configuration/dast_profiles/dast_site_profiles/mock_data/apollo_mock';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import waitForPromises from 'helpers/wait_for_promises';
+
+const localVue = createLocalVue();
+localVue.use(VueApollo);
+
+const mutationVariables = {
+  foo: 'bar',
+};
+
+const defaultProps = {
+  mutation: dastSiteProfileCreateMutation,
+  mutationType: 'dastSiteProfileCreate',
+  mutationVariables,
+  modalProps: {},
+};
+
+const defaultRequestHandler = jest.fn().mockResolvedValue(dastSiteProfileCreate());
+
+describe('BaseDastProfileForm', () => {
+  let wrapper;
+  let apolloProvider;
+  let requestHandler;
+
+  // Finders
+  const findForm = () => wrapper.findComponent(GlForm);
+  const findHeader = () => wrapper.findByTestId('header');
+  const findPolicyProfileAlert = () => wrapper.findByTestId('dast-policy-profile-alert');
+  const findErrorAlert = () => wrapper.findByTestId('dast-profile-form-alert');
+  const findCancelModal = () => wrapper.findByTestId('dast-profile-form-cancel-modal');
+  const findCancelButton = () => wrapper.findByTestId('dast-profile-form-cancel-button');
+  const findSubmitButton = () => wrapper.findByTestId('dast-profile-form-submit-button');
+
+  // Helpers
+  const submitForm = () => findForm().vm.$emit('submit', { preventDefault: () => {} });
+
+  // Assertions
+  const expectSubmitNotLoading = () => expect(findSubmitButton().props('loading')).toBe(false);
+
+  const mockClientFactory = (handler = defaultRequestHandler) => {
+    const mockClient = createMockClient();
+    mockClient.setRequestHandler(dastSiteProfileCreateMutation, handler);
+    requestHandler = handler;
+
+    return mockClient;
+  };
+
+  const withHandler = (handler) => {
+    apolloProvider.defaultClient = mockClientFactory(handler);
+  };
+
+  const createComponent = (options) => {
+    apolloProvider = new VueApollo({
+      defaultClient: mockClientFactory(),
+    });
+
+    const mountOpts = merge(
+      {},
+      {
+        propsData: defaultProps,
+      },
+      options,
+      {
+        localVue,
+        apolloProvider,
+      },
+    );
+
+    wrapper = shallowMountExtended(BaseDastProfileForm, mountOpts);
+
+    return { withHandler };
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+    apolloProvider = null;
+  });
+
+  it('renders default slot', () => {
+    const testId = 'default-slot-content';
+    createComponent({
+      slots: {
+        default: `<div data-testid='${testId}' />`,
+      },
+    });
+
+    expect(wrapper.findByTestId(testId).exists()).toBe(true);
+  });
+
+  describe('header', () => {
+    const title = 'Page title';
+
+    it('renders by default', () => {
+      createComponent({
+        slots: {
+          title,
+        },
+      });
+
+      const header = findHeader();
+      expect(header.exists()).toBe(true);
+      expect(header.text()).toBe(title);
+    });
+
+    it('does not render header if show-header is false', () => {
+      createComponent({
+        propsData: {
+          showHeader: false,
+        },
+        slots: {
+          title,
+        },
+      });
+
+      expect(findHeader().exists()).toBe(false);
+    });
+  });
+
+  describe('security policies', () => {
+    it('does not render policy alert by default', () => {
+      createComponent();
+
+      expect(findPolicyProfileAlert().exists()).toBe(false);
+    });
+
+    describe('when profile comes from a policy', () => {
+      beforeEach(() => {
+        createComponent({
+          propsData: {
+            isPolicyProfile: true,
+          },
+        });
+      });
+
+      it('shows a policy alert', () => {
+        expect(findPolicyProfileAlert().exists()).toBe(true);
+      });
+
+      it('disables submit button', () => {
+        expect(findSubmitButton().props('disabled')).toBe(true);
+      });
+    });
+  });
+
+  describe('modal', () => {
+    const modalProps = {
+      title: 'Modal title',
+    };
+
+    beforeEach(() => {
+      createComponent({
+        propsData: {
+          modalProps,
+        },
+      });
+    });
+
+    it('passes props to the modal', () => {
+      expect(findCancelModal().props()).toEqual(expect.objectContaining(modalProps));
+    });
+  });
+
+  describe('when submitting the form', () => {
+    it('triggers GraphQL mutation', () => {
+      createComponent();
+      expect(requestHandler).not.toHaveBeenCalled();
+
+      submitForm();
+
+      expect(requestHandler).toHaveBeenCalledWith({
+        input: mutationVariables,
+      });
+    });
+
+    it('sets loading state', async () => {
+      createComponent();
+
+      expectSubmitNotLoading();
+
+      submitForm();
+      await wrapper.vm.$nextTick();
+
+      expect(findSubmitButton().props('loading')).toBe(true);
+    });
+
+    it('on success, emits success event', async () => {
+      createComponent();
+
+      expect(wrapper.emitted('success')).toBeUndefined();
+
+      submitForm();
+      await waitForPromises();
+
+      expect(wrapper.emitted('success')).toHaveLength(1);
+    });
+
+    describe('when the API returns a top-level error', () => {
+      const defaultErrorMessage = 'Default error message';
+
+      beforeEach(async () => {
+        createComponent({
+          slots: {
+            'error-message': defaultErrorMessage,
+          },
+        }).withHandler(jest.fn().mockRejectedValue(new Error('GraphQL Network Error')));
+        submitForm();
+        await waitForPromises();
+      });
+
+      it('resets loading state', () => {
+        expectSubmitNotLoading();
+      });
+
+      it('shows an alert with the default error message', () => {
+        expect(findErrorAlert().exists()).toBe(true);
+        expect(findErrorAlert().text()).toBe(defaultErrorMessage);
+      });
+    });
+
+    describe('when the API returns errors as data', () => {
+      const errors = ['error#1', 'error#2', 'error#3'];
+
+      beforeEach(async () => {
+        createComponent({
+          stubs: { GlAlert },
+        }).withHandler(jest.fn().mockResolvedValue(dastSiteProfileCreate(errors)));
+        submitForm();
+        await waitForPromises();
+      });
+
+      it('resets loading state', () => {
+        expectSubmitNotLoading();
+      });
+
+      it('shows an alert with the returned errors', () => {
+        const alert = findErrorAlert();
+        expect(alert.exists()).toBe(true);
+        errors.forEach((error) => {
+          expect(alert.text()).toContain(error);
+        });
+      });
+    });
+  });
+
+  describe('when cancelling the action', () => {
+    describe('without changing the form', () => {
+      beforeEach(() => {
+        createComponent();
+      });
+
+      it('emits cancel event', () => {
+        findCancelButton().vm.$emit('click');
+        expect(wrapper.emitted('cancel')).toBeTruthy();
+      });
+    });
+
+    describe('after changing the form', () => {
+      beforeEach(() => {
+        createComponent({
+          propsData: {
+            formTouched: true,
+          },
+          stubs: { GlModal },
+        });
+      });
+
+      it('asks the user to confirm the action', () => {
+        jest.spyOn(findCancelModal().vm, 'show').mockReturnValue();
+        findCancelButton().vm.$emit('click');
+
+        expect(findCancelModal().vm.show).toHaveBeenCalled();
+      });
+
+      it('emits cancel event upon confirming', () => {
+        findCancelModal().vm.$emit('ok');
+
+        expect(wrapper.emitted('cancel')).toBeTruthy();
+      });
+    });
+  });
+});

ee/spec/frontend/security_configuration/dast_profiles/dast_scanner_profiles_form/components/dast_scanner_profiles_form_spec.js

-import { GlForm, GlModal } from '@gitlab/ui';
+import { GlForm } from '@gitlab/ui';
 import { within } from '@testing-library/dom';
-import { mount } from '@vue/test-utils';
 import merge from 'lodash/merge';
 import BaseDastProfileForm from 'ee/security_configuration/dast_profiles/components/base_dast_profile_form.vue';
 import DastScannerProfileForm from 'ee/security_configuration/dast_profiles/dast_scanner_profiles/components/dast_scanner_profile_form.vue';
@@ -9,6 +8,7 @@ import dastScannerProfileCreateMutation from 'ee/security_configuration/dast_pro
 import dastScannerProfileUpdateMutation from 'ee/security_configuration/dast_profiles/dast_scanner_profiles/graphql/dast_scanner_profile_update.mutation.graphql';
 import { scannerProfiles, policyScannerProfile } from 'ee_jest/on_demand_scans/mocks/mock_data';
 import { TEST_HOST } from 'helpers/test_constants';
+import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 const projectFullPath = 'group/project';
 const profilesLibraryPath = `${TEST_HOST}/${projectFullPath}/-/security/configuration/dast_scans`;
@@ -29,41 +29,26 @@ const defaultProps = {
   onDemandScansPath,
 };
 
-describe('DAST Scanner Profile', () => {
+describe('DastScannerProfileForm', () => {
   let wrapper;
 
   const withinComponent = () => within(wrapper.element);
-  const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"`);
 
   const findBaseDastProfileForm = () => wrapper.findComponent(BaseDastProfileForm);
-  const findParentFormGroup = () => findByTestId('dast-scanner-parent-group');
+  const findParentFormGroup = () => wrapper.findByTestId('dast-scanner-parent-group');
   const findForm = () => wrapper.find(GlForm);
-  const findProfileNameInput = () => findByTestId('profile-name-input');
-  const findSpiderTimeoutInput = () => findByTestId('spider-timeout-input');
-  const findTargetTimeoutInput = () => findByTestId('target-timeout-input');
-  const findSubmitButton = () => findByTestId('dast-profile-form-submit-button');
-  const findCancelButton = () => findByTestId('dast-profile-form-cancel-button');
-  const findScanType = () => findByTestId('scan-type-option');
-
-  const findCancelModal = () => wrapper.find(GlModal);
-  const findAlert = () => findByTestId('dast-profile-form-alert');
-  const findPolicyProfileAlert = () => findByTestId('dast-policy-profile-alert');
-  const submitForm = () => findForm().vm.$emit('submit', { preventDefault: () => {} });
+  const findProfileNameInput = () => wrapper.findByTestId('profile-name-input');
+  const findSpiderTimeoutInput = () => wrapper.findByTestId('spider-timeout-input');
+  const findTargetTimeoutInput = () => wrapper.findByTestId('target-timeout-input');
+  const findScanType = () => wrapper.findByTestId('scan-type-option');
 
   const setFieldValue = async (field, value) => {
     await field.find('input').setValue(value);
     field.trigger('blur');
   };
 
-  const fillAndSubmitForm = async () => {
-    await setFieldValue(findProfileNameInput(), profileName);
-    await setFieldValue(findSpiderTimeoutInput(), spiderTimeout);
-    await setFieldValue(findTargetTimeoutInput(), targetTimeout);
-    await submitForm();
-  };
-
-  const createComponent = (options) => {
-    wrapper = mount(
+  const createComponentFactory = (mountFn = mountExtended) => (options) => {
+    wrapper = mountFn(
       DastScannerProfileForm,
       merge(
         {},
@@ -82,6 +67,8 @@ describe('DAST Scanner Profile', () => {
       ),
     );
   };
+  const createShallowComponent = createComponentFactory(shallowMountExtended);
+  const createComponent = createComponentFactory();
 
   afterEach(() => {
     wrapper.destroy();
@@ -94,43 +81,13 @@ describe('DAST Scanner Profile', () => {
   });
 
   it('when show header is disabled', () => {
-    createComponent({
+    createShallowComponent({
       propsData: {
         ...defaultProps,
         showHeader: false,
       },
     });
-    expect(findForm().text()).not.toContain('New scanner profile');
-  });
-
-  describe('submit button', () => {
-    beforeEach(() => {
-      createComponent();
-    });
-
-    describe('is enabled even if', () => {
-      it('form contains errors', async () => {
-        findProfileNameInput().vm.$emit('input', profileName);
-        await findSpiderTimeoutInput().vm.$emit('input', '12312');
-        expect(findSubmitButton().props('disabled')).toBe(false);
-      });
-
-      it('at least one field is empty', async () => {
-        findProfileNameInput().vm.$emit('input', '');
-        await findSpiderTimeoutInput().vm.$emit('input', spiderTimeout);
-        await findTargetTimeoutInput().vm.$emit('input', targetTimeout);
-        expect(findSubmitButton().props('disabled')).toBe(false);
-      });
-    });
-
-    describe('is enabled if', () => {
-      it('all fields are filled in and valid', async () => {
-        findProfileNameInput().vm.$emit('input', profileName);
-        await findSpiderTimeoutInput().vm.$emit('input', 0);
-        await findTargetTimeoutInput().vm.$emit('input', targetTimeout);
-        expect(findSubmitButton().props('disabled')).toBe(false);
-      });
-    });
+    expect(findBaseDastProfileForm().props('showHeader')).toBe(false);
   });
 
   describe.each`
@@ -183,29 +140,15 @@ describe('DAST Scanner Profile', () => {
       expect(findTargetTimeoutInput().props('value')).toBe(profile?.targetTimeout ?? 60);
     });
 
-    describe('submission', () => {
-      const createdProfileId = 30203;
-
-      describe('on success', () => {
-        beforeEach(async () => {
-          jest
-            .spyOn(wrapper.vm.$apollo, 'mutate')
-            .mockResolvedValue({ data: { [mutationKind]: { id: createdProfileId } } });
+    it('passes correct props to base component', async () => {
       await findProfileNameInput().vm.$emit('input', profileName);
       await findSpiderTimeoutInput().vm.$emit('input', spiderTimeout);
       await findTargetTimeoutInput().vm.$emit('input', targetTimeout);
-          await submitForm();
-        });
 
-        it('sets loading state', () => {
-          expect(findSubmitButton().props('loading')).toBe(true);
-        });
-
-        it('triggers GraphQL mutation', () => {
-          expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
-            mutation,
-            variables: {
-              input: {
+      const baseDastProfileForm = findBaseDastProfileForm();
+      expect(baseDastProfileForm.props('mutation')).toBe(mutation);
+      expect(baseDastProfileForm.props('mutationType')).toBe(mutationKind);
+      expect(baseDastProfileForm.props('mutationVariables')).toEqual({
         profileName,
         spiderTimeout,
         targetTimeout,
@@ -214,101 +157,13 @@ describe('DAST Scanner Profile', () => {
         useAjaxSpider,
         showDebugMessages,
         ...mutationVars,
-              },
-            },
-          });
-        });
-
-        it('emits success event with correct params', () => {
-          const baseDastProfileForm = findBaseDastProfileForm();
-          expect(baseDastProfileForm.emitted('success')).toBeTruthy();
-          expect(baseDastProfileForm.emitted('success')).toHaveLength(1);
-          expect(baseDastProfileForm.emitted('success')[0]).toStrictEqual([{ id: 30203 }]);
-        });
-
-        it('does not show an alert', () => {
-          expect(findAlert().exists()).toBe(false);
-        });
-      });
-
-      describe('on top-level error', () => {
-        beforeEach(async () => {
-          createComponent();
-          jest.spyOn(wrapper.vm.$apollo, 'mutate').mockRejectedValue();
-          await fillAndSubmitForm();
-        });
-
-        it('resets loading state', () => {
-          expect(findSubmitButton().props('loading')).toBe(false);
-        });
-
-        it('shows an error alert', async () => {
-          expect(findAlert().exists()).toBe(true);
-        });
-      });
-
-      describe('on errors as data', () => {
-        const errors = ['Name is already taken', 'Value should be Int', 'error#3'];
-
-        beforeEach(async () => {
-          jest
-            .spyOn(wrapper.vm.$apollo, 'mutate')
-            .mockResolvedValue({ data: { [mutationKind]: { errors } } });
-          await findProfileNameInput().vm.$emit('input', profileName);
-          await findSpiderTimeoutInput().vm.$emit('input', spiderTimeout);
-          await findTargetTimeoutInput().vm.$emit('input', targetTimeout);
-          await submitForm();
-        });
-
-        it('resets loading state', () => {
-          expect(findSubmitButton().props('loading')).toBe(false);
-        });
-
-        it('shows an alert with the returned errors', () => {
-          const alert = findAlert();
-
-          expect(alert.exists()).toBe(true);
-          errors.forEach((error) => {
-            expect(alert.text()).toContain(error);
-          });
-        });
-      });
-    });
-
-    describe('cancellation', () => {
-      beforeEach(() => {
-        createComponent();
-      });
-
-      describe('when form is empty', () => {
-        it('emits cancel event', () => {
-          findCancelButton().vm.$emit('click');
-          expect(findBaseDastProfileForm().emitted('cancel')).toBeTruthy();
-        });
-      });
-
-      describe('when form is not empty', () => {
-        beforeEach(() => {
-          findProfileNameInput().setValue(profileName);
-        });
-
-        it('asks the user to confirm the action', () => {
-          jest.spyOn(findCancelModal().vm, 'show').mockReturnValue();
-          findCancelButton().trigger('click');
-          expect(findCancelModal().vm.show).toHaveBeenCalled();
-        });
-
-        it('emits cancel event', () => {
-          findCancelModal().vm.$emit('ok');
-          expect(findBaseDastProfileForm().emitted('cancel')).toBeTruthy();
-        });
       });
     });
   });
 
   describe('when profile does not come from a policy', () => {
     beforeEach(() => {
-      createComponent({
+      createShallowComponent({
         propsData: {
           profile: defaultProfile,
         },
@@ -318,31 +173,19 @@ describe('DAST Scanner Profile', () => {
     it('should enable all form groups', () => {
       expect(findParentFormGroup().attributes('disabled')).toBe(undefined);
     });
-
-    it('should show the policy profile alert', () => {
-      expect(findPolicyProfileAlert().exists()).toBe(false);
-    });
   });
 
   describe('when profile does comes from a policy', () => {
     beforeEach(() => {
-      createComponent({
+      createShallowComponent({
         propsData: {
           profile: policyScannerProfile,
         },
       });
     });
 
-    it('should show the policy profile alert', () => {
-      expect(findPolicyProfileAlert().exists()).toBe(true);
-    });
-
     it('should disable all form groups', () => {
-      expect(findParentFormGroup().attributes('disabled')).toBe('disabled');
-    });
-
-    it('should disable the save button', () => {
-      expect(findSubmitButton().props('disabled')).toBe(true);
+      expect(findParentFormGroup().attributes('disabled')).toBe('true');
     });
   });
 });

ee/spec/frontend/security_configuration/dast_profiles/dast_site_profiles/components/dast_site_profile_form_spec.js

-import { GlForm, GlModal } from '@gitlab/ui';
+import { GlForm } from '@gitlab/ui';
 import { within } from '@testing-library/dom';
-import { createLocalVue, mount } from '@vue/test-utils';
 import merge from 'lodash/merge';
-import { createMockClient } from 'mock-apollo-client';
-import VueApollo from 'vue-apollo';
 import BaseDastProfileForm from 'ee/security_configuration/dast_profiles/components/base_dast_profile_form.vue';
 import DastSiteAuthSection from 'ee/security_configuration/dast_profiles/dast_site_profiles/components/dast_site_auth_section.vue';
 import DastSiteProfileForm from 'ee/security_configuration/dast_profiles/dast_site_profiles/components/dast_site_profile_form.vue';
 import dastSiteProfileCreateMutation from 'ee/security_configuration/dast_profiles/dast_site_profiles/graphql/dast_site_profile_create.mutation.graphql';
 import dastSiteProfileUpdateMutation from 'ee/security_configuration/dast_profiles/dast_site_profiles/graphql/dast_site_profile_update.mutation.graphql';
 import { siteProfiles, policySiteProfile } from 'ee_jest/on_demand_scans/mocks/mock_data';
-import * as responses from 'ee_jest/security_configuration/dast_profiles/dast_site_profiles/mock_data/apollo_mock';
 import { TEST_HOST } from 'helpers/test_constants';
-import { extendedWrapper } from 'helpers/vue_test_utils_helper';
-import waitForPromises from 'helpers/wait_for_promises';
-
-const localVue = createLocalVue();
-localVue.use(VueApollo);
+import { mountExtended, shallowMountExtended } from 'helpers/vue_test_utils_helper';
 
 const [siteProfileOne] = siteProfiles;
 const projectFullPath = 'group/project';
@@ -32,15 +24,8 @@ const defaultProps = {
   onDemandScansPath,
 };
 
-const defaultRequestHandlers = {
-  dastSiteProfileCreate: jest.fn().mockResolvedValue(responses.dastSiteProfileCreate()),
-  dastSiteProfileUpdate: jest.fn().mockResolvedValue(responses.dastSiteProfileUpdate()),
-};
-
 describe('DastSiteProfileForm', () => {
   let wrapper;
-  let apolloProvider;
-  let requestHandlers;
 
   const withinComponent = () => within(wrapper.element);
 
@@ -48,7 +33,6 @@ describe('DastSiteProfileForm', () => {
   const findBaseDastProfileForm = () => wrapper.findComponent(BaseDastProfileForm);
   const findParentFormGroup = () => wrapper.findByTestId('dast-site-parent-group');
   const findAuthSection = () => wrapper.findComponent(DastSiteAuthSection);
-  const findCancelModal = () => wrapper.findComponent(GlModal);
   const findByNameAttribute = (name) => wrapper.find(`[name="${name}"]`);
   const findProfileNameInput = () => wrapper.findByTestId('profile-name-input');
   const findTargetUrlInput = () => wrapper.findByTestId('target-url-input');
@@ -56,11 +40,6 @@ describe('DastSiteProfileForm', () => {
   const findRequestHeadersInput = () => wrapper.findByTestId('request-headers-input');
   const findAuthCheckbox = () => wrapper.findByTestId('auth-enable-checkbox');
   const findTargetTypeOption = () => wrapper.findByTestId('site-type-option');
-  const findSubmitButton = () => wrapper.findByTestId('dast-profile-form-submit-button');
-  const findCancelButton = () => wrapper.findByTestId('dast-profile-form-cancel-button');
-  const findAlert = () => wrapper.findByTestId('dast-profile-form-alert');
-  const findPolicyAlert = () => wrapper.findByTestId('dast-policy-profile-alert');
-  const submitForm = () => findForm().vm.$emit('submit', { preventDefault: () => {} });
 
   const setFieldValue = async (field, value) => {
     await field.setValue(value);
@@ -83,11 +62,6 @@ describe('DastSiteProfileForm', () => {
     await setAuthFieldsValues(siteProfileOne.auth);
   };
 
-  const fillAndSubmitForm = async () => {
-    await fillForm();
-    submitForm();
-  };
-
   const setTargetType = async (type) => {
     const radio = wrapper
       .findAll('input[type="radio"]')
@@ -96,37 +70,7 @@ describe('DastSiteProfileForm', () => {
     radio.element.selected = true;
     radio.trigger('change');
   };
-
-  const mockClientFactory = (handlers) => {
-    const mockClient = createMockClient();
-
-    requestHandlers = {
-      ...defaultRequestHandlers,
-      ...handlers,
-    };
-
-    mockClient.setRequestHandler(
-      dastSiteProfileCreateMutation,
-      requestHandlers.dastSiteProfileCreate,
-    );
-
-    mockClient.setRequestHandler(
-      dastSiteProfileUpdateMutation,
-      requestHandlers.dastSiteProfileUpdate,
-    );
-
-    return mockClient;
-  };
-
-  const respondWith = (handlers) => {
-    apolloProvider.defaultClient = mockClientFactory(handlers);
-  };
-
-  const createComponent = (options, handlers) => {
-    apolloProvider = new VueApollo({
-      defaultClient: mockClientFactory(handlers),
-    });
-
+  const createComponentFactory = (mountFn = mountExtended) => (options) => {
     const mountOpts = merge(
       {},
       {
@@ -134,19 +78,15 @@ describe('DastSiteProfileForm', () => {
         provide: { projectFullPath },
       },
       options,
-      {
-        localVue,
-        apolloProvider,
-      },
     );
 
-    wrapper = extendedWrapper(mount(DastSiteProfileForm, mountOpts));
+    wrapper = mountFn(DastSiteProfileForm, mountOpts);
   };
+  const createShallowComponent = createComponentFactory(shallowMountExtended);
+  const createComponent = createComponentFactory();
 
   afterEach(() => {
     wrapper.destroy();
-    wrapper = null;
-    apolloProvider = null;
   });
 
   it('renders properly', () => {
@@ -155,14 +95,14 @@ describe('DastSiteProfileForm', () => {
     expect(findForm().text()).toContain('New site profile');
   });
 
-  it('when showHeader prop is disabled', () => {
-    createComponent({
+  it('when show header is disabled', () => {
+    createShallowComponent({
       propsData: {
         ...defaultProps,
         showHeader: false,
       },
     });
-    expect(findForm().text()).not.toContain('New site profile');
+    expect(findBaseDastProfileForm().props('showHeader')).toBe(false);
   });
 
   describe('target URL input', () => {
@@ -246,10 +186,10 @@ describe('DastSiteProfileForm', () => {
       });
 
       describe.each`
-        title                  | profile           | mutationVars                 | mutationKind
-        ${'New site profile'}  | ${{}}             | ${{}}                        | ${'dastSiteProfileCreate'}
-        ${'Edit site profile'} | ${siteProfileOne} | ${{ id: siteProfileOne.id }} | ${'dastSiteProfileUpdate'}
-      `('$title', ({ profile, mutationVars, mutationKind }) => {
+        title                  | profile           | mutationVars                 | mutation                         | mutationKind
+        ${'New site profile'}  | ${{}}             | ${{}}                        | ${dastSiteProfileCreateMutation} | ${'dastSiteProfileCreate'}
+        ${'Edit site profile'} | ${siteProfileOne} | ${{ id: siteProfileOne.id }} | ${dastSiteProfileUpdateMutation} | ${'dastSiteProfileUpdate'}
+      `('$title', ({ profile, mutationVars, mutation, mutationKind }) => {
         beforeEach(() => {
           createComponent({
             propsData: {
@@ -258,13 +198,14 @@ describe('DastSiteProfileForm', () => {
           });
         });
 
-        it('form submission triggers correct GraphQL mutation', async () => {
+        it('passes correct props to base component', async () => {
           await fillForm();
           await setTargetType('API');
-          await submitForm();
 
-          expect(requestHandlers[mutationKind]).toHaveBeenCalledWith({
-            input: {
+          const baseDastProfileForm = findBaseDastProfileForm();
+          expect(baseDastProfileForm.props('mutation')).toBe(mutation);
+          expect(baseDastProfileForm.props('mutationType')).toBe(mutationKind);
+          expect(baseDastProfileForm.props('mutationVariables')).toEqual({
             profileName,
             targetUrl,
             fullPath: projectFullPath,
@@ -272,7 +213,6 @@ describe('DastSiteProfileForm', () => {
             requestHeaders,
             targetType: 'API',
             ...mutationVars,
-            },
           });
         });
       });
@@ -300,122 +240,18 @@ describe('DastSiteProfileForm', () => {
       expect(findProfileNameInput().element.value).toBe(profile?.name ?? '');
     });
 
-    describe('submission', () => {
-      describe('on success', () => {
-        beforeEach(async () => {
-          await fillAndSubmitForm();
-        });
-
-        it('sets loading state', () => {
-          expect(findSubmitButton().props('loading')).toBe(true);
-        });
-
-        it('triggers GraphQL mutation', () => {
-          expect(requestHandlers[mutationKind]).toHaveBeenCalledWith({
-            input: {
-              profileName,
-              targetUrl,
-              requestHeaders,
-              fullPath: projectFullPath,
-              auth: siteProfileOne.auth,
-              excludedUrls: siteProfileOne.excludedUrls,
-              targetType: siteProfileOne.targetType,
-              ...mutationVars,
-            },
-          });
-        });
-
-        it('emits success event with correct params', () => {
+    it('passes props vars to base component', () => {
       const baseDastProfileForm = findBaseDastProfileForm();
-          expect(baseDastProfileForm.emitted('success')).toBeTruthy();
-          expect(baseDastProfileForm.emitted('success')).toHaveLength(1);
-          expect(baseDastProfileForm.emitted('success')[0]).toStrictEqual([{ id: '3083' }]);
-        });
-
-        it('does not show an alert', () => {
-          expect(findAlert().exists()).toBe(false);
-        });
-      });
-
-      describe('on top-level error', () => {
-        beforeEach(async () => {
-          respondWith({
-            [mutationKind]: jest.fn().mockRejectedValue(new Error('GraphQL Network Error')),
-          });
-
-          await fillAndSubmitForm();
-          await waitForPromises();
-        });
-
-        it('resets loading state', () => {
-          expect(findSubmitButton().props('loading')).toBe(false);
-        });
-
-        it('shows an error alert', async () => {
-          await wrapper.vm.$nextTick();
-
-          expect(findAlert().exists()).toBe(true);
-        });
-      });
-
-      describe('on errors as data', () => {
-        const errors = ['error#1', 'error#2', 'error#3'];
-
-        beforeEach(async () => {
-          respondWith({
-            [mutationKind]: jest.fn().mockResolvedValue(responses[mutationKind](errors)),
-          });
-
-          await fillAndSubmitForm();
-          await waitForPromises();
-        });
-
-        it('resets loading state', () => {
-          expect(findSubmitButton().props('loading')).toBe(false);
-        });
-
-        it('shows an alert with the returned errors', () => {
-          const alert = findAlert();
-
-          expect(alert.exists()).toBe(true);
-          errors.forEach((error) => {
-            expect(alert.text()).toContain(error);
-          });
-        });
-      });
-    });
-
-    describe('cancellation', () => {
-      describe('form unchanged', () => {
-        it('emits cancel event', () => {
-          findCancelButton().vm.$emit('click');
-          expect(findBaseDastProfileForm().emitted('cancel')).toBeTruthy();
-        });
-      });
-
-      describe('form changed', () => {
-        beforeEach(() => {
-          findTargetUrlInput().setValue(targetUrl);
-          findProfileNameInput().setValue(profileName);
-        });
-
-        it('asks the user to confirm the action', () => {
-          jest.spyOn(findCancelModal().vm, 'show').mockReturnValue();
-          findCancelButton().trigger('click');
-          expect(findCancelModal().vm.show).toHaveBeenCalled();
-        });
-
-        it('emits cancel event', () => {
-          findCancelModal().vm.$emit('ok');
-          expect(findBaseDastProfileForm().emitted('cancel')).toBeTruthy();
-        });
-      });
+      expect(baseDastProfileForm.props('mutationType')).toBe(mutationKind);
+      expect(baseDastProfileForm.props('mutationVariables')).toEqual(
+        expect.objectContaining(mutationVars),
+      );
     });
   });
 
   describe('when profile does not come from a policy', () => {
     beforeEach(() => {
-      createComponent({
+      createShallowComponent({
         propsData: {
           profile: siteProfileOne,
         },
@@ -425,31 +261,19 @@ describe('DastSiteProfileForm', () => {
     it('should enable all form groups', () => {
       expect(findParentFormGroup().attributes('disabled')).toBe(undefined);
     });
-
-    it('should show the policy profile alert', () => {
-      expect(findPolicyAlert().exists()).toBe(false);
-    });
   });
 
   describe('when profile does comes from a policy', () => {
     beforeEach(() => {
-      createComponent({
+      createShallowComponent({
         propsData: {
           profile: policySiteProfile,
         },
       });
     });
 
-    it('should show the policy profile alert', () => {
-      expect(findPolicyAlert().exists()).toBe(true);
-    });
-
     it('should disable all form groups', () => {
-      expect(findParentFormGroup().attributes('disabled')).toBe('disabled');
-    });
-
-    it('should disable the save button', () => {
-      expect(findSubmitButton().props('disabled')).toBe(true);
+      expect(findParentFormGroup().attributes('disabled')).toBe('true');
     });
   });
 });