Replace usage of find/findAll in misc ee components (2/5)

* migrate to proper use of findComponent/findAllComponents

ee/spec/frontend/epic/components/epic_form_spec.js

@@ -47,8 +47,8 @@ describe('ee/epic/components/epic_form.vue', () => {
     wrapper = null;
   });
 
-  const findForm = () => wrapper.find(GlForm);
-  const findLabels = () => wrapper.find(LabelsSelectWidget);
+  const findForm = () => wrapper.findComponent(GlForm);
+  const findLabels = () => wrapper.findComponent(LabelsSelectWidget);
   const findTitle = () => wrapper.find('[data-testid="epic-title"]');
   const findDescription = () => wrapper.find('[data-testid="epic-description"]');
   const findConfidentialityCheck = () => wrapper.find('[data-testid="epic-confidentiality"]');

ee/spec/frontend/epic/components/epic_header_spec.js

@@ -31,7 +31,8 @@ describe('EpicHeaderComponent', () => {
   const findStatusBox = () => wrapper.find('[data-testid="status-box"]');
   const findStatusIcon = () => wrapper.find('[data-testid="status-icon"]');
   const findStatusText = () => wrapper.find('[data-testid="status-text"]');
-  const findConfidentialIcon = () => wrapper.find('[data-testid="confidential-icon"]').find(GlIcon);
+  const findConfidentialIcon = () =>
+    wrapper.find('[data-testid="confidential-icon"]').findComponent(GlIcon);
   const findAuthorDetails = () => wrapper.find('[data-testid="author-details"]');
   const findActionButtons = () => wrapper.find('[data-testid="action-buttons"]');
   const findToggleStatusButton = () => wrapper.find('[data-testid="toggle-status-button"]');
@@ -114,7 +115,7 @@ describe('EpicHeaderComponent', () => {
       const statusBox = findStatusBox();
 
       expect(statusBox.exists()).toBe(true);
-      expect(statusBox.find(GlIcon).props('name')).toBe('issue-open-m');
+      expect(statusBox.findComponent(GlIcon).props('name')).toBe('issue-open-m');
       expect(statusBox.find('span').text()).toBe('Open');
     });
 
@@ -133,8 +134,8 @@ describe('EpicHeaderComponent', () => {
       const epicDetails = findAuthorDetails();
 
       expect(epicDetails.exists()).toBe(true);
-      expect(epicDetails.find(TimeagoTooltip).exists()).toBe(true);
-      expect(epicDetails.find(UserAvatarLink).exists()).toBe(true);
+      expect(epicDetails.findComponent(TimeagoTooltip).exists()).toBe(true);
+      expect(epicDetails.findComponent(UserAvatarLink).exists()).toBe(true);
     });
 
     it('renders action buttons element', () => {

ee/spec/frontend/epic/components/epic_sidebar_spec.js

@@ -103,11 +103,11 @@ describe('EpicSidebarComponent', () => {
     });
 
     it('renders SidebarSubscriptionsWidget', () => {
-      expect(wrapper.find(SidebarSubscriptionsWidget).exists()).toBe(true);
+      expect(wrapper.findComponent(SidebarSubscriptionsWidget).exists()).toBe(true);
     });
 
     it('renders SidebarTodoWidget when user is signed in', () => {
-      const todoWidget = wrapper.find(SidebarTodoWidget);
+      const todoWidget = wrapper.findComponent(SidebarTodoWidget);
       expect(todoWidget.exists()).toBe(true);
       expect(todoWidget.props()).toMatchObject({
         issuableId: 'gid://gitlab/Epic/1',
@@ -118,7 +118,7 @@ describe('EpicSidebarComponent', () => {
     });
 
     it('renders SidebarReferenceWidget', () => {
-      expect(wrapper.find(SidebarReferenceWidget).exists()).toBe(true);
+      expect(wrapper.findComponent(SidebarReferenceWidget).exists()).toBe(true);
     });
 
     describe('when sub-epics feature is not available', () => {
@@ -130,13 +130,13 @@ describe('EpicSidebarComponent', () => {
 
         await nextTick();
 
-        expect(wrapper.find(SidebarAncestorsWidget).exists()).toBe(false);
+        expect(wrapper.findComponent(SidebarAncestorsWidget).exists()).toBe(false);
       });
     });
 
     describe('when sub-epics feature is available', () => {
       it('renders ancestors list', () => {
-        expect(wrapper.find(SidebarAncestorsWidget).exists()).toBe(true);
+        expect(wrapper.findComponent(SidebarAncestorsWidget).exists()).toBe(true);
       });
     });
 
@@ -155,7 +155,7 @@ describe('EpicSidebarComponent', () => {
     });
 
     it('does not render SidebarTodoWidget', () => {
-      expect(wrapper.find(SidebarTodoWidget).exists()).toBe(false);
+      expect(wrapper.findComponent(SidebarTodoWidget).exists()).toBe(false);
     });
   });
 

ee/spec/frontend/epics_list/components/epics_list_empty_state_spec.js

@@ -32,7 +32,7 @@ describe('EpicsListEmptyState', () => {
 
   describe('template', () => {
     it('renders gl-empty-state component', () => {
-      const emptyStateEl = wrapper.find(GlEmptyState);
+      const emptyStateEl = wrapper.findComponent(GlEmptyState);
 
       expect(emptyStateEl.exists()).toBe(true);
       expect(emptyStateEl.props('svgPath')).toBe('/assets/illustrations/empty-state/epics.svg');

ee/spec/frontend/epics_list/components/epics_list_root_spec.js

@@ -171,7 +171,7 @@ describe('EpicsListRoot', () => {
   });
 
   describe('template', () => {
-    const getIssuableList = () => wrapper.find(IssuableList);
+    const getIssuableList = () => wrapper.findComponent(IssuableList);
 
     it('renders issuable-list component', async () => {
       jest.spyOn(wrapper.vm, 'getFilteredSearchTokens');

ee/spec/frontend/escalation_policies/escalation_rule_spec.js

@@ -49,13 +49,14 @@ describe('EscalationRule', () => {
   });
 
   const findStatusDropdown = () => wrapper.findByTestId('alert-status-dropdown');
-  const findStatusDropdownOptions = () => findStatusDropdown().findAll(GlDropdownItem);
+  const findStatusDropdownOptions = () => findStatusDropdown().findAllComponents(GlDropdownItem);
 
   const findActionDropdown = () => wrapper.findByTestId('action-dropdown');
-  const findActionDropdownOptions = () => findActionDropdown().findAll(GlDropdownItem);
+  const findActionDropdownOptions = () => findActionDropdown().findAllComponents(GlDropdownItem);
 
   const findSchedulesDropdown = () => wrapper.findByTestId('schedules-dropdown');
-  const findSchedulesDropdownOptions = () => findSchedulesDropdown().findAll(GlDropdownItem);
+  const findSchedulesDropdownOptions = () =>
+    findSchedulesDropdown().findAllComponents(GlDropdownItem);
   const findUserSelect = () => wrapper.findComponent(UserSelect);
   const findFormGroup = () => wrapper.findComponent(GlFormGroup);
 

ee/spec/frontend/external_issues_list/components/external_issues_list_empty_state_spec.js

@@ -139,11 +139,11 @@ describe('ExternalIssuesListEmptyState', () => {
 
   describe('template', () => {
     it('renders gl-empty-state component', () => {
-      expect(wrapper.find(GlEmptyState).exists()).toBe(true);
+      expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
     });
 
     it('renders empty state title', async () => {
-      const emptyStateEl = wrapper.find(GlEmptyState);
+      const emptyStateEl = wrapper.findComponent(GlEmptyState);
 
       expect(emptyStateEl.props()).toMatchObject({
         svgPath: mockProvide.emptyStatePath,
@@ -174,7 +174,7 @@ describe('ExternalIssuesListEmptyState', () => {
     });
 
     it('renders empty state description', () => {
-      const descriptionEl = wrapper.find(GlSprintf);
+      const descriptionEl = wrapper.findComponent(GlSprintf);
 
       expect(descriptionEl.exists()).toBe(true);
       expect(descriptionEl.attributes('message')).toBe(
@@ -192,7 +192,7 @@ describe('ExternalIssuesListEmptyState', () => {
 
       await wrapper.vm.$nextTick();
 
-      const descriptionEl = wrapper.find(GlSprintf);
+      const descriptionEl = wrapper.findComponent(GlSprintf);
 
       expect(descriptionEl.exists()).toBe(false);
     });

ee/spec/frontend/external_issues_show/components/sidebar/assignee_spec.js

@@ -78,7 +78,7 @@ describe('ExternalIssuesSidebarAssignee', () => {
       });
 
       it('renders AssigneeTitle with correct props', () => {
-        const title = wrapper.find(AssigneeTitle);
+        const title = wrapper.findComponent(AssigneeTitle);
 
         expect(title.exists()).toBe(true);
         expect(title.props('numberOfAssignees')).toBe(1);

ee/spec/frontend/groups/components/invite_members_spec.js

@@ -18,8 +18,8 @@ describe('User invites', () => {
     );
   };
 
-  const inputs = () => wrapper.findAll(GlFormInput);
-  const addButton = () => wrapper.find(GlButton);
+  const inputs = () => wrapper.findAllComponents(GlFormInput);
+  const addButton = () => wrapper.findComponent(GlButton);
 
   afterEach(() => {
     wrapper.destroy();

ee/spec/frontend/groups/components/registration_trial_toggle_spec.js

@@ -22,11 +22,13 @@ describe('Registration Trial Toggle', () => {
 
   describe('Default state', () => {
     it('renders component properly', () => {
-      expect(wrapper.find(RegistrationTrialToggle).exists()).toBe(true);
+      expect(wrapper.findComponent(RegistrationTrialToggle).exists()).toBe(true);
     });
 
     it('shows the toggle component', () => {
-      expect(wrapper.find(GlToggle).props('label')).toBe(RegistrationTrialToggle.i18n.toggleLabel);
+      expect(wrapper.findComponent(GlToggle).props('label')).toBe(
+        RegistrationTrialToggle.i18n.toggleLabel,
+      );
     });
 
     it('sets the default value to be false', () => {
@@ -40,7 +42,7 @@ describe('Registration Trial Toggle', () => {
     });
 
     it('emits another event', () => {
-      wrapper.find(GlToggle).vm.$emit('change', true);
+      wrapper.findComponent(GlToggle).vm.$emit('change', true);
 
       expect(wrapper.vm.trial).toBe(true);
       expect(wrapper.emitted().changed).toEqual([[{ trial: false }], [{ trial: true }]]);

ee/spec/frontend/groups/settings/compliance_frameworks/components/list_empty_state_spec.js

@@ -6,7 +6,7 @@ import ListEmptyState from 'ee/groups/settings/compliance_frameworks/components/
 describe('ListEmptyState', () => {
   let wrapper;
 
-  const findEmptyState = () => wrapper.find(GlEmptyState);
+  const findEmptyState = () => wrapper.findComponent(GlEmptyState);
   const createComponent = (props = {}) => {
     wrapper = shallowMount(ListEmptyState, {
       propsData: {

ee/spec/frontend/groups/settings/compliance_frameworks/init_form_spec.js

@@ -15,7 +15,7 @@ describe('createComplianceFrameworksFormApp', () => {
   const graphqlFieldName = 'field';
   const testId = '1';
 
-  const findFormApp = (form) => wrapper.find(form);
+  const findFormApp = (form) => wrapper.findComponent(form);
 
   const setUpDocument = (id = null) => {
     el = document.createElement('div');

ee/spec/frontend/groups/settings/components/comma_separated_list_token_selector_spec.js

@@ -30,7 +30,7 @@ describe('CommaSeparatedListTokenSelector', () => {
     });
   };
 
-  const findTokenSelector = () => wrapper.find(GlTokenSelector);
+  const findTokenSelector = () => wrapper.findComponent(GlTokenSelector);
 
   const findTokenSelectorInput = () => findTokenSelector().find('input[type="text"]');
 
@@ -84,7 +84,7 @@ describe('CommaSeparatedListTokenSelector', () => {
 
         await nextTick();
 
-        wrapper.findAll(GlToken).wrappers.forEach((tokenWrapper, index) => {
+        wrapper.findAllComponents(GlToken).wrappers.forEach((tokenWrapper, index) => {
           expect(tokenWrapper.text()).toBe(expectedTokens[index]);
         });
       },

ee/spec/frontend/incidents/components/published_cell_spec.js

@@ -33,7 +33,7 @@ describe('Incidents Published Cell', () => {
     });
 
     it('render a cell with unpublished by default', () => {
-      expect(findCell().find(GlIcon).exists()).toBe(false);
+      expect(findCell().findComponent(GlIcon).exists()).toBe(false);
       expect(findCell().text()).toBe('Unpublished');
     });
 
@@ -41,7 +41,7 @@ describe('Incidents Published Cell', () => {
       wrapper.setProps({ statusPagePublishedIncident: true });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(findCell().find(GlIcon).exists()).toBe(true);
+        expect(findCell().findComponent(GlIcon).exists()).toBe(true);
       });
     });
   });

ee/spec/frontend/incidents_settings/components/service_level_agreement_form_spec.js

@@ -34,9 +34,9 @@ describe('Alert integration settings form', () => {
     }
   });
 
-  const findForm = () => wrapper.find(GlForm);
-  const findFormGroup = () => wrapper.find(GlFormGroup);
-  const findSubmitButton = () => wrapper.find(GlButton);
+  const findForm = () => wrapper.findComponent(GlForm);
+  const findFormGroup = () => wrapper.findComponent(GlFormGroup);
+  const findSubmitButton = () => wrapper.findComponent(GlButton);
 
   it('renders an empty component when feature not available', () => {
     mountComponent({ provide: { serviceLevelAgreementSettings: { available: false } } });

ee/spec/frontend/insights/components/insights_chart_spec.js

@@ -38,8 +38,8 @@ describe('Insights chart component', () => {
     it('displays the chart loader in the container', () => {
       wrapper = factory(DEFAULT_PROPS);
 
-      expect(wrapper.find(ChartSkeletonLoader).exists()).toBe(true);
-      expect(wrapper.find(ResizableChartContainer).exists()).toBe(true);
+      expect(wrapper.findComponent(ChartSkeletonLoader).exists()).toBe(true);
+      expect(wrapper.findComponent(ResizableChartContainer).exists()).toBe(true);
     });
   });
 
@@ -58,9 +58,9 @@ describe('Insights chart component', () => {
         data,
       });
 
-      expect(wrapper.find(ChartSkeletonLoader).exists()).toBe(false);
-      expect(wrapper.find(ResizableChartContainer).exists()).toBe(true);
-      expect(wrapper.find(component).exists()).toBe(true);
+      expect(wrapper.findComponent(ChartSkeletonLoader).exists()).toBe(false);
+      expect(wrapper.findComponent(ResizableChartContainer).exists()).toBe(true);
+      expect(wrapper.findComponent(component).exists()).toBe(true);
     });
   });
 
@@ -76,9 +76,9 @@ describe('Insights chart component', () => {
     });
 
     it('displays info about the error', () => {
-      expect(wrapper.find(ChartSkeletonLoader).exists()).toBe(false);
-      expect(wrapper.find(ResizableChartContainer).exists()).toBe(false);
-      expect(wrapper.find(InsightsChartError).exists()).toBe(true);
+      expect(wrapper.findComponent(ChartSkeletonLoader).exists()).toBe(false);
+      expect(wrapper.findComponent(ResizableChartContainer).exists()).toBe(false);
+      expect(wrapper.findComponent(InsightsChartError).exists()).toBe(true);
     });
   });
 });

ee/spec/frontend/insights/components/insights_page_spec.js

@@ -49,7 +49,7 @@ describe('Insights page component', () => {
     }, {});
   };
 
-  const findInsightsChartData = () => wrapper.find(InsightsChart);
+  const findInsightsChartData = () => wrapper.findComponent(InsightsChart);
 
   beforeEach(() => {
     store = createStore();
@@ -71,7 +71,7 @@ describe('Insights page component', () => {
     });
 
     it('shows an empty state', () => {
-      expect(wrapper.find(GlEmptyState).exists()).toBe(true);
+      expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
     });
   });
 
@@ -88,7 +88,7 @@ describe('Insights page component', () => {
     });
 
     it('does not show empty state', () => {
-      expect(wrapper.find(GlEmptyState).exists()).toBe(false);
+      expect(wrapper.findComponent(GlEmptyState).exists()).toBe(false);
     });
 
     describe('pageConfig changes', () => {
@@ -97,7 +97,7 @@ describe('Insights page component', () => {
 
         await wrapper.vm.$nextTick();
 
-        expect(wrapper.find(GlEmptyState).exists()).toBe(true);
+        expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
       });
     });
 
@@ -113,7 +113,7 @@ describe('Insights page component', () => {
       });
 
       it('does not display chart', () => {
-        expect(wrapper.find(GlColumnChart).exists()).toBe(false);
+        expect(wrapper.findComponent(GlColumnChart).exists()).toBe(false);
       });
     });
 

ee/spec/frontend/insights/components/insights_spec.js

@@ -86,13 +86,13 @@ describe('Insights component', () => {
 
       it('has the correct nav tabs', async () => {
         await wrapper.vm.$nextTick();
-        expect(wrapper.find(GlDropdown).exists()).toBe(true);
-        expect(wrapper.find(GlDropdown).find(GlDropdownItem).text()).toBe(title);
+        expect(wrapper.findComponent(GlDropdown).exists()).toBe(true);
+        expect(wrapper.findComponent(GlDropdown).findComponent(GlDropdownItem).text()).toBe(title);
       });
 
       it('should not disable the tab selector', async () => {
         await wrapper.vm.$nextTick();
-        expect(wrapper.find(GlDropdown).attributes().disabled).toBeUndefined();
+        expect(wrapper.findComponent(GlDropdown).attributes().disabled).toBeUndefined();
       });
     });
 
@@ -112,13 +112,13 @@ describe('Insights component', () => {
 
       it('has the correct nav tabs', async () => {
         await wrapper.vm.$nextTick();
-        expect(wrapper.find(GlDropdown).exists()).toBe(true);
-        expect(wrapper.find(GlDropdown).find(GlDropdownItem).text()).toBe(title);
+        expect(wrapper.findComponent(GlDropdown).exists()).toBe(true);
+        expect(wrapper.findComponent(GlDropdown).findComponent(GlDropdownItem).text()).toBe(title);
       });
 
       it('disables the tab selector', async () => {
         await wrapper.vm.$nextTick();
-        expect(wrapper.find(GlDropdown).attributes()).toMatchObject({ disabled: 'true' });
+        expect(wrapper.findComponent(GlDropdown).attributes()).toMatchObject({ disabled: 'true' });
       });
     });
 
@@ -142,7 +142,7 @@ describe('Insights component', () => {
 
       it('enables the tab selector', async () => {
         await wrapper.vm.$nextTick();
-        expect(wrapper.find(GlDropdown).attributes()).toMatchObject({ disabled: 'true' });
+        expect(wrapper.findComponent(GlDropdown).attributes()).toMatchObject({ disabled: 'true' });
       });
     });
 
@@ -165,7 +165,7 @@ describe('Insights component', () => {
 
       it('disables the tab selector', async () => {
         await wrapper.vm.$nextTick();
-        expect(wrapper.find(GlDropdown).attributes()).toMatchObject({ disabled: 'true' });
+        expect(wrapper.findComponent(GlDropdown).attributes()).toMatchObject({ disabled: 'true' });
       });
     });
 
@@ -189,7 +189,7 @@ describe('Insights component', () => {
 
       it('enables the tab selector', async () => {
         await wrapper.vm.$nextTick();
-        expect(wrapper.find(GlDropdown).attributes().disabled).toBeUndefined();
+        expect(wrapper.findComponent(GlDropdown).attributes().disabled).toBeUndefined();
       });
     });
 
@@ -213,7 +213,7 @@ describe('Insights component', () => {
 
       it('enables the tab selector', async () => {
         await wrapper.vm.$nextTick();
-        expect(wrapper.find(GlDropdown).attributes().disabled).toBeUndefined();
+        expect(wrapper.findComponent(GlDropdown).attributes().disabled).toBeUndefined();
       });
     });
   });
@@ -226,14 +226,14 @@ describe('Insights component', () => {
 
     it('it displays a warning', async () => {
       await wrapper.vm.$nextTick();
-      expect(wrapper.find(GlEmptyState).attributes()).toMatchObject({
+      expect(wrapper.findComponent(GlEmptyState).attributes()).toMatchObject({
         title: 'Invalid Insights config file detected',
       });
     });
 
     it('does not display dropdown', async () => {
       await wrapper.vm.$nextTick();
-      expect(wrapper.find(GlDropdown).exists()).toBe(false);
+      expect(wrapper.findComponent(GlDropdown).exists()).toBe(false);
     });
   });
 
@@ -245,14 +245,14 @@ describe('Insights component', () => {
 
     it('it displays a warning', async () => {
       await wrapper.vm.$nextTick();
-      expect(wrapper.find(GlAlert).text()).toContain(
+      expect(wrapper.findComponent(GlAlert).text()).toContain(
         'This project is filtered out in the insights.yml file',
       );
     });
 
     it('does not display dropdown', async () => {
       await wrapper.vm.$nextTick();
-      expect(wrapper.find(GlDropdown).exists()).toBe(false);
+      expect(wrapper.findComponent(GlDropdown).exists()).toBe(false);
     });
   });
 

ee/spec/frontend/integrations/edit/components/jira_issue_creation_vulnerabilities_spec.js

@@ -43,7 +43,7 @@ describe('JiraIssuesFields', () => {
   const findEnableJiraVulnerabilities = () => wrapper.findByTestId('enable-jira-vulnerabilities');
   const findIssueTypeSection = () => wrapper.findByTestId('issue-type-section');
   const findIssueTypeDropdown = () => wrapper.findComponent(GlDropdown);
-  const findAllIssueDropdownItems = () => findIssueTypeDropdown().findAll(GlDropdownItem);
+  const findAllIssueDropdownItems = () => findIssueTypeDropdown().findAllComponents(GlDropdownItem);
   const findFetchIssueTypeButton = () => wrapper.findByTestId('fetch-issue-types');
   const findFetchErrorAlert = () => wrapper.findComponent(GlAlert);
   const setEnableJiraVulnerabilitiesChecked = (isChecked) =>