Replace deprecated .is() with alternate approaches

@vue/test-utils 1.x deprecated .is() on wrappers
This MR fixess cases, when .is() assertion could be substituted by

* element.tagName
* classes()

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

 import { shallowMount } from '@vue/test-utils';
 
 import SidebarItemEpicsSelect from 'ee/sidebar/components/sidebar_item_epics_select.vue';
+import EpicsSelect from 'ee/vue_shared/components/sidebar/epics_select/base.vue';
 
 import {
   mockSidebarStore,
@@ -99,7 +100,7 @@ describe('SidebarItemEpicsSelect', () => {
 
   describe('template', () => {
     it('should render epics-select component', () => {
-      expect(wrapper.is('epics-select-stub')).toBe(true);
+      expect(wrapper.find(EpicsSelect).element).toBe(wrapper.element);
       expect(wrapper.attributes('blocktitle')).toBe('Epic');
       expect(wrapper.text()).toBe('None');
     });

ee/spec/frontend/vue_shared/components/sidebar/epics_select/dropdown_button_spec.js

@@ -38,7 +38,7 @@ describe('EpicsSelect', () => {
 
     describe('template', () => {
       it('should render button element', () => {
-        expect(wrapper.is('button')).toBe(true);
+        expect(wrapper.element.tagName).toBe('BUTTON');
         expect(wrapper.classes()).toEqual(
           expect.arrayContaining(['dropdown-menu-toggle', 'js-epic-select', 'js-extra-options']),
         );

spec/frontend/create_cluster/components/cluster_form_dropdown_spec.js

@@ -92,7 +92,7 @@ describe('ClusterFormDropdown', () => {
     });
 
     it('displays a checked GlIcon next to the item', () => {
-      expect(wrapper.find(GlIcon).is('.invisible')).toBe(false);
+      expect(wrapper.find(GlIcon).classes()).not.toContain('invisible');
       expect(wrapper.find(GlIcon).props('name')).toBe('mobile-issue-close');
     });
   });

spec/frontend/environments/environment_terminal_button_spec.js

@@ -22,7 +22,7 @@ describe('Stop Component', () => {
   });
 
   it('should render a link to open a web terminal with the provided path', () => {
-    expect(wrapper.is('a')).toBe(true);
+    expect(wrapper.element.tagName).toBe('A');
     expect(wrapper.attributes('title')).toBe('Terminal');
     expect(wrapper.attributes('aria-label')).toBe('Terminal');
     expect(wrapper.attributes('href')).toBe(terminalPath);

spec/frontend/issuable_suggestions/components/app_spec.js

@@ -89,8 +89,8 @@ describe('Issuable suggestions app component', () => {
           wrapper
             .findAll('li')
             .at(0)
-            .is('.gl-mb-3'),
-        ).toBe(true);
+            .classes(),
+        ).toContain('gl-mb-3');
       });
     });
 
@@ -102,8 +102,8 @@ describe('Issuable suggestions app component', () => {
           wrapper
             .findAll('li')
             .at(1)
-            .is('.gl-mb-3'),
-        ).toBe(false);
+            .classes(),
+        ).not.toContain('gl-mb-3');
       });
     });
   });

spec/frontend/logs/components/log_control_buttons_spec.js

@@ -56,7 +56,7 @@ describe('LogControlButtons', () => {
     });
 
     it('click on "scroll to top" scrolls up', () => {
-      expect(findScrollToTop().is('[disabled]')).toBe(false);
+      expect(findScrollToTop().attributes('disabled')).toBeUndefined();
 
       findScrollToTop().vm.$emit('click');
 
@@ -64,7 +64,7 @@ describe('LogControlButtons', () => {
     });
 
     it('click on "scroll to bottom" scrolls down', () => {
-      expect(findScrollToBottom().is('[disabled]')).toBe(false);
+      expect(findScrollToBottom().attributes('disabled')).toBeUndefined();
 
       findScrollToBottom().vm.$emit('click');
 

spec/frontend/logs/components/log_simple_filters_spec.js

@@ -18,7 +18,7 @@ describe('LogSimpleFilters', () => {
   const findPodsDropdownItems = () =>
     findPodsDropdown()
       .findAll(GlDeprecatedDropdownItem)
-      .filter(item => !item.is('[disabled]'));
+      .filter(item => !('disabled' in item.attributes()));
 
   const mockPodsLoading = () => {
     state.pods.options = [];

spec/frontend/monitoring/components/dashboard_panel_builder_spec.js

@@ -68,7 +68,7 @@ describe('dashboard invalid url parameters', () => {
     it('form exists and can be submitted', () => {
       expect(findForm().exists()).toBe(true);
       expect(findSubmitBtn().exists()).toBe(true);
-      expect(findSubmitBtn().is('[disabled]')).toBe(false);
+      expect(findSubmitBtn().props('disabled')).toBe(false);
     });
 
     it('form has a text area with a default value', () => {
@@ -109,7 +109,7 @@ describe('dashboard invalid url parameters', () => {
       });
 
       it('submit button is disabled', () => {
-        expect(findSubmitBtn().is('[disabled]')).toBe(true);
+        expect(findSubmitBtn().props('disabled')).toBe(true);
       });
     });
   });

spec/frontend/monitoring/components/duplicate_dashboard_form_spec.js

@@ -50,7 +50,7 @@ describe('DuplicateDashboardForm', () => {
     it('when is empty', () => {
       setValue('fileName', '');
       return wrapper.vm.$nextTick(() => {
-        expect(findByRef('fileNameFormGroup').is('.is-valid')).toBe(true);
+        expect(findByRef('fileNameFormGroup').classes()).toContain('is-valid');
         expect(findInvalidFeedback().exists()).toBe(false);
       });
     });
@@ -58,7 +58,7 @@ describe('DuplicateDashboardForm', () => {
     it('when is valid', () => {
       setValue('fileName', 'my_dashboard.yml');
       return wrapper.vm.$nextTick(() => {
-        expect(findByRef('fileNameFormGroup').is('.is-valid')).toBe(true);
+        expect(findByRef('fileNameFormGroup').classes()).toContain('is-valid');
         expect(findInvalidFeedback().exists()).toBe(false);
       });
     });
@@ -66,7 +66,7 @@ describe('DuplicateDashboardForm', () => {
     it('when is not valid', () => {
       setValue('fileName', 'my_dashboard.exe');
       return wrapper.vm.$nextTick(() => {
-        expect(findByRef('fileNameFormGroup').is('.is-invalid')).toBe(true);
+        expect(findByRef('fileNameFormGroup').classes()).toContain('is-invalid');
         expect(findInvalidFeedback().text()).toBeTruthy();
       });
     });
@@ -144,7 +144,7 @@ describe('DuplicateDashboardForm', () => {
 
       return wrapper.vm.$nextTick().then(() => {
         wrapper.find('form').trigger('change');
-        expect(findByRef('branchName').is(':focus')).toBe(true);
+        expect(document.activeElement).toBe(findByRef('branchName').element);
       });
     });
   });

spec/frontend/monitoring/components/graph_group_spec.js

@@ -50,7 +50,7 @@ describe('Graph group component', () => {
     it('should contain a tab index for the collapse button', () => {
       const groupToggle = findToggleButton();
 
-      expect(groupToggle.is('[tabindex]')).toBe(true);
+      expect(groupToggle.attributes('tabindex')).toBeDefined();
     });
 
     it('should show the open the group when collapseGroup is set to true', () => {

spec/frontend/pipelines/graph/linked_pipeline_spec.js

@@ -39,7 +39,7 @@ describe('Linked pipeline', () => {
     });
 
     it('should render a list item as the containing element', () => {
-      expect(wrapper.is('li')).toBe(true);
+      expect(wrapper.element.tagName).toBe('LI');
     });
 
     it('should render a button', () => {

spec/frontend/registry/explorer/components/registry_breadcrumb_spec.js

@@ -117,7 +117,7 @@ describe('Registry Breadcrumb', () => {
     });
 
     it('has the same tag as the last children of the crumbs', () => {
-      expect(findLastCrumb().is(lastChildren.tagName)).toBe(true);
+      expect(findLastCrumb().element.tagName).toBe(lastChildren.tagName.toUpperCase());
     });
 
     it('has the same classes as the last children of the crumbs', () => {

spec/frontend/vue_mr_widget/components/mr_widget_container_spec.js

@@ -20,7 +20,7 @@ describe('MrWidgetContainer', () => {
   it('has layout', () => {
     factory();
 
-    expect(wrapper.is('.mr-widget-heading')).toBe(true);
+    expect(wrapper.classes()).toContain('mr-widget-heading');
     expect(wrapper.contains('.mr-widget-content')).toBe(true);
   });
 

spec/frontend/vue_shared/components/date_time_picker/date_time_picker_spec.js

@@ -234,7 +234,8 @@ describe('DateTimePicker', () => {
     });
 
     it('unchecks quick range when text is input is clicked', () => {
-      const findActiveItems = () => findQuickRangeItems().filter(w => w.is('.active'));
+      const findActiveItems = () =>
+        findQuickRangeItems().filter(w => w.classes().includes('active'));
 
       expect(findActiveItems().length).toBe(1);
 
@@ -332,13 +333,13 @@ describe('DateTimePicker', () => {
 
         expect(items.length).toBe(Object.keys(otherTimeRanges).length);
         expect(items.at(0).text()).toBe('1 minute');
-        expect(items.at(0).is('.active')).toBe(false);
+        expect(items.at(0).classes()).not.toContain('active');
 
         expect(items.at(1).text()).toBe('2 minutes');
-        expect(items.at(1).is('.active')).toBe(true);
+        expect(items.at(1).classes()).toContain('active');
 
         expect(items.at(2).text()).toBe('5 minutes');
-        expect(items.at(2).is('.active')).toBe(false);
+        expect(items.at(2).classes()).not.toContain('active');
       });
     });
 

spec/frontend/vue_shared/components/markdown/suggestion_diff_row_spec.js

@@ -47,7 +47,7 @@ describe('SuggestionDiffRow', () => {
         },
       });
 
-      expect(wrapper.is('.line_holder')).toBe(true);
+      expect(wrapper.classes()).toContain('line_holder');
     });
 
     it('renders the rich text when it is available', () => {

spec/frontend/vue_shared/components/notes/timeline_entry_item_spec.js

@@ -17,7 +17,7 @@ describe(`TimelineEntryItem`, () => {
   it('renders correctly', () => {
     factory();
 
-    expect(wrapper.is('.timeline-entry')).toBe(true);
+    expect(wrapper.classes()).toContain('timeline-entry');
 
     expect(wrapper.contains('.timeline-entry-inner')).toBe(true);
   });

spec/frontend/vue_shared/components/ordered_layout_spec.js

@@ -27,7 +27,9 @@ describe('Ordered Layout', () => {
   let wrapper;
 
   const verifyOrder = () =>
-    wrapper.findAll('footer,header').wrappers.map(x => (x.is('footer') ? 'footer' : 'header'));
+    wrapper
+      .findAll('footer,header')
+      .wrappers.map(x => (x.element.tagName === 'FOOTER' ? 'footer' : 'header'));
 
   const createComponent = (props = {}) => {
     wrapper = mount(TestComponent, {

spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js

@@ -62,7 +62,7 @@ describe('DropdownButton', () => {
 
   describe('template', () => {
     it('renders component container element', () => {
-      expect(wrapper.is('gl-button-stub')).toBe(true);
+      expect(wrapper.find(GlButton).element).toBe(wrapper.element);
     });
 
     it('renders default button text element', () => {