Merge branch 'delete-blob-spec-mount' into 'master'

Update Delete Blob  Modal to use GlForm

See merge request gitlab-org/gitlab!66590

app/assets/javascripts/repository/components/delete_blob_modal.vue

 <script>
-import { GlModal, GlFormGroup, GlFormInput, GlFormTextarea, GlToggle } from '@gitlab/ui';
+import { GlModal, GlFormGroup, GlFormInput, GlFormTextarea, GlToggle, GlForm } from '@gitlab/ui';
 import csrf from '~/lib/utils/csrf';
 import { __ } from '~/locale';
 import {
@@ -17,6 +17,7 @@ export default {
     GlFormInput,
     GlFormTextarea,
     GlToggle,
+    GlForm,
   },
   i18n: {
     PRIMARY_OPTIONS_TEXT: __('Delete file'),
@@ -102,7 +103,7 @@ export default {
     submitForm(e) {
       e.preventDefault(); // Prevent modal from closing
       this.loading = true;
-      this.$refs.form.submit();
+      this.$refs.form.$el.submit();
     },
   },
 };
@@ -110,13 +111,15 @@ export default {
 
 <template>
   <gl-modal
+    v-bind="$attrs"
+    data-testid="modal-delete"
     :modal-id="modalId"
     :title="modalTitle"
     :action-primary="primaryOptions"
     :action-cancel="cancelOptions"
     @primary="submitForm"
   >
-    <form ref="form" :action="deletePath" method="post">
+    <gl-form ref="form" :action="deletePath" method="post">
       <input type="hidden" name="_method" value="delete" />
       <input :value="$options.csrf.token" type="hidden" name="authenticity_token" />
       <template v-if="emptyRepo">
@@ -146,6 +149,6 @@ export default {
           :label="$options.i18n.TOGGLE_CREATE_MR_LABEL"
         />
       </template>
-    </form>
+    </gl-form>
   </gl-modal>
 </template>

spec/frontend/repository/components/delete_blob_modal_spec.js

-import { GlFormTextarea, GlModal, GlFormInput, GlToggle } from '@gitlab/ui';
-import { shallowMount } from '@vue/test-utils';
+import { GlFormTextarea, GlModal, GlFormInput, GlToggle, GlForm } from '@gitlab/ui';
+import { shallowMount, mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import DeleteBlobModal from '~/repository/components/delete_blob_modal.vue';
 
@@ -19,17 +19,24 @@ const initialProps = {
 describe('DeleteBlobModal', () => {
   let wrapper;
 
-  const createComponent = (props = {}) => {
-    wrapper = shallowMount(DeleteBlobModal, {
+  const createComponentFactory = (mountFn) => (props = {}) => {
+    wrapper = mountFn(DeleteBlobModal, {
       propsData: {
         ...initialProps,
         ...props,
       },
+      attrs: {
+        static: true,
+        visible: true,
+      },
     });
   };
 
+  const createComponent = createComponentFactory(shallowMount);
+  const createFullComponent = createComponentFactory(mount);
+
   const findModal = () => wrapper.findComponent(GlModal);
-  const findForm = () => wrapper.findComponent({ ref: 'form' });
+  const findForm = () => findModal().findComponent(GlForm);
 
   afterEach(() => {
     wrapper.destroy();
@@ -59,7 +66,8 @@ describe('DeleteBlobModal', () => {
     });
 
     it('submits the form', async () => {
-      createComponent();
+      createFullComponent();
+      await nextTick();
 
       const submitSpy = jest.spyOn(findForm().element, 'submit');
       findModal().vm.$emit('primary', { preventDefault: () => {} });