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

* migrate to proper use of findComponent/findAllComponents

ee/spec/frontend/requirements/components/export_requirements_modal_spec.js

@@ -112,7 +112,7 @@ describe('ExportRequirementsModal', () => {
 
   describe('template', () => {
     it('GlModal open click emits export event', () => {
-      wrapper.find(GlModal).vm.$emit('ok');
+      wrapper.findComponent(GlModal).vm.$emit('ok');
 
       const emitted = wrapper.emitted('export');
 
@@ -120,13 +120,13 @@ describe('ExportRequirementsModal', () => {
     });
 
     it('renders checkboxes for advanced exporting', () => {
-      const checkboxes = wrapper.find('.scrollbox-body').findAll(GlFormCheckbox);
+      const checkboxes = wrapper.find('.scrollbox-body').findAllComponents(GlFormCheckbox);
 
       expect(checkboxes).toHaveLength(wrapper.vm.$options.fields.length);
     });
 
     it('renders Select all checkbox', () => {
-      const checkbox = wrapper.find('.scrollbox-header').findAll(GlFormCheckbox);
+      const checkbox = wrapper.find('.scrollbox-header').findAllComponents(GlFormCheckbox);
 
       expect(checkbox).toHaveLength(1);
     });

ee/spec/frontend/requirements/components/import_requirements_modal_spec.js

@@ -66,7 +66,7 @@ describe('ImportRequirementsModal', () => {
         file,
       });
 
-      wrapper.find(GlModal).vm.$emit('ok');
+      wrapper.findComponent(GlModal).vm.$emit('ok');
 
       const emitted = wrapper.emitted('import')[0][0];
 

ee/spec/frontend/requirements/components/requirement_form_spec.js

@@ -134,7 +134,7 @@ describe('RequirementForm', () => {
 
             await nextTick();
 
-            expect(wrapper.find(GlFormCheckbox).vm.$attrs.checked).toBe(satisfied);
+            expect(wrapper.findComponent(GlFormCheckbox).vm.$attrs.checked).toBe(satisfied);
           },
         );
       });
@@ -149,7 +149,7 @@ describe('RequirementForm', () => {
 
         it('does not render the satisfied checkbox', async () => {
           await nextTick();
-          expect(wrapper.find(GlFormCheckbox).exists()).toBe(false);
+          expect(wrapper.findComponent(GlFormCheckbox).exists()).toBe(false);
         });
       });
     });
@@ -300,21 +300,21 @@ describe('RequirementForm', () => {
 
   describe('template', () => {
     it('renders gl-drawer as component container element', () => {
-      expect(wrapper.find(GlDrawer).exists()).toBe(true);
+      expect(wrapper.findComponent(GlDrawer).exists()).toBe(true);
     });
 
     it('renders drawer header with `requirement.reference` and test report badge', () => {
       expect(
         getByText(wrapperWithRequirement.element, `REQ-${mockRequirementsOpen[0].iid}`),
       ).not.toBeNull();
-      expect(wrapperWithRequirement.find(RequirementStatusBadge).exists()).toBe(true);
-      expect(wrapperWithRequirement.find(RequirementStatusBadge).props('testReport')).toBe(
+      expect(wrapperWithRequirement.findComponent(RequirementStatusBadge).exists()).toBe(true);
+      expect(wrapperWithRequirement.findComponent(RequirementStatusBadge).props('testReport')).toBe(
         mockTestReport,
       );
     });
 
     it('renders issuable-body component', () => {
-      const issuableBody = wrapperWithRequirement.find(IssuableBody);
+      const issuableBody = wrapperWithRequirement.findComponent(IssuableBody);
 
       expect(issuableBody.exists()).toBe(true);
       expect(issuableBody.props()).toMatchObject({
@@ -335,9 +335,9 @@ describe('RequirementForm', () => {
 
       await nextTick();
 
-      const issuableBody = wrapperWithRequirement.find(IssuableBody);
+      const issuableBody = wrapperWithRequirement.findComponent(IssuableBody);
 
-      expect(issuableBody.find(GlFormCheckbox).exists()).toBe(true);
+      expect(issuableBody.findComponent(GlFormCheckbox).exists()).toBe(true);
       expect(issuableBody.find('[data-testid="requirement-save"]').exists()).toBe(true);
       expect(issuableBody.find('[data-testid="requirement-cancel"]').exists()).toBe(true);
     });

ee/spec/frontend/requirements/components/requirement_item_spec.js

@@ -105,7 +105,7 @@ describe('RequirementItem', () => {
     });
 
     it('renders element containing requirement author information', () => {
-      const authorEl = wrapper.find(GlLink);
+      const authorEl = wrapper.findComponent(GlLink);
 
       expect(authorEl.attributes('href')).toBe(requirement1.author.webUrl);
       expect(authorEl.find('.author').text()).toBe(requirement1.author.name);
@@ -120,8 +120,10 @@ describe('RequirementItem', () => {
     });
 
     it('renders requirement-status-badge component', () => {
-      const statusBadgeElSm = wrapper.find('.issuable-main-info').find(RequirementStatusBadge);
-      const statusBadgeElMd = wrapper.find('.controls').find(RequirementStatusBadge);
+      const statusBadgeElSm = wrapper
+        .find('.issuable-main-info')
+        .findComponent(RequirementStatusBadge);
+      const statusBadgeElMd = wrapper.find('.controls').findComponent(RequirementStatusBadge);
 
       expect(statusBadgeElSm.exists()).toBe(true);
       expect(statusBadgeElMd.exists()).toBe(true);
@@ -131,7 +133,7 @@ describe('RequirementItem', () => {
     });
 
     it('renders element containing requirement `Edit` button when `requirement.userPermissions.updateRequirement` is true', () => {
-      const editButtonEl = wrapper.find('.controls .requirement-edit').find(GlButton);
+      const editButtonEl = wrapper.find('.controls .requirement-edit').findComponent(GlButton);
 
       expect(editButtonEl.exists()).toBe(true);
       expect(editButtonEl.attributes('title')).toBe('Edit');
@@ -157,7 +159,9 @@ describe('RequirementItem', () => {
     });
 
     it('renders element containing requirement `Archive` button when `requirement.userPermissions.adminRequirement` is true', () => {
-      const archiveButtonEl = wrapper.find('.controls .requirement-archive').find(GlButton);
+      const archiveButtonEl = wrapper
+        .find('.controls .requirement-archive')
+        .findComponent(GlButton);
 
       expect(archiveButtonEl.exists()).toBe(true);
       expect(archiveButtonEl.attributes('title')).toBe('Archive');
@@ -178,7 +182,7 @@ describe('RequirementItem', () => {
     });
 
     it('renders `Reopen` button when current requirement is archived and `requirement.userPermissions.adminRequirement` is true', () => {
-      const reopenButton = wrapperArchived.find('.requirement-reopen').find(GlButton);
+      const reopenButton = wrapperArchived.find('.requirement-reopen').findComponent(GlButton);
 
       expect(reopenButton.exists()).toBe(true);
       expect(reopenButton.props('loading')).toBe(false);

ee/spec/frontend/requirements/components/requirement_status_badge_spec.js

@@ -15,8 +15,8 @@ const createComponent = ({
     },
   });
 
-const findGlBadge = (wrapper) => wrapper.find(GlBadge);
-const findGlTooltip = (wrapper) => wrapper.find(GlTooltip);
+const findGlBadge = (wrapper) => wrapper.findComponent(GlBadge);
+const findGlTooltip = (wrapper) => wrapper.findComponent(GlTooltip);
 
 const successBadgeProps = {
   variant: 'success',
@@ -96,8 +96,8 @@ describe('RequirementStatusBadge', () => {
           expect(badgeEl.exists()).toBe(true);
           expect(badgeEl.props('variant')).toBe(badgeProps.variant);
           expect(badgeEl.text()).toBe(badgeProps.text);
-          expect(badgeEl.find(GlIcon).exists()).toBe(true);
-          expect(badgeEl.find(GlIcon).props('name')).toBe(badgeProps.icon);
+          expect(badgeEl.findComponent(GlIcon).exists()).toBe(true);
+          expect(badgeEl.findComponent(GlIcon).props('name')).toBe(badgeProps.icon);
         });
 
         it('renders GlTooltip component', () => {

ee/spec/frontend/requirements/components/requirements_empty_state_spec.js

@@ -103,7 +103,7 @@ describe('RequirementsEmptyState', () => {
     });
 
     it('renders new requirement button when project has no requirements', () => {
-      const newReqButton = wrapper.find(GlButton);
+      const newReqButton = wrapper.findComponent(GlButton);
 
       expect(newReqButton.exists()).toBe(true);
       expect(newReqButton.text()).toBe('New requirement');
@@ -119,7 +119,7 @@ describe('RequirementsEmptyState', () => {
       });
 
       return wrapper.vm.$nextTick(() => {
-        const newReqButton = wrapper.find(GlButton);
+        const newReqButton = wrapper.findComponent(GlButton);
 
         expect(newReqButton.exists()).toBe(false);
       });
@@ -131,7 +131,7 @@ describe('RequirementsEmptyState', () => {
       });
 
       return wrapper.vm.$nextTick(() => {
-        const newReqButton = wrapper.find(GlButton);
+        const newReqButton = wrapper.findComponent(GlButton);
 
         expect(newReqButton.exists()).toBe(false);
       });

ee/spec/frontend/requirements/components/requirements_loading_spec.js

@@ -79,7 +79,9 @@ describe('RequirementsLoading', () => {
 
   describe('template', () => {
     it('renders gl-skeleton-loading component project has some requirements and current tab has requirements to show', () => {
-      const loaders = wrapper.find('.requirements-list-loading').findAll(GlSkeletonLoading);
+      const loaders = wrapper
+        .find('.requirements-list-loading')
+        .findAllComponents(GlSkeletonLoading);
 
       expect(loaders).toHaveLength(2);
       expect(loaders.at(0).props('lines')).toBe(2);
@@ -96,7 +98,7 @@ describe('RequirementsLoading', () => {
 
       return wrapper.vm.$nextTick(() => {
         expect(wrapper.find('.requirements-list-loading').exists()).toBe(false);
-        expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+        expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
       });
     });
   });

ee/spec/frontend/requirements/components/requirements_root_spec.js

@@ -979,19 +979,19 @@ describe('RequirementsRoot', () => {
     });
 
     it('renders requirements-tabs component', () => {
-      expect(wrapper.find(RequirementsTabs).exists()).toBe(true);
+      expect(wrapper.findComponent(RequirementsTabs).exists()).toBe(true);
     });
 
     it('renders filtered-search-bar component', () => {
-      expect(wrapper.find(FilteredSearchBarRoot).exists()).toBe(true);
-      expect(wrapper.find(FilteredSearchBarRoot).props('searchInputPlaceholder')).toBe(
+      expect(wrapper.findComponent(FilteredSearchBarRoot).exists()).toBe(true);
+      expect(wrapper.findComponent(FilteredSearchBarRoot).props('searchInputPlaceholder')).toBe(
         'Search requirements',
       );
-      expect(wrapper.find(FilteredSearchBarRoot).props('tokens')).toEqual([
+      expect(wrapper.findComponent(FilteredSearchBarRoot).props('tokens')).toEqual([
         mockAuthorToken,
         mockStatusToken,
       ]);
-      expect(wrapper.find(FilteredSearchBarRoot).props('recentSearchesStorageKey')).toBe(
+      expect(wrapper.findComponent(FilteredSearchBarRoot).props('recentSearchesStorageKey')).toBe(
         'requirements',
       );
     });
@@ -1009,14 +1009,14 @@ describe('RequirementsRoot', () => {
       });
 
       return wrapper.vm.$nextTick(() => {
-        expect(wrapper.find(RequirementsEmptyState).exists()).toBe(true);
+        expect(wrapper.findComponent(RequirementsEmptyState).exists()).toBe(true);
       });
     });
 
     it('renders requirements-loading component when query results are still being loaded', () => {
       const wrapperLoading = createComponent({ loading: true });
 
-      expect(wrapperLoading.find(RequirementsLoading).isVisible()).toBe(true);
+      expect(wrapperLoading.findComponent(RequirementsLoading).isVisible()).toBe(true);
 
       wrapperLoading.destroy();
     });
@@ -1037,7 +1037,7 @@ describe('RequirementsRoot', () => {
       });
 
       return wrapper.vm.$nextTick(() => {
-        expect(wrapper.find(RequirementsEmptyState).exists()).toBe(false);
+        expect(wrapper.findComponent(RequirementsEmptyState).exists()).toBe(false);
       });
     });
 
@@ -1056,7 +1056,9 @@ describe('RequirementsRoot', () => {
         const itemsContainer = wrapper.find('ul.requirements-list');
 
         expect(itemsContainer.exists()).toBe(true);
-        expect(itemsContainer.findAll(RequirementItem)).toHaveLength(mockRequirementsOpen.length);
+        expect(itemsContainer.findAllComponents(RequirementItem)).toHaveLength(
+          mockRequirementsOpen.length,
+        );
       });
     });
 
@@ -1072,7 +1074,7 @@ describe('RequirementsRoot', () => {
       });
 
       return wrapper.vm.$nextTick(() => {
-        const pagination = wrapper.find(GlPagination);
+        const pagination = wrapper.findComponent(GlPagination);
 
         expect(pagination.exists()).toBe(true);
         expect(pagination.props('value')).toBe(1);

ee/spec/frontend/requirements/components/requirements_tabs_spec.js

@@ -38,28 +38,28 @@ describe('RequirementsTabs', () => {
 
   describe('template', () => {
     it('renders "Open" tab', () => {
-      const tabEl = wrapper.findAll(GlTab).at(0);
+      const tabEl = wrapper.findAllComponents(GlTab).at(0);
 
       expect(tabEl.text()).toContain('Open');
-      expect(tabEl.find(GlBadge).text()).toBe(`${mockRequirementsCount.OPENED}`);
+      expect(tabEl.findComponent(GlBadge).text()).toBe(`${mockRequirementsCount.OPENED}`);
     });
 
     it('renders "Archived" tab', () => {
-      const tabEl = wrapper.findAll(GlTab).at(1);
+      const tabEl = wrapper.findAllComponents(GlTab).at(1);
 
       expect(tabEl.text()).toContain('Archived');
-      expect(tabEl.find(GlBadge).text()).toBe(`${mockRequirementsCount.ARCHIVED}`);
+      expect(tabEl.findComponent(GlBadge).text()).toBe(`${mockRequirementsCount.ARCHIVED}`);
     });
 
     it('renders "All" tab', () => {
-      const tabEl = wrapper.findAll(GlTab).at(2);
+      const tabEl = wrapper.findAllComponents(GlTab).at(2);
 
       expect(tabEl.text()).toContain('All');
-      expect(tabEl.find(GlBadge).text()).toBe(`${mockRequirementsCount.ALL}`);
+      expect(tabEl.findComponent(GlBadge).text()).toBe(`${mockRequirementsCount.ALL}`);
     });
 
     it('renders class `active` on currently selected tab', () => {
-      const tabEl = wrapper.findAll(GlTab).at(0);
+      const tabEl = wrapper.findAllComponents(GlTab).at(0);
 
       expect(tabEl.attributes('active')).toBeDefined();
     });
@@ -70,7 +70,7 @@ describe('RequirementsTabs', () => {
       });
 
       return wrapper.vm.$nextTick(() => {
-        const buttonEl = wrapper.findAll(GlButton).at(2);
+        const buttonEl = wrapper.findAllComponents(GlButton).at(2);
 
         expect(buttonEl.exists()).toBe(true);
         expect(buttonEl.text()).toBe('New requirement');
@@ -83,7 +83,7 @@ describe('RequirementsTabs', () => {
       });
 
       return wrapper.vm.$nextTick(() => {
-        const buttonEl = wrapper.find(GlButton);
+        const buttonEl = wrapper.findComponent(GlButton);
 
         expect(buttonEl.exists()).toBe(false);
       });
@@ -96,7 +96,7 @@ describe('RequirementsTabs', () => {
       });
 
       return wrapper.vm.$nextTick(() => {
-        const buttonEl = wrapper.find(GlButton);
+        const buttonEl = wrapper.findComponent(GlButton);
 
         expect(buttonEl.exists()).toBe(false);
       });
@@ -108,7 +108,7 @@ describe('RequirementsTabs', () => {
       });
 
       return wrapper.vm.$nextTick(() => {
-        const buttonEl = wrapper.findAll(GlButton);
+        const buttonEl = wrapper.findAllComponents(GlButton);
 
         expect(buttonEl.at(0).props('disabled')).toBe(true);
         expect(buttonEl.at(1).props('disabled')).toBe(true);

ee/spec/frontend/requirements/components/tokens/status_token_spec.js

@@ -55,7 +55,7 @@ describe('StatusToken', () => {
 
   describe('template', () => {
     it('renders gl-filtered-search-token component', () => {
-      const token = wrapper.find(GlFilteredSearchToken);
+      const token = wrapper.findComponent(GlFilteredSearchToken);
       expect(token.exists()).toBe(true);
       expect(token.props('config')).toMatchObject(mockStatusToken);
     });
@@ -70,17 +70,17 @@ describe('StatusToken', () => {
       ({ value, text, icon }) => {
         wrapper = createComponent({ value: { data: value } });
 
-        expect(wrapper.find(GlToken).text()).toContain(text);
-        expect(wrapper.find(GlIcon).props('name')).toBe(icon);
+        expect(wrapper.findComponent(GlToken).text()).toContain(text);
+        expect(wrapper.findComponent(GlIcon).props('name')).toBe(icon);
       },
     );
 
     it('renders provided statuses as suggestions', async () => {
-      const suggestions = wrapper.findAll(GlFilteredSearchSuggestion);
+      const suggestions = wrapper.findAllComponents(GlFilteredSearchSuggestion);
 
       expect(suggestions).toHaveLength(mockStatuses.length);
       mockStatuses.forEach((status, index) => {
-        const iconEl = suggestions.at(index).find(GlIcon);
+        const iconEl = suggestions.at(index).findComponent(GlIcon);
 
         expect(iconEl.exists()).toBe(true);
         expect(iconEl.props('name')).toBe(status.icon);