1 files changed, 28 insertions, 3 deletions

diff --git a/spec/frontend/jobs/components/table/cells/actions_cell_spec.js b/spec/frontend/jobs/components/table/cells/actions_cell_spec.js
index 6caf36e1461..263698e94e1 100644
--- a/spec/frontend/jobs/components/table/cells/actions_cell_spec.js
+++ b/spec/frontend/jobs/components/table/cells/actions_cell_spec.js
@@ -1,13 +1,16 @@
 import { GlModal } from '@gitlab/ui';
 import { nextTick } from 'vue';
+import waitForPromises from 'helpers/wait_for_promises';
 import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import ActionsCell from '~/jobs/components/table/cells/actions_cell.vue';
 import JobPlayMutation from '~/jobs/components/table/graphql/mutations/job_play.mutation.graphql';
 import JobRetryMutation from '~/jobs/components/table/graphql/mutations/job_retry.mutation.graphql';
 import JobUnscheduleMutation from '~/jobs/components/table/graphql/mutations/job_unschedule.mutation.graphql';
+import JobCancelMutation from '~/jobs/components/table/graphql/mutations/job_cancel.mutation.graphql';
 import {
   playableJob,
   retryableJob,
+  cancelableJob,
   scheduledJob,
   cannotRetryJob,
   cannotPlayJob,
@@ -20,6 +23,7 @@ describe('Job actions cell', () => {
 
   const findRetryButton = () => wrapper.findByTestId('retry');
   const findPlayButton = () => wrapper.findByTestId('play');
+  const findCancelButton = () => wrapper.findByTestId('cancel-button');
   const findDownloadArtifactsButton = () => wrapper.findByTestId('download-artifacts');
   const findCountdownButton = () => wrapper.findByTestId('countdown');
   const findPlayScheduledJobButton = () => wrapper.findByTestId('play-scheduled');
@@ -32,6 +36,7 @@ describe('Job actions cell', () => {
     data: { JobUnscheduleMutation: { jobId: scheduledJob.id } },
   };
   const MUTATION_SUCCESS_PLAY = { data: { JobPlayMutation: { jobId: playableJob.id } } };
+  const MUTATION_SUCCESS_CANCEL = { data: { JobCancelMutation: { jobId: cancelableJob.id } } };
 
   const $toast = {
     show: jest.fn(),
@@ -88,6 +93,7 @@ describe('Job actions cell', () => {
     ${findPlayButton}              | ${'play'}               | ${playableJob}
     ${findRetryButton}             | ${'retry'}              | ${retryableJob}
     ${findDownloadArtifactsButton} | ${'download artifacts'} | ${playableJob}
+    ${findCancelButton}            | ${'cancel'}             | ${cancelableJob}
   `('displays the $action button', ({ button, jobType }) => {
     createComponent(jobType);
 
@@ -95,9 +101,10 @@ describe('Job actions cell', () => {
   });
 
   it.each`
-    button             | mutationResult           | action     | jobType         | mutationFile
-    ${findPlayButton}  | ${MUTATION_SUCCESS_PLAY} | ${'play'}  | ${playableJob}  | ${JobPlayMutation}
-    ${findRetryButton} | ${MUTATION_SUCCESS}      | ${'retry'} | ${retryableJob} | ${JobRetryMutation}
+    button              | mutationResult             | action      | jobType          | mutationFile
+    ${findPlayButton}   | ${MUTATION_SUCCESS_PLAY}   | ${'play'}   | ${playableJob}   | ${JobPlayMutation}
+    ${findRetryButton}  | ${MUTATION_SUCCESS}        | ${'retry'}  | ${retryableJob}  | ${JobRetryMutation}
+    ${findCancelButton} | ${MUTATION_SUCCESS_CANCEL} | ${'cancel'} | ${cancelableJob} | ${JobCancelMutation}
   `('performs the $action mutation', ({ button, mutationResult, jobType, mutationFile }) => {
     createComponent(jobType, mutationResult);
 
@@ -111,6 +118,24 @@ describe('Job actions cell', () => {
     });
   });
 
+  it.each`
+    button                  | action          | jobType
+    ${findPlayButton}       | ${'play'}       | ${playableJob}
+    ${findRetryButton}      | ${'retry'}      | ${retryableJob}
+    ${findCancelButton}     | ${'cancel'}     | ${cancelableJob}
+    ${findUnscheduleButton} | ${'unschedule'} | ${scheduledJob}
+  `('disables the $action button after first request', async ({ button, jobType }) => {
+    createComponent(jobType);
+
+    expect(button().props('disabled')).toBe(false);
+
+    button().vm.$emit('click');
+
+    await waitForPromises();
+
+    expect(button().props('disabled')).toBe(true);
+  });
+
   describe('Scheduled Jobs', () => {
     const today = () => new Date('2021-08-31');