Merge branch 'xanf-vtu-30-find-stubs' into 'master'

Replace search by stub name with real components

Closes #191270

See merge request gitlab-org/gitlab!22300

ee/spec/frontend/analytics/cycle_analytics/components/stage_event_list_spec.js

 import { shallowMount, mount } from '@vue/test-utils';
 import StageEventList from 'ee/analytics/cycle_analytics/components/stage_event_list.vue';
+import StageEventItem from 'ee/analytics/cycle_analytics/components/stage_event_item.vue';
+import StageBuildItem from 'ee/analytics/cycle_analytics/components/stage_build_item.vue';
 
 import {
   issueStage,
@@ -122,7 +124,7 @@ describe('Stage', () => {
       ${'Production'} | ${productionStage} | ${productionEvents}
     `('$name stage will render the items as StageEventItems', ({ stage, eventList }) => {
       wrapper = createComponent({ props: { events: eventList, stage }, stubs: mockStubs });
-      expect(wrapper.find('stage-event-item-stub').exists()).toBe(true);
+      expect(wrapper.find(StageEventItem).exists()).toBe(true);
     });
 
     it.each`
@@ -131,7 +133,7 @@ describe('Stage', () => {
       ${'Staging'} | ${stagingStage} | ${stagingEvents}
     `('$name stage will render the items as StageBuildItems', ({ stage, eventList }) => {
       wrapper = createComponent({ props: { events: eventList, stage }, stubs: mockStubs });
-      expect(wrapper.find('stage-build-item-stub').exists()).toBe(true);
+      expect(wrapper.find(StageBuildItem).exists()).toBe(true);
     });
 
     describe('Test stage', () => {

ee/spec/frontend/analytics/cycle_analytics/components/stage_table_spec.js

 import Vue from 'vue';
 import { shallowMount, mount } from '@vue/test-utils';
+import { GlLoadingIcon } from '@gitlab/ui';
 import StageTable from 'ee/analytics/cycle_analytics/components/stage_table.vue';
 import {
   issueEvents,
@@ -153,7 +154,7 @@ describe('StageTable', () => {
 
   it('isLoading = true', () => {
     wrapper = createComponent({ isLoading: true }, true);
-    expect(wrapper.find('gl-loading-icon-stub').exists()).toEqual(true);
+    expect(wrapper.find(GlLoadingIcon).exists()).toEqual(true);
   });
 
   describe('isEmptyStage = true', () => {

ee/spec/frontend/packages/list/components/packages_list_app_spec.js

@@ -6,17 +6,16 @@ describe('packages_list_app', () => {
   let wrapper;
 
   const emptyListHelpUrl = 'helpUrl';
-  const findGlEmptyState = () => wrapper.find({ name: 'gl-empty-state-stub' });
   const findListComponent = () => wrapper.find({ name: 'package-list' });
   const findLoadingComponent = () => wrapper.find({ name: 'gl-loading-icon' });
 
   const componentConfig = {
     stubs: {
+      GlEmptyState,
       'package-list': {
         name: 'package-list',
         template: '<div><slot name="empty-state"></slot></div>',
       },
-      GlEmptyState: { ...GlEmptyState, name: 'gl-empty-state-stub' },
       'gl-loading-icon': { name: 'gl-loading-icon', template: '<div>loading</div>' },
     },
     computed: {
@@ -62,7 +61,7 @@ describe('packages_list_app', () => {
   });
 
   it('generate the correct empty list link', () => {
-    const emptyState = findGlEmptyState();
+    const emptyState = findListComponent();
     const link = emptyState.find('a');
 
     expect(link.html()).toMatchInlineSnapshot(

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

 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlButton } from '@gitlab/ui';
 import store from 'ee/subscriptions/new/store';
 import * as constants from 'ee/subscriptions/new/constants';
 import component from 'ee/subscriptions/new/components/checkout/components/step.vue';
+import StepSummary from 'ee/subscriptions/new/components/checkout/components/step_summary.vue';
 
 describe('Step', () => {
   const localVue = createLocalVue();
@@ -109,13 +111,13 @@ describe('Step', () => {
       activatePreviousStep();
       factory();
 
-      expect(wrapper.find('stepsummary-stub').exists()).toBe(true);
+      expect(wrapper.find(StepSummary).exists()).toBe(true);
     });
 
     it('does not show the summary when this step is not finished', () => {
       factory();
 
-      expect(wrapper.find('stepsummary-stub').exists()).toBe(false);
+      expect(wrapper.find(StepSummary).exists()).toBe(false);
     });
   });
 
@@ -135,13 +137,13 @@ describe('Step', () => {
     it('is disabled when this step is not valid', () => {
       factory({ isValid: false });
 
-      expect(wrapper.find('glbutton-stub').attributes('disabled')).toBe('true');
+      expect(wrapper.find(GlButton).attributes('disabled')).toBe('true');
     });
 
     it('is enabled when this step is valid', () => {
       factory();
 
-      expect(wrapper.find('glbutton-stub').attributes('disabled')).toBeUndefined();
+      expect(wrapper.find(GlButton).attributes('disabled')).toBeUndefined();
     });
   });
 });

spec/frontend/diffs/components/diff_stats_spec.js

 import { shallowMount } from '@vue/test-utils';
+import Icon from '~/vue_shared/components/icon.vue';
 import DiffStats from '~/diffs/components/diff_stats.vue';
 
 describe('diff_stats', () => {
@@ -22,9 +23,16 @@ describe('diff_stats', () => {
         diffFilesLength: 300,
       },
     });
-    const additions = wrapper.find('icon-stub[name="file-addition"]').element.parentNode;
-    const deletions = wrapper.find('icon-stub[name="file-deletion"]').element.parentNode;
-    const filesChanged = wrapper.find('icon-stub[name="doc-code"]').element.parentNode;
+
+    const findIcon = name =>
+      wrapper
+        .findAll(Icon)
+        .filter(c => c.attributes('name') === name)
+        .at(0).element.parentNode;
+
+    const additions = findIcon('file-addition');
+    const deletions = findIcon('file-deletion');
+    const filesChanged = findIcon('doc-code');
 
     expect(additions.textContent).toContain('100');
     expect(deletions.textContent).toContain('200');

spec/frontend/error_tracking/components/error_details_spec.js

 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import Vuex from 'vuex';
-import { GlLoadingIcon, GlLink, GlBadge } from '@gitlab/ui';
+import { GlLoadingIcon, GlLink, GlBadge, GlFormInput } from '@gitlab/ui';
 import LoadingButton from '~/vue_shared/components/loading_button.vue';
 import Stacktrace from '~/error_tracking/components/stacktrace.vue';
 import ErrorDetails from '~/error_tracking/components/error_details.vue';
@@ -14,6 +14,11 @@ describe('ErrorDetails', () => {
   let actions;
   let getters;
 
+  const findInput = name => {
+    const inputs = wrapper.findAll(GlFormInput).filter(c => c.attributes('name') === name);
+    return inputs.length ? inputs.at(0) : inputs;
+  };
+
   function mountComponent() {
     wrapper = shallowMount(ErrorDetails, {
       stubs: { LoadingButton },
@@ -136,15 +141,15 @@ describe('ErrorDetails', () => {
       });
 
       it('should send sentry_issue_identifier', () => {
-        const sentryErrorIdInput = wrapper.find(
-          'glforminput-stub[name="issue[sentry_issue_attributes][sentry_issue_identifier]"',
+        const sentryErrorIdInput = findInput(
+          'issue[sentry_issue_attributes][sentry_issue_identifier]',
         );
         expect(sentryErrorIdInput.attributes('value')).toBe('129381');
       });
 
       it('should set the form values with title and description', () => {
-        const csrfTokenInput = wrapper.find('glforminput-stub[name="authenticity_token"]');
-        const issueTitleInput = wrapper.find('glforminput-stub[name="issue[title]"]');
+        const csrfTokenInput = findInput('authenticity_token');
+        const issueTitleInput = findInput('issue[title]');
         const issueDescriptionInput = wrapper.find('input[name="issue[description]"]');
         expect(csrfTokenInput.attributes('value')).toBe('fakeToken');
         expect(issueTitleInput.attributes('value')).toContain(wrapper.vm.issueTitle);

spec/frontend/mr_popover/mr_popover_spec.js

 import { shallowMount } from '@vue/test-utils';
 import MRPopover from '~/mr_popover/components/mr_popover';
+import CiIcon from '~/vue_shared/components/ci_icon.vue';
 
 describe('MR Popover', () => {
   let wrapper;
@@ -58,7 +59,7 @@ describe('MR Popover', () => {
       });
 
       return wrapper.vm.$nextTick().then(() => {
-        expect(wrapper.contains('ciicon-stub')).toBe(false);
+        expect(wrapper.contains(CiIcon)).toBe(false);
       });
     });
   });

spec/frontend/reports/components/report_item_spec.js

 import { shallowMount } from '@vue/test-utils';
 import { STATUS_SUCCESS } from '~/reports/constants';
 import ReportItem from '~/reports/components/report_item.vue';
+import IssueStatusIcon from '~/reports/components/issue_status_icon.vue';
 import { componentNames } from '~/reports/components/issue_body';
 
 describe('ReportItem', () => {
@@ -15,7 +16,7 @@ describe('ReportItem', () => {
         },
       });
 
-      expect(wrapper.find('issuestatusicon-stub').exists()).toBe(false);
+      expect(wrapper.find(IssueStatusIcon).exists()).toBe(false);
     });
 
     it('shows status icon when unspecified', () => {
@@ -27,7 +28,7 @@ describe('ReportItem', () => {
         },
       });
 
-      expect(wrapper.find('issuestatusicon-stub').exists()).toBe(true);
+      expect(wrapper.find(IssueStatusIcon).exists()).toBe(true);
     });
   });
 });

spec/frontend/vue_shared/components/commit_spec.js

@@ -7,6 +7,11 @@ describe('Commit component', () => {
   let props;
   let wrapper;
 
+  const findIcon = name => {
+    const icons = wrapper.findAll(Icon).filter(c => c.attributes('name') === name);
+    return icons.length ? icons.at(0) : icons;
+  };
+
   const findUserAvatar = () => wrapper.find(UserAvatarLink);
 
   const createComponent = propsData => {
@@ -71,7 +76,7 @@ describe('Commit component', () => {
     });
 
     it('should render a tag icon if it represents a tag', () => {
-      expect(wrapper.find('icon-stub[name="tag"]').exists()).toBe(true);
+      expect(findIcon('tag').exists()).toBe(true);
     });
 
     it('should render a link to the ref url', () => {
@@ -89,7 +94,7 @@ describe('Commit component', () => {
     });
 
     it('should render icon for commit', () => {
-      expect(wrapper.find('icon-stub[name="commit"]').exists()).toBe(true);
+      expect(findIcon('commit').exists()).toBe(true);
     });
 
     describe('Given commit title and author props', () => {
@@ -162,7 +167,7 @@ describe('Commit component', () => {
 
       expect(refEl.attributes('title')).toBe(props.commitRef.name);
 
-      expect(wrapper.find('icon-stub[name="branch"]').exists()).toBe(true);
+      expect(findIcon('branch').exists()).toBe(true);
     });
   });
 
@@ -195,7 +200,7 @@ describe('Commit component', () => {
 
       expect(refEl.attributes('title')).toBe(props.mergeRequestRef.title);
 
-      expect(wrapper.find('icon-stub[name="git-merge"]').exists()).toBe(true);
+      expect(findIcon('git-merge').exists()).toBe(true);
     });
   });