1 files changed, 79 insertions, 71 deletions

diff --git a/spec/javascripts/badges/components/badge_form_spec.js b/spec/javascripts/badges/components/badge_form_spec.js
index dd21ec279cb..31195bd762b 100644
--- a/spec/javascripts/badges/components/badge_form_spec.js
+++ b/spec/javascripts/badges/components/badge_form_spec.js
@@ -1,21 +1,31 @@
 import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
 import store from '~/badges/store';
+import createEmptyBadge from '~/badges/empty_badge';
 import BadgeForm from '~/badges/components/badge_form.vue';
 import { mountComponentWithStore } from 'spec/helpers/vue_mount_component_helper';
-import { createDummyBadge } from '../dummy_badge';
+import { DUMMY_IMAGE_URL, TEST_HOST } from '../../test_constants';
+
+// avoid preview background process
+BadgeForm.methods.debouncedPreview = () => {};
 
 describe('BadgeForm component', () => {
   const Component = Vue.extend(BadgeForm);
+  let axiosMock;
   let vm;
 
   beforeEach(() => {
     setFixtures(`
       <div id="dummy-element"></div>
     `);
+
+    axiosMock = new MockAdapter(axios);
   });
 
   afterEach(() => {
     vm.$destroy();
+    axiosMock.restore();
   });
 
   describe('methods', () => {
@@ -38,93 +48,86 @@ describe('BadgeForm component', () => {
         expect(vm.stopEditing).toHaveBeenCalled();
       });
     });
+  });
 
