Replace usage of find/findAll in ee/spec/frontend/security_configuration

* migrate to proper use of findComponent/findAllComponents

ee/spec/frontend/security_configuration/api_fuzzing/components/app_spec.js

@@ -21,8 +21,8 @@ describe('EE - ApiFuzzingConfigurationApp', () => {
   const createMockApolloProvider = (handler) =>
     createMockApollo([[apiFuzzingCiConfigurationQuery, handler]]);
 
-  const findLoadingSpinner = () => wrapper.find(GlLoadingIcon);
-  const findConfigurationForm = () => wrapper.find(ConfigurationForm);
+  const findLoadingSpinner = () => wrapper.findComponent(GlLoadingIcon);
+  const findConfigurationForm = () => wrapper.findComponent(ConfigurationForm);
 
   const createWrapper = (options) => {
     wrapper = shallowMount(
@@ -80,7 +80,7 @@ describe('EE - ApiFuzzingConfigurationApp', () => {
     });
 
     it('includes a link to API fuzzing documentation ', () => {
-      const link = wrapper.find(GlLink);
+      const link = wrapper.findComponent(GlLink);
       expect(link.exists()).toBe(true);
       expect(link.attributes('href')).toBe('/api_fuzzing/documentation/path');
     });

ee/spec/frontend/security_configuration/api_fuzzing/components/configuration_form_spec.js

@@ -25,17 +25,17 @@ describe('EE - ApiFuzzingConfigurationForm', () => {
 
   const findEnableAuthenticationCheckbox = () =>
     wrapper.findByTestId('api-fuzzing-enable-authentication-checkbox');
-  const findTargetUrlInput = () => wrapper.findAll(FormInput).at(0);
-  const findScanModeInput = () => wrapper.findAll(DropdownInput).at(0);
-  const findSpecificationFileInput = () => wrapper.findAll(FormInput).at(1);
+  const findTargetUrlInput = () => wrapper.findAllComponents(FormInput).at(0);
+  const findScanModeInput = () => wrapper.findAllComponents(DropdownInput).at(0);
+  const findSpecificationFileInput = () => wrapper.findAllComponents(FormInput).at(1);
   const findAuthenticationNotice = () => wrapper.findByTestId('api-fuzzing-authentication-notice');
-  const findAuthenticationFields = () => wrapper.find(DynamicFields);
-  const findScanProfileDropdownInput = () => wrapper.findAll(DropdownInput).at(1);
+  const findAuthenticationFields = () => wrapper.findComponent(DynamicFields);
+  const findScanProfileDropdownInput = () => wrapper.findAllComponents(DropdownInput).at(1);
   const findScanProfileYamlViewer = () =>
     wrapper.findByTestId('api-fuzzing-scan-profile-yaml-viewer');
   const findSubmitButton = () => wrapper.findByTestId('api-fuzzing-configuration-submit-button');
   const findCancelButton = () => wrapper.findByTestId('api-fuzzing-configuration-cancel-button');
-  const findConfigurationSnippetModal = () => wrapper.find(ConfigurationSnippetModal);
+  const findConfigurationSnippetModal = () => wrapper.findComponent(ConfigurationSnippetModal);
 
   const setFormData = async () => {
     findTargetUrlInput().vm.$emit('input', 'https://gitlab.com');
@@ -104,7 +104,7 @@ describe('EE - ApiFuzzingConfigurationForm', () => {
     });
 
     it('by default, the specification file input is hidden', () => {
-      expect(wrapper.findAll(FormInput)).toHaveLength(1);
+      expect(wrapper.findAllComponents(FormInput)).toHaveLength(1);
     });
 
     describe.each(Object.keys(SCAN_MODES))('when %s scan mode is selected', (scanMode) => {

ee/spec/frontend/security_configuration/components/configuration_snippet_modal_spec.js

@@ -30,7 +30,7 @@ const redirectParam = 'foo';
 describe('EE - SecurityConfigurationSnippetModal', () => {
   let wrapper;
 
-  const findModal = () => wrapper.find(GlModal);
+  const findModal = () => wrapper.findComponent(GlModal);
   const helpText = () => wrapper.findByTestId('configuration-modal-help-text');
   const findEditor = () => wrapper.findComponent(SourceEditor);
 

ee/spec/frontend/security_configuration/components/dropdown_input_spec.js

@@ -39,8 +39,8 @@ describe('DropdownInput component', () => {
   const findToggle = () => wrapper.find('button');
   const findLabel = () => wrapper.find('label');
   const findDescription = () => wrapper.findByTestId('dropdown-input-description');
-  const findInputComponent = () => wrapper.find(GlDropdown);
-  const findRestoreDefaultLink = () => wrapper.find(GlLink);
+  const findInputComponent = () => wrapper.findComponent(GlDropdown);
+  const findRestoreDefaultLink = () => wrapper.findComponent(GlLink);
   const findSectionHeader = () => wrapper.findByTestId('dropdown-input-section-header');
 
   afterEach(() => {

ee/spec/frontend/security_configuration/components/dynamic_fields_spec.js

@@ -13,7 +13,7 @@ describe('DynamicFields component', () => {
     });
   };
 
-  const findFields = () => wrapper.findAll({ ref: 'fields' });
+  const findFields = () => wrapper.findAllComponents({ ref: 'fields' });
 
   afterEach(() => {
     wrapper.destroy();

ee/spec/frontend/security_configuration/components/form_input_spec.js

@@ -25,8 +25,8 @@ describe('FormInput component', () => {
 
   const findInput = () => wrapper.find('input[type="text"]');
   const findLabel = () => wrapper.find('label');
-  const findInputComponent = () => wrapper.find(GlFormInput);
-  const findRestoreDefaultLink = () => wrapper.find(GlLink);
+  const findInputComponent = () => wrapper.findComponent(GlFormInput);
+  const findRestoreDefaultLink = () => wrapper.findComponent(GlLink);
 
   afterEach(() => {
     wrapper.destroy();

ee/spec/frontend/security_configuration/corpus_management/components/columns/actions_spec.js

@@ -26,7 +26,7 @@ describe('Action buttons', () => {
   describe('corpus management', () => {
     it('renders the action buttons', () => {
       createComponent();
-      expect(wrapper.findAll(GlButton)).toHaveLength(2);
+      expect(wrapper.findAllComponents(GlButton)).toHaveLength(2);
     });
 
     describe('delete confirmation modal', () => {

ee/spec/frontend/security_configuration/corpus_management/components/corpus_upload_form_spec.js

@@ -10,7 +10,7 @@ describe('Corpus upload modal', () => {
   const findUploadAttachment = () => wrapper.find('[data-testid="upload-attachment-button"]');
   const findUploadCorpus = () => wrapper.find('[data-testid="upload-corpus"]');
   const findUploadStatus = () => wrapper.find('[data-testid="upload-status"]');
-  const findFileInput = () => wrapper.find({ ref: 'fileUpload' });
+  const findFileInput = () => wrapper.findComponent({ ref: 'fileUpload' });
   const findCancelButton = () => wrapper.find('[data-testid="cancel-upload"]');
 
   const createComponent = (propsData, options = {}) => {

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

@@ -59,7 +59,7 @@ describe('EE - DastProfilesList', () => {
   const getErrorDetails = () => withinComponent().queryByRole('list', { name: /error details/i });
   const getDeleteButtonWithin = (element) =>
     createWrapper(within(element).queryByTestId('dast-profile-delete-button'));
-  const getModal = () => wrapper.find(GlModal);
+  const getModal = () => wrapper.findComponent(GlModal);
   const getDeleteTooltip = () => wrapper.find('[data-testid="dast-profile-delete-tooltip"');
 
   afterEach(() => {

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

@@ -63,10 +63,10 @@ describe('EE - DastProfiles', () => {
 
   const withinComponent = () => within(wrapper.element);
   const getProfilesComponent = (profileType) => wrapper.find(`[data-testid="${profileType}List"]`);
-  const getDropdownComponent = () => wrapper.find(GlDropdown);
+  const getDropdownComponent = () => wrapper.findComponent(GlDropdown);
   const getSiteProfilesDropdownItem = (text) =>
     within(getDropdownComponent().element).queryByText(text);
-  const getTabsComponent = () => wrapper.find(GlTabs);
+  const getTabsComponent = () => wrapper.findComponent(GlTabs);
   const getTab = ({ tabName, selected }) =>
     withinComponent().getByRole('tab', {
       name: tabName,

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

@@ -26,7 +26,7 @@ describe('EE - DastSavedScansList', () => {
     createWrapper({ branch, editPath });
 
     expect(wrapper.text()).toContain(branch.name);
-    expect(wrapper.find(GlIcon).props('name')).toBe('branch');
+    expect(wrapper.findComponent(GlIcon).props('name')).toBe('branch');
   });
 
   describe('branch does not exist', () => {
@@ -37,11 +37,11 @@ describe('EE - DastSavedScansList', () => {
 
     it('renders a warning message', () => {
       expect(wrapper.text()).toContain('Branch missing');
-      expect(wrapper.find(GlIcon).props('name')).toBe('warning');
+      expect(wrapper.findComponent(GlIcon).props('name')).toBe('warning');
     });
 
     it('renders the edit link', () => {
-      const link = wrapper.find(GlLink);
+      const link = wrapper.findComponent(GlLink);
       expect(link.text()).toBe('Select branch');
       expect(link.attributes('href')).toBe(scanWithInexistingBranch.editPath);
     });

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

@@ -6,7 +6,7 @@ import { SCAN_TYPE } from 'ee/security_configuration/dast_profiles/dast_scanner_
 describe('EE - DastScanTypeBadge', () => {
   let wrapper;
 
-  const findBadge = () => wrapper.find(GlBadge);
+  const findBadge = () => wrapper.findComponent(GlBadge);
 
   const wrapperFactory = (mountFn = shallowMount) => (options = {}) => {
     wrapper = mountFn(DastScanTypeBadge, options);

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

@@ -39,7 +39,7 @@ describe('DastScannerProfileForm', () => {
 
   const findBaseDastProfileForm = () => wrapper.findComponent(BaseDastProfileForm);
   const findParentFormGroup = () => wrapper.findByTestId('dast-scanner-parent-group');
-  const findForm = () => wrapper.find(GlForm);
+  const findForm = () => wrapper.findComponent(GlForm);
   const findProfileNameInput = () => wrapper.findByTestId('profile-name-input');
   const findSpiderTimeoutInput = () => wrapper.findByTestId('spider-timeout-input');
   const findTargetTimeoutInput = () => wrapper.findByTestId('target-timeout-input');

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

@@ -6,7 +6,7 @@ import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 describe('Tooltip Icon', () => {
   let wrapper;
 
-  const findIcon = () => wrapper.find(GlIcon);
+  const findIcon = () => wrapper.findComponent(GlIcon);
   const title = 'Hello world';
 
   const createComponent = (props = {}, mountFn = shallowMount) => {

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

@@ -28,7 +28,7 @@ describe('DastSiteAuthSection', () => {
   const findParentFormGroup = () => wrapper.findByTestId('dast-site-auth-parent-group');
   const findByNameAttribute = (name) => wrapper.find(`[name="${name}"]`);
   const findAuthForm = () => wrapper.findByTestId('auth-form');
-  const findAuthCheckbox = () => wrapper.find(GlFormCheckbox);
+  const findAuthCheckbox = () => wrapper.findComponent(GlFormCheckbox);
 
   const setAuthentication = ({ enabled }) => {
     findAuthCheckbox().vm.$emit('input', enabled);

ee/spec/frontend/security_configuration/dast_profiles/dast_site_validation/components/dast_site_validation_modal_spec.js

@@ -72,7 +72,7 @@ describe('DastSiteValidationModal', () => {
   const createComponent = componentFactory();
   const createFullComponent = componentFactory(mount);
 
-  const withinComponent = () => within(wrapper.find(GlModal).element);
+  const withinComponent = () => within(wrapper.findComponent(GlModal).element);
   const findByTestId = (id) => wrapper.find(`[data-testid="${id}"`);
   const findDownloadButton = () => findByTestId('download-dast-text-file-validation-button');
   const findValidationPathPrefix = () => findByTestId('dast-site-validation-path-prefix');
@@ -119,9 +119,9 @@ describe('DastSiteValidationModal', () => {
       });
 
       it('renders a skeleton loader, no alert and no form group while token is being created', () => {
-        expect(wrapper.find(GlSkeletonLoader).exists()).toBe(true);
-        expect(wrapper.find(GlAlert).exists()).toBe(false);
-        expect(wrapper.find(GlFormGroup).exists()).toBe(false);
+        expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(true);
+        expect(wrapper.findComponent(GlAlert).exists()).toBe(false);
+        expect(wrapper.findComponent(GlFormGroup).exists()).toBe(false);
       });
     });
 
@@ -136,9 +136,9 @@ describe('DastSiteValidationModal', () => {
       });
 
       it('renders an alert and no skeleton loader or form group if token could not be created', () => {
-        expect(wrapper.find(GlAlert).exists()).toBe(true);
-        expect(wrapper.find(GlSkeletonLoader).exists()).toBe(false);
-        expect(wrapper.find(GlFormGroup).exists()).toBe(false);
+        expect(wrapper.findComponent(GlAlert).exists()).toBe(true);
+        expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(false);
+        expect(wrapper.findComponent(GlFormGroup).exists()).toBe(false);
       });
     });
 
@@ -149,9 +149,9 @@ describe('DastSiteValidationModal', () => {
       });
 
       it('renders form groups, no alert and no skeleton loader', () => {
-        expect(wrapper.find(GlFormGroup).exists()).toBe(true);
-        expect(wrapper.find(GlAlert).exists()).toBe(false);
-        expect(wrapper.find(GlSkeletonLoader).exists()).toBe(false);
+        expect(wrapper.findComponent(GlFormGroup).exists()).toBe(true);
+        expect(wrapper.findComponent(GlAlert).exists()).toBe(false);
+        expect(wrapper.findComponent(GlSkeletonLoader).exists()).toBe(false);
       });
 
       it('renders a download button containing the token', () => {
@@ -275,7 +275,7 @@ describe('DastSiteValidationModal', () => {
       });
 
       it('shows a button that copies the http-header to the clipboard', () => {
-        const clipboardButton = wrapper.find(ModalCopyButton);
+        const clipboardButton = wrapper.findComponent(ModalCopyButton);
 
         expect(clipboardButton.exists()).toBe(true);
         expect(clipboardButton.props()).toMatchObject({
@@ -310,7 +310,7 @@ describe('DastSiteValidationModal', () => {
       });
 
       it('shows a button that copies the meta tag to the clipboard', () => {
-        const clipboardButton = wrapper.find(ModalCopyButton);
+        const clipboardButton = wrapper.findComponent(ModalCopyButton);
 
         expect(clipboardButton.exists()).toBe(true);
         expect(clipboardButton.props()).toMatchObject({

ee/spec/frontend/security_configuration/dast_profiles/dast_site_validation/components/dast_site_validation_revoke_modal_spec.js

@@ -60,7 +60,7 @@ describe('DastSiteValidationRevokeModal', () => {
   const createComponent = componentFactory();
   const createFullComponent = componentFactory(mount);
 
-  const withinComponent = () => within(wrapper.find(GlModal).element);
+  const withinComponent = () => within(wrapper.findComponent(GlModal).element);
   const findByTestId = (id) => wrapper.find(`[data-testid="${id}"`);
   const findRevokeButton = () => findByTestId('revoke-validation-button');
 
@@ -93,7 +93,7 @@ describe('DastSiteValidationRevokeModal', () => {
     });
 
     it('renders no alert', () => {
-      expect(wrapper.find(GlAlert).exists()).toBe(false);
+      expect(wrapper.findComponent(GlAlert).exists()).toBe(false);
     });
 
     it('renders warning message', () => {
@@ -132,7 +132,7 @@ describe('DastSiteValidationRevokeModal', () => {
         findRevokeButton().trigger('click');
         await waitForPromises();
 
-        expect(wrapper.find(GlAlert).exists()).toBe(true);
+        expect(wrapper.findComponent(GlAlert).exists()).toBe(true);
         expect(
           withinComponent().getByText('Could not revoke validation. Please try again.'),
         ).not.toBe(null);

ee/spec/frontend/security_configuration/sast/components/analyzer_configuration_spec.js

@@ -16,7 +16,7 @@ describe('AnalyzerConfiguration component', () => {
   };
 
   const findInputElement = () => wrapper.find('input[type="checkbox"]');
-  const findDynamicFields = () => wrapper.find(DynamicFields);
+  const findDynamicFields = () => wrapper.findComponent(DynamicFields);
 
   beforeEach(() => {
     [entity] = makeAnalyzerEntities(1);

ee/spec/frontend/security_configuration/sast/components/app_spec.js

@@ -46,7 +46,7 @@ describe('SAST Configuration App', () => {
 
   const findHeader = () => wrapper.find('header');
   const findSubHeading = () => findHeader().find('p');
-  const findLink = (container = wrapper) => container.find(GlLink);
+  const findLink = (container = wrapper) => container.findComponent(GlLink);
   const findConfigurationForm = () => wrapper.findComponent(ConfigurationForm);
   const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
   const findErrorAlert = () => wrapper.findByTestId('error-alert');
@@ -69,7 +69,7 @@ describe('SAST Configuration App', () => {
     });
 
     it('links to the feedback issue', () => {
-      const link = findFeedbackAlert().find(GlLink);
+      const link = findFeedbackAlert().findComponent(GlLink);
       expect(link.attributes()).toMatchObject({
         href: SASTConfigurationApp.feedbackIssue,
         target: '_blank',

ee/spec/frontend/security_configuration/sast/components/configuration_form_spec.js

@@ -65,11 +65,11 @@ describe('ConfigurationForm component', () => {
   };
 
   const findForm = () => wrapper.find('form');
-  const findSubmitButton = () => wrapper.find({ ref: 'submitButton' });
+  const findSubmitButton = () => wrapper.findComponent({ ref: 'submitButton' });
   const findErrorAlert = () => wrapper.find('[data-testid="analyzers-error-alert"]');
-  const findCancelButton = () => wrapper.find({ ref: 'cancelButton' });
-  const findDynamicFieldsComponents = () => wrapper.findAll(DynamicFields);
-  const findAnalyzerConfigurations = () => wrapper.findAll(AnalyzerConfiguration);
+  const findCancelButton = () => wrapper.findComponent({ ref: 'cancelButton' });
+  const findDynamicFieldsComponents = () => wrapper.findAllComponents(DynamicFields);
+  const findAnalyzerConfigurations = () => wrapper.findAllComponents(AnalyzerConfiguration);
   const findAnalyzersSection = () => wrapper.find('[data-testid="analyzers-section"]');
   const findAnalyzersSectionTip = () => wrapper.find('[data-testid="analyzers-section-tip"]');
 
@@ -177,7 +177,7 @@ describe('ConfigurationForm component', () => {
     });
 
     it('has a link to the documentation', () => {
-      const link = findAnalyzersSection().find(GlLink);
+      const link = findAnalyzersSection().findComponent(GlLink);
       expect(link.exists()).toBe(true);
       expect(link.attributes('href')).toBe(sastAnalyzersDocumentationPath);
     });