Merge branch '326200-refactor-on-demand-scans-specs' into 'master'

Rename subject to wrapper

See merge request gitlab-org/gitlab!58817

ee/spec/frontend/on_demand_scans/components/on_demand_scans_form_spec.js

@@ -60,7 +60,7 @@ const LOCAL_STORAGE_KEY = 'group/project/on-demand-scans-new-form';
 
 describe('OnDemandScansForm', () => {
   let localVue;
-  let subject;
+  let wrapper;
   let requestHandlers;
 
   const GlFormInputStub = stubComponent(GlFormInput, {
@@ -70,13 +70,13 @@ describe('OnDemandScansForm', () => {
     template: '<input />',
   });
 
-  const findForm = () => subject.find(GlForm);
-  const findByTestId = (testId) => subject.find(`[data-testid="${testId}"]`);
+  const findForm = () => wrapper.find(GlForm);
+  const findByTestId = (testId) => wrapper.find(`[data-testid="${testId}"]`);
   const findNameInput = () => findByTestId('dast-scan-name-input');
   const findBranchInput = () => findByTestId('dast-scan-branch-input');
   const findDescriptionInput = () => findByTestId('dast-scan-description-input');
-  const findScannerProfilesSelector = () => subject.find(ScannerProfileSelector);
-  const findSiteProfilesSelector = () => subject.find(SiteProfileSelector);
+  const findScannerProfilesSelector = () => wrapper.find(ScannerProfileSelector);
+  const findSiteProfilesSelector = () => wrapper.find(SiteProfileSelector);
   const findAlert = () => findByTestId('on-demand-scan-error');
   const findProfilesConflictAlert = () => findByTestId('on-demand-scans-profiles-conflict-alert');
   const findSubmitButton = () => findByTestId('on-demand-scan-submit-button');
@@ -89,10 +89,10 @@ describe('OnDemandScansForm', () => {
     findBranchInput().vm.$emit('input', 'some-other-branch');
     findScannerProfilesSelector().vm.$emit('input', passiveScannerProfile.id);
     findSiteProfilesSelector().vm.$emit('input', nonValidatedSiteProfile.id);
-    return subject.vm.$nextTick();
+    return wrapper.vm.$nextTick();
   };
   const setupSuccess = ({ edit = false } = {}) => {
-    subject.vm.$apollo.mutate.mockResolvedValue({
+    wrapper.vm.$apollo.mutate.mockResolvedValue({
       data: {
         [edit ? 'dastProfileUpdate' : 'dastProfileCreate']: {
           dastProfile: { editPath },
@@ -104,8 +104,8 @@ describe('OnDemandScansForm', () => {
     return setValidFormData();
   };
   const selectProfile = (component) => async (profile) => {
-    subject.find(component).vm.$emit('input', profile.id);
-    await subject.vm.$nextTick();
+    wrapper.find(component).vm.$emit('input', profile.id);
+    await wrapper.vm.$nextTick();
   };
   const selectScannerProfile = selectProfile(ScannerProfileSelector);
   const selectSiteProfile = selectProfile(SiteProfileSelector);
@@ -127,7 +127,7 @@ describe('OnDemandScansForm', () => {
     ]);
   };
 
-  const subjectMounterFactory = (mountFn = shallowMount) => (options = {}, withHandlers) => {
+  const createComponentFactory = (mountFn = shallowMount) => (options = {}, withHandlers) => {
     localVue = createLocalVue();
     let defaultMocks = {
       $apollo: {
@@ -144,7 +144,7 @@ describe('OnDemandScansForm', () => {
       apolloProvider = createMockApolloProvider(withHandlers);
       defaultMocks = {};
     }
-    subject = mountFn(
+    wrapper = mountFn(
       OnDemandScansForm,
       merge(
         {},
@@ -180,8 +180,8 @@ describe('OnDemandScansForm', () => {
       ),
     );
   };
-  const mountSubject = subjectMounterFactory(mount);
-  const mountShallowSubject = subjectMounterFactory();
+  const createComponent = createComponentFactory(mount);
+  const createShallowComponent = createComponentFactory();
 
   const itClearsLocalStorage = () => {
     it('clears local storage', () => {
@@ -190,20 +190,20 @@ describe('OnDemandScansForm', () => {
   };
 
   afterEach(() => {
-    subject.destroy();
-    subject = null;
+    wrapper.destroy();
+    wrapper = null;
     localStorage.clear();
   });
 
   describe('when creating a new scan', () => {
     it('renders properly', () => {
-      mountSubject();
+      createComponent();
 
-      expect(subject.text()).toContain('New on-demand DAST scan');
+      expect(wrapper.text()).toContain('New on-demand DAST scan');
     });
 
     it('populates the branch input with the default branch', () => {
-      mountSubject();
+      createComponent();
 
       expect(findBranchInput().props('value')).toBe(defaultBranch);
     });
@@ -217,7 +217,7 @@ describe('OnDemandScansForm', () => {
     `(
       'sets loading state to $isLoading if scanner profiles loading is $scannerProfilesLoading and site profiles loading is $siteProfilesLoading',
       ({ scannerProfilesLoading, siteProfilesLoading, isLoading }) => {
-        mountShallowSubject({
+        createShallowComponent({
           mocks: {
             $apollo: {
               queries: {
@@ -228,14 +228,14 @@ describe('OnDemandScansForm', () => {
           },
         });
 
-        expect(subject.find(GlSkeletonLoader).exists()).toBe(isLoading);
+        expect(wrapper.find(GlSkeletonLoader).exists()).toBe(isLoading);
       },
     );
   });
 
   describe('when editing an existing scan', () => {
     beforeEach(() => {
-      mountShallowSubject({
+      createShallowComponent({
         propsData: {
           dastScan,
         },
@@ -243,7 +243,7 @@ describe('OnDemandScansForm', () => {
     });
 
     it('sets the title properly', () => {
-      expect(subject.text()).toContain('Edit on-demand DAST scan');
+      expect(wrapper.text()).toContain('Edit on-demand DAST scan');
     });
 
     it('populates the fields with passed values', () => {
@@ -257,7 +257,7 @@ describe('OnDemandScansForm', () => {
 
   describe('local storage', () => {
     it('get updated when form is modified', async () => {
-      mountShallowSubject();
+      createShallowComponent();
 
       await setValidFormData();
 
@@ -285,8 +285,8 @@ describe('OnDemandScansForm', () => {
         }),
       );
 
-      mountShallowSubject();
-      await subject.vm.$nextTick();
+      createShallowComponent();
+      await wrapper.vm.$nextTick();
 
       expect(findNameInput().attributes('value')).toBe(dastScan.name);
       expect(findDescriptionInput().attributes('value')).toBe(dastScan.description);
@@ -299,7 +299,7 @@ describe('OnDemandScansForm', () => {
     let submitButton;
 
     beforeEach(() => {
-      mountShallowSubject();
+      createShallowComponent();
       submitButton = findSubmitButton();
     });
 
@@ -324,7 +324,7 @@ describe('OnDemandScansForm', () => {
       ({ actionFunction, submitButtonLoading, saveButtonLoading, runAfter, redirectPath }) => {
         describe('with valid form data', () => {
           beforeEach(async () => {
-            mountShallowSubject();
+            createShallowComponent();
             await setupSuccess();
             actionFunction();
           });
@@ -344,7 +344,7 @@ describe('OnDemandScansForm', () => {
           });
 
           it(`triggers dastProfileCreateMutation mutation with runAfterCreate set to ${runAfter}`, () => {
-            expect(subject.vm.$apollo.mutate).toHaveBeenCalledWith({
+            expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
               mutation: dastProfileCreateMutation,
               variables: {
                 input: {
@@ -372,7 +372,7 @@ describe('OnDemandScansForm', () => {
 
         describe('when editing an existing scan', () => {
           beforeEach(async () => {
-            mountShallowSubject({
+            createShallowComponent({
               propsData: {
                 dastScan,
               },
@@ -382,7 +382,7 @@ describe('OnDemandScansForm', () => {
           });
 
           it(`triggers dastProfileUpdateMutation mutation with runAfterUpdate set to ${runAfter}`, async () => {
-            expect(subject.vm.$apollo.mutate).toHaveBeenCalledWith({
+            expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
               mutation: dastProfileUpdateMutation,
               variables: {
                 input: {
@@ -401,26 +401,26 @@ describe('OnDemandScansForm', () => {
         });
 
         it('does not run any mutation if name is empty', () => {
-          mountShallowSubject();
+          createShallowComponent();
           setValidFormData();
           findNameInput().vm.$emit('input', '');
           actionFunction();
 
-          expect(subject.vm.$apollo.mutate).not.toHaveBeenCalled();
+          expect(wrapper.vm.$apollo.mutate).not.toHaveBeenCalled();
         });
       },
     );
 
     describe('on top-level error', () => {
       beforeEach(async () => {
-        mountShallowSubject();
-        subject.vm.$apollo.mutate.mockRejectedValue();
+        createShallowComponent();
+        wrapper.vm.$apollo.mutate.mockRejectedValue();
         await setValidFormData();
         submitForm();
       });
 
       it('resets loading state', () => {
-        expect(subject.vm.loading).toBe(false);
+        expect(wrapper.vm.loading).toBe(false);
       });
 
       it('shows an alert', () => {
@@ -434,8 +434,8 @@ describe('OnDemandScansForm', () => {
       const errors = ['error#1', 'error#2', 'error#3'];
 
       beforeEach(async () => {
-        mountShallowSubject();
-        subject.vm.$apollo.mutate.mockResolvedValue({
+        createShallowComponent();
+        wrapper.vm.$apollo.mutate.mockResolvedValue({
           data: { dastProfileCreate: { pipelineUrl: null, errors } },
         });
         await setValidFormData();
@@ -443,7 +443,7 @@ describe('OnDemandScansForm', () => {
       });
 
       it('resets loading state', () => {
-        expect(subject.vm.loading).toBe(false);
+        expect(wrapper.vm.loading).toBe(false);
       });
 
       it('shows an alert with the returned errors', () => {
@@ -459,7 +459,7 @@ describe('OnDemandScansForm', () => {
 
   describe('cancellation', () => {
     beforeEach(() => {
-      mountShallowSubject();
+      createShallowComponent();
       findCancelButton().vm.$emit('click');
     });
 
@@ -480,9 +480,9 @@ describe('OnDemandScansForm', () => {
     'profiles conflict prevention',
     ({ description, selectedScannerProfile, selectedSiteProfile, hasConflict }) => {
       const setFormData = () => {
-        subject.find(ScannerProfileSelector).vm.$emit('input', selectedScannerProfile.id);
-        subject.find(SiteProfileSelector).vm.$emit('input', selectedSiteProfile.id);
-        return subject.vm.$nextTick();
+        wrapper.find(ScannerProfileSelector).vm.$emit('input', selectedScannerProfile.id);
+        wrapper.find(SiteProfileSelector).vm.$emit('input', selectedSiteProfile.id);
+        return wrapper.vm.$nextTick();
       };
 
       it(
@@ -490,7 +490,7 @@ describe('OnDemandScansForm', () => {
           ? `warns about conflicting profiles when user selects ${description}`
           : `does not report any conflict when user selects ${description}`,
         async () => {
-          mountShallowSubject();
+          createShallowComponent();
           await setFormData();
 
           expect(findProfilesConflictAlert().exists()).toBe(hasConflict);
@@ -508,7 +508,7 @@ describe('OnDemandScansForm', () => {
     const [profile] = profiles;
 
     beforeEach(async () => {
-      mountShallowSubject(
+      createShallowComponent(
         {},
         {
           [query]: jest.fn().mockResolvedValue(responses[query]([profile])),
@@ -519,13 +519,13 @@ describe('OnDemandScansForm', () => {
     });
 
     it('automatically selects the only available profile', () => {
-      expect(subject.find(selector).attributes('value')).toBe(profile.id);
+      expect(wrapper.find(selector).attributes('value')).toBe(profile.id);
     });
   });
 
   describe('scanner profile summary', () => {
     beforeEach(() => {
-      mountSubject({
+      createComponent({
         provide: {
           glFeatures: {
             securityDastSiteProfilesAdditionalFields: true,
@@ -545,7 +545,7 @@ describe('OnDemandScansForm', () => {
     const [authEnabledProfile] = siteProfiles;
 
     beforeEach(() => {
-      mountSubject({
+      createComponent({
         provide: {
           glFeatures: {
             securityDastSiteProfilesAdditionalFields: true,
@@ -556,7 +556,7 @@ describe('OnDemandScansForm', () => {
 
     it('renders all fields correctly', async () => {
       await selectSiteProfile(authEnabledProfile);
-      const summary = subject.find(SiteProfileSelector).text();
+      const summary = wrapper.find(SiteProfileSelector).text();
       const defaultPassword = '••••••••';
       const defaultRequestHeaders = '[Redacted]';
 
@@ -585,28 +585,28 @@ describe('OnDemandScansForm', () => {
       global.jsdom.reconfigure({
         url: setUrlParams({ scanner_profile_id: 1 }, URL_HOST),
       });
-      mountShallowSubject();
+      createShallowComponent();
 
-      expect(subject.find(ScannerProfileSelector).attributes('value')).toBe(scannerProfile.id);
+      expect(wrapper.find(ScannerProfileSelector).attributes('value')).toBe(scannerProfile.id);
     });
 
     it('site profile', () => {
       global.jsdom.reconfigure({
         url: setUrlParams({ site_profile_id: 1 }, URL_HOST),
       });
-      mountShallowSubject();
+      createShallowComponent();
 
-      expect(subject.find(SiteProfileSelector).attributes('value')).toBe(siteProfile.id);
+      expect(wrapper.find(SiteProfileSelector).attributes('value')).toBe(siteProfile.id);
     });
 
     it('both scanner & site profile', () => {
       global.jsdom.reconfigure({
         url: setUrlParams({ site_profile_id: 1, scanner_profile_id: 1 }, URL_HOST),
       });
-      mountShallowSubject();
+      createShallowComponent();
 
-      expect(subject.find(SiteProfileSelector).attributes('value')).toBe(siteProfile.id);
-      expect(subject.find(ScannerProfileSelector).attributes('value')).toBe(scannerProfile.id);
+      expect(wrapper.find(SiteProfileSelector).attributes('value')).toBe(siteProfile.id);
+      expect(wrapper.find(ScannerProfileSelector).attributes('value')).toBe(scannerProfile.id);
     });
 
     it('when local storage data is available', async () => {
@@ -622,8 +622,8 @@ describe('OnDemandScansForm', () => {
         url: setUrlParams({ site_profile_id: 1, scanner_profile_id: 1 }, URL_HOST),
       });
 
-      mountShallowSubject();
-      await subject.vm.$nextTick();
+      createShallowComponent();
+      await wrapper.vm.$nextTick();
 
       expect(findScannerProfilesSelector().attributes('value')).toBe(scannerProfile.id);
       expect(findSiteProfilesSelector().attributes('value')).toBe(siteProfile.id);
@@ -632,7 +632,7 @@ describe('OnDemandScansForm', () => {
 
   describe('when no repository exists', () => {
     beforeEach(() => {
-      mountShallowSubject({
+      createShallowComponent({
         propsData: {
           /**
            * The assumption here is that, if a default branch is not defined, then the project
@@ -644,7 +644,7 @@ describe('OnDemandScansForm', () => {
     });
 
     it('shows an error message', () => {
-      expect(subject.text()).toContain(
+      expect(wrapper.text()).toContain(
         'You must create a repository within your project to run an on-demand scan.',
       );
     });
@@ -658,14 +658,14 @@ describe('OnDemandScansForm', () => {
     `('on $action', ({ actionFunction, runAfter }) => {
       describe('when creating a new scan', () => {
         beforeEach(async () => {
-          mountShallowSubject({
+          createShallowComponent({
             provide: {
               glFeatures: {
                 dastBranchSelection: false,
               },
             },
           });
-          subject.vm.$apollo.mutate.mockResolvedValue({
+          wrapper.vm.$apollo.mutate.mockResolvedValue({
             data: {
               dastProfileCreate: {
                 dastProfile: { editPath },
@@ -677,12 +677,12 @@ describe('OnDemandScansForm', () => {
           findNameInput().vm.$emit('input', 'My daily scan');
           findScannerProfilesSelector().vm.$emit('input', passiveScannerProfile.id);
           findSiteProfilesSelector().vm.$emit('input', nonValidatedSiteProfile.id);
-          await subject.vm.$nextTick();
+          await wrapper.vm.$nextTick();
           actionFunction();
         });
 
         it(`triggers dastProfileCreateMutation mutation without the branch name and runAfterCreate set to ${runAfter}`, async () => {
-          expect(subject.vm.$apollo.mutate).toHaveBeenCalledWith({
+          expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
             mutation: dastProfileCreateMutation,
             variables: {
               input: {
@@ -699,7 +699,7 @@ describe('OnDemandScansForm', () => {
 
       describe('when editing an existing scan', () => {
         beforeEach(async () => {
-          mountShallowSubject({
+          createShallowComponent({
             propsData: {
               dastScan,
             },
@@ -709,7 +709,7 @@ describe('OnDemandScansForm', () => {
               },
             },
           });
-          subject.vm.$apollo.mutate.mockResolvedValue({
+          wrapper.vm.$apollo.mutate.mockResolvedValue({
             data: {
               dastProfileUpdate: {
                 dastProfile: { editPath },
@@ -721,12 +721,12 @@ describe('OnDemandScansForm', () => {
           findNameInput().vm.$emit('input', 'My daily scan');
           findScannerProfilesSelector().vm.$emit('input', passiveScannerProfile.id);
           findSiteProfilesSelector().vm.$emit('input', nonValidatedSiteProfile.id);
-          await subject.vm.$nextTick();
+          await wrapper.vm.$nextTick();
           actionFunction();
         });
 
         it(`triggers dastProfileUpdateMutation mutation without the branch name and runAfterUpdate set to ${runAfter}`, async () => {
-          expect(subject.vm.$apollo.mutate).toHaveBeenCalledWith({
+          expect(wrapper.vm.$apollo.mutate).toHaveBeenCalledWith({
             mutation: dastProfileUpdateMutation,
             variables: {
               input: {