1 files changed, 103 insertions, 16 deletions

diff --git a/spec/frontend/repository/components/delete_blob_modal_spec.js b/spec/frontend/repository/components/delete_blob_modal_spec.js
index a74e3e6d325..2c62868f391 100644
--- a/spec/frontend/repository/components/delete_blob_modal_spec.js
+++ b/spec/frontend/repository/components/delete_blob_modal_spec.js
@@ -1,5 +1,5 @@
-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,34 @@ 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);
+  const findCommitTextarea = () => findForm().findComponent(GlFormTextarea);
+  const findTargetInput = () => findForm().findComponent(GlFormInput);
+  const findCommitHint = () => wrapper.find('[data-testid="hint"]');
+
+  const fillForm = async (inputValue = {}) => {
+    const { targetText, commitText } = inputValue;
+
+    await findTargetInput().vm.$emit('input', targetText);
+    await findCommitTextarea().vm.$emit('input', commitText);
+  };
 
   afterEach(() => {
     wrapper.destroy();
@@ -58,17 +75,6 @@ describe('DeleteBlobModal', () => {
       expect(findForm().attributes('action')).toBe(initialProps.deletePath);
     });
 
-    it('submits the form', async () => {
-      createComponent();
-
-      const submitSpy = jest.spyOn(findForm().element, 'submit');
-      findModal().vm.$emit('primary', { preventDefault: () => {} });
-      await nextTick();
-
-      expect(submitSpy).toHaveBeenCalled();
-      submitSpy.mockRestore();
-    });
-
     it.each`
       component         | defaultValue                  | canPushCode | targetBranch                 | originalBranch                 | exist
       ${GlFormTextarea} | ${initialProps.commitMessage} | ${true}     | ${initialProps.targetBranch} | ${initialProps.originalBranch} | ${true}
@@ -127,4 +133,85 @@ describe('DeleteBlobModal', () => {
       },
     );
   });
+
+  describe('hint', () => {
+    const targetText = 'some target branch';
+    const hintText = 'Try to keep the first line under 52 characters and the others under 72.';
+    const charsGenerator = (length) => 'lorem'.repeat(length);
+
+    beforeEach(async () => {
+      createFullComponent();
+      await nextTick();
+    });
+
+    it.each`
+      commitText                        | exist    | desc
+      ${charsGenerator(53)}             | ${true}  | ${'first line length > 52'}
+      ${`lorem\n${charsGenerator(73)}`} | ${true}  | ${'other line length > 72'}
+      ${charsGenerator(52)}             | ${true}  | ${'other line length = 52'}
+      ${`lorem\n${charsGenerator(72)}`} | ${true}  | ${'other line length = 72'}
+      ${`lorem`}                        | ${false} | ${'first line length < 53'}
+      ${`lorem\nlorem`}                 | ${false} | ${'other line length < 53'}
+    `('displays hint $exist for $desc', async ({ commitText, exist }) => {
+      await fillForm({ targetText, commitText });
+
+      if (!exist) {
+        expect(findCommitHint().exists()).toBe(false);
+        return;
+      }
+
+      expect(findCommitHint().text()).toBe(hintText);
+    });
+  });
+
+  describe('form submission', () => {
+    let submitSpy;
+
+    beforeEach(async () => {
+      createFullComponent();
+      await nextTick();
+      submitSpy = jest.spyOn(findForm().element, 'submit');
+    });
+
+    afterEach(() => {
+      submitSpy.mockRestore();
+    });
+
+    describe('invalid form', () => {
+      beforeEach(async () => {
+        await fillForm({ targetText: '', commitText: '' });
+      });
+
+      it('disables submit button', async () => {
+        expect(findModal().props('actionPrimary').attributes[0]).toEqual(
+          expect.objectContaining({ disabled: true }),
+        );
+      });
+
+      it('does not submit form', async () => {
+        findModal().vm.$emit('primary', { preventDefault: () => {} });
+        expect(submitSpy).not.toHaveBeenCalled();
+      });
+    });
+
+    describe('valid form', () => {
+      beforeEach(async () => {
+        await fillForm({
+          targetText: 'some valid target branch',
+          commitText: 'some valid commit message',
+        });
+      });
+
+      it('enables submit button', async () => {
+        expect(findModal().props('actionPrimary').attributes[0]).toEqual(
+          expect.objectContaining({ disabled: false }),
+        );
+      });
+
+      it('submits form', async () => {
+        findModal().vm.$emit('primary', { preventDefault: () => {} });
+        expect(submitSpy).toHaveBeenCalled();
+      });
+    });
+  });
 });