Fix deprecated search pattern for VTU

Searching component by `{ name: 'foo' }` is deprecated
Refactor to use component classes instead

ee/spec/frontend/vue_shared/license_compliance/license_management_spec.js

@@ -16,8 +16,7 @@ let wrapper;
 
 const managedLicenses = [approvedLicense, blacklistedLicense];
 
-const PaginatedListMock = {
-  name: 'PaginatedList',
+const PaginatedList = {
   props: ['list'],
   template: `
     <div>
@@ -64,7 +63,7 @@ const createComponent = ({ state, getters, props, actionMocks, isAdmin, options,
       ...props,
     },
     stubs: {
-      PaginatedList: PaginatedListMock,
+      PaginatedList,
     },
     provide: {
       glFeatures: { licenseComplianceDeniesMr: false },
@@ -98,7 +97,7 @@ describe('License Management', () => {
           getters: { hasPendingLicenses: () => true },
           isAdmin,
         });
-        expect(wrapper.find({ name: 'PaginatedList' }).props('list')).toBe(managedLicenses);
+        expect(wrapper.find(PaginatedList).props('list')).toBe(managedLicenses);
       });
 
       describe('when not loading', () => {
@@ -107,7 +106,7 @@ describe('License Management', () => {
         });
 
         it('should render list of managed licenses', () => {
-          expect(wrapper.find({ name: 'PaginatedList' }).props('list')).toBe(managedLicenses);
+          expect(wrapper.find(PaginatedList).props('list')).toBe(managedLicenses);
         });
       });
 

spec/frontend/alert_management/components/alert_metrics_spec.js

@@ -3,15 +3,13 @@ import waitForPromises from 'helpers/wait_for_promises';
 import MockAdapter from 'axios-mock-adapter';
 import axios from 'axios';
 import AlertMetrics from '~/alert_management/components/alert_metrics.vue';
+import MetricEmbed from '~/monitoring/components/embeds/metric_embed.vue';
 
 jest.mock('~/monitoring/stores', () => ({
   monitoringDashboard: {},
 }));
 
-const mockEmbedName = 'MetricsEmbedStub';
-
 jest.mock('~/monitoring/components/embeds/metric_embed.vue', () => ({
-  name: mockEmbedName,
   render(h) {
     return h('div');
   },
@@ -26,13 +24,10 @@ describe('Alert Metrics', () => {
       propsData: {
         ...props,
       },
-      stubs: {
-        MetricEmbed: true,
-      },
     });
   }
 
-  const findChart = () => wrapper.find({ name: mockEmbedName });
+  const findChart = () => wrapper.find(MetricEmbed);
   const findEmptyState = () => wrapper.find({ ref: 'emptyState' });
 
   afterEach(() => {

spec/frontend/logs/components/environment_logs_spec.js

@@ -39,13 +39,22 @@ describe('EnvironmentLogs', () => {
   };
 
   const updateControlBtnsMock = jest.fn();
+  const LogControlButtonsStub = {
+    template: '<div/>',
+    methods: {
+      update: updateControlBtnsMock,
+    },
+    props: {
+      scrollDownButtonDisabled: false,
+    },
+  };
 
   const findEnvironmentsDropdown = () => wrapper.find('.js-environments-dropdown');
 
   const findSimpleFilters = () => wrapper.find({ ref: 'log-simple-filters' });
   const findAdvancedFilters = () => wrapper.find({ ref: 'log-advanced-filters' });
   const findElasticsearchNotice = () => wrapper.find({ ref: 'elasticsearchNotice' });
-  const findLogControlButtons = () => wrapper.find({ name: 'log-control-buttons-stub' });
+  const findLogControlButtons = () => wrapper.find(LogControlButtonsStub);
 
   const findInfiniteScroll = () => wrapper.find({ ref: 'infiniteScroll' });
   const findLogTrace = () => wrapper.find({ ref: 'logTrace' });
@@ -76,16 +85,7 @@ describe('EnvironmentLogs', () => {
       propsData,
       store,
       stubs: {
-        LogControlButtons: {
-          name: 'log-control-buttons-stub',
-          template: '<div/>',
-          methods: {
-            update: updateControlBtnsMock,
-          },
-          props: {
-            scrollDownButtonDisabled: false,
-          },
-        },
+        LogControlButtons: LogControlButtonsStub,
         GlInfiniteScroll: {
           name: 'gl-infinite-scroll',
           template: `

spec/frontend/notes/components/discussion_counter_spec.js

 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { GlIcon } from '@gitlab/ui';
 import notesModule from '~/notes/stores/modules';
 import DiscussionCounter from '~/notes/components/discussion_counter.vue';
 import { noteableDataMock, discussionMock, notesDataMock, userDataMock } from '../mock_data';
@@ -112,13 +113,13 @@ describe('DiscussionCounter component', () => {
       updateStoreWithExpanded(true);
 
       expect(wrapper.vm.allExpanded).toBe(true);
-      expect(toggleAllButton.find({ name: 'angle-up' }).exists()).toBe(true);
+      expect(toggleAllButton.find(GlIcon).props().name).toBe('angle-up');
 
       toggleAllButton.trigger('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.vm.allExpanded).toBe(false);
-        expect(toggleAllButton.find({ name: 'angle-down' }).exists()).toBe(true);
+        expect(toggleAllButton.find(GlIcon).props().name).toBe('angle-down');
       });
     });
 
@@ -126,13 +127,13 @@ describe('DiscussionCounter component', () => {
       updateStoreWithExpanded(false);
 
       expect(wrapper.vm.allExpanded).toBe(false);
-      expect(toggleAllButton.find({ name: 'angle-down' }).exists()).toBe(true);
+      expect(toggleAllButton.find(GlIcon).props().name).toBe('angle-down');
 
       toggleAllButton.trigger('click');
 
       return wrapper.vm.$nextTick().then(() => {
         expect(wrapper.vm.allExpanded).toBe(true);
-        expect(toggleAllButton.find({ name: 'angle-up' }).exists()).toBe(true);
+        expect(toggleAllButton.find(GlIcon).props().name).toBe('angle-up');
       });
     });
   });

spec/frontend/packages/list/components/packages_list_spec.js

@@ -23,7 +23,7 @@ describe('packages_list', () => {
   const findPackagesListLoader = () => wrapper.find(PackagesListLoader);
   const findPackageListPagination = () => wrapper.find(GlPagination);
   const findPackageListDeleteModal = () => wrapper.find(GlModal);
-  const findEmptySlot = () => wrapper.find({ name: 'empty-slot-stub' });
+  const findEmptySlot = () => wrapper.find(EmptySlotStub);
   const findPackagesListRow = () => wrapper.find(PackagesListRow);
 
   const createStore = (isGroupPage, packages, isLoading) => {

spec/frontend/pages/projects/shared/permissions/components/project_feature_settings_spec.js

@@ -27,14 +27,14 @@ describe('Project Feature Settings', () => {
 
   describe('Hidden name input', () => {
     it('should set the hidden name input if the name exists', () => {
-      expect(wrapper.find({ name: 'Test' }).props().value).toBe(1);
+      expect(wrapper.find(`input[name=${defaultProps.name}]`).attributes().value).toBe('1');
     });
 
     it('should not set the hidden name input if the name does not exist', () => {
       wrapper.setProps({ name: null });
 
       return wrapper.vm.$nextTick(() => {
-        expect(wrapper.find({ name: 'Test' }).exists()).toBe(false);
+        expect(wrapper.find(`input[name=${defaultProps.name}]`).exists()).toBe(false);
       });
     });
   });