Merge branch '425764-fix-warnings-in-runner-jest-specs' into 'master'

Fixes validator warnings in runner jest tests

See merge request https://gitlab.com/gitlab-org/gitlab/-/merge_requests/133080



Merged-by: Coung Ngo <cngo@gitlab.com>
Approved-by: Coung Ngo <cngo@gitlab.com>
Approved-by: Vamsi Vempati <vvempati@gitlab.com>
Co-authored-by: Miguel Rincon <mrincon@gitlab.com>

ee/spec/frontend/ci/runner/components/runner_active_list_spec.js

@@ -6,6 +6,7 @@ import {
   shallowMountExtended,
   mountExtended,
 } from 'helpers/vue_test_utils_helper';
+import { stubComponent } from 'helpers/stub_component';
 
 import RunnerActiveList from 'ee/ci/runner/components/runner_active_list.vue';
 import mostActiveRunnersQuery from 'ee/ci/runner/graphql/performance/most_active_runners.graphql';
@@ -38,9 +39,10 @@ describe('RunnerActiveList', () => {
   const findCell = (row = 0, fieldKey) =>
     extendedWrapper(findRows().at(row).find(`[data-testid="td-${fieldKey}"]`));
 
-  const createComponent = ({ mountFn = shallowMountExtended } = {}) => {
+  const createComponent = ({ mountFn = shallowMountExtended, ...options } = {}) => {
     wrapper = mountFn(RunnerActiveList, {
       apolloProvider: createMockApollo([[mostActiveRunnersQuery, mostActiveRunnersHandler]]),
+      ...options,
     });
   };
 
@@ -49,7 +51,11 @@ describe('RunnerActiveList', () => {
   });
 
   it('Requests most active runners', () => {
-    createComponent();
+    createComponent({
+      stubs: {
+        GlTable: stubComponent(GlTable),
+      },
+    });
 
     expect(mostActiveRunnersHandler).toHaveBeenCalledTimes(1);
   });
@@ -133,7 +139,11 @@ describe('RunnerActiveList', () => {
     beforeEach(async () => {
       mostActiveRunnersHandler.mockRejectedValue(new Error('Error!'));
 
-      createComponent();
+      createComponent({
+        stubs: {
+          GlTable: stubComponent(GlTable),
+        },
+      });
       await waitForPromises();
     });
 

spec/frontend/ci/runner/components/runner_list_spec.js

 import { GlTableLite, GlSkeletonLoader } from '@gitlab/ui';
 import HelpPopover from '~/vue_shared/components/help_popover.vue';
-import {
-  extendedWrapper,
-  shallowMountExtended,
-  mountExtended,
-} from 'helpers/vue_test_utils_helper';
+import { shallowMountExtended, mountExtended } from 'helpers/vue_test_utils_helper';
 import createMockApollo from 'helpers/mock_apollo_helper';
 import { s__ } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
 import { createLocalState } from '~/ci/runner/graphql/list/local_state';
+import { stubComponent } from 'helpers/stub_component';
 
 import RunnerList from '~/ci/runner/components/runner_list.vue';
 import RunnerBulkDelete from '~/ci/runner/components/runner_bulk_delete.vue';
@@ -29,14 +26,11 @@ describe('RunnerList', () => {
   const findHeaders = () => wrapper.findAll('th');
   const findRows = () => wrapper.findAll('[data-testid^="runner-row-"]');
   const findCell = ({ row = 0, fieldKey }) =>
-    extendedWrapper(findRows().at(row).find(`[data-testid="td-${fieldKey}"]`));
+    findRows().at(row).find(`[data-testid="td-${fieldKey}"]`);
   const findRunnerBulkDelete = () => wrapper.findComponent(RunnerBulkDelete);
   const findRunnerBulkDeleteCheckbox = () => wrapper.findComponent(RunnerBulkDeleteCheckbox);
 
-  const createComponent = (
-    { props = {}, provide = {}, ...options } = {},
-    mountFn = shallowMountExtended,
-  ) => {
+  const createComponent = ({ props = {}, ...options } = {}, mountFn = shallowMountExtended) => {
     ({ cacheConfig, localMutations } = createLocalState());
 
     wrapper = mountFn(RunnerList, {
@@ -49,7 +43,6 @@ describe('RunnerList', () => {
         localMutations,
         onlineContactTimeoutSecs,
         staleTimeoutSecs,
-        ...provide,
       },
       ...options,
     });
@@ -81,7 +74,11 @@ describe('RunnerList', () => {
   });
 
   it('Sets runner id as a row key', () => {
-    createComponent();
+    createComponent({
+      stubs: {
+        GlTableLite: stubComponent(GlTableLite),
+      },
+    });
 
     expect(findTable().attributes('primary-key')).toBe('id');
   });
@@ -220,7 +217,12 @@ describe('RunnerList', () => {
 
   describe('When data is loading', () => {
     it('shows a busy state', () => {
-      createComponent({ props: { runners: [], loading: true } });
+      createComponent({
+        props: { runners: [], loading: true },
+        stubs: {
+          GlTableLite: stubComponent(GlTableLite),
+        },
+      });
 
       expect(findTable().classes('gl-opacity-6')).toBe(true);
     });