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

* migrate to proper use of findComponent/findAllComponents

ee/spec/frontend/security_dashboard/components/group/group_security_dashboard_spec.js

@@ -26,11 +26,12 @@ describe('Group Security Dashboard component', () => {
   // To be consumed by SecurityDashboardLayout
   const sbomSurveySvgPath = '/';
 
-  const findSecurityChartsLayoutComponent = () => wrapper.find(SecurityDashboardLayout);
-  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
-  const findVulnerabilitiesOverTimeChart = () => wrapper.find(VulnerabilitiesOverTimeChart);
-  const findVulnerabilitySeverities = () => wrapper.find(VulnerabilitySeverities);
-  const findReportNotConfigured = () => wrapper.find(ReportNotConfiguredGroup);
+  const findSecurityChartsLayoutComponent = () => wrapper.findComponent(SecurityDashboardLayout);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findVulnerabilitiesOverTimeChart = () =>
+    wrapper.findComponent(VulnerabilitiesOverTimeChart);
+  const findVulnerabilitySeverities = () => wrapper.findComponent(VulnerabilitySeverities);
+  const findReportNotConfigured = () => wrapper.findComponent(ReportNotConfiguredGroup);
 
   const createWrapper = ({ loading = false } = {}) => {
     wrapper = shallowMount(GroupSecurityDashboard, {

ee/spec/frontend/security_dashboard/components/group/group_vulnerabilities_spec.js

@@ -18,10 +18,10 @@ describe('Group Security Dashboard Vulnerabilities Component', () => {
 
   const groupFullPath = 'group-full-path';
 
-  const findIntersectionObserver = () => wrapper.find(GlIntersectionObserver);
-  const findVulnerabilities = () => wrapper.find(VulnerabilityList);
-  const findAlert = () => wrapper.find(GlAlert);
-  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findIntersectionObserver = () => wrapper.findComponent(GlIntersectionObserver);
+  const findVulnerabilities = () => wrapper.findComponent(VulnerabilityList);
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 
   const expectLoadingState = ({ initial = false, nextPage = false }) => {
     expect(findVulnerabilities().props('isLoading')).toBe(initial);

ee/spec/frontend/security_dashboard/components/instance/instance_security_dashboard_spec.js

@@ -24,11 +24,12 @@ jest.mock(
 describe('Instance Security Dashboard component', () => {
   let wrapper;
 
-  const findSecurityChartsLayoutComponent = () => wrapper.find(SecurityDashboardLayout);
-  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
-  const findVulnerabilitiesOverTimeChart = () => wrapper.find(VulnerabilitiesOverTimeChart);
-  const findVulnerabilitySeverities = () => wrapper.find(VulnerabilitySeverities);
-  const findReportNotConfigured = () => wrapper.find(ReportNotConfiguredInstance);
+  const findSecurityChartsLayoutComponent = () => wrapper.findComponent(SecurityDashboardLayout);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findVulnerabilitiesOverTimeChart = () =>
+    wrapper.findComponent(VulnerabilitiesOverTimeChart);
+  const findVulnerabilitySeverities = () => wrapper.findComponent(VulnerabilitySeverities);
+  const findReportNotConfigured = () => wrapper.findComponent(ReportNotConfiguredInstance);
 
   const createWrapper = ({ loading = false } = {}) => {
     wrapper = shallowMount(InstanceSecurityDashboard, {

ee/spec/frontend/security_dashboard/components/instance/instance_vulnerabilities_spec.js

@@ -13,10 +13,10 @@ localVue.use(VueApollo);
 describe('Instance Security Dashboard Vulnerabilities Component', () => {
   let wrapper;
 
-  const findIntersectionObserver = () => wrapper.find(GlIntersectionObserver);
-  const findVulnerabilities = () => wrapper.find(VulnerabilityList);
-  const findAlert = () => wrapper.find(GlAlert);
-  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findIntersectionObserver = () => wrapper.findComponent(GlIntersectionObserver);
+  const findVulnerabilities = () => wrapper.findComponent(VulnerabilityList);
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 
   const expectLoadingState = ({ initial = false, nextPage = false }) => {
     expect(findVulnerabilities().props('isLoading')).toBe(initial);

ee/spec/frontend/security_dashboard/components/instance/project_list_spec.js

@@ -84,7 +84,7 @@ describe('Project List component', () => {
       await wrapper.vm.$nextTick();
 
       expect(getAllProjectItems()).toHaveLength(projectsCount);
-      expect(wrapper.find(GlBadge).text()).toBe(projectsCount.toString());
+      expect(wrapper.findComponent(GlBadge).text()).toBe(projectsCount.toString());
     },
   );
 
@@ -96,7 +96,7 @@ describe('Project List component', () => {
     });
 
     it('renders a project item with an avatar', () => {
-      expect(getFirstProjectItem().find(ProjectAvatar).exists()).toBe(true);
+      expect(getFirstProjectItem().findComponent(ProjectAvatar).exists()).toBe(true);
     });
 
     it('renders a project item with a project name', () => {

ee/spec/frontend/security_dashboard/components/instance/project_manager_spec.js

@@ -47,9 +47,9 @@ describe('Project Manager component', () => {
     });
   };
 
-  const findAddProjectsButton = () => wrapper.find(GlButton);
-  const findProjectList = () => wrapper.find(ProjectList);
-  const findProjectSelector = () => wrapper.find(ProjectSelector);
+  const findAddProjectsButton = () => wrapper.findComponent(GlButton);
+  const findProjectList = () => wrapper.findComponent(ProjectList);
+  const findProjectSelector = () => wrapper.findComponent(ProjectSelector);
 
   afterEach(() => {
     wrapper.destroy();

ee/spec/frontend/security_dashboard/components/pipeline/loading_error_spec.js

@@ -30,11 +30,11 @@ describe('LoadingError component', () => {
     });
 
     it('renders an empty state', () => {
-      expect(wrapper.find(GlEmptyState).exists()).toBe(true);
+      expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
     });
 
     it('empty state has correct props', () => {
-      expect(wrapper.find(GlEmptyState).props()).toMatchSnapshot();
+      expect(wrapper.findComponent(GlEmptyState).props()).toMatchSnapshot();
     });
   });
 });

ee/spec/frontend/security_dashboard/components/pipeline/security_dashboard_table_row_spec.js

@@ -41,8 +41,8 @@ describe('Security Dashboard Table Row', () => {
   const findContent = (i) => wrapper.findAll('.table-mobile-content').at(i);
   const findAllIssueCreated = () => wrapper.findAll('[data-testid="issues-icon"]');
   const hasSelectedClass = () => wrapper.classes('gl-bg-blue-50');
-  const findCheckbox = () => wrapper.find(GlFormCheckbox);
-  const findSeverityBadge = () => wrapper.find(SeverityBadge);
+  const findCheckbox = () => wrapper.findComponent(GlFormCheckbox);
+  const findSeverityBadge = () => wrapper.findComponent(SeverityBadge);
 
   describe('when loading', () => {
     beforeEach(() => {
@@ -111,7 +111,7 @@ describe('Security Dashboard Table Row', () => {
         jest.spyOn(store, 'dispatch').mockImplementation();
         jest.spyOn(wrapper.vm.$root, '$emit');
 
-        const el = wrapper.find({ ref: 'vulnerability-title' });
+        const el = wrapper.findComponent({ ref: 'vulnerability-title' });
         el.trigger('click');
 
         expect(store.dispatch).toHaveBeenCalledWith('vulnerabilities/setModalData', {

ee/spec/frontend/security_dashboard/components/pipeline/security_dashboard_table_spec.js

@@ -32,7 +32,7 @@ describe('Security Dashboard Table', () => {
     wrapper.destroy();
   });
 
-  const findCheckbox = () => wrapper.find(GlFormCheckbox);
+  const findCheckbox = () => wrapper.findComponent(GlFormCheckbox);
   const findSelectionSummaryCollapse = () => wrapper.findByTestId('selection-summary-collapse');
 
   describe('while loading', () => {
@@ -41,7 +41,7 @@ describe('Security Dashboard Table', () => {
     });
 
     it('should render 10 skeleton rows in the table', () => {
-      expect(wrapper.findAll(SecurityDashboardTableRow)).toHaveLength(10);
+      expect(wrapper.findAllComponents(SecurityDashboardTableRow)).toHaveLength(10);
     });
   });
 
@@ -54,7 +54,7 @@ describe('Security Dashboard Table', () => {
     });
 
     it('should render a row for each vulnerability', () => {
-      expect(wrapper.findAll(SecurityDashboardTableRow)).toHaveLength(
+      expect(wrapper.findAllComponents(SecurityDashboardTableRow)).toHaveLength(
         mockDataVulnerabilities.length,
       );
     });
@@ -91,7 +91,7 @@ describe('Security Dashboard Table', () => {
     });
 
     it('should render the empty state', () => {
-      expect(wrapper.find(GlEmptyState).exists()).toBe(true);
+      expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
     });
   });
 
@@ -101,7 +101,7 @@ describe('Security Dashboard Table', () => {
     });
 
     it('should not render the empty state', () => {
-      expect(wrapper.find(GlEmptyState).exists()).toBe(false);
+      expect(wrapper.findComponent(GlEmptyState).exists()).toBe(false);
     });
 
     it('should render the error alert', () => {

ee/spec/frontend/security_dashboard/components/pipeline/security_dashboard_vuex_spec.js

@@ -73,7 +73,7 @@ describe('Security Dashboard component', () => {
     });
 
     it('renders the security dashboard table ', () => {
-      expect(wrapper.find(SecurityDashboardTable).exists()).toBe(true);
+      expect(wrapper.findComponent(SecurityDashboardTable).exists()).toBe(true);
     });
 
     it('sets the pipeline id', () => {
@@ -85,7 +85,7 @@ describe('Security Dashboard component', () => {
     });
 
     it('renders the issue modal', () => {
-      expect(wrapper.find(IssueModal).exists()).toBe(true);
+      expect(wrapper.findComponent(IssueModal).exists()).toBe(true);
     });
 
     it.each`
@@ -108,7 +108,7 @@ describe('Security Dashboard component', () => {
         store.state.vulnerabilities.modal.vulnerability = 'bar';
 
         jest.spyOn(store, 'dispatch').mockImplementation(() => Promise.resolve());
-        wrapper.find(IssueModal).vm.$emit(emittedModalEvent, eventPayload);
+        wrapper.findComponent(IssueModal).vm.$emit(emittedModalEvent, eventPayload);
 
         expect(store.dispatch).toHaveBeenCalledWith(
           expectedDispatchedAction,
@@ -142,7 +142,7 @@ describe('Security Dashboard component', () => {
         Object.assign(store.state.vulnerabilities, givenState);
         await nextTick();
 
-        expect(wrapper.find(IssueModal).props()).toStrictEqual(expectedProps);
+        expect(wrapper.findComponent(IssueModal).props()).toStrictEqual(expectedProps);
       },
     );
   });
@@ -164,13 +164,13 @@ describe('Security Dashboard component', () => {
     it.each([401, 403])('displays an error on error %s', async (errorCode) => {
       store.dispatch('vulnerabilities/receiveVulnerabilitiesError', errorCode);
       await nextTick();
-      expect(wrapper.find(LoadingError).exists()).toBe(true);
+      expect(wrapper.findComponent(LoadingError).exists()).toBe(true);
     });
 
     it.each([404, 500])('does not display an error on error %s', async (errorCode) => {
       store.dispatch('vulnerabilities/receiveVulnerabilitiesError', errorCode);
       await nextTick();
-      expect(wrapper.find(LoadingError).exists()).toBe(false);
+      expect(wrapper.findComponent(LoadingError).exists()).toBe(false);
     });
   });
 });

ee/spec/frontend/security_dashboard/components/pipeline/security_reports_summary_spec.js

@@ -222,7 +222,7 @@ describe('Security reports summary component', () => {
     });
 
     it('should have the modal with id dastUrl', () => {
-      const modal = wrapper.find(Modal);
+      const modal = wrapper.findComponent(Modal);
 
       expect(modal.exists()).toBe(true);
       expect(modal.attributes('modalid')).toBe('dastUrl');

ee/spec/frontend/security_dashboard/components/pipeline/selection_summary_vuex_spec.js

@@ -45,9 +45,9 @@ describe('Selection Summary', () => {
     mock.restore();
   });
 
-  const formSelect = () => wrapper.find(GlFormSelect);
+  const formSelect = () => wrapper.findComponent(GlFormSelect);
   const dismissMessage = () => wrapper.find('[data-testid="dismiss-message"]');
-  const dismissButton = () => wrapper.find(GlButton);
+  const dismissButton = () => wrapper.findComponent(GlButton);
 
   const selectByIndex = (index) =>
     store.commit(`vulnerabilities/${SELECT_VULNERABILITY}`, mockDataVulnerabilities[index].id);

ee/spec/frontend/security_dashboard/components/project/project_vulnerabilities_spec.js

@@ -57,11 +57,11 @@ describe('Vulnerabilities app component', () => {
     },
   });
 
-  const findIntersectionObserver = () => wrapper.find(GlIntersectionObserver);
-  const findAlert = () => wrapper.find(GlAlert);
+  const findIntersectionObserver = () => wrapper.findComponent(GlIntersectionObserver);
+  const findAlert = () => wrapper.findComponent(GlAlert);
   const findSecurityScannerAlert = (root = wrapper) => root.findComponent(SecurityScannerAlert);
-  const findVulnerabilityList = () => wrapper.find(VulnerabilityList);
-  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
+  const findVulnerabilityList = () => wrapper.findComponent(VulnerabilityList);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
 
   const expectLoadingState = ({ initial = false, nextPage = false }) => {
     expect(findVulnerabilityList().props('isLoading')).toBe(initial);

ee/spec/frontend/security_dashboard/components/project/project_vulnerability_report_spec.js

@@ -61,7 +61,7 @@ describe('Project vulnerability report app component', () => {
     });
   };
 
-  const findReportNotConfiguredProject = () => wrapper.find(ReportNotConfiguredProject);
+  const findReportNotConfiguredProject = () => wrapper.findComponent(ReportNotConfiguredProject);
   const findVulnerabilityReportTabs = () => wrapper.findComponent(VulnerabilityReportTabs);
   const findAutoFixUserCallout = () => wrapper.findComponent(AutoFixUserCallout);
   const findProjectPipelineStatus = () => wrapper.findComponent(ProjectPipelineStatus);

ee/spec/frontend/security_dashboard/components/shared/auto_fix_user_callout_spec.js

@@ -18,8 +18,8 @@ describe('AutoFixUserCallout', () => {
   it('renders properly', () => {
     createWrapper();
 
-    expect(wrapper.find(GlBanner).exists()).toBe(true);
-    expect(wrapper.find(GlBanner).props()).toMatchObject({
+    expect(wrapper.findComponent(GlBanner).exists()).toBe(true);
+    expect(wrapper.findComponent(GlBanner).props()).toMatchObject({
       title: 'Introducing GitLab auto-fix',
       buttonText: 'Learn more',
       buttonLink: helpPagePath,

ee/spec/frontend/security_dashboard/components/shared/csv_export_button_spec.js

@@ -26,10 +26,10 @@ describe('Csv Button Export', () => {
   let wrapper;
 
   const issueUrl = 'https://gitlab.com/gitlab-org/gitlab/issues/197111';
-  const findPopoverExternalLink = () => wrapper.find({ ref: 'popoverExternalLink' });
-  const findPopoverButton = () => wrapper.find({ ref: 'popoverButton' });
-  const findPopover = () => wrapper.find({ ref: 'popover' });
-  const findCsvExportButton = () => wrapper.find({ ref: 'csvExportButton' });
+  const findPopoverExternalLink = () => wrapper.findComponent({ ref: 'popoverExternalLink' });
+  const findPopoverButton = () => wrapper.findComponent({ ref: 'popoverButton' });
+  const findPopover = () => wrapper.findComponent({ ref: 'popover' });
+  const findCsvExportButton = () => wrapper.findComponent({ ref: 'csvExportButton' });
 
   const createComponent = () => {
     return shallowMount(CsvExportButton, {

ee/spec/frontend/security_dashboard/components/shared/empty_states/filters_produced_no_results_spec.js

@@ -13,7 +13,7 @@ describe('filters produced no results empty state', () => {
       },
     });
 
-  const findGlEmptyState = () => wrapper.find(GlEmptyState);
+  const findGlEmptyState = () => wrapper.findComponent(GlEmptyState);
 
   beforeEach(() => {
     wrapper = createWrapper();

ee/spec/frontend/security_dashboard/components/shared/filters/filter_body_spec.js

@@ -113,7 +113,7 @@ describe('Filter Body component', () => {
     `('$phrase the loading icon when the loading prop is $loading', ({ loading }) => {
       createComponent({ loading });
 
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(loading);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(loading);
     });
   });
 });

ee/spec/frontend/security_dashboard/components/shared/filters/filter_item_spec.js

@@ -17,8 +17,8 @@ describe('Filter Item component', () => {
     });
   };
 
-  const dropdownItem = () => wrapper.find(GlDropdownItem);
-  const name = () => wrapper.find(GlTruncate);
+  const dropdownItem = () => wrapper.findComponent(GlDropdownItem);
+  const name = () => wrapper.findComponent(GlTruncate);
 
   afterEach(() => {
     wrapper.destroy();

ee/spec/frontend/security_dashboard/components/shared/filters/scanner_filter_spec.js

@@ -51,7 +51,7 @@ describe('Scanner Filter component', () => {
   };
 
   const getTestIds = (selector) =>
-    wrapper.findAll(selector).wrappers.map((x) => x.attributes('data-testid'));
+    wrapper.findAllComponents(selector).wrappers.map((x) => x.attributes('data-testid'));
 
   afterEach(() => {
     wrapper.destroy();
@@ -68,8 +68,8 @@ describe('Scanner Filter component', () => {
       const expectedOptions = ['all', ...filter.options.map((x) => x.id)];
 
       expect(options).toEqual(expectedOptions);
-      expect(wrapper.find(GlDropdownDivider).exists()).toBe(false);
-      expect(wrapper.find(GlDropdownItem).exists()).toBe(false);
+      expect(wrapper.findComponent(GlDropdownDivider).exists()).toBe(false);
+      expect(wrapper.findComponent(GlDropdownItem).exists()).toBe(false);
     });
   });
 
@@ -96,7 +96,7 @@ describe('Scanner Filter component', () => {
       createWrapper();
       const expectSelectedItems = (items) => {
         const checkedItems = wrapper
-          .findAll(FilterItem)
+          .findAllComponents(FilterItem)
           .wrappers.filter((x) => x.props('isChecked'))
           .map((x) => x.attributes('data-testid'));
         const expectedItems = items.map((x) => x.id);

ee/spec/frontend/security_dashboard/components/shared/issues_badge_spec.js

@@ -32,7 +32,7 @@ describe('Remediated badge component', () => {
     });
 
     it('links the badge and the popover', () => {
-      const popover = wrapper.find({ ref: 'popover' });
+      const popover = wrapper.findComponent({ ref: 'popover' });
       expect(popover.props('target')()).toEqual(findIcon().element.parentNode);
     });
 

ee/spec/frontend/security_dashboard/components/shared/pipeline_status_badge_spec.js

@@ -8,7 +8,7 @@ describe('Pipeline status badge', () => {
 
   const securityBuildsFailedPath = '/some/path/to/failed/jobs';
 
-  const findGlBadge = () => wrapper.find(GlBadge);
+  const findGlBadge = () => wrapper.findComponent(GlBadge);
 
   const createProps = (securityBuildsFailedCount) => ({ pipeline: { securityBuildsFailedCount } });
 

ee/spec/frontend/security_dashboard/components/shared/project_pipeline_status_spec.js

@@ -17,9 +17,9 @@ describe('Project Pipeline Status Component', () => {
     },
   };
 
-  const findPipelineStatusBadge = () => wrapper.find(PipelineStatusBadge);
-  const findTimeAgoTooltip = () => wrapper.find(TimeAgoTooltip);
-  const findLink = () => wrapper.find(GlLink);
+  const findPipelineStatusBadge = () => wrapper.findComponent(PipelineStatusBadge);
+  const findTimeAgoTooltip = () => wrapper.findComponent(TimeAgoTooltip);
+  const findLink = () => wrapper.findComponent(GlLink);
   const findAutoFixMrsLink = () => wrapper.findByTestId('auto-fix-mrs-link');
 
   const createWrapper = (options = {}) => {
@@ -100,7 +100,7 @@ describe('Project Pipeline Status Component', () => {
       });
 
       it('renders a link to open auto-fix MRs if any', () => {
-        const link = findAutoFixMrsLink().find(GlLink);
+        const link = findAutoFixMrsLink().findComponent(GlLink);
         expect(link.exists()).toBe(true);
         expect(link.attributes('href')).toBe('/merge_requests?label_name=GitLab-auto-fix');
       });

ee/spec/frontend/security_dashboard/components/shared/project_security_status_chart_spec.js

@@ -44,11 +44,12 @@ describe('Vulnerability Severity component', () => {
     });
   };
 
-  const findHelpLink = () => wrapper.find(GlLink);
+  const findHelpLink = () => wrapper.findComponent(GlLink);
   const findHeader = () => wrapper.find('h4');
   const findDescription = () => wrapper.find('p');
-  const findAccordionItemByGrade = (grade) => wrapper.find({ ref: `accordionItem${grade}` });
-  const findProjectName = (accordion) => accordion.findAll(GlLink);
+  const findAccordionItemByGrade = (grade) =>
+    wrapper.findComponent({ ref: `accordionItem${grade}` });
+  const findProjectName = (accordion) => accordion.findAllComponents(GlLink);
 
   afterEach(() => {
     wrapper.destroy();

ee/spec/frontend/security_dashboard/components/shared/selection_summary_spec.js

@@ -56,7 +56,7 @@ describe('Selection Summary component', () => {
 
     describe('with selected state', () => {
       beforeEach(async () => {
-        wrapper.find(StatusDropdown).vm.$emit('change', { action: 'confirm' });
+        wrapper.findComponent(StatusDropdown).vm.$emit('change', { action: 'confirm' });
         await wrapper.vm.$nextTick();
       });
 
@@ -71,7 +71,7 @@ describe('Selection Summary component', () => {
 
     describe('with no selected state', () => {
       beforeEach(async () => {
-        wrapper.find(StatusDropdown).vm.$emit('change', { action: null });
+        wrapper.findComponent(StatusDropdown).vm.$emit('change', { action: null });
         await wrapper.vm.$nextTick();
       });
 
@@ -109,7 +109,7 @@ describe('Selection Summary component', () => {
     ];
 
     const submitForm = async () => {
-      wrapper.find(StatusDropdown).vm.$emit('change', { action, payload });
+      wrapper.findComponent(StatusDropdown).vm.$emit('change', { action, payload });
       findForm().trigger('submit');
       await waitForPromises();
     };

ee/spec/frontend/security_dashboard/components/shared/vulnerability_count_list_layout_spec.js

@@ -6,8 +6,8 @@ import VulnerabilityCountListLayout from 'ee/security_dashboard/components/share
 describe('Vulnerabilities count list component', () => {
   let wrapper;
 
-  const findAlert = () => wrapper.find(GlAlert);
-  const findVulnerability = () => wrapper.findAll(VulnerabilityCount);
+  const findAlert = () => wrapper.findComponent(GlAlert);
+  const findVulnerability = () => wrapper.findAllComponents(VulnerabilityCount);
 
   const createWrapper = ({ propsData } = {}) => {
     return shallowMount(VulnerabilityCountListLayout, {

ee/spec/frontend/security_dashboard/components/shared/vulnerability_count_spec.js

@@ -7,8 +7,8 @@ describe('Vulnerability Count', () => {
   let wrapper;
 
   const findCard = () => wrapper.findComponent(GlCard);
-  const findBadge = () => wrapper.find(SeverityBadge);
-  const findBody = () => wrapper.find({ ref: 'body' });
+  const findBadge = () => wrapper.findComponent(SeverityBadge);
+  const findBody = () => wrapper.findComponent({ ref: 'body' });
 
   function mountComponent({ props } = {}) {
     wrapper = shallowMount(VulnerabilityCount, {

ee/spec/frontend/security_dashboard/components/shared/vulnerability_list_spec.js

@@ -60,7 +60,7 @@ describe('Vulnerability list component', () => {
   const findDataCells = (label) => wrapper.findAll(`[data-testid="${label}"]`);
   const findLocationCell = (id) => wrapper.findByTestId(`location-${id}`);
   const findTitleCell = (id) => wrapper.findByTestId(`title-${id}`);
-  const findLocationTextWrapper = (cell) => cell.find(GlTruncate);
+  const findLocationTextWrapper = (cell) => cell.findComponent(GlTruncate);
   const findFiltersProducedNoResults = () => wrapper.findComponent(FiltersProducedNoResults);
   const findDashboardHasNoVulnerabilities = () =>
     wrapper.findComponent(DashboardHasNoVulnerabilities);
@@ -510,14 +510,14 @@ describe('Vulnerability list component', () => {
 
     it('should render the remediated info badge on the first vulnerability', () => {
       const row = findRow(0);
-      const badge = row.find(RemediatedBadge);
+      const badge = row.findComponent(RemediatedBadge);
 
       expect(badge.exists()).toEqual(true);
     });
 
     it('should not render the remediated info badge on the second vulnerability', () => {
       const row = findRow(1);
-      const badge = row.find(RemediatedBadge);
+      const badge = row.findComponent(RemediatedBadge);
 
       expect(badge.exists()).toEqual(false);
     });
@@ -530,7 +530,7 @@ describe('Vulnerability list component', () => {
 
     it('should show the loading state', () => {
       expect(findCell('status').exists()).toEqual(false);
-      expect(wrapper.find(GlSkeletonLoading).exists()).toEqual(true);
+      expect(wrapper.findComponent(GlSkeletonLoading).exists()).toEqual(true);
     });
   });
 

ee/spec/frontend/security_dashboard/components/shared/vulnerability_report/vulnerability_list_spec.js

@@ -67,7 +67,7 @@ describe('Vulnerability list component', () => {
   const findDataCells = (label) => wrapper.findAll(`[data-testid="${label}"]`);
   const findLocationCell = (id) => wrapper.findByTestId(`location-${id}`);
   const findTitleCell = (id) => wrapper.findByTestId(`title-${id}`);
-  const findLocationTextWrapper = (cell) => cell.find(GlTruncate);
+  const findLocationTextWrapper = (cell) => cell.findComponent(GlTruncate);
   const findFiltersProducedNoResults = () => wrapper.findComponent(FiltersProducedNoResults);
   const findDashboardHasNoVulnerabilities = () =>
     wrapper.findComponent(DashboardHasNoVulnerabilities);
@@ -150,7 +150,7 @@ describe('Vulnerability list component', () => {
     });
 
     it('should portal the selection summary to the expected portal', () => {
-      expect(wrapper.find(Portal).attributes('to')).toBe(portalName);
+      expect(wrapper.findComponent(Portal).attributes('to')).toBe(portalName);
     });
 
     it('should not show the selection summary if no vulnerabilities are selected', () => {
@@ -529,14 +529,14 @@ describe('Vulnerability list component', () => {
 
     it('should render the remediated info badge on the first vulnerability', () => {
       const row = findRow(0);
-      const badge = row.find(RemediatedBadge);
+      const badge = row.findComponent(RemediatedBadge);
 
       expect(badge.exists()).toEqual(true);
     });
 
     it('should not render the remediated info badge on the second vulnerability', () => {
       const row = findRow(1);
-      const badge = row.find(RemediatedBadge);
+      const badge = row.findComponent(RemediatedBadge);
 
       expect(badge.exists()).toEqual(false);
     });
@@ -551,7 +551,7 @@ describe('Vulnerability list component', () => {
       createWrapper({ props: { isLoading, vulnerabilities } });
 
       expect(findCell('status').exists()).toEqual(!isLoading);
-      expect(wrapper.find(GlSkeletonLoading).exists()).toEqual(isLoading);
+      expect(wrapper.findComponent(GlSkeletonLoading).exists()).toEqual(isLoading);
     });
   });
 

ee/spec/frontend/security_dashboard/components/shared/vulnerability_report_layout_spec.js

@@ -26,7 +26,7 @@ describe('Vulnerability Report Layout component', () => {
   const findHeader = () => wrapper.find('header');
   const findStickySection = () => wrapper.findByTestId('sticky-section');
   const findSummarySection = () => wrapper.findByTestId('summary-section');
-  const findTabs = () => wrapper.find(GlTabs);
+  const findTabs = () => wrapper.findComponent(GlTabs);
 
   afterEach(() => {
     wrapper.destroy();
@@ -55,7 +55,7 @@ describe('Vulnerability Report Layout component', () => {
         },
       });
 
-      expect(findFn().find(DummyComponent).exists()).toBe(true);
+      expect(findFn().findComponent(DummyComponent).exists()).toBe(true);
     });
   });
 

ee/spec/frontend/security_dashboard/store/modules/vulnerabilities/data/mock_data_vulnerabilities_count.json

 {
-   "critical": 2,
-   "high": 4,
-   "low": 7,
-   "medium": 8,
-   "unknown": 0
-}
\ No newline at end of file
+  "critical": 2,
+  "high": 4,
+  "low": 7,
+  "medium": 8,
+  "unknown": 0
+}