Add more coverage

Add a bit more test coverage
to ensure the button is tested
properly.

changelogs/unreleased/pb-disable-trigger-manual-action.yml

+---
+title: Disable trigger manual job button after click
+merge_request: 57885
+author:
+type: fixed

spec/frontend/jobs/components/manual_variables_form_spec.js

 import { GlButton } from '@gitlab/ui';
-import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { createLocalVue, mount, shallowMount } from '@vue/test-utils';
+import Vue from 'vue';
+import Vuex from 'vuex';
 import Form from '~/jobs/components/manual_variables_form.vue';
 
 const localVue = createLocalVue();
 
+Vue.use(Vuex);
+
 describe('Manual Variables Form', () => {
   let wrapper;
+  let store;
 
   const requiredProps = {
     action: {
@@ -16,19 +21,22 @@ describe('Manual Variables Form', () => {
     variablesSettingsUrl: '/settings',
   };
 
-  const factory = (props = {}) => {
-    wrapper = shallowMount(localVue.extend(Form), {
+  const createComponent = (props = {}, mountFn = shallowMount) => {
+    store = new Vuex.Store({
+      actions: {
+        triggerManualJob: jest.fn(),
+      },
+    });
+
+    wrapper = mountFn(localVue.extend(Form), {
       propsData: props,
       localVue,
+      store,
     });
   };
 
   const findTriggerBtn = () => wrapper.find('[data-testid="trigger-manual-job-btn"]');
 
-  beforeEach(() => {
-    factory(requiredProps);
-  });
-
   afterEach((done) => {
     // The component has a `nextTick` callback after some events so we need
     // to wait for those to finish before destroying.
@@ -40,8 +48,15 @@ describe('Manual Variables Form', () => {
     });
   });
 
+  describe('shallowMount', () => {
+    beforeEach(() => {
+      createComponent(requiredProps);
+    });
+
     it('renders empty form with correct placeholders', () => {
-    expect(wrapper.find({ ref: 'inputKey' }).attributes('placeholder')).toBe('Input variable key');
+      expect(wrapper.find({ ref: 'inputKey' }).attributes('placeholder')).toBe(
+        'Input variable key',
+      );
       expect(wrapper.find({ ref: 'inputSecretValue' }).attributes('placeholder')).toBe(
         'Input variable value',
       );
@@ -55,10 +70,6 @@ describe('Manual Variables Form', () => {
       expect(wrapper.find('a').attributes('href')).toBe(requiredProps.variablesSettingsUrl);
     });
 
-  it('trigger button is not disabled on mount', () => {
-    expect(findTriggerBtn().props('disabled')).toBe(false);
-  });
-
     describe('when adding a new variable', () => {
       it('creates a new variable when user types a new key and resets the form', (done) => {
         wrapper.vm
@@ -106,4 +117,23 @@ describe('Manual Variables Form', () => {
         expect(wrapper.vm.variables.length).toBe(0);
       });
     });
+  });
+
+  describe('mount', () => {
+    beforeEach(() => {
+      createComponent(requiredProps, mount);
+    });
+
+    it('trigger button is not disabled on mount', () => {
+      expect(findTriggerBtn().props('disabled')).toBe(false);
+    });
+
+    it('trigger button is disabled after trigger action', async () => {
+      expect(findTriggerBtn().props('disabled')).toBe(false);
+
+      await findTriggerBtn().trigger('click');
+
+      expect(findTriggerBtn().props('disabled')).toBe(true);
+    });
+  });
 });