Replace deprecated usage of find/findAll in Vue-related specs

* migrate ee/spec/frontend/vue_shared

ee/spec/frontend/vue_shared/components/accordion/accordion_item_spec.js

@@ -36,10 +36,10 @@ describe('AccordionItem component', () => {
     });
   };
 
-  const loadingIndicator = () => wrapper.find({ ref: 'loadingIndicator' });
-  const expansionTrigger = () => wrapper.find({ ref: 'expansionTrigger' });
-  const contentContainer = () => wrapper.find({ ref: 'contentContainer' });
-  const content = () => wrapper.find({ ref: 'content' });
+  const loadingIndicator = () => wrapper.findComponent({ ref: 'loadingIndicator' });
+  const expansionTrigger = () => wrapper.findComponent({ ref: 'expansionTrigger' });
+  const contentContainer = () => wrapper.findComponent({ ref: 'contentContainer' });
+  const content = () => wrapper.findComponent({ ref: 'content' });
   const namespacedCloseOtherAccordionItemsEvent = `${accordionId}.closeOtherAccordionItems`;
 
   afterEach(() => {

ee/spec/frontend/vue_shared/components/filtered_search_bar/tokens/epic_token_spec.js

@@ -146,7 +146,7 @@ describe('EpicToken', () => {
     });
 
     it('renders token item when value is selected', () => {
-      const tokenSegments = wrapper.findAll(GlFilteredSearchTokenSegment);
+      const tokenSegments = wrapper.findAllComponents(GlFilteredSearchTokenSegment);
 
       expect(tokenSegments).toHaveLength(3);
       expect(tokenSegments.at(2).text()).toBe(`${mockEpics[0].title}::&${mockEpics[0].iid}`);

ee/spec/frontend/vue_shared/components/filtered_search_bar/tokens/iteration_token_spec.js

@@ -61,7 +61,7 @@ describe('IterationToken', () => {
     });
 
     it('renders iteration start date and due date', () => {
-      const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
+      const suggestions = wrapper.findAllComponents(GlFilteredSearchSuggestion);
 
       expect(suggestions.at(3).text()).toContain('Nov 5, 2021 - Nov 10, 2021');
     });

ee/spec/frontend/vue_shared/components/security_reports/severity_badge_spec.js

@@ -26,7 +26,7 @@ describe('Severity Badge', () => {
     wrapper = null;
   });
 
-  const findIcon = () => wrapper.find(GlIcon);
+  const findIcon = () => wrapper.findComponent(GlIcon);
   const findTooltip = () => getBinding(findIcon().element, 'tooltip').value;
 
   describe.each(SEVERITY_LEVELS)('given a valid severity "%s"', (severity) => {

ee/spec/frontend/vue_shared/components/sidebar/epics_select/base_spec.js

@@ -201,11 +201,11 @@ describe('EpicsSelect', () => {
       });
 
       it('should render DropdownValueCollapsed component', () => {
-        expect(wrapper.find(DropdownValueCollapsed).exists()).toBe(true);
+        expect(wrapper.findComponent(DropdownValueCollapsed).exists()).toBe(true);
       });
 
       it('should not render DropdownValueCollapsed component when variant is "standalone"', () => {
-        expect(wrapperStandalone.find(DropdownValueCollapsed).exists()).toBe(false);
+        expect(wrapperStandalone.findComponent(DropdownValueCollapsed).exists()).toBe(false);
       });
 
       it('should render a dropdown title component', () => {
@@ -220,11 +220,11 @@ describe('EpicsSelect', () => {
         wrapper.vm.showDropdown = false;
 
         await wrapper.vm.$nextTick();
-        expect(wrapper.find(DropdownValue).exists()).toBe(true);
+        expect(wrapper.findComponent(DropdownValue).exists()).toBe(true);
       });
 
       it('should not render DropdownValue component when variant is "standalone"', () => {
-        expect(wrapperStandalone.find(DropdownValue).exists()).toBe(false);
+        expect(wrapperStandalone.findComponent(DropdownValue).exists()).toBe(false);
       });
 
       it('should render dropdown container element when props `canEdit` & `showDropdown` are true', async () => {

ee/spec/frontend/vue_shared/components/sidebar/epics_select/dropdown_value_collapsed_spec.js

@@ -31,7 +31,7 @@ describe('EpicsSelect', () => {
       });
 
       it('should render Icon component', () => {
-        const iconEl = wrapper.find(GlIcon);
+        const iconEl = wrapper.findComponent(GlIcon);
 
         expect(iconEl.exists()).toBe(true);
         expect(iconEl.attributes('name')).toBe('epic');

ee/spec/frontend/vue_shared/components/sidebar/epics_select/dropdown_value_spec.js

@@ -50,7 +50,7 @@ describe('EpicsSelect', () => {
       });
 
       it('should render epic title link element when `hasEpic` is true', () => {
-        const titleEl = wrapper.find(GlLink);
+        const titleEl = wrapper.findComponent(GlLink);
 
         expect(titleEl.exists()).toBe(true);
         expect(titleEl.attributes('href')).toBe(mockEpic1.url);

ee/spec/frontend/vue_shared/discover/card_security_discover_app_spec.js

@@ -49,7 +49,7 @@ describe('Card security discover app', () => {
     });
 
     it('renders component properly', () => {
-      expect(wrapper.find(CardSecurityDiscoverApp).exists()).toBe(true);
+      expect(wrapper.findComponent(CardSecurityDiscoverApp).exists()).toBe(true);
     });
 
     it('renders discover title properly', () => {

ee/spec/frontend/vue_shared/license_compliance/components/add_license_form_spec.js

@@ -17,7 +17,8 @@ const createComponent = (props = {}, mountFn = shallowMount) => {
 describe('AddLicenseForm', () => {
   const findSubmitButton = () => wrapper.find('.js-submit');
   const findCancelButton = () => wrapper.find('.js-cancel');
-  const findRadioInputs = () => wrapper.find(GlFormRadioGroup).findAll(GlFormRadio);
+  const findRadioInputs = () =>
+    wrapper.findComponent(GlFormRadioGroup).findAllComponents(GlFormRadio);
 
   beforeEach(() => {
     createComponent();

ee/spec/frontend/vue_shared/license_compliance/components/delete_confirmation_modal_spec.js

@@ -44,7 +44,7 @@ describe('DeleteConfirmationModal', () => {
     });
   };
 
-  const findModal = () => wrapper.find(GlModal);
+  const findModal = () => wrapper.findComponent(GlModal);
 
   beforeEach(() => {
     createComponent();

ee/spec/frontend/vue_shared/license_compliance/components/license_issue_body_spec.js

@@ -12,7 +12,7 @@ describe('LicenseIssueBody', () => {
 
   const findLicenseIssueBody = () => wrapper.findComponent(LicenseIssueBody);
   const findLicensePackages = () => wrapper.findComponent(LicensePackages);
-  const findGlLink = () => wrapper.find(GlLink);
+  const findGlLink = () => wrapper.findComponent(GlLink);
   const findText = () => wrapper.find('[data-testid="license-copy"]');
 
   const createComponent = (props = {}) => {

ee/spec/frontend/vue_shared/license_compliance/license_management_spec.js

@@ -28,8 +28,8 @@ const PaginatedList = {
 };
 
 const noop = () => {};
-const findIcon = () => wrapper.find(GlIcon);
-const findPopover = () => wrapper.find(GlPopover);
+const findIcon = () => wrapper.findComponent(GlIcon);
+const findPopover = () => wrapper.findComponent(GlPopover);
 
 const createComponent = ({ state, getters, props, actionMocks, isAdmin, options, provide }) => {
   const fakeStore = new Vuex.Store({
@@ -87,7 +87,7 @@ describe('License Management', () => {
     `('$desc', ({ isAdmin }) => {
       it('should render loading icon during initial loading', () => {
         createComponent({ state: { isLoadingManagedLicenses: true }, isAdmin });
-        expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+        expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
       });
 
       it('should render list of managed licenses while updating a license', () => {
@@ -96,7 +96,7 @@ describe('License Management', () => {
           getters: { hasPendingLicenses: () => true },
           isAdmin,
         });
-        expect(wrapper.find(PaginatedList).props('list')).toBe(managedLicenses);
+        expect(wrapper.findComponent(PaginatedList).props('list')).toBe(managedLicenses);
       });
 
       describe('when not loading', () => {
@@ -105,7 +105,7 @@ describe('License Management', () => {
         });
 
         it('should render list of managed licenses', () => {
-          expect(wrapper.find(PaginatedList).props('list')).toBe(managedLicenses);
+          expect(wrapper.findComponent(PaginatedList).props('list')).toBe(managedLicenses);
         });
       });
 
@@ -134,10 +134,10 @@ describe('License Management', () => {
           actionMocks: { setLicenseApproval: setLicenseApprovalMock },
           isAdmin: true,
         });
-        wrapper.find(GlButton).vm.$emit('click');
+        wrapper.findComponent(GlButton).vm.$emit('click');
 
         return wrapper.vm.$nextTick().then(() => {
-          wrapper.find(AddLicenseForm).vm.$emit('addLicense');
+          wrapper.findComponent(AddLicenseForm).vm.$emit('addLicense');
           expect(setLicenseApprovalMock).toHaveBeenCalled();
         });
       });
@@ -148,30 +148,30 @@ describe('License Management', () => {
         });
 
         it('should render the license-approvals section accordingly', () => {
-          expect(wrapper.find(LicenseComplianceApprovals).exists()).toBe(true);
+          expect(wrapper.findComponent(LicenseComplianceApprovals).exists()).toBe(true);
         });
 
         it('should render the form if the form is open and disable the form button', () => {
-          wrapper.find(GlButton).vm.$emit('click');
+          wrapper.findComponent(GlButton).vm.$emit('click');
 
           return wrapper.vm.$nextTick().then(() => {
-            expect(wrapper.find(AddLicenseForm).exists()).toBe(true);
-            expect(wrapper.find(GlButton).attributes('disabled')).toBe('true');
+            expect(wrapper.findComponent(AddLicenseForm).exists()).toBe(true);
+            expect(wrapper.findComponent(GlButton).attributes('disabled')).toBe('true');
           });
         });
 
         it('should not render the form if the form is closed and have active button', () => {
-          expect(wrapper.find(AddLicenseForm).exists()).toBe(false);
-          expect(wrapper.find(GlButton).attributes('disabled')).not.toBe('true');
+          expect(wrapper.findComponent(AddLicenseForm).exists()).toBe(false);
+          expect(wrapper.findComponent(GlButton).attributes('disabled')).not.toBe('true');
         });
 
         it('should render delete confirmation modal', () => {
-          expect(wrapper.find(DeleteConfirmationModal).exists()).toBe(true);
+          expect(wrapper.findComponent(DeleteConfirmationModal).exists()).toBe(true);
         });
 
         it('renders the admin row', () => {
-          expect(wrapper.find(LicenseManagementRow).exists()).toBe(false);
-          expect(wrapper.find(AdminLicenseManagementRow).exists()).toBe(true);
+          expect(wrapper.findComponent(LicenseManagementRow).exists()).toBe(false);
+          expect(wrapper.findComponent(AdminLicenseManagementRow).exists()).toBe(true);
         });
       });
 
@@ -194,8 +194,8 @@ describe('License Management', () => {
           actionMocks: { setLicenseApproval: setLicenseApprovalMock },
           isAdmin: false,
         });
-        expect(wrapper.find(GlButton).exists()).toBe(false);
-        expect(wrapper.find(AddLicenseForm).exists()).toBe(false);
+        expect(wrapper.findComponent(GlButton).exists()).toBe(false);
+        expect(wrapper.findComponent(AddLicenseForm).exists()).toBe(false);
         expect(setLicenseApprovalMock).not.toHaveBeenCalled();
       });
 
@@ -205,21 +205,21 @@ describe('License Management', () => {
         });
 
         it('should not render the approval section', () => {
-          expect(wrapper.find(LicenseComplianceApprovals).exists()).toBe(false);
+          expect(wrapper.findComponent(LicenseComplianceApprovals).exists()).toBe(false);
         });
 
         it('should not render the form', () => {
-          expect(wrapper.find(AddLicenseForm).exists()).toBe(false);
-          expect(wrapper.find(GlButton).exists()).toBe(false);
+          expect(wrapper.findComponent(AddLicenseForm).exists()).toBe(false);
+          expect(wrapper.findComponent(GlButton).exists()).toBe(false);
         });
 
         it('should not render delete confirmation modal', () => {
-          expect(wrapper.find(DeleteConfirmationModal).exists()).toBe(false);
+          expect(wrapper.findComponent(DeleteConfirmationModal).exists()).toBe(false);
         });
 
         it('renders the read-only row', () => {
-          expect(wrapper.find(LicenseManagementRow).exists()).toBe(true);
-          expect(wrapper.find(AdminLicenseManagementRow).exists()).toBe(false);
+          expect(wrapper.findComponent(LicenseManagementRow).exists()).toBe(true);
+          expect(wrapper.findComponent(AdminLicenseManagementRow).exists()).toBe(false);
         });
       });
 

ee/spec/frontend/vue_shared/metrics_reports/grouped_metrics_reports_app_spec.js

@@ -204,7 +204,7 @@ describe('Grouped metrics reports app', () => {
       });
 
       it('renders custom metric issue body', () => {
-        const issueBody = wrapper.find(MetricsReportsIssueBody);
+        const issueBody = wrapper.findComponent(MetricsReportsIssueBody);
 
         expect(issueBody.props('issue').name).toEqual('name');
         expect(issueBody.props('issue').value).toEqual('value');

ee/spec/frontend/vue_shared/security_reports/components/artifact_downloads/pipeline_artifact_download_spec.js

@@ -50,7 +50,7 @@ describe('Pipeline artifact Download', () => {
     return createMockApollo(requestHandlers);
   };
 
-  const findDownloadDropdown = () => wrapper.find(SecurityReportDownloadDropdown);
+  const findDownloadDropdown = () => wrapper.findComponent(SecurityReportDownloadDropdown);
 
   afterEach(() => {
     wrapper.destroy();

ee/spec/frontend/vue_shared/security_reports/components/dast_modal_spec.js

@@ -45,7 +45,7 @@ describe('DAST Modal', () => {
 
   it('should contain the dynamic title', () => {
     createWrapper({ scannedResourcesCount: 20 });
-    expect(wrapper.find(GlModal).props('title')).toBe('20 Scanned URLs');
+    expect(wrapper.findComponent(GlModal).props('title')).toBe('20 Scanned URLs');
   });
 
   it('should not show download button when link is not present', () => {

ee/spec/frontend/vue_shared/security_reports/components/dismiss_button_spec.js

@@ -22,7 +22,7 @@ describe('DismissalButton', () => {
     });
 
     it('should emit dismiss vulnerability when clicked', () => {
-      wrapper.find(GlButton).trigger('click');
+      wrapper.findComponent(GlButton).trigger('click');
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().dismissVulnerability).toBeTruthy();
       });
@@ -53,7 +53,7 @@ describe('DismissalButton', () => {
     });
 
     it('should emit revertDismissVulnerability when clicked', () => {
-      wrapper.find(GlButton).trigger('click');
+      wrapper.findComponent(GlButton).trigger('click');
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.emitted().revertDismissVulnerability).toBeTruthy();
       });

ee/spec/frontend/vue_shared/security_reports/components/dismissal_comment_box_spec.js

@@ -19,7 +19,7 @@ describe('DismissalCommentBox', () => {
   });
 
   it('should submit the comment when cmd+enter is pressed', () => {
-    wrapper.find(GlFormTextarea).trigger('keydown.enter', {
+    wrapper.findComponent(GlFormTextarea).trigger('keydown.enter', {
       metaKey: true,
     });
 
@@ -42,7 +42,7 @@ describe('DismissalCommentBox', () => {
     wrapper.setProps({ placeholder });
 
     return wrapper.vm.$nextTick(() => {
-      expect(wrapper.find(GlFormTextarea).attributes('placeholder')).toBe(placeholder);
+      expect(wrapper.findComponent(GlFormTextarea).attributes('placeholder')).toBe(placeholder);
     });
   });
 });

ee/spec/frontend/vue_shared/security_reports/components/dismissal_comment_box_toggle_spec.js

@@ -15,7 +15,7 @@ describe('DismissalCommentBox', () => {
     });
 
     it('should not render the dismissal comment box', () => {
-      expect(wrapper.find(DismissalCommentBox).exists()).toBeFalsy();
+      expect(wrapper.findComponent(DismissalCommentBox).exists()).toBeFalsy();
     });
   });
 
@@ -29,7 +29,7 @@ describe('DismissalCommentBox', () => {
     });
 
     it('should render the dismissal comment box', () => {
-      expect(wrapper.find(DismissalCommentBox).exists()).toBeTruthy();
+      expect(wrapper.findComponent(DismissalCommentBox).exists()).toBeTruthy();
     });
 
     it('should not render the placeholder text box', () => {

ee/spec/frontend/vue_shared/security_reports/components/dismissal_note_spec.js

@@ -34,11 +34,11 @@ describe('dismissal note', () => {
     });
 
     it('should pass the author to the event item', () => {
-      expect(wrapper.find(EventItem).props('author')).toBe(feedback.author);
+      expect(wrapper.findComponent(EventItem).props('author')).toBe(feedback.author);
     });
 
     it('should pass the created date to the event item', () => {
-      expect(wrapper.find(EventItem).props('createdAt')).toBe(feedback.created_at);
+      expect(wrapper.findComponent(EventItem).props('createdAt')).toBe(feedback.created_at);
     });
 
     it('should return the event text with no project data', () => {
@@ -125,7 +125,7 @@ describe('dismissal note', () => {
             project,
           },
         });
-        commentItem = wrapper.findAll(EventItem).at(1);
+        commentItem = wrapper.findAllComponents(EventItem).at(1);
       });
 
       it('should render the comment', () => {
@@ -156,7 +156,7 @@ describe('dismissal note', () => {
           },
           mount,
         );
-        commentItem = wrapper.findAll(EventItem).at(1);
+        commentItem = wrapper.findAllComponents(EventItem).at(1);
       });
 
       it('should render deletion buttons slot', () => {

ee/spec/frontend/vue_shared/security_reports/components/event_item_spec.js

@@ -11,7 +11,7 @@ describe('Event Item', () => {
     wrapper = mountFn(Component, options);
   };
 
-  const noteHeader = () => wrapper.find(NoteHeader);
+  const noteHeader = () => wrapper.findComponent(NoteHeader);
 
   describe('initial state', () => {
     const propsData = {
@@ -92,12 +92,12 @@ describe('Event Item', () => {
     });
 
     it('renders the action buttons', () => {
-      expect(wrapper.findAll(GlButton)).toHaveLength(2);
+      expect(wrapper.findAllComponents(GlButton)).toHaveLength(2);
       expect(wrapper.element).toMatchSnapshot();
     });
 
     it('emits the button events when clicked', () => {
-      const buttons = wrapper.findAll(GlButton);
+      const buttons = wrapper.findAllComponents(GlButton);
       buttons.at(0).trigger('click');
       return wrapper.vm
         .$nextTick()

ee/spec/frontend/vue_shared/security_reports/components/issue_note_spec.js

@@ -30,11 +30,11 @@ describe('Issue note', () => {
     });
 
     it('should pass the author to the event item', () => {
-      expect(wrapper.find(EventItem).props('author')).toBe(feedback.author);
+      expect(wrapper.findComponent(EventItem).props('author')).toBe(feedback.author);
     });
 
     it('should pass the created date to the event item', () => {
-      expect(wrapper.find(EventItem).props('createdAt')).toBe(feedback.created_at);
+      expect(wrapper.findComponent(EventItem).props('createdAt')).toBe(feedback.created_at);
     });
 
     it('should return the event text with no project data', () => {

ee/spec/frontend/vue_shared/security_reports/components/merge_request_note_spec.js

@@ -30,11 +30,11 @@ describe('Merge request note', () => {
     });
 
     it('should pass the author to the event item', () => {
-      expect(wrapper.find(EventItem).props('author')).toBe(feedback.author);
+      expect(wrapper.findComponent(EventItem).props('author')).toBe(feedback.author);
     });
 
     it('should pass the created date to the event item', () => {
-      expect(wrapper.find(EventItem).props('createdAt')).toBe(feedback.created_at);
+      expect(wrapper.findComponent(EventItem).props('createdAt')).toBe(feedback.created_at);
     });
 
     it('should return the event text with no project data', () => {

ee/spec/frontend/vue_shared/security_reports/components/modal_footer_spec.js

@@ -77,7 +77,7 @@ describe('Security Reports modal footer', () => {
     });
 
     it('has the external-link icon', () => {
-      expect(findActionButton().find(GlIcon).props('name')).toBe('external-link');
+      expect(findActionButton().findComponent(GlIcon).props('name')).toBe('external-link');
     });
   });
 
@@ -140,7 +140,7 @@ describe('Security Reports modal footer', () => {
     it('renders create merge request and issue button as a split button', () => {
       expect(wrapper.find('.js-split-button').exists()).toBe(true);
       expect(wrapper.vm.actionButtons).toHaveLength(2);
-      expect(wrapper.find(SplitButton).exists()).toBe(true);
+      expect(wrapper.findComponent(SplitButton).exists()).toBe(true);
       expect(wrapper.find('.js-split-button').text()).toContain('Resolve with merge request');
       expect(wrapper.find('.js-split-button').text()).toContain('Create issue');
     });
@@ -159,7 +159,7 @@ describe('Security Reports modal footer', () => {
 
     it('renders the split button', () => {
       expect(wrapper.vm.actionButtons).toHaveLength(3);
-      expect(wrapper.find(SplitButton).exists()).toBe(true);
+      expect(wrapper.findComponent(SplitButton).exists()).toBe(true);
       expect(wrapper.find('.js-split-button').text()).toContain('Resolve with merge request');
       expect(wrapper.find('.js-split-button').text()).toContain('Create issue');
       expect(wrapper.find('.js-split-button').text()).toContain('Download patch to resolve');
@@ -176,7 +176,7 @@ describe('Security Reports modal footer', () => {
     });
 
     it('should render the dismiss button', () => {
-      expect(wrapper.find(DismissButton).exists()).toBe(true);
+      expect(wrapper.findComponent(DismissButton).exists()).toBe(true);
     });
   });
 });

ee/spec/frontend/vue_shared/security_reports/components/modal_spec.js

@@ -24,7 +24,7 @@ describe('Security Reports modal', () => {
         ...propsData,
       },
     });
-    modal = wrapper.find(GlModal);
+    modal = wrapper.findComponent(GlModal);
   };
 
   describe('modal', () => {
@@ -106,7 +106,9 @@ describe('Security Reports modal', () => {
       });
 
       it('allows the vulnerability to be dismissed', () => {
-        expect(wrapper.find({ ref: 'footer' }).props('canDismissVulnerability')).toBe(true);
+        expect(wrapper.findComponent({ ref: 'footer' }).props('canDismissVulnerability')).toBe(
+          true,
+        );
       });
     });
 
@@ -184,7 +186,7 @@ describe('Security Reports modal', () => {
       });
 
       it('disallows any actions in the footer', () => {
-        expect(wrapper.find({ ref: 'footer' }).props()).toMatchObject({
+        expect(wrapper.findComponent({ ref: 'footer' }).props()).toMatchObject({
           canCreateIssue: false,
           canCreateMergeRequest: false,
           canDownloadPatch: false,
@@ -203,7 +205,7 @@ describe('Security Reports modal', () => {
     });
 
     it('disallows any actions in the footer', () => {
-      expect(wrapper.find({ ref: 'footer' }).props()).toMatchObject({
+      expect(wrapper.findComponent({ ref: 'footer' }).props()).toMatchObject({
         canCreateIssue: false,
         canCreateMergeRequest: false,
         canDownloadPatch: false,
@@ -226,7 +228,7 @@ describe('Security Reports modal', () => {
       });
 
       it('displays a link to the issue', () => {
-        expect(wrapper.find(IssueNote).exists()).toBe(true);
+        expect(wrapper.findComponent(IssueNote).exists()).toBe(true);
       });
     });
 
@@ -243,7 +245,7 @@ describe('Security Reports modal', () => {
       });
 
       it('hides the link to the issue', () => {
-        const note = wrapper.find(IssueNote);
+        const note = wrapper.findComponent(IssueNote);
         expect(note.exists()).toBe(false);
       });
     });
@@ -263,7 +265,7 @@ describe('Security Reports modal', () => {
       });
 
       it('displays a link to the merge request', () => {
-        expect(wrapper.find(MergeRequestNote).exists()).toBe(true);
+        expect(wrapper.findComponent(MergeRequestNote).exists()).toBe(true);
       });
     });
 
@@ -280,7 +282,7 @@ describe('Security Reports modal', () => {
       });
 
       it('hides the link to the merge request', () => {
-        const note = wrapper.find(MergeRequestNote);
+        const note = wrapper.findComponent(MergeRequestNote);
         expect(note.exists()).toBe(false);
       });
     });
@@ -296,7 +298,7 @@ describe('Security Reports modal', () => {
     });
 
     it('disallows any actions in the footer', () => {
-      expect(wrapper.find({ ref: 'footer' }).props()).toMatchObject({
+      expect(wrapper.findComponent({ ref: 'footer' }).props()).toMatchObject({
         canCreateIssue: false,
         canCreateMergeRequest: false,
         canDownloadPatch: false,
@@ -342,7 +344,7 @@ describe('Security Reports modal', () => {
       mountComponent(propsData, mount);
       await wrapper.vm.$nextTick();
 
-      const solutionCard = modal.find(SolutionCard);
+      const solutionCard = modal.findComponent(SolutionCard);
 
       expect(solutionCard.exists()).toBe(true);
       expect(solutionCard.text()).toContain(solution);
@@ -359,7 +361,7 @@ describe('Security Reports modal', () => {
       mountComponent(propsData, mount);
       await wrapper.vm.$nextTick();
 
-      const solutionCard = wrapper.find(SolutionCard);
+      const solutionCard = wrapper.findComponent(SolutionCard);
 
       expect(solutionCard.exists()).toBe(true);
       expect(solutionCard.text()).toContain(summary);
@@ -374,7 +376,7 @@ describe('Security Reports modal', () => {
       mountComponent(propsData, mount);
       await wrapper.vm.$nextTick();
 
-      const solutionCard = wrapper.find(SolutionCard);
+      const solutionCard = wrapper.findComponent(SolutionCard);
 
       expect(solutionCard.exists()).toBe(true);
       expect(wrapper.find('hr').exists()).toBe(false);

ee/spec/frontend/vue_shared/security_reports/components/security_issue_body_spec.js

@@ -21,7 +21,7 @@ import {
 describe('Security Issue Body', () => {
   let wrapper;
 
-  const findReportLink = () => wrapper.find(ReportLink);
+  const findReportLink = () => wrapper.findComponent(ReportLink);
 
   const createComponent = (issue) => {
     wrapper = extendedWrapper(
@@ -52,11 +52,11 @@ describe('Security Issue Body', () => {
 
     if (severity) {
       it(`shows SeverityBadge if severity is present`, () => {
-        expect(wrapper.find(SeverityBadge).props('severity')).toBe(severity);
+        expect(wrapper.findComponent(SeverityBadge).props('severity')).toBe(severity);
       });
     } else {
       it(`does not show SeverityBadge if severity is not present`, () => {
-        expect(wrapper.find(SeverityBadge).exists()).toBe(false);
+        expect(wrapper.findComponent(SeverityBadge).exists()).toBe(false);
       });
     }
 

ee/spec/frontend/vue_shared/security_reports/components/solution_card_spec.js

@@ -8,7 +8,7 @@ describe('Solution Card', () => {
 
   let wrapper;
 
-  const findSolutionText = () => wrapper.find({ ref: 'solution-text' });
+  const findSolutionText = () => wrapper.findComponent({ ref: 'solution-text' });
   const findSolutionTitle = () => wrapper.find('h3');
 
   const createComponent = ({ propsData } = {}) => {

ee/spec/frontend/vue_shared/security_reports/components/split_button_spec.js

@@ -21,8 +21,8 @@ const buttons = [
 describe('Split Button', () => {
   let wrapper;
 
-  const findDropdown = () => wrapper.find(GlDropdown);
-  const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
 
   const createComponent = (props) => {
     wrapper = shallowMount(SplitButton, {

ee/spec/frontend/vue_shared/security_reports/components/vulnerability_detail_section_spec.js

@@ -8,9 +8,9 @@ import CodeBlock from '~/vue_shared/components/code_block.vue';
 describe('VulnerabilityDetails component', () => {
   let wrapper;
   const findHeading = () => wrapper.find('h3');
-  const findIcon = () => wrapper.find(GlIcon);
-  const findCodeBlock = () => wrapper.find(CodeBlock);
-  const findDetailItem = () => wrapper.find(DetailItem);
+  const findIcon = () => wrapper.findComponent(GlIcon);
+  const findCodeBlock = () => wrapper.findComponent(CodeBlock);
+  const findDetailItem = () => wrapper.findComponent(DetailItem);
   const findPlainContent = () => wrapper.findByTestId('detail-item-content-template');
 
   const createComponent = (

ee/spec/frontend/vue_shared/security_reports/components/vulnerability_details_spec.js

@@ -35,14 +35,14 @@ describe('VulnerabilityDetails component', () => {
     }
   };
 
-  const findLink = (name) => wrapper.find({ ref: `${name}Link` });
-  const findRequest = () => wrapper.find({ ref: 'request' });
-  const findRecordedResponse = () => wrapper.find({ ref: 'recordedResponse' });
-  const findUnmodifiedResponse = () => wrapper.find({ ref: 'unmodifiedResponse' });
-  const findCrashAddress = () => wrapper.find({ ref: 'crashAddress' });
-  const findCrashState = () => wrapper.find({ ref: 'crashState' });
-  const findCrashType = () => wrapper.find({ ref: 'crashType' });
-  const findStacktraceSnippet = () => wrapper.find({ ref: 'stacktraceSnippet' });
+  const findLink = (name) => wrapper.findComponent({ ref: `${name}Link` });
+  const findRequest = () => wrapper.findComponent({ ref: 'request' });
+  const findRecordedResponse = () => wrapper.findComponent({ ref: 'recordedResponse' });
+  const findUnmodifiedResponse = () => wrapper.findComponent({ ref: 'unmodifiedResponse' });
+  const findCrashAddress = () => wrapper.findComponent({ ref: 'crashAddress' });
+  const findCrashState = () => wrapper.findComponent({ ref: 'crashState' });
+  const findCrashType = () => wrapper.findComponent({ ref: 'crashType' });
+  const findStacktraceSnippet = () => wrapper.findComponent({ ref: 'stacktraceSnippet' });
   const findGenericReportSection = () => wrapper.findComponent(GenericReportSection);
   const findAlert = () => wrapper.findComponent(FalsePositiveAlert);
   const findDescription = () => wrapper.findByTestId('description');
@@ -82,7 +82,7 @@ describe('VulnerabilityDetails component', () => {
   it('renders severity with a badge', () => {
     const vulnerability = makeVulnerability({ severity: 'critical' });
     componentFactory(vulnerability);
-    const badge = wrapper.find(SeverityBadge);
+    const badge = wrapper.findComponent(SeverityBadge);
 
     expect(badge.props('severity')).toBe(vulnerability.severity);
   });
@@ -90,7 +90,7 @@ describe('VulnerabilityDetails component', () => {
   it('renders status with a badge', () => {
     const vulnerability = makeVulnerability({ state: 'detected' });
     componentFactory(vulnerability);
-    const badge = wrapper.find(GlBadge);
+    const badge = wrapper.findComponent(GlBadge);
 
     expect(badge.text()).toContain(vulnerability.state);
   });

ee/spec/frontend/vue_shared/security_reports/grouped_security_reports_app_spec.js

@@ -41,7 +41,7 @@ describe('Grouped security reports app', () => {
   let wrapper;
   let mock;
 
-  const findReportSection = () => wrapper.find(ReportSection);
+  const findReportSection = () => wrapper.findComponent(ReportSection);
   const findReportSummary = () => wrapper.find('[data-testid="report-section-code-text"]');
   const findCollapseButton = () => wrapper.find('.js-collapse-btn');
   const findSpinner = () => wrapper.find('.gl-spinner');