Add latest changes from gitlab-org/gitlab@master

16 files changed, 48 insertions, 45 deletions

diff --git a/spec/frontend/projects/commit/components/form_modal_spec.js b/spec/frontend/projects/commit/components/form_modal_spec.js
index 79e9dab935d..20c312ec771 100644
--- a/spec/frontend/projects/commit/components/form_modal_spec.js
+++ b/spec/frontend/projects/commit/components/form_modal_spec.js
@@ -99,7 +99,9 @@ describe('CommitFormModal', () => {
       createComponent(shallowMount, {}, { prependedText: '_prepended_text_' });
 
       expect(findPrependedText().exists()).toBe(true);
-      expect(findPrependedText().find(GlSprintf).attributes('message')).toBe('_prepended_text_');
+      expect(findPrependedText().findComponent(GlSprintf).attributes('message')).toBe(
+        '_prepended_text_',
+      );
     });
 
     it('Does not show prepended text', () => {
@@ -124,7 +126,7 @@ describe('CommitFormModal', () => {
       createComponent(shallowMount, { pushCode: false });
 
       expect(findAppendedText().exists()).toBe(true);
-      expect(findAppendedText().find(GlSprintf).attributes('message')).toContain(
+      expect(findAppendedText().findComponent(GlSprintf).attributes('message')).toContain(
         mockData.modalPropsData.i18n.branchInFork,
       );
     });
@@ -133,7 +135,7 @@ describe('CommitFormModal', () => {
       createComponent(shallowMount, { pushCode: false, branchCollaboration: true });
 
       expect(findAppendedText().exists()).toBe(true);
-      expect(findAppendedText().find(GlSprintf).attributes('message')).toContain(
+      expect(findAppendedText().findComponent(GlSprintf).attributes('message')).toContain(
         mockData.modalPropsData.i18n.existingBranch,
       );
     });
diff --git a/spec/frontend/projects/commits/components/author_select_spec.js b/spec/frontend/projects/commits/components/author_select_spec.js
index 57e5ef0ed1d..287bfe1c14d 100644
--- a/spec/frontend/projects/commits/components/author_select_spec.js
+++ b/spec/frontend/projects/commits/components/author_select_spec.js
@@ -58,10 +58,10 @@ describe('Author Select', () => {
     resetHTMLFixture();
   });
 
-  const findDropdownContainer = () => wrapper.find({ ref: 'dropdownContainer' });
-  const findDropdown = () => wrapper.find(GlDropdown);
-  const findDropdownHeader = () => wrapper.find(GlDropdownSectionHeader);
-  const findSearchBox = () => wrapper.find(GlSearchBoxByType);
+  const findDropdownContainer = () => wrapper.findComponent({ ref: 'dropdownContainer' });
+  const findDropdown = () => wrapper.findComponent(GlDropdown);
+  const findDropdownHeader = () => wrapper.findComponent(GlDropdownSectionHeader);
+  const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
   const findDropdownItems = () => wrapper.findAll(GlDropdownItem);
 
   describe('user is searching via "filter by commit message"', () => {
diff --git a/spec/frontend/projects/compare/components/app_spec.js b/spec/frontend/projects/compare/components/app_spec.js
index c9ffdf20c32..a24e40b842c 100644
--- a/spec/frontend/projects/compare/components/app_spec.js
+++ b/spec/frontend/projects/compare/components/app_spec.js
@@ -66,7 +66,7 @@ describe('CompareApp component', () => {
   });
 
   describe('compare button', () => {
-    const findCompareButton = () => wrapper.find(GlButton);
+    const findCompareButton = () => wrapper.findComponent(GlButton);
 
     it('renders button', () => {
       expect(findCompareButton().exists()).toBe(true);
diff --git a/spec/frontend/projects/compare/components/repo_dropdown_spec.js b/spec/frontend/projects/compare/components/repo_dropdown_spec.js
index 98aec347e4b..8e720b40e6f 100644
--- a/spec/frontend/projects/compare/components/repo_dropdown_spec.js
+++ b/spec/frontend/projects/compare/components/repo_dropdown_spec.js
@@ -21,7 +21,7 @@ describe('RepoDropdown component', () => {
     wrapper = null;
   });
 
-  const findGlDropdown = () => wrapper.find(GlDropdown);
+  const findGlDropdown = () => wrapper.findComponent(GlDropdown);
   const findHiddenInput = () => wrapper.find('input[type="hidden"]');
 
   describe('Source Revision', () => {
diff --git a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js
index 102f95f65da..8d4711a79ed 100644
--- a/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js
+++ b/spec/frontend/projects/compare/components/revision_dropdown_legacy_spec.js
@@ -38,7 +38,7 @@ describe('RevisionDropdown component', () => {
     axiosMock.restore();
   });
 
-  const findGlDropdown = () => wrapper.find(GlDropdown);
+  const findGlDropdown = () => wrapper.findComponent(GlDropdown);
 
   it('sets hidden input', () => {
     expect(wrapper.find('input[type="hidden"]').attributes('value')).toBe(
diff --git a/spec/frontend/projects/compare/components/revision_dropdown_spec.js b/spec/frontend/projects/compare/components/revision_dropdown_spec.js
index c8a90848492..bd8c0d2784f 100644
--- a/spec/frontend/projects/compare/components/revision_dropdown_spec.js
+++ b/spec/frontend/projects/compare/components/revision_dropdown_spec.js
@@ -35,8 +35,8 @@ describe('RevisionDropdown component', () => {
     axiosMock.restore();
   });
 
-  const findGlDropdown = () => wrapper.find(GlDropdown);
-  const findSearchBox = () => wrapper.find(GlSearchBoxByType);
+  const findGlDropdown = () => wrapper.findComponent(GlDropdown);
+  const findSearchBox = () => wrapper.findComponent(GlSearchBoxByType);
 
   it('sets hidden input', () => {
     createComponent();
diff --git a/spec/frontend/projects/components/project_delete_button_spec.js b/spec/frontend/projects/components/project_delete_button_spec.js
index a3bc4931eb3..49e3218e5bc 100644
--- a/spec/frontend/projects/components/project_delete_button_spec.js
+++ b/spec/frontend/projects/components/project_delete_button_spec.js
@@ -8,7 +8,7 @@ jest.mock('lodash/uniqueId', () => () => 'fakeUniqueId');
 describe('Project remove modal', () => {
   let wrapper;
 
-  const findSharedDeleteButton = () => wrapper.find(SharedDeleteButton);
+  const findSharedDeleteButton = () => wrapper.findComponent(SharedDeleteButton);
 
   const defaultProps = {
     confirmPhrase: 'foo',
diff --git a/spec/frontend/projects/components/shared/delete_button_spec.js b/spec/frontend/projects/components/shared/delete_button_spec.js
index 45c39ee91d8..097b18025a3 100644
--- a/spec/frontend/projects/components/shared/delete_button_spec.js
+++ b/spec/frontend/projects/components/shared/delete_button_spec.js
@@ -11,7 +11,7 @@ describe('Project remove modal', () => {
   const findFormElement = () => wrapper.find('form');
   const findConfirmButton = () => wrapper.find('.js-modal-action-primary');
   const findAuthenticityTokenInput = () => findFormElement().find('input[name=authenticity_token]');
-  const findModal = () => wrapper.find(GlModal);
+  const findModal = () => wrapper.findComponent(GlModal);
   const findTitle = () => wrapper.find('[data-testid="delete-alert-title"]');
   const findAlertBody = () => wrapper.find('[data-testid="delete-alert-body"]');
 
diff --git a/spec/frontend/projects/details/upload_button_spec.js b/spec/frontend/projects/details/upload_button_spec.js
index d7308963088..50638755260 100644
--- a/spec/frontend/projects/details/upload_button_spec.js
+++ b/spec/frontend/projects/details/upload_button_spec.js
@@ -32,11 +32,11 @@ describe('UploadButton', () => {
   });
 
   it('displays an upload button', () => {
-    expect(wrapper.find(GlButton).exists()).toBe(true);
+    expect(wrapper.findComponent(GlButton).exists()).toBe(true);
   });
 
   it('contains a modal', () => {
-    const modal = wrapper.find(UploadBlobModal);
+    const modal = wrapper.findComponent(UploadBlobModal);
 
     expect(modal.exists()).toBe(true);
     expect(modal.props('modalId')).toBe(MODAL_ID);
@@ -44,7 +44,7 @@ describe('UploadButton', () => {
 
   describe('when clickinig the upload file button', () => {
     beforeEach(() => {
-      wrapper.find(GlButton).vm.$emit('click');
+      wrapper.findComponent(GlButton).vm.$emit('click');
     });
 
     it('opens the modal', () => {
diff --git a/spec/frontend/projects/pipelines/charts/components/app_spec.js b/spec/frontend/projects/pipelines/charts/components/app_spec.js
index 7b9011fa3d9..db9d7eb9a8a 100644
--- a/spec/frontend/projects/pipelines/charts/components/app_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/app_spec.js
@@ -47,15 +47,16 @@ describe('ProjectsPipelinesChartsApp', () => {
     wrapper.destroy();
   });
 
-  const findGlTabs = () => wrapper.find(GlTabs);
+  const findGlTabs = () => wrapper.findComponent(GlTabs);
   const findAllGlTabs = () => wrapper.findAll(GlTab);
   const findGlTabAtIndex = (index) => findAllGlTabs().at(index);
-  const findLeadTimeCharts = () => wrapper.find(LeadTimeChartsStub);
-  const findTimeToRestoreServiceCharts = () => wrapper.find(TimeToRestoreServiceChartsStub);
-  const findChangeFailureRateCharts = () => wrapper.find(ChangeFailureRateChartsStub);
-  const findDeploymentFrequencyCharts = () => wrapper.find(DeploymentFrequencyChartsStub);
-  const findPipelineCharts = () => wrapper.find(PipelineCharts);
-  const findProjectQualitySummary = () => wrapper.find(ProjectQualitySummaryStub);
+  const findLeadTimeCharts = () => wrapper.findComponent(LeadTimeChartsStub);
+  const findTimeToRestoreServiceCharts = () =>
+    wrapper.findComponent(TimeToRestoreServiceChartsStub);
+  const findChangeFailureRateCharts = () => wrapper.findComponent(ChangeFailureRateChartsStub);
+  const findDeploymentFrequencyCharts = () => wrapper.findComponent(DeploymentFrequencyChartsStub);
+  const findPipelineCharts = () => wrapper.findComponent(PipelineCharts);
+  const findProjectQualitySummary = () => wrapper.findComponent(ProjectQualitySummaryStub);
 
   describe('when all charts are available', () => {
     beforeEach(() => {
diff --git a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
index 7bb289408b8..8c18d2992ea 100644
--- a/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/ci_cd_analytics_charts_spec.js
@@ -81,7 +81,7 @@ describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', (
     it('should select a different chart on change', async () => {
       findSegmentedControl().vm.$emit('input', 1);
 
-      const chart = wrapper.find(CiCdAnalyticsAreaChart);
+      const chart = wrapper.findComponent(CiCdAnalyticsAreaChart);
 
       await nextTick();
 
@@ -92,7 +92,7 @@ describe('~/vue_shared/components/ci_cd_analytics/ci_cd_analytics_charts.vue', (
 
   it('should not display charts if there are no charts', () => {
     wrapper = createWrapper({ charts: [] });
-    expect(wrapper.find(CiCdAnalyticsAreaChart).exists()).toBe(false);
+    expect(wrapper.findComponent(CiCdAnalyticsAreaChart).exists()).toBe(false);
   });
 
   describe('slots', () => {
diff --git a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
index 3c91b913e67..2f452f909ff 100644
--- a/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
+++ b/spec/frontend/projects/pipelines/charts/components/pipeline_charts_spec.js
@@ -44,7 +44,7 @@ describe('~/projects/pipelines/charts/components/pipeline_charts.vue', () => {
 
   describe('overall statistics', () => {
     it('displays the statistics list', () => {
-      const list = wrapper.find(StatisticsList);
+      const list = wrapper.findComponent(StatisticsList);
 
       expect(list.exists()).toBe(true);
       expect(list.props('counts')).toEqual({
@@ -56,7 +56,7 @@ describe('~/projects/pipelines/charts/components/pipeline_charts.vue', () => {
     });
 
     it('displays the commit duration chart', () => {
-      const chart = wrapper.find(GlColumnChart);
+      const chart = wrapper.findComponent(GlColumnChart);
 
       expect(chart.exists()).toBeTruthy();
       expect(chart.props('yAxisTitle')).toBe('Minutes');
@@ -68,12 +68,12 @@ describe('~/projects/pipelines/charts/components/pipeline_charts.vue', () => {
 
   describe('pipelines charts', () => {
     it('displays the charts components', () => {
-      expect(wrapper.find(CiCdAnalyticsCharts).exists()).toBe(true);
+      expect(wrapper.findComponent(CiCdAnalyticsCharts).exists()).toBe(true);
     });
 
     describe('displays individual correctly', () => {
       it('renders with the correct data', () => {
-        const charts = wrapper.find(CiCdAnalyticsCharts);
+        const charts = wrapper.findComponent(CiCdAnalyticsCharts);
         expect(charts.props()).toEqual({
           charts: wrapper.vm.areaCharts,
           chartOptions: wrapper.vm.$options.areaChartOptions,
diff --git a/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js b/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js
index 0a05832ceb6..329060b9d10 100644
--- a/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js
+++ b/spec/frontend/projects/settings/components/shared_runners_toggle_spec.js
@@ -27,9 +27,9 @@ describe('projects/settings/components/shared_runners', () => {
     });
   };
 
-  const findErrorAlert = () => wrapper.find(GlAlert);
-  const findSharedRunnersToggle = () => wrapper.find(GlToggle);
-  const findToggleTooltip = () => wrapper.find(GlTooltip);
+  const findErrorAlert = () => wrapper.findComponent(GlAlert);
+  const findSharedRunnersToggle = () => wrapper.findComponent(GlToggle);
+  const findToggleTooltip = () => wrapper.findComponent(GlTooltip);
   const getToggleValue = () => findSharedRunnersToggle().props('value');
   const isToggleLoading = () => findSharedRunnersToggle().props('isLoading');
   const isToggleDisabled = () => findSharedRunnersToggle().props('disabled');
diff --git a/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js b/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js
index 763d54be753..13f3eea277a 100644
--- a/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js
+++ b/spec/frontend/projects/settings_service_desk/components/service_desk_root_spec.js
@@ -26,7 +26,7 @@ describe('ServiceDeskRoot', () => {
     publicProject: false,
   };
 
-  const getAlertText = () => wrapper.find(GlAlert).text();
+  const getAlertText = () => wrapper.findComponent(GlAlert).text();
 
   const createComponent = (customInject = {}) =>
     shallowMount(ServiceDeskRoot, {
@@ -51,7 +51,7 @@ describe('ServiceDeskRoot', () => {
     it('is rendered', () => {
       wrapper = createComponent();
 
-      expect(wrapper.find(ServiceDeskSetting).props()).toEqual({
+      expect(wrapper.findComponent(ServiceDeskSetting).props()).toEqual({
         customEmail: provideData.customEmail,
         customEmailEnabled: provideData.customEmailEnabled,
         incomingEmail: provideData.initialIncomingEmail,
@@ -89,7 +89,7 @@ describe('ServiceDeskRoot', () => {
         beforeEach(async () => {
           wrapper = createComponent();
 
-          wrapper.find(ServiceDeskSetting).vm.$emit('toggle', true);
+          wrapper.findComponent(ServiceDeskSetting).vm.$emit('toggle', true);
 
           await waitForPromises();
         });
@@ -111,7 +111,7 @@ describe('ServiceDeskRoot', () => {
         beforeEach(async () => {
           wrapper = createComponent();
 
-          wrapper.find(ServiceDeskSetting).vm.$emit('toggle', false);
+          wrapper.findComponent(ServiceDeskSetting).vm.$emit('toggle', false);
 
           await waitForPromises();
         });
@@ -143,7 +143,7 @@ describe('ServiceDeskRoot', () => {
             projectKey: 'key',
           };
 
-          wrapper.find(ServiceDeskSetting).vm.$emit('save', payload);
+          wrapper.findComponent(ServiceDeskSetting).vm.$emit('save', payload);
 
           await waitForPromises();
         });
@@ -174,7 +174,7 @@ describe('ServiceDeskRoot', () => {
             projectKey: 'key',
           };
 
-          wrapper.find(ServiceDeskSetting).vm.$emit('save', payload);
+          wrapper.findComponent(ServiceDeskSetting).vm.$emit('save', payload);
 
           await waitForPromises();
         });
diff --git a/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js b/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js
index aac1a418142..f9f520cb2ab 100644
--- a/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js
+++ b/spec/frontend/projects/settings_service_desk/components/service_desk_setting_spec.js
@@ -8,13 +8,13 @@ import ClipboardButton from '~/vue_shared/components/clipboard_button.vue';
 describe('ServiceDeskSetting', () => {
   let wrapper;
 
-  const findButton = () => wrapper.find(GlButton);
-  const findClipboardButton = () => wrapper.find(ClipboardButton);
+  const findButton = () => wrapper.findComponent(GlButton);
+  const findClipboardButton = () => wrapper.findComponent(ClipboardButton);
   const findIncomingEmail = () => wrapper.findByTestId('incoming-email');
   const findIncomingEmailLabel = () => wrapper.findByTestId('incoming-email-label');
-  const findLoadingIcon = () => wrapper.find(GlLoadingIcon);
-  const findTemplateDropdown = () => wrapper.find(GlDropdown);
-  const findToggle = () => wrapper.find(GlToggle);
+  const findLoadingIcon = () => wrapper.findComponent(GlLoadingIcon);
+  const findTemplateDropdown = () => wrapper.findComponent(GlDropdown);
+  const findToggle = () => wrapper.findComponent(GlToggle);
 
   const createComponent = ({ props = {} } = {}) =>
     extendedWrapper(
diff --git a/spec/frontend/projects/settings_service_desk/components/service_desk_template_dropdown_spec.js b/spec/frontend/projects/settings_service_desk/components/service_desk_template_dropdown_spec.js
index cdb355f5a9b..dde06d40a4d 100644
--- a/spec/frontend/projects/settings_service_desk/components/service_desk_template_dropdown_spec.js
+++ b/spec/frontend/projects/settings_service_desk/components/service_desk_template_dropdown_spec.js
@@ -7,7 +7,7 @@ import { TEMPLATES } from './mock_data';
 describe('ServiceDeskTemplateDropdown', () => {
   let wrapper;
 
-  const findTemplateDropdown = () => wrapper.find(GlDropdown);
+  const findTemplateDropdown = () => wrapper.findComponent(GlDropdown);
 
   const createComponent = ({ props = {} } = {}) =>
     extendedWrapper(