Replace usage of find/findAll in related_items_tree

* migrate to proper use of findComponent/findAllComponents

ee/spec/frontend/related_items_tree/components/create_epic_form_spec.js

@@ -114,7 +114,7 @@ describe('RelatedItemsTree', () => {
       describe('onFormSubmit', () => {
         it('emits `createEpicFormSubmit` event on component with input value as param', () => {
           const value = 'foo';
-          wrapper.find(GlFormInput).vm.$emit('input', value);
+          wrapper.findComponent(GlFormInput).vm.$emit('input', value);
           wrapper.vm.onFormSubmit();
 
           expect(wrapper.emitted().createEpicFormSubmit).toBeTruthy();
@@ -153,20 +153,20 @@ describe('RelatedItemsTree', () => {
 
     describe('template', () => {
       it('renders input element within form', () => {
-        const inputEl = wrapper.find(GlFormInput);
+        const inputEl = wrapper.findComponent(GlFormInput);
 
         expect(inputEl.attributes('placeholder')).toBe('New epic title');
       });
 
       it('renders form action buttons', () => {
-        const actionButtons = wrapper.findAll(GlButton);
+        const actionButtons = wrapper.findAllComponents(GlButton);
 
         expect(actionButtons.at(0).text()).toBe('Create epic');
         expect(actionButtons.at(1).text()).toBe('Cancel');
       });
 
       it('renders parent group item as the first dropdown item', () => {
-        const items = wrapper.findAll(GlDropdownItem);
+        const items = wrapper.findAllComponents(GlDropdownItem);
 
         expect(items.at(0).text()).toContain(mockParentItem.groupName);
       });

ee/spec/frontend/related_items_tree/components/create_issue_form_spec.js

@@ -205,7 +205,9 @@ describe('CreateIssueForm', () => {
 
       const content = projectsDropdownButton.find('[data-testid="recent-items-content"]');
       expect(content.exists()).toBe(true);
-      expect(content.findAll(GlDropdownItem)).toHaveLength(mockFrequentlyUsedProjects.length);
+      expect(content.findAllComponents(GlDropdownItem)).toHaveLength(
+        mockFrequentlyUsedProjects.length,
+      );
 
       removeLocalstorageFrequentItems();
     });
@@ -220,7 +222,9 @@ describe('CreateIssueForm', () => {
       const projectsDropdownButton = wrapper.findComponent(GlDropdown);
 
       expect(
-        projectsDropdownButton.find('[data-testid="recent-items-content"]').findAll(GlDropdownItem),
+        projectsDropdownButton
+          .find('[data-testid="recent-items-content"]')
+          .findAllComponents(GlDropdownItem),
       ).toHaveLength(mockMixedFrequentlyUsedProjects.length - 1);
 
       removeLocalstorageFrequentItems();

ee/spec/frontend/related_items_tree/components/epic_health_status_spec.js

@@ -49,7 +49,7 @@ describe('EpicHealthStatus', () => {
     });
 
     it('renders tooltip', () => {
-      const tooltip = wrapper.find(GlTooltip);
+      const tooltip = wrapper.findComponent(GlTooltip);
 
       expect(tooltip.exists()).toBe(true);
     });

ee/spec/frontend/related_items_tree/components/related_items_tree_app_spec.js

@@ -41,8 +41,8 @@ describe('RelatedItemsTreeApp', () => {
   let axiosMock;
   let wrapper;
 
-  const findCreateIssueForm = () => wrapper.find(CreateIssueForm);
-  const findAddItemForm = () => wrapper.find(AddIssuableForm);
+  const findCreateIssueForm = () => wrapper.findComponent(CreateIssueForm);
+  const findAddItemForm = () => wrapper.findComponent(AddIssuableForm);
 
   beforeEach(() => {
     axiosMock = new AxiosMockAdapter(axios);
@@ -209,7 +209,7 @@ describe('RelatedItemsTreeApp', () => {
       });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(GlLoadingIcon).isVisible()).toBe(true);
+        expect(wrapper.findComponent(GlLoadingIcon).isVisible()).toBe(true);
       });
     });
 
@@ -228,7 +228,7 @@ describe('RelatedItemsTreeApp', () => {
 
     it('renders tree header component', () =>
       wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.find(RelatedItemsTreeHeader).isVisible()).toBe(true);
+        expect(wrapper.findComponent(RelatedItemsTreeHeader).isVisible()).toBe(true);
       }));
 
     it('renders item add/create form container element', () => {

ee/spec/frontend/related_items_tree/components/related_items_tree_header_spec.js

@@ -47,7 +47,7 @@ describe('RelatedItemsTree', () => {
   describe('RelatedItemsTreeHeader', () => {
     let wrapper;
 
-    const findEpicsIssuesSplitButton = () => wrapper.find(EpicActionsSplitButton);
+    const findEpicsIssuesSplitButton = () => wrapper.findComponent(EpicActionsSplitButton);
 
     afterEach(() => {
       wrapper.destroy();
@@ -59,12 +59,12 @@ describe('RelatedItemsTree', () => {
       });
 
       it('returns string containing epic count based on available direct children within state', () => {
-        expect(wrapper.find(GlTooltip).text()).toContain(`Epics •
+        expect(wrapper.findComponent(GlTooltip).text()).toContain(`Epics •
         1 open, 1 closed`);
       });
 
       it('returns string containing issue count based on available direct children within state', () => {
-        expect(wrapper.find(GlTooltip).text()).toContain(`Issues •
+        expect(wrapper.findComponent(GlTooltip).text()).toContain(`Issues •
         2 open, 1 closed`);
       });
     });
@@ -85,7 +85,7 @@ describe('RelatedItemsTree', () => {
       });
 
       it('toggle labels component is visible', () => {
-        expect(wrapper.find(ToggleLabels).isVisible()).toBe(true);
+        expect(wrapper.findComponent(ToggleLabels).isVisible()).toBe(true);
       });
     });
 
@@ -211,7 +211,7 @@ describe('RelatedItemsTree', () => {
 
       it('renders epics count and gl-icon', () => {
         const epicsEl = wrapper.findAll('.issue-count-badge > span').at(0);
-        const epicIcon = epicsEl.find(GlIcon);
+        const epicIcon = epicsEl.findComponent(GlIcon);
 
         expect(epicsEl.text().trim()).toContain('2');
         expect(epicIcon.isVisible()).toBe(true);
@@ -233,7 +233,7 @@ describe('RelatedItemsTree', () => {
         });
 
         it('does not render health status', () => {
-          expect(wrapper.find(EpicHealthStatus).exists()).toBe(false);
+          expect(wrapper.findComponent(EpicHealthStatus).exists()).toBe(false);
         });
       });
 
@@ -248,13 +248,13 @@ describe('RelatedItemsTree', () => {
         });
 
         it('does not render health status', () => {
-          expect(wrapper.find(EpicHealthStatus).exists()).toBe(true);
+          expect(wrapper.findComponent(EpicHealthStatus).exists()).toBe(true);
         });
       });
 
       it('renders issues count and gl-icon', () => {
         const issuesEl = wrapper.findAll('.issue-count-badge > span').at(1);
-        const issueIcon = issuesEl.find(GlIcon);
+        const issueIcon = issuesEl.findComponent(GlIcon);
 
         expect(issuesEl.text().trim()).toContain('3');
         expect(issueIcon.isVisible()).toBe(true);
@@ -263,7 +263,7 @@ describe('RelatedItemsTree', () => {
 
       it('renders totalWeight count and gl-icon', () => {
         const weightEl = wrapper.findAll('.issue-count-badge > span').at(2);
-        const weightIcon = weightEl.find(GlIcon);
+        const weightIcon = weightEl.findComponent(GlIcon);
 
         expect(weightEl.text().trim()).toContain('15');
         expect(weightIcon.isVisible()).toBe(true);

ee/spec/frontend/related_items_tree/components/state_tooltip_spec.js

@@ -154,15 +154,15 @@ describe('RelatedItemsTree', () => {
 
     describe('template', () => {
       it('renders gl-tooltip as container element', () => {
-        expect(wrapper.find(GlTooltip).isVisible()).toBe(true);
+        expect(wrapper.findComponent(GlTooltip).isVisible()).toBe(true);
       });
 
       it('renders path in bold', () => {
-        expect(wrapper.find({ ref: 'statePath' }).text().trim()).toBe('/foo/bar#1');
+        expect(wrapper.findComponent({ ref: 'statePath' }).text().trim()).toBe('/foo/bar#1');
       });
 
       it('renders stateText in bold', () => {
-        expect(wrapper.find({ ref: 'stateText' }).text().trim()).toBe('Closed');
+        expect(wrapper.findComponent({ ref: 'stateText' }).text().trim()).toBe('Closed');
       });
 
       it('renders stateTimeInWords', () => {
@@ -170,7 +170,9 @@ describe('RelatedItemsTree', () => {
       });
 
       it('renders stateTimestamp in muted', () => {
-        expect(wrapper.find({ ref: 'stateTimestamp' }).text().trim()).toContain(mockClosedAtYear);
+        expect(wrapper.findComponent({ ref: 'stateTimestamp' }).text().trim()).toContain(
+          mockClosedAtYear,
+        );
       });
     });
   });

ee/spec/frontend/related_items_tree/components/tree_item_body_spec.js

@@ -82,11 +82,11 @@ describe('RelatedItemsTree', () => {
   describe('TreeItemBody', () => {
     let wrapper;
 
-    const findChildLabels = () => wrapper.findAll(GlLabel);
-    const findCountBadge = () => wrapper.find({ ref: 'countBadge' });
+    const findChildLabels = () => wrapper.findAllComponents(GlLabel);
+    const findCountBadge = () => wrapper.findComponent({ ref: 'countBadge' });
     const findEpicHealthStatus = () => wrapper.find('[data-testid="epic-health-status"]');
     const findIssueHealthStatus = () => wrapper.find('[data-testid="issue-health-status"]');
-    const findIssueIcon = () => wrapper.find({ ref: 'stateIconMd' });
+    const findIssueIcon = () => wrapper.findComponent({ ref: 'stateIconMd' });
     const findLink = () => wrapper.findComponent(GlLink);
     const enableHealthStatus = () => {
       wrapper.vm.$store.commit('SET_INITIAL_CONFIG', {
@@ -278,7 +278,7 @@ describe('RelatedItemsTree', () => {
 
       describe('itemHierarchy', () => {
         it('returns string containing item id and item path', () => {
-          const stateTooltip = wrapper.findAll(StateTooltip).at(0);
+          const stateTooltip = wrapper.findAllComponents(StateTooltip).at(0);
           expect(stateTooltip.props('path')).toBe('gitlab-org/gitlab-shell#8');
         });
       });
@@ -381,19 +381,19 @@ describe('RelatedItemsTree', () => {
       });
 
       it('renders item state icon for large screens', () => {
-        const statusIcon = wrapper.findAll(GlIcon).at(0);
+        const statusIcon = wrapper.findAllComponents(GlIcon).at(0);
 
         expect(statusIcon.props('name')).toBe('issues');
       });
 
       it('renders item state tooltip for large screens', () => {
-        const stateTooltip = wrapper.findAll(StateTooltip).at(0);
+        const stateTooltip = wrapper.findAllComponents(StateTooltip).at(0);
 
         expect(stateTooltip.props('state')).toBe(mockItem.state);
       });
 
       it('renders item path in tooltip for large screens', () => {
-        const stateTooltip = wrapper.findAll(StateTooltip).at(0);
+        const stateTooltip = wrapper.findAllComponents(StateTooltip).at(0);
 
         const { itemPath, itemId } = wrapper.vm;
         const path = itemPath + mockItem.pathIdSeparator + itemId;
@@ -403,7 +403,7 @@ describe('RelatedItemsTree', () => {
       });
 
       it('renders confidential icon when `item.confidential` is true', () => {
-        const confidentialIcon = wrapper.findAll(GlIcon).at(1);
+        const confidentialIcon = wrapper.findAllComponents(GlIcon).at(1);
 
         expect(confidentialIcon.isVisible()).toBe(true);
         expect(confidentialIcon.props('name')).toBe('eye-slash');
@@ -415,7 +415,7 @@ describe('RelatedItemsTree', () => {
       });
 
       it('renders item state tooltip for medium and small screens', () => {
-        const stateTooltip = wrapper.findAll(StateTooltip).at(0);
+        const stateTooltip = wrapper.findAllComponents(StateTooltip).at(0);
 
         expect(stateTooltip.props('state')).toBe(mockItem.state);
       });

ee/spec/frontend/related_items_tree/components/tree_item_remove_modal_spec.js

@@ -120,7 +120,7 @@ describe('RelatedItemsTree', () => {
 
     describe('template', () => {
       it('renders modal component', () => {
-        const modal = wrapper.find(GlModal);
+        const modal = wrapper.findComponent(GlModal);
 
         expect(modal.isVisible()).toBe(true);
         expect(modal.attributes('modalid')).toBe('item-remove-confirmation');

ee/spec/frontend/related_items_tree/components/tree_item_spec.js

@@ -132,21 +132,21 @@ describe('RelatedItemsTree', () => {
       });
 
       it('renders expand/collapse button', () => {
-        const chevronButton = wrapper.find(GlButton);
+        const chevronButton = wrapper.findComponent(GlButton);
 
         expect(chevronButton.isVisible()).toBe(true);
         expect(chevronButton.attributes('title')).toBe('Collapse');
       });
 
       it('has the proper class on the expand/collapse button to avoid dragging', () => {
-        const chevronButton = wrapper.find(GlButton);
+        const chevronButton = wrapper.findComponent(GlButton);
 
         expect(chevronButton.attributes('class')).toContain(treeItemChevronBtnClassName);
       });
 
       it('renders expand/collapse icon', () => {
-        const expandedIcon = wrapperExpanded.find(GlIcon);
-        const collapsedIcon = wrapperCollapsed.find(GlIcon);
+        const expandedIcon = wrapperExpanded.findComponent(GlIcon);
+        const collapsedIcon = wrapperCollapsed.findComponent(GlIcon);
 
         expect(expandedIcon.isVisible()).toBe(true);
         expect(expandedIcon.props('name')).toBe('chevron-down');
@@ -161,14 +161,14 @@ describe('RelatedItemsTree', () => {
         });
 
         return wrapper.vm.$nextTick(() => {
-          const loadingIcon = wrapper.find(GlLoadingIcon);
+          const loadingIcon = wrapper.findComponent(GlLoadingIcon);
 
           expect(loadingIcon.isVisible()).toBe(true);
         });
       });
 
       it('renders tree item body component', () => {
-        const itemBody = wrapper.find(TreeItemBody);
+        const itemBody = wrapper.findComponent(TreeItemBody);
 
         expect(itemBody.isVisible()).toBe(true);
       });

ee/spec/frontend/related_items_tree/components/tree_root_spec.js

@@ -452,13 +452,13 @@ describe('RelatedItemsTree', () => {
       });
 
       it('renders `Show more` link', () => {
-        expect(wrapper.find(GlButton).text()).toBe('Show more');
+        expect(wrapper.findComponent(GlButton).text()).toBe('Show more');
       });
 
       it('calls `handleShowMoreClick` when `Show more` link is clicked', () => {
         jest.spyOn(wrapper.vm, 'handleShowMoreClick').mockImplementation(() => {});
 
-        wrapper.find(GlButton).vm.$emit('click');
+        wrapper.findComponent(GlButton).vm.$emit('click');
 
         expect(wrapper.vm.handleShowMoreClick).toHaveBeenCalled();
       });