-    describe('onSubmit', () => {
-      describe('if isEditing is true', () => {
-        beforeEach(() => {
-          spyOn(vm, 'saveBadge').and.returnValue(Promise.resolve());
-          store.replaceState({
-            ...store.state,
-            isSaving: false,
-            badgeInEditForm: createDummyBadge(),
-          });
-          vm.isEditing = true;
-        });
-
-        it('returns immediately if imageUrl is empty', () => {
-          store.state.badgeInEditForm.imageUrl = '';
-
-          vm.onSubmit();
-
-          expect(vm.saveBadge).not.toHaveBeenCalled();
-        });
-
-        it('returns immediately if linkUrl is empty', () => {
-          store.state.badgeInEditForm.linkUrl = '';
-
-          vm.onSubmit();
-
-          expect(vm.saveBadge).not.toHaveBeenCalled();
-        });
-
-        it('returns immediately if isSaving is true', () => {
-          store.state.isSaving = true;
+  const sharedSubmitTests = submitAction => {
+    const imageUrlSelector = '#badge-image-url';
+    const findImageUrlElement = () => vm.$el.querySelector(imageUrlSelector);
+    const linkUrlSelector = '#badge-link-url';
+    const findLinkUrlElement = () => vm.$el.querySelector(linkUrlSelector);
+    const setValue = (inputElementSelector, url) => {
+      const inputElement = vm.$el.querySelector(inputElementSelector);
+      inputElement.value = url;
+      inputElement.dispatchEvent(new Event('input'));
+    };
+    const submitForm = () => {
+      const submitButton = vm.$el.querySelector('button[type="submit"]');
+      submitButton.click();
+    };
+    const expectInvalidInput = inputElementSelector => {
+      const inputElement = vm.$el.querySelector(inputElementSelector);
+      expect(inputElement).toBeMatchedBy(':invalid');
+      const feedbackElement = vm.$el.querySelector(`${inputElementSelector} + .invalid-feedback`);
+      expect(feedbackElement).toBeVisible();
+    };
 
-          vm.onSubmit();
+    beforeEach(() => {
+      spyOn(vm, submitAction).and.returnValue(Promise.resolve());
+      store.replaceState({
+        ...store.state,
+        badgeInAddForm: createEmptyBadge(),
+        badgeInEditForm: createEmptyBadge(),
+        isSaving: false,
+      });
 
-          expect(vm.saveBadge).not.toHaveBeenCalled();
-        });
+      setValue(linkUrlSelector, `${TEST_HOST}/link/url`);
+      setValue(imageUrlSelector, `${window.location.origin}${DUMMY_IMAGE_URL}`);
+    });
 
-        it('calls saveBadge', () => {
-          vm.onSubmit();
+    it('returns immediately if imageUrl is empty', () => {
+      setValue(imageUrlSelector, '');
 
-          expect(vm.saveBadge).toHaveBeenCalled();
-        });
-      });
+      submitForm();
 
-      describe('if isEditing is false', () => {
-        beforeEach(() => {
-          spyOn(vm, 'addBadge').and.returnValue(Promise.resolve());
-          store.replaceState({
-            ...store.state,
-            isSaving: false,
-            badgeInAddForm: createDummyBadge(),
-          });
-          vm.isEditing = false;
-        });
+      expectInvalidInput(imageUrlSelector);
+      expect(vm[submitAction]).not.toHaveBeenCalled();
+    });
 
-        it('returns immediately if imageUrl is empty', () => {
-          store.state.badgeInAddForm.imageUrl = '';
+    it('returns immediately if imageUrl is malformed', () => {
+      setValue(imageUrlSelector, 'not-a-url');
 
-          vm.onSubmit();
+      submitForm();
 
-          expect(vm.addBadge).not.toHaveBeenCalled();
-        });
+      expectInvalidInput(imageUrlSelector);
+      expect(vm[submitAction]).not.toHaveBeenCalled();
+    });
 
-        it('returns immediately if linkUrl is empty', () => {
-          store.state.badgeInAddForm.linkUrl = '';
+    it('returns immediately if linkUrl is empty', () => {
+      setValue(linkUrlSelector, '');
 
-          vm.onSubmit();
+      submitForm();
 
-          expect(vm.addBadge).not.toHaveBeenCalled();
-        });
+      expectInvalidInput(linkUrlSelector);
+      expect(vm[submitAction]).not.toHaveBeenCalled();
+    });
 
-        it('returns immediately if isSaving is true', () => {
-          store.state.isSaving = true;
+    it('returns immediately if linkUrl is malformed', () => {
+      setValue(linkUrlSelector, 'not-a-url');
 
-          vm.onSubmit();
+      submitForm();
 
-          expect(vm.addBadge).not.toHaveBeenCalled();
-        });
+      expectInvalidInput(linkUrlSelector);
+      expect(vm[submitAction]).not.toHaveBeenCalled();
+    });
 
-        it('calls addBadge', () => {
-          vm.onSubmit();
+    it(`calls ${submitAction}`, () => {
+      submitForm();
 
-          expect(vm.addBadge).toHaveBeenCalled();
-        });
-      });
+      expect(findImageUrlElement()).toBeMatchedBy(':valid');
+      expect(findLinkUrlElement()).toBeMatchedBy(':valid');
+      expect(vm[submitAction]).toHaveBeenCalled();
     });
-  });
+  };
 
   describe('if isEditing is false', () => {
     beforeEach(() => {
@@ -138,12 +141,15 @@ describe('BadgeForm component', () => {
     });
 
     it('renders one button', () => {
-      const buttons = vm.$el.querySelectorAll('.row-content-block button');
+      expect(vm.$el.querySelector('.row-content-block')).toBeNull();
+      const buttons = vm.$el.querySelectorAll('.form-group:last-of-type button');
       expect(buttons.length).toBe(1);
       const buttonAddElement = buttons[0];
       expect(buttonAddElement).toBeVisible();
       expect(buttonAddElement).toHaveText('Add badge');
     });
+
+    sharedSubmitTests('addBadge');
   });
 
   describe('if isEditing is true', () => {
@@ -167,5 +173,7 @@ describe('BadgeForm component', () => {
       expect(buttonCancelElement).toBeVisible();
       expect(buttonCancelElement).toHaveText('Cancel');
     });
+
+    sharedSubmitTests('saveBadge');
   });
 });