1 files changed, 46 insertions, 10 deletions

diff --git a/spec/frontend/runner/components/runner_list_spec.js b/spec/frontend/runner/components/runner_list_spec.js
index 54a9e713721..a31990f8f7e 100644
--- a/spec/frontend/runner/components/runner_list_spec.js
+++ b/spec/frontend/runner/components/runner_list_spec.js
@@ -1,12 +1,19 @@
 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 createMockApollo from 'helpers/mock_apollo_helper';
+import { s__ } from '~/locale';
 import { getIdFromGraphQLId } from '~/graphql_shared/utils';
+import { createLocalState } from '~/runner/graphql/list/local_state';
+
 import RunnerList from '~/runner/components/runner_list.vue';
-import RunnerStatusPopover from '~/runner/components/runner_status_popover.vue';
+import RunnerBulkDelete from '~/runner/components/runner_bulk_delete.vue';
+import RunnerBulkDeleteCheckbox from '~/runner/components/runner_bulk_delete_checkbox.vue';
+
 import { I18N_PROJECT_TYPE, I18N_STATUS_NEVER_CONTACTED } from '~/runner/constants';
 import { allRunnersData, onlineContactTimeoutSecs, staleTimeoutSecs } from '../mock_data';
 
@@ -15,6 +22,8 @@ const mockActiveRunnersCount = mockRunners.length;
 
 describe('RunnerList', () => {
   let wrapper;
+  let cacheConfig;
+  let localMutations;
 
   const findSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader);
   const findTable = () => wrapper.findComponent(GlTableLite);
@@ -22,18 +31,24 @@ describe('RunnerList', () => {
   const findRows = () => wrapper.findAll('[data-testid^="runner-row-"]');
   const findCell = ({ row = 0, fieldKey }) =>
     extendedWrapper(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,
   ) => {
+    ({ cacheConfig, localMutations } = createLocalState());
+
     wrapper = mountFn(RunnerList, {
+      apolloProvider: createMockApollo([], {}, cacheConfig),
       propsData: {
         runners: mockRunners,
         activeRunnersCount: mockActiveRunnersCount,
         ...props,
       },
       provide: {
+        localMutations,
         onlineContactTimeoutSecs,
         staleTimeoutSecs,
         ...provide,
@@ -50,7 +65,7 @@ describe('RunnerList', () => {
     createComponent(
       {
         stubs: {
-          RunnerStatusPopover: {
+          HelpPopover: {
             template: '<div/>',
           },
         },
@@ -60,11 +75,13 @@ describe('RunnerList', () => {
 
     const headerLabels = findHeaders().wrappers.map((w) => w.text());
 
-    expect(findHeaders().at(0).findComponent(RunnerStatusPopover).exists()).toBe(true);
+    expect(findHeaders().at(0).findComponent(HelpPopover).exists()).toBe(true);
+    expect(findHeaders().at(2).findComponent(HelpPopover).exists()).toBe(true);
 
     expect(headerLabels).toEqual([
-      'Status',
-      'Runner',
+      s__('Runners|Status'),
+      s__('Runners|Runner'),
+      s__('Runners|Owner'),
       '', // actions has no label
     ]);
   });
@@ -123,21 +140,40 @@ describe('RunnerList', () => {
       );
     });
 
+    it('runner bulk delete is available', () => {
+      expect(findRunnerBulkDelete().props('runners')).toEqual(mockRunners);
+    });
+
+    it('runner bulk delete checkbox is available', () => {
+      expect(findRunnerBulkDeleteCheckbox().props('runners')).toEqual(mockRunners);
+    });
+
     it('Displays a checkbox field', () => {
       expect(findCell({ fieldKey: 'checkbox' }).find('input').exists()).toBe(true);
     });
 
-    it('Emits a checked event', async () => {
-      const checkbox = findCell({ fieldKey: 'checkbox' }).find('input');
+    it('Sets a runner as checked', async () => {
+      const runner = mockRunners[0];
+      const setRunnerCheckedMock = jest
+        .spyOn(localMutations, 'setRunnerChecked')
+        .mockImplementation(() => {});
 
+      const checkbox = findCell({ fieldKey: 'checkbox' }).find('input');
       await checkbox.setChecked();
 
-      expect(wrapper.emitted('checked')).toHaveLength(1);
-      expect(wrapper.emitted('checked')[0][0]).toEqual({
+      expect(setRunnerCheckedMock).toHaveBeenCalledTimes(1);
+      expect(setRunnerCheckedMock).toHaveBeenCalledWith({
+        runner,
         isChecked: true,
-        runner: mockRunners[0],
       });
     });
+
+    it('Emits a deleted event', async () => {
+      const event = { message: 'Deleted!' };
+      findRunnerBulkDelete().vm.$emit('deleted', event);
+
+      expect(wrapper.emitted('deleted')).toEqual([[event]]);
+    });
   });
 
   describe('Scoped cell slots', () => {