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

* migrate to proper use of findComponent/findAllComponents

ee/spec/frontend/billings/components/account_verification_modal_spec.js

@@ -17,7 +17,7 @@ describe('Account verification modal', () => {
     });
   };
 
-  const findModal = () => wrapper.find({ ref: 'modal' });
+  const findModal = () => wrapper.findComponent({ ref: 'modal' });
 
   const zuoraSubmitSpy = jest.fn();
 

ee/spec/frontend/billings/qrtly_reconciliation/components/qrtly_reconciliation_alert_spec.js

@@ -22,7 +22,7 @@ describe('Qrtly Reconciliation Alert', () => {
     });
   };
 
-  const findAlert = () => wrapper.find(GlAlert);
+  const findAlert = () => wrapper.findComponent(GlAlert);
 
   afterEach(() => {
     wrapper.destroy();

ee/spec/frontend/billings/subscriptions/components/subscription_table_row_spec.js

@@ -64,7 +64,7 @@ describe('subscription table row', () => {
 
   const findHeaderCell = () => wrapper.find('[data-testid="header-cell"]');
   const findContentCells = () => wrapper.findAll('[data-testid="content-cell"]');
-  const findHeaderIcon = () => findHeaderCell().find(GlIcon);
+  const findHeaderIcon = () => findHeaderCell().findComponent(GlIcon);
 
   const findColumnLabelAndTitle = (columnWrapper) => {
     const label = columnWrapper.find('[data-testid="property-label"]');
@@ -121,7 +121,7 @@ describe('subscription table row', () => {
     it('should render an info icon in "Column B"', () => {
       const currentCol = findContentCells().at(1);
 
-      expect(currentCol.find(Popover).exists()).toBe(true);
+      expect(currentCol.findComponent(Popover).exists()).toBe(true);
     });
   });
 

ee/spec/frontend/billings/subscriptions/components/subscription_table_spec.js

@@ -69,7 +69,7 @@ describe('SubscriptionTable component', () => {
     });
 
     it('shows loading icon', () => {
-      expect(wrapper.find(GlLoadingIcon).isVisible()).toBeTruthy();
+      expect(wrapper.findComponent(GlLoadingIcon).isVisible()).toBeTruthy();
     });
 
     it('dispatches the correct actions', () => {
@@ -90,7 +90,7 @@ describe('SubscriptionTable component', () => {
     });
 
     it('should render a "Usage" and a "Billing" row', () => {
-      expect(wrapper.findAll(SubscriptionTableRow)).toHaveLength(2);
+      expect(wrapper.findAllComponents(SubscriptionTableRow)).toHaveLength(2);
     });
   });
 

ee/spec/frontend/billings/verification_reminder/components/verification_reminder_spec.js

@@ -31,12 +31,12 @@ describe('VerificationReminder', () => {
     });
   };
 
-  const findVerificationModal = () => wrapper.find({ ref: 'modal' });
-  const calloutDismisser = () => wrapper.find({ ref: 'calloutDismisser' });
-  const findWarningAlert = () => wrapper.find({ ref: 'warningAlert' });
-  const findSuccessAlert = () => wrapper.find({ ref: 'successAlert' });
-  const findValidateLink = () => wrapper.find({ ref: 'validateLink' });
-  const findDocsLink = () => wrapper.find({ ref: 'docsLink' });
+  const findVerificationModal = () => wrapper.findComponent({ ref: 'modal' });
+  const calloutDismisser = () => wrapper.findComponent({ ref: 'calloutDismisser' });
+  const findWarningAlert = () => wrapper.findComponent({ ref: 'warningAlert' });
+  const findSuccessAlert = () => wrapper.findComponent({ ref: 'successAlert' });
+  const findValidateLink = () => wrapper.findComponent({ ref: 'validateLink' });
+  const findDocsLink = () => wrapper.findComponent({ ref: 'docsLink' });
 
   beforeEach(() => {
     window.gon = {

ee/spec/frontend/burndown_chart/components/burn_charts_spec.js

@@ -20,15 +20,17 @@ describe('burndown_chart', () => {
   let wrapper;
   let mock;
 
-  const findFilterLabel = () => wrapper.find({ ref: 'filterLabel' });
-  const findIssuesButton = () => wrapper.find({ ref: 'totalIssuesButton' });
-  const findWeightButton = () => wrapper.find({ ref: 'totalWeightButton' });
+  const findFilterLabel = () => wrapper.findComponent({ ref: 'filterLabel' });
+  const findIssuesButton = () => wrapper.findComponent({ ref: 'totalIssuesButton' });
+  const findWeightButton = () => wrapper.findComponent({ ref: 'totalWeightButton' });
   const findActiveButtons = () =>
-    wrapper.findAll(GlButton).filter((button) => button.attributes().category === 'primary');
-  const findBurndownChart = () => wrapper.find(BurndownChart);
-  const findBurnupChart = () => wrapper.find(BurnupChart);
-  const findOldBurndownChartButton = () => wrapper.find({ ref: 'oldBurndown' });
-  const findNewBurndownChartButton = () => wrapper.find({ ref: 'newBurndown' });
+    wrapper
+      .findAllComponents(GlButton)
+      .filter((button) => button.attributes().category === 'primary');
+  const findBurndownChart = () => wrapper.findComponent(BurndownChart);
+  const findBurnupChart = () => wrapper.findComponent(BurnupChart);
+  const findOldBurndownChartButton = () => wrapper.findComponent({ ref: 'oldBurndown' });
+  const findNewBurndownChartButton = () => wrapper.findComponent({ ref: 'newBurndown' });
 
   const defaultProps = {
     fullPath: 'gitlab-org/subgroup',
@@ -146,7 +148,7 @@ describe('burndown_chart', () => {
       },
     });
 
-    expect(wrapper.find(OpenTimeboxSummary).props()).toEqual({
+    expect(wrapper.findComponent(OpenTimeboxSummary).props()).toEqual({
       iterationId: 'gid://gitlab/Iteration/11',
       displayValue: 'count',
       namespaceType: 'group',
@@ -167,7 +169,7 @@ describe('burndown_chart', () => {
       },
     });
 
-    expect(wrapper.find(TimeboxSummaryCards).exists()).toBe(true);
+    expect(wrapper.findComponent(TimeboxSummaryCards).exists()).toBe(true);
   });
 
   it('uses burndown data computed from burnup data', () => {

ee/spec/frontend/burndown_chart/components/burndown_chart_spec.js

@@ -12,7 +12,7 @@ describe('burndown_chart', () => {
     openIssuesWeight: [],
   };
 
-  const findChart = () => wrapper.find(GlLineChart);
+  const findChart = () => wrapper.findComponent(GlLineChart);
 
   const createComponent = (props = {}) => {
     wrapper = shallowMount(BurndownChart, {

ee/spec/frontend/burndown_chart/components/burnup_chart_spec.js

@@ -11,7 +11,7 @@ describe('Burnup chart', () => {
     dueDate: '2019-09-09T00:00:00.000Z',
   };
 
-  const findChart = () => wrapper.find(GlLineChart);
+  const findChart = () => wrapper.findComponent(GlLineChart);
 
   const createComponent = (props = {}) => {
     wrapper = shallowMount(BurnupChart, {

ee/spec/frontend/burndown_chart/components/timebox_summary_cards_spec.js

@@ -34,9 +34,9 @@ describe('Iterations report summary cards', () => {
     wrapper = null;
   });
 
-  const findCompleteCard = () => wrapper.findAll(GlCard).at(0).text();
-  const findIncompleteCard = () => wrapper.findAll(GlCard).at(1).text();
-  const findUnstartedCard = () => wrapper.findAll(GlCard).at(2).text();
+  const findCompleteCard = () => wrapper.findAllComponents(GlCard).at(0).text();
+  const findIncompleteCard = () => wrapper.findAllComponents(GlCard).at(1).text();
+  const findUnstartedCard = () => wrapper.findAllComponents(GlCard).at(2).text();
 
   describe('with valid totals', () => {
     beforeEach(() => {

ee/spec/frontend/clusters/components/environments_spec.js

@@ -26,7 +26,7 @@ describe('Environments', () => {
   });
 
   it('renders an empty state if no deployments are found', () => {
-    const emptyState = wrapper.find(GlEmptyState);
+    const emptyState = wrapper.findComponent(GlEmptyState);
     const emptyStateText = emptyState.text().replace(/\s+/g, ' ');
 
     expect(emptyState.exists()).toBe(true);
@@ -45,7 +45,7 @@ describe('Environments', () => {
         stubs: { deploymentInstance: { template: '<div class="js-deployment-instance"></div>' } },
       });
 
-      table = wrapper.find(GlTable);
+      table = wrapper.findComponent(GlTable);
     });
 
     it('renders a table component', () => {
@@ -77,7 +77,7 @@ describe('Environments', () => {
           const { status } = environment.rolloutStatus;
 
           if (status === 'loading') {
-            const loader = tableRows.at(i).find(GlLoadingIcon);
+            const loader = tableRows.at(i).findComponent(GlLoadingIcon);
 
             expect(loader.exists()).toBe(true);
           }
@@ -101,7 +101,7 @@ describe('Environments', () => {
 
           if (status !== 'loading' && instances.length === 0) {
             const emptyState = tableRows.at(i).find('.deployments-empty');
-            const emptyStateIcon = emptyState.find(GlIcon);
+            const emptyStateIcon = emptyState.findComponent(GlIcon);
 
             expect(emptyState.exists()).toBe(true);
             expect(emptyStateIcon.exists()).toBe(true);

ee/spec/frontend/codequality_report/codequality_report_graphql_spec.js

@@ -33,7 +33,7 @@ describe('Codequality report app', () => {
   const findStatus = () => wrapper.find('.js-code-text');
   const findSuccessIcon = () => wrapper.find('.js-ci-status-icon-success');
   const findWarningIcon = () => wrapper.find('.js-ci-status-icon-warning');
-  const findInfiniteScroll = () => wrapper.find(GlInfiniteScroll);
+  const findInfiniteScroll = () => wrapper.findComponent(GlInfiniteScroll);
 
   afterEach(() => {
     wrapper.destroy();

ee/spec/frontend/diffs/components/code_quality_gutter_icon_spec.js

@@ -78,7 +78,7 @@ describe('EE CodeQualityGutterIcon', () => {
 
       wrapper.findComponent(GlIcon).trigger('mouseover');
 
-      expect(wrapper.find(GlPopover).props().target).toBe(popoverTarget);
+      expect(wrapper.findComponent(GlPopover).props().target).toBe(popoverTarget);
     });
 
     it('passes the issue data into the issue components correctly', () => {

ee/spec/frontend/diffs/components/diff_line_note_form_spec.js

@@ -80,7 +80,7 @@ describe('EE DiffLineNoteForm', () => {
   });
 
   const submitNoteAddToReview = () =>
-    wrapper.find(NoteForm).vm.$emit('handleFormUpdateAddToReview', note);
+    wrapper.findComponent(NoteForm).vm.$emit('handleFormUpdateAddToReview', note);
   const saveDraftCommitId = () => saveDraft.mock.calls[0][1].data.note.commit_id;
 
   describe('when user submits note to review', () => {

ee/spec/frontend/environments/environment_alert_spec.js

@@ -20,7 +20,7 @@ describe('Environment Alert', () => {
     });
   };
 
-  const findSeverityBadge = () => wrapper.find(SeverityBadge);
+  const findSeverityBadge = () => wrapper.findComponent(SeverityBadge);
 
   beforeEach(() => {
     factory();

ee/spec/frontend/environments/environments_app_spec.js

@@ -72,7 +72,7 @@ describe('Environment', () => {
       });
 
       it('should render deploy boards', () => {
-        expect(wrapper.find(DeployBoard).exists()).toBe(true);
+        expect(wrapper.findComponent(DeployBoard).exists()).toBe(true);
       });
 
       it('should render arrow to open deploy boards', () => {

ee/spec/frontend/environments/environments_table_spec.js

@@ -44,6 +44,6 @@ describe('Environment table', () => {
       shallowMount,
     );
 
-    expect(wrapper.find(EnvironmentAlert).exists()).toBe(true);
+    expect(wrapper.findComponent(EnvironmentAlert).exists()).toBe(true);
   });
 });

ee/spec/frontend/environments_dashboard/components/dashboard_spec.js

@@ -61,7 +61,7 @@ describe('dashboard', () => {
     store.replaceState(state());
   });
 
-  const findPagination = () => wrapper.find(GlPagination);
+  const findPagination = () => wrapper.findComponent(GlPagination);
 
   it('should match the snapshot', () => {
     expect(wrapper.element).toMatchSnapshot();
@@ -72,7 +72,7 @@ describe('dashboard', () => {
   });
 
   it('should render the empty state component', () => {
-    expect(wrapper.find(GlEmptyState).exists()).toBe(true);
+    expect(wrapper.findComponent(GlEmptyState).exists()).toBe(true);
   });
 
   it('should not render pagination in empty state', () => {
@@ -93,7 +93,7 @@ describe('dashboard', () => {
     });
 
     it('includes the correct documentation link in the message', () => {
-      const helpLink = message.find(GlLink);
+      const helpLink = message.findComponent(GlLink);
 
       expect(helpLink.text()).toBe('More information');
       expect(helpLink.attributes('href')).toBe(propsData.environmentsDashboardHelpPath);
@@ -105,7 +105,7 @@ describe('dashboard', () => {
     let button;
 
     beforeEach(() => {
-      button = wrapper.find(GlButton);
+      button = wrapper.findComponent(GlButton);
     });
 
     it('is labelled correctly', () => {
@@ -128,12 +128,12 @@ describe('dashboard', () => {
 
     describe('project header', () => {
       it('should have one project header per project', () => {
-        const headers = wrapper.findAll(ProjectHeader);
+        const headers = wrapper.findAllComponents(ProjectHeader);
         expect(headers).toHaveLength(2);
       });
 
       it('should remove a project if it emits `remove`', () => {
-        const header = wrapper.find(ProjectHeader);
+        const header = wrapper.findComponent(ProjectHeader);
         header.vm.$emit('remove');
         expect(actionSpies.removeProject).toHaveBeenCalled();
       });
@@ -141,39 +141,39 @@ describe('dashboard', () => {
 
     describe('environment component', () => {
       it('should have one environment component per environment', () => {
-        const environments = wrapper.findAll(Environment);
+        const environments = wrapper.findAllComponents(Environment);
         expect(environments).toHaveLength(3);
       });
     });
 
     describe('project selector modal', () => {
       beforeEach(() => {
-        wrapper.find(GlButton).trigger('click');
+        wrapper.findComponent(GlButton).trigger('click');
         return nextTick();
       });
 
       it('should fire the add projects action on ok', () => {
-        wrapper.find(GlModal).vm.$emit('ok');
+        wrapper.findComponent(GlModal).vm.$emit('ok');
         expect(actionSpies.addProjectsToDashboard).toHaveBeenCalled();
       });
 
       it('should fire clear search when the modal is hidden', () => {
-        wrapper.find(GlModal).vm.$emit('hidden');
+        wrapper.findComponent(GlModal).vm.$emit('hidden');
         expect(actionSpies.clearSearchResults).toHaveBeenCalled();
       });
 
       it('should set the search query when searching', () => {
-        wrapper.find(ProjectSelector).vm.$emit('searched', 'test');
+        wrapper.findComponent(ProjectSelector).vm.$emit('searched', 'test');
         expect(actionSpies.setSearchQuery).toHaveBeenCalledWith(expect.any(Object), 'test');
       });
 
       it('should fetch query results when searching', () => {
-        wrapper.find(ProjectSelector).vm.$emit('searched', 'test');
+        wrapper.findComponent(ProjectSelector).vm.$emit('searched', 'test');
         expect(actionSpies.fetchSearchResults).toHaveBeenCalled();
       });
 
       it('should toggle a project when clicked', () => {
-        wrapper.find(ProjectSelector).vm.$emit('projectClicked', { name: 'test', id: 1 });
+        wrapper.findComponent(ProjectSelector).vm.$emit('projectClicked', { name: 'test', id: 1 });
         expect(actionSpies.toggleSelectedProject).toHaveBeenCalledWith(expect.any(Object), {
           name: 'test',
           id: 1,
@@ -181,7 +181,7 @@ describe('dashboard', () => {
       });
 
       it('should fetch the next page when bottom is reached', () => {
-        wrapper.find(ProjectSelector).vm.$emit('bottomReached');
+        wrapper.findComponent(ProjectSelector).vm.$emit('bottomReached');
         expect(actionSpies.fetchNextPage).toHaveBeenCalled();
       });
 
@@ -189,7 +189,7 @@ describe('dashboard', () => {
         store.state.pageInfo = { totalResults: 100 };
 
         await nextTick();
-        expect(wrapper.find(ProjectSelector).props('totalResults')).toBe(100);
+        expect(wrapper.findComponent(ProjectSelector).props('totalResults')).toBe(100);
       });
     });
 

ee/spec/frontend/environments_dashboard/components/environment_header_spec.js

@@ -33,15 +33,17 @@ describe('Environment Header', () => {
     });
 
     it('renders a link to the environment page', () => {
-      expect(wrapper.find(GlLink).attributes('href')).toBe(propsData.environment.environment_path);
+      expect(wrapper.findComponent(GlLink).attributes('href')).toBe(
+        propsData.environment.environment_path,
+      );
     });
 
     it('does not show a badge with the number of environments in the folder', () => {
-      expect(wrapper.find(GlBadge).exists()).toBe(false);
+      expect(wrapper.findComponent(GlBadge).exists()).toBe(false);
     });
 
     it('renders a link to the external app', () => {
-      expect(wrapper.find(ReviewAppLink).attributes('href')).toBe(
+      expect(wrapper.findComponent(ReviewAppLink).attributes('href')).toBe(
         propsData.environment.external_url,
       );
     });
@@ -64,12 +66,12 @@ describe('Environment Header', () => {
 
     it('shows a badge with the number of other environments in the folder', () => {
       const expected = propsData.environment.size.toString();
-      expect(wrapper.find(GlBadge).text()).toBe(expected);
+      expect(wrapper.findComponent(GlBadge).text()).toBe(expected);
     });
 
     it('shows an icon stating the environment is one of many in a folder', () => {
-      expect(wrapper.find(GlIcon).attributes('name')).toBe('information');
-      expect(wrapper.find(GlIcon).attributes('title')).toMatch(/last updated environment/);
+      expect(wrapper.findComponent(GlIcon).attributes('name')).toBe('information');
+      expect(wrapper.findComponent(GlIcon).attributes('title')).toMatch(/last updated environment/);
     });
 
     it('matches the snapshot', () => {

ee/spec/frontend/environments_dashboard/components/environment_spec.js

@@ -29,14 +29,14 @@ describe('Environment', () => {
   describe('wrapped components', () => {
     describe('environment header', () => {
       it('binds environment', () => {
-        expect(wrapper.find(EnvironmentHeader).props('environment')).toBe(environment);
+        expect(wrapper.findComponent(EnvironmentHeader).props('environment')).toBe(environment);
       });
     });
     describe('alerts', () => {
       let alert;
 
       beforeEach(() => {
-        alert = wrapper.find(Alert);
+        alert = wrapper.findComponent(Alert);
       });
       it('binds alert count to count', () => {
         expect(alert.props('count')).toBe(environment.alert_count);
@@ -49,7 +49,7 @@ describe('Environment', () => {
       let commit;
 
       beforeEach(() => {
-        commit = wrapper.find(Commit);
+        commit = wrapper.findComponent(Commit);
       });
 
       it('binds commitRef', () => {

ee/spec/frontend/environments_dashboard/components/project_header_spec.js

@@ -36,7 +36,7 @@ describe('Project Header', () => {
 
   describe('renders project namespace, name, and avatars', () => {
     it('shows the project namespace avatar', () => {
-      const projectNamespaceAvatar = wrapper.findAll(ProjectAvatar).at(0);
+      const projectNamespaceAvatar = wrapper.findAllComponents(ProjectAvatar).at(0);
       expect(projectNamespaceAvatar.props('project')).toEqual(propsData.project.namespace);
     });
 
@@ -50,7 +50,7 @@ describe('Project Header', () => {
     });
 
     it('shows the project avatar', () => {
-      const projectAvatar = wrapper.findAll(ProjectAvatar).at(1);
+      const projectAvatar = wrapper.findAllComponents(ProjectAvatar).at(1);
       expect(projectAvatar.props('project')).toEqual(propsData.project);
     });
 
@@ -66,16 +66,16 @@ describe('Project Header', () => {
   describe('more actions', () => {
     it('should list "remove" as an action', () => {
       const removeLink = wrapper
-        .find(GlDropdown)
-        .findAll(GlDropdownItem)
+        .findComponent(GlDropdown)
+        .findAllComponents(GlDropdownItem)
         .filter((w) => w.text() === 'Remove');
       expect(removeLink.exists()).toBe(true);
     });
 
     it('should emit a "remove" event when "remove" is clicked', () => {
       const removeLink = wrapper
-        .find(GlDropdown)
-        .findAll(GlDropdownItem)
+        .findComponent(GlDropdown)
+        .findAllComponents(GlDropdownItem)
         .filter((w) => w.text() === 'Remove');
       removeLink.at(0).vm.$emit('click');