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

* migrate to proper use of findComponent/findAllComponents

ee/spec/frontend/repository/components/lock_button_spec.js

@@ -41,7 +41,7 @@ describe('LockButton component', () => {
   describe('lock button', () => {
     let lockMutationMock;
     const mockEvent = { preventDefault: jest.fn() };
-    const findLockButton = () => wrapper.find(GlButton);
+    const findLockButton = () => wrapper.findComponent(GlButton);
     const findModal = () => wrapper.findComponent(GlModal);
     const clickSubmit = () => findModal().vm.$emit('primary', mockEvent);
     const clickHide = () => findModal().vm.$emit('hide', mockEvent);

ee/spec/frontend/seat_usage/components/subscription_seats_spec.js

@@ -73,7 +73,7 @@ describe('Subscription Seats', () => {
 
   const findPageHeading = () => wrapper.find('[data-testid="heading-info"]');
   const findPageHeadingText = () => findPageHeading().find('[data-testid="heading-info-text"]');
-  const findPageHeadingBadge = () => findPageHeading().find(GlBadge);
+  const findPageHeadingBadge = () => findPageHeading().findComponent(GlBadge);
 
   const findExportButton = () => wrapper.findByTestId('export-button');
 
@@ -207,7 +207,7 @@ describe('Subscription Seats', () => {
             );
 
             if (membershipType === currentMember.user.membership_type) {
-              expect(avatarLinkWrapper.find(GlBadge).text()).toBe(badgeText);
+              expect(avatarLinkWrapper.findComponent(GlBadge).text()).toBe(badgeText);
             }
           });
         },

ee/spec/frontend/sidebar/components/sidebar_dropdown_widget_spec.js

@@ -45,7 +45,7 @@ describe('SidebarDropdownWidget', () => {
   const findDropdown = () => wrapper.findComponent(GlDropdown);
   const findDropdownText = () => wrapper.findComponent(GlDropdownText);
   const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
-  const findAllDropdownItems = () => wrapper.findAll(GlDropdownItem);
+  const findAllDropdownItems = () => wrapper.findAllComponents(GlDropdownItem);
   const findDropdownItemWithText = (text) =>
     findAllDropdownItems().wrappers.find((x) => x.text() === text);
 
@@ -79,7 +79,7 @@ describe('SidebarDropdownWidget', () => {
 
   // Used with createComponent which shallow mounts components
   const toggleDropdown = async () => {
-    wrapper.find(SidebarEditableItem).vm.$emit('open');
+    wrapper.findComponent(SidebarEditableItem).vm.$emit('open');
 
     await waitForDropdown();
   };
@@ -203,7 +203,7 @@ describe('SidebarDropdownWidget', () => {
         });
 
         it('focuses on the input when dropdown is shown', async () => {
-          expect(document.activeElement).toEqual(wrapper.find(GlFormInput).element);
+          expect(document.activeElement).toEqual(wrapper.findComponent(GlFormInput).element);
         });
 
         describe('when currentAttribute is not equal to attribute id', () => {

ee/spec/frontend/sidebar/components/status/sidebar_status_spec.js

@@ -76,11 +76,11 @@ describe('SidebarStatus', () => {
     beforeEach(() => {});
 
     it('renders Status component', () => {
-      expect(wrapper.find(Status).exists()).toBe(true);
+      expect(wrapper.findComponent(Status).exists()).toBe(true);
     });
 
     it('calls apollo mutate when receiving an onDropdownClick event from Status component', () => {
-      wrapper.find(Status).vm.$emit('onDropdownClick', 'onTrack');
+      wrapper.findComponent(Status).vm.$emit('onDropdownClick', 'onTrack');
 
       const variables = {
         projectPath: 'foo/bar',

ee/spec/frontend/sidebar/components/status/status_spec.js

@@ -9,18 +9,18 @@ const getStatusText = (wrapper) => wrapper.find('.value .text-plain').text();
 const getStatusTitleText = (wrapper) => wrapper.find('[data-testid="statusTitle"]').text();
 
 const getStatusTooltipValue = (wrapper) =>
-  getBinding(wrapper.find({ ref: 'status' }).element, 'gl-tooltip').value;
+  getBinding(wrapper.findComponent({ ref: 'status' }).element, 'gl-tooltip').value;
 
 const getEditButtonTooltipValue = (wrapper) =>
   getBinding(wrapper.find('[data-testid="editButtonTooltip"]').element, 'gl-tooltip').value;
 
-const getEditButton = (wrapper) => wrapper.find({ ref: 'editButton' });
+const getEditButton = (wrapper) => wrapper.findComponent({ ref: 'editButton' });
 
 const getDropdownClasses = (wrapper) => wrapper.find('[data-testid="dropdownWrapper"]').classes();
 
-const getDropdownElement = (wrapper) => wrapper.find(GlDropdown);
+const getDropdownElement = (wrapper) => wrapper.findComponent(GlDropdown);
 
-const getRemoveStatusItem = (wrapper) => wrapper.find(GlDropdownItem);
+const getRemoveStatusItem = (wrapper) => wrapper.findComponent(GlDropdownItem);
 
 describe('Status', () => {
   let wrapper;
@@ -61,7 +61,7 @@ describe('Status', () => {
 
       shallowMountStatus(props);
 
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
     });
 
     it('is hidden when not retrieving data', () => {
@@ -71,7 +71,7 @@ describe('Status', () => {
 
       shallowMountStatus(props);
 
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false);
     });
   });
 
@@ -273,7 +273,7 @@ describe('Status', () => {
       });
 
       it('hides form when a dropdown item is clicked', async () => {
-        const dropdownItem = wrapper.findAll(GlDropdownItem).at(1);
+        const dropdownItem = wrapper.findAllComponents(GlDropdownItem).at(1);
 
         dropdownItem.vm.$emit('click');
 
@@ -300,7 +300,7 @@ describe('Status', () => {
       });
 
       it('shows 4 dropdown items', () => {
-        expect(wrapper.findAll(GlDropdownItem)).toHaveLength(4);
+        expect(wrapper.findAllComponents(GlDropdownItem)).toHaveLength(4);
       });
 
       // Test that "On track", "Needs attention", and "At risk" are displayed
@@ -309,7 +309,7 @@ describe('Status', () => {
         (statusText, index) => {
           expect(
             wrapper
-              .findAll(GlDropdownItem)
+              .findAllComponents(GlDropdownItem)
               .at(index + 1) // +1 in index to account for 1st item as `No status`
               .text(),
           ).toContain(statusText);
@@ -321,7 +321,7 @@ describe('Status', () => {
         'emits onFormSubmit event with argument "%s" when user selects the option and submits form',
         async (status, index) => {
           wrapper
-            .findAll(GlDropdownItem)
+            .findAllComponents(GlDropdownItem)
             .at(index + 1)
             .vm.$emit('click', { preventDefault: () => null });
 

ee/spec/frontend/sidebar/ee_ancestor_tree_spec.js

@@ -67,7 +67,7 @@ describe('AncestorsTreeContainer', () => {
       isFetching: true,
     });
 
-    expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+    expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
   });
 
   it('escapes html in the tooltip', () => {

ee/spec/frontend/sidebar/weight_spec.js

@@ -33,7 +33,7 @@ describe('Weight', () => {
   const findCollapsedBlock = () => wrapper.find('.js-weight-collapsed-block');
   const findEditLink = () => wrapper.find('.js-weight-edit-link');
   const findRemoveLink = () => wrapper.find('.js-weight-remove-link');
-  const containsEditableField = () => wrapper.find({ ref: 'editableField' }).exists();
+  const containsEditableField = () => wrapper.findComponent({ ref: 'editableField' }).exists();
   const containsInputError = () => wrapper.find('.gl-field-error').exists();
 
   it('shows loading spinner when fetching', () => {

ee/spec/frontend/status_page_settings/settings_form_spec.js

@@ -6,10 +6,10 @@ describe('Status Page settings form', () => {
   let wrapper;
   const store = createStore();
 
-  const findForm = () => wrapper.find({ ref: 'settingsForm' });
-  const findToggleButton = () => wrapper.find({ ref: 'toggleBtn' });
-  const findSectionHeader = () => wrapper.find({ ref: 'sectionHeader' });
-  const findSectionSubHeader = () => wrapper.find({ ref: 'sectionSubHeader' });
+  const findForm = () => wrapper.findComponent({ ref: 'settingsForm' });
+  const findToggleButton = () => wrapper.findComponent({ ref: 'toggleBtn' });
+  const findSectionHeader = () => wrapper.findComponent({ ref: 'sectionHeader' });
+  const findSectionSubHeader = () => wrapper.findComponent({ ref: 'sectionSubHeader' });
 
   beforeEach(() => {
     wrapper = shallowMount(StatusPageSettingsForm, { store });

ee/spec/frontend/subscriptions/new/components/checkout/subscription_details_spec.js

@@ -47,10 +47,10 @@ describe('Subscription Details', () => {
     });
   }
 
-  const organizationNameInput = () => wrapper.find({ ref: 'organization-name' });
-  const groupSelect = () => wrapper.find({ ref: 'group-select' });
-  const numberOfUsersInput = () => wrapper.find({ ref: 'number-of-users' });
-  const companyLink = () => wrapper.find({ ref: 'company-link' });
+  const organizationNameInput = () => wrapper.findComponent({ ref: 'organization-name' });
+  const groupSelect = () => wrapper.findComponent({ ref: 'group-select' });
+  const numberOfUsersInput = () => wrapper.findComponent({ ref: 'number-of-users' });
+  const companyLink = () => wrapper.findComponent({ ref: 'company-link' });
 
   afterEach(() => {
     wrapper.destroy();
@@ -488,15 +488,17 @@ describe('Subscription Details', () => {
     });
 
     it('should show the selected plan', () => {
-      expect(wrapper.find({ ref: 'summary-line-1' }).text()).toEqual('Bronze plan');
+      expect(wrapper.findComponent({ ref: 'summary-line-1' }).text()).toEqual('Bronze plan');
     });
 
     it('should show the entered group name', () => {
-      expect(wrapper.find({ ref: 'summary-line-2' }).text()).toEqual('Group: My Organization');
+      expect(wrapper.findComponent({ ref: 'summary-line-2' }).text()).toEqual(
+        'Group: My Organization',
+      );
     });
 
     it('should show the entered number of users', () => {
-      expect(wrapper.find({ ref: 'summary-line-3' }).text()).toEqual('Users: 25');
+      expect(wrapper.findComponent({ ref: 'summary-line-3' }).text()).toEqual('Users: 25');
     });
 
     describe('selecting an existing group', () => {
@@ -505,7 +507,9 @@ describe('Subscription Details', () => {
       });
 
       it('should show the selected group name', () => {
-        expect(wrapper.find({ ref: 'summary-line-2' }).text()).toEqual('Group: My second group');
+        expect(wrapper.findComponent({ ref: 'summary-line-2' }).text()).toEqual(
+          'Group: My second group',
+        );
       });
     });
   });

ee/spec/frontend/test_case_create/components/test_case_create_root_spec.js

@@ -151,8 +151,8 @@ describe('TestCaseCreateRoot', () => {
         labelsManagePath,
       } = mockProvide;
 
-      expect(wrapper.find(IssuableCreate).exists()).toBe(true);
-      expect(wrapper.find(IssuableCreate).props()).toMatchObject({
+      expect(wrapper.findComponent(IssuableCreate).exists()).toBe(true);
+      expect(wrapper.findComponent(IssuableCreate).props()).toMatchObject({
         descriptionPreviewPath,
         descriptionHelpPath,
         labelsFetchPath,

ee/spec/frontend/test_case_list/components/test_case_list_empty_spec.js

@@ -97,11 +97,11 @@ describe('TestCaseListEmptyState', () => {
 
   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 description', () => {
-      const descriptionEl = wrapper.find(GlSprintf);
+      const descriptionEl = wrapper.findComponent(GlSprintf);
 
       expect(descriptionEl.exists()).toBe(true);
       expect(descriptionEl.attributes('message')).toBe(
@@ -110,7 +110,7 @@ describe('TestCaseListEmptyState', () => {
     });
 
     it('renders "New test cases" button', () => {
-      const buttonEl = wrapper.find(GlButton);
+      const buttonEl = wrapper.findComponent(GlButton);
 
       expect(buttonEl.exists()).toBe(true);
       expect(buttonEl.attributes('href')).toBe('/gitlab-org/gitlab-test/-/quality/test_cases/new');

ee/spec/frontend/test_case_list/components/test_case_list_root_spec.js

@@ -34,7 +34,7 @@ const mockPageInfo = {
 describe('TestCaseListRoot', () => {
   let wrapper;
 
-  const getIssuableList = () => wrapper.find(IssuableList);
+  const getIssuableList = () => wrapper.findComponent(IssuableList);
 
   const createComponent = ({
     provide = mockProvide,

ee/spec/frontend/test_case_show/components/test_case_show_root_spec.js

@@ -276,13 +276,13 @@ describe('TestCaseShowRoot', () => {
 
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
+      expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
     });
 
     it('renders gl-alert when issuable-show component emits `task-list-update-failure` event', async () => {
-      await wrapper.find(IssuableShow).vm.$emit('task-list-update-failure');
+      await wrapper.findComponent(IssuableShow).vm.$emit('task-list-update-failure');
 
-      const alertEl = wrapper.find(GlAlert);
+      const alertEl = wrapper.findComponent(GlAlert);
 
       expect(alertEl.exists()).toBe(true);
       expect(alertEl.text()).toBe(
@@ -299,7 +299,7 @@ describe('TestCaseShowRoot', () => {
         updatePath,
         lockVersion,
       } = mockProvide;
-      const issuableShowEl = wrapper.find(IssuableShow);
+      const issuableShowEl = wrapper.findComponent(IssuableShow);
 
       expect(issuableShowEl.exists()).toBe(true);
       expect(issuableShowEl.props()).toMatchObject({
@@ -319,7 +319,7 @@ describe('TestCaseShowRoot', () => {
     });
 
     it('refetches taskCompletionStatus when issuable-show emits `task-list-update-success` event', async () => {
-      await wrapper.find(IssuableShow).vm.$emit('task-list-update-success');
+      await wrapper.findComponent(IssuableShow).vm.$emit('task-list-update-success');
 
       expect(wrapper.vm.$apollo.queries.taskCompletionStatus.refetch).toHaveBeenCalled();
     });
@@ -334,7 +334,7 @@ describe('TestCaseShowRoot', () => {
 
       await wrapper.vm.$nextTick();
 
-      expect(wrapper.find(IssuableShow).exists()).toBe(false);
+      expect(wrapper.findComponent(IssuableShow).exists()).toBe(false);
     });
 
     it('renders status-badge slot contents', () => {
@@ -357,7 +357,7 @@ describe('TestCaseShowRoot', () => {
       const statusEl = wrapperMoved.find('[data-testid="status"]');
 
       expect(statusEl.text()).toContain('Archived');
-      expect(statusEl.find(GlLink).attributes('href')).toBe(movedTestCase.movedTo.webUrl);
+      expect(statusEl.findComponent(GlLink).attributes('href')).toBe(movedTestCase.movedTo.webUrl);
 
       wrapperMoved.destroy();
     });

ee/spec/frontend/test_case_show/components/test_case_sidebar_spec.js

@@ -269,8 +269,8 @@ describe('TestCaseSidebar', () => {
 
       expect(todoEl.exists()).toBe(true);
       expect(todoEl.text()).toContain('To Do');
-      expect(todoEl.find(GlButton).exists()).toBe(true);
-      expect(todoEl.find(GlButton).text()).toBe('Add a to do');
+      expect(todoEl.findComponent(GlButton).exists()).toBe(true);
+      expect(todoEl.findComponent(GlButton).text()).toBe('Add a to do');
 
       wrapper.setProps({
         sidebarExpanded: false,
@@ -282,13 +282,13 @@ describe('TestCaseSidebar', () => {
 
       expect(todoEl.exists()).toBe(true);
       expect(todoEl.attributes('title')).toBe('Add a to do');
-      expect(todoEl.find(GlIcon).exists()).toBe(true);
+      expect(todoEl.findComponent(GlIcon).exists()).toBe(true);
     });
 
     it('renders label-select', async () => {
       const { selectedLabels, testCaseLabelsSelectInProgress } = wrapper.vm;
       const { canEditTestCase, labelsFetchPath, labelsManagePath } = mockProvide;
-      const labelSelectEl = wrapper.find(LabelsSelect);
+      const labelSelectEl = wrapper.findComponent(LabelsSelect);
 
       expect(labelSelectEl.exists()).toBe(true);
       expect(labelSelectEl.props()).toMatchObject({
@@ -307,7 +307,7 @@ describe('TestCaseSidebar', () => {
     it('renders project-select', async () => {
       const { selectProjectDropdownButtonTitle, testCaseMoveInProgress } = wrapper.vm;
       const { projectsFetchPath } = mockProvide;
-      const projectSelectEl = wrapper.find(ProjectSelect);
+      const projectSelectEl = wrapper.findComponent(ProjectSelect);
 
       expect(projectSelectEl.exists()).toBe(true);
       expect(projectSelectEl.props()).toMatchObject({

ee/spec/frontend/usage_quotas/storage/components/collapsible_project_storage_detail_spec.js

@@ -18,7 +18,7 @@ const createComponent = () => {
 };
 
 const findTableRow = () => wrapper.find('[data-testid="projectTableRow"]');
-const findProjectStorageDetail = () => wrapper.find(ProjectStorageDetail);
+const findProjectStorageDetail = () => wrapper.findComponent(ProjectStorageDetail);
 
 describe('CollapsibleProjectStorageDetail', () => {
   beforeEach(() => {
@@ -26,7 +26,7 @@ describe('CollapsibleProjectStorageDetail', () => {
   });
 
   it('renders project avatar', () => {
-    expect(wrapper.find(ProjectAvatar).exists()).toBe(true);
+    expect(wrapper.findComponent(ProjectAvatar).exists()).toBe(true);
   });
 
   it('renders project name', () => {

ee/spec/frontend/usage_quotas/storage/components/namespace_storage_app_spec.js

@@ -23,10 +23,10 @@ describe('NamespaceStorageApp', () => {
   const findPurchaseStorageLink = () => wrapper.find("[data-testid='purchase-storage-link']");
   const findTemporaryStorageIncreaseButton = () =>
     wrapper.find("[data-testid='temporary-storage-increase-button']");
-  const findUsageGraph = () => wrapper.find(UsageGraph);
-  const findUsageStatistics = () => wrapper.find(UsageStatistics);
-  const findStorageInlineAlert = () => wrapper.find(StorageInlineAlert);
-  const findProjectList = () => wrapper.find(ProjectList);
+  const findUsageGraph = () => wrapper.findComponent(UsageGraph);
+  const findUsageStatistics = () => wrapper.findComponent(UsageStatistics);
+  const findStorageInlineAlert = () => wrapper.findComponent(StorageInlineAlert);
+  const findProjectList = () => wrapper.findComponent(ProjectList);
   const findPrevButton = () => wrapper.find('[data-testid="prevButton"]');
   const findNextButton = () => wrapper.find('[data-testid="nextButton"]');
 
@@ -81,7 +81,7 @@ describe('NamespaceStorageApp', () => {
 
     await wrapper.vm.$nextTick();
 
-    expect(wrapper.findAll(CollapsibleProjectStorageDetail)).toHaveLength(3);
+    expect(wrapper.findAllComponents(CollapsibleProjectStorageDetail)).toHaveLength(3);
   });
 
   describe('limit', () => {
@@ -229,7 +229,7 @@ describe('NamespaceStorageApp', () => {
       });
 
       it('renders modal', () => {
-        expect(wrapper.find(TemporaryStorageIncreaseModal).props()).toEqual({
+        expect(wrapper.findComponent(TemporaryStorageIncreaseModal).props()).toEqual({
           limit: formatUsageSize(TEST_LIMIT),
           modalId: NamespaceStorageApp.modalId,
         });

ee/spec/frontend/usage_quotas/storage/components/project_list_spec.js

@@ -19,7 +19,7 @@ const createComponent = ({ additionalRepoStorageByNamespace = false } = {}) => {
   });
 };
 
-const findTableRows = () => wrapper.findAll(CollapsibleProjectStorageDetail);
+const findTableRows = () => wrapper.findAllComponents(CollapsibleProjectStorageDetail);
 
 describe('ProjectList', () => {
   beforeEach(() => {

ee/spec/frontend/usage_quotas/storage/components/storage_inline_alert_spec.js

@@ -17,7 +17,7 @@ describe('StorageInlineAlert', () => {
     });
   }
 
-  const findAlert = () => wrapper.find(GlAlert);
+  const findAlert = () => wrapper.findComponent(GlAlert);
 
   describe('no excess storage and no purchase', () => {
     beforeEach(() => {

ee/spec/frontend/usage_quotas/storage/components/temporary_storage_increase_modal_spec.js

@@ -17,7 +17,7 @@ describe('Temporary storage increase modal', () => {
       },
     });
   };
-  const findModal = () => wrapper.find(GlModal);
+  const findModal = () => wrapper.findComponent(GlModal);
   const showModal = () => {
     findModal().vm.show();
     return wrapper.vm.$nextTick();

ee/spec/frontend/usage_quotas/storage/components/usage_statistics_spec.js

@@ -36,10 +36,12 @@ describe('UsageStatistics', () => {
     wrapper.destroy();
   });
 
-  const getStatisticsCards = () => wrapper.findAll(UsageStatisticsCard);
+  const getStatisticsCards = () => wrapper.findAllComponents(UsageStatisticsCard);
   const getStatisticsCard = (testId) => wrapper.find(`[data-testid="${testId}"]`);
   const findGlLinkInCard = (cardName) =>
-    getStatisticsCard(cardName).find('[data-testid="statistics-card-footer"]').find(GlLink);
+    getStatisticsCard(cardName)
+      .find('[data-testid="statistics-card-footer"]')
+      .findComponent(GlLink);
   const findPurchasedUsageButton = () =>
     getStatisticsCard('purchased-usage').findComponent(GlButton);