6 files changed, 193 insertions, 61 deletions

diff --git a/spec/javascripts/vue_shared/components/ci_badge_link_spec.js b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js
index daed4da3e15..ba303738f71 100644
--- a/spec/javascripts/vue_shared/components/ci_badge_link_spec.js
+++ b/spec/javascripts/vue_shared/components/ci_badge_link_spec.js
@@ -1,8 +1,10 @@
 import Vue from 'vue';
 import ciBadge from '~/vue_shared/components/ci_badge_link.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
 
 describe('CI Badge Link Component', () => {
   let CIBadge;
+  let vm;
 
   const statuses = {
     canceled: {
@@ -70,15 +72,17 @@ describe('CI Badge Link Component', () => {
     },
   };
 
-  it('should render each status badge', () => {
+  beforeEach(() => {
     CIBadge = Vue.extend(ciBadge);
-    Object.keys(statuses).map((status) => {
-      const vm = new CIBadge({
-        propsData: {
-          status: statuses[status],
-        },
-      }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
 
+  it('should render each status badge', () => {
+    Object.keys(statuses).map((status) => {
+      vm = mountComponent(CIBadge, { status: statuses[status] });
       expect(vm.$el.getAttribute('href')).toEqual(statuses[status].details_path);
       expect(vm.$el.textContent.trim()).toEqual(statuses[status].text);
       expect(vm.$el.getAttribute('class')).toEqual(`ci-status ci-${statuses[status].group}`);
@@ -86,4 +90,9 @@ describe('CI Badge Link Component', () => {
       return vm;
     });
   });
+
+  it('should not render label', () => {
+    vm = mountComponent(CIBadge, { status: statuses.canceled, showText: false });
+    expect(vm.$el.textContent.trim()).toEqual('');
+  });
 });
diff --git a/spec/javascripts/vue_shared/components/loading_button_spec.js b/spec/javascripts/vue_shared/components/loading_button_spec.js
new file mode 100644
index 00000000000..97c8a08fcdd
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/loading_button_spec.js
@@ -0,0 +1,93 @@
+import Vue from 'vue';
+import loadingButton from '~/vue_shared/components/loading_button.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+const LABEL = 'Hello';
+
+describe('LoadingButton', function () {
+  let vm;
+  let LoadingButton;
+
+  beforeEach(() => {
+    LoadingButton = Vue.extend(loadingButton);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('loading spinner', () => {
+    it('shown when loading', () => {
+      vm = mountComponent(LoadingButton, {
+        loading: true,
+      });
+
+      expect(vm.$el.querySelector('.js-loading-button-icon')).toBeDefined();
+    });
+  });
+
+  describe('disabled state', () => {
+    it('disabled when loading', () => {
+      vm = mountComponent(LoadingButton, {
+        loading: true,
+      });
+
+      expect(vm.$el.disabled).toEqual(true);
+    });
+
+    it('not disabled when normal', () => {
+      vm = mountComponent(LoadingButton, {
+        loading: false,
+      });
+
+      expect(vm.$el.disabled).toEqual(false);
+    });
+  });
+
+  describe('label', () => {
+    it('shown when normal', () => {
+      vm = mountComponent(LoadingButton, {
+        loading: false,
+        label: LABEL,
+      });
+      const label = vm.$el.querySelector('.js-loading-button-label');
+
+      expect(label.textContent.trim()).toEqual(LABEL);
+    });
+
+    it('shown when loading', () => {
+      vm = mountComponent(LoadingButton, {
+        loading: true,
+        label: LABEL,
+      });
+      const label = vm.$el.querySelector('.js-loading-button-label');
+
+      expect(label.textContent.trim()).toEqual(LABEL);
+    });
+  });
+
+  describe('click callback prop', () => {
+    it('calls given callback when normal', () => {
+      vm = mountComponent(LoadingButton, {
+        loading: false,
+      });
+      spyOn(vm, '$emit');
+
+      vm.$el.click();
+
+      expect(vm.$emit).toHaveBeenCalledWith('click', jasmine.any(Object));
+    });
+
+    it('does not call given callback when disabled because of loading', () => {
+      vm = mountComponent(LoadingButton, {
+        loading: true,
+        indeterminate: true,
+      });
+      spyOn(vm, '$emit');
+
+      vm.$el.click();
+
+      expect(vm.$emit).not.toHaveBeenCalled();
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js
new file mode 100644
index 00000000000..aa93134f2dd
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_image_spec.js
@@ -0,0 +1,84 @@
+import Vue from 'vue';
+import { placeholderImage } from '~/lazy_loader';
+import userAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
+import mountComponent from '../../../helpers/vue_mount_component_helper';
+
+const DEFAULT_PROPS = {
+  size: 99,
+  imgSrc: 'myavatarurl.com',
+  imgAlt: 'mydisplayname',
+  cssClasses: 'myextraavatarclass',
+  tooltipText: 'tooltip text',
+  tooltipPlacement: 'bottom',
+};
+
+describe('User Avatar Image Component', function () {
+  let vm;
+  let UserAvatarImage;
+
+  beforeEach(() => {
+    UserAvatarImage = Vue.extend(userAvatarImage);
+  });
+
+  describe('Initialization', function () {
+    beforeEach(function () {
+      vm = mountComponent(UserAvatarImage, {
+        ...DEFAULT_PROPS,
+      }).$mount();
+    });
+
+    it('should return a defined Vue component', function () {
+      expect(vm).toBeDefined();
+    });
+
+    it('should have <img> as a child element', function () {
+      expect(vm.$el.tagName).toBe('IMG');
+      expect(vm.$el.getAttribute('src')).toBe(DEFAULT_PROPS.imgSrc);
+      expect(vm.$el.getAttribute('data-src')).toBe(DEFAULT_PROPS.imgSrc);
+      expect(vm.$el.getAttribute('alt')).toBe(DEFAULT_PROPS.imgAlt);
+    });
+
+    it('should properly compute tooltipContainer', function () {
+      expect(vm.tooltipContainer).toBe('body');
+    });
+
+    it('should properly render tooltipContainer', function () {
+      expect(vm.$el.getAttribute('data-container')).toBe('body');
+    });
+
+    it('should properly compute avatarSizeClass', function () {
+      expect(vm.avatarSizeClass).toBe('s99');
+    });
+
+    it('should properly render img css', function () {
+      const classList = vm.$el.classList;
+      const containsAvatar = classList.contains('avatar');
+      const containsSizeClass = classList.contains('s99');
+      const containsCustomClass = classList.contains(DEFAULT_PROPS.cssClasses);
+      const lazyClass = classList.contains('lazy');
+
+      expect(containsAvatar).toBe(true);
+      expect(containsSizeClass).toBe(true);
+      expect(containsCustomClass).toBe(true);
+      expect(lazyClass).toBe(false);
+    });
+  });
+
+  describe('Initialization when lazy', function () {
+    beforeEach(function () {
+      vm = mountComponent(UserAvatarImage, {
+        ...DEFAULT_PROPS,
+        lazy: true,
+      }).$mount();
+    });
+
+    it('should add lazy attributes', function () {
+      const classList = vm.$el.classList;
+      const lazyClass = classList.contains('lazy');
+
+      expect(lazyClass).toBe(true);
+      expect(vm.$el.getAttribute('src')).toBe(placeholderImage);
+      expect(vm.$el.getAttribute('data-src')).toBe(DEFAULT_PROPS.imgSrc);
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/user_avatar_link_spec.js b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js
index 52e450e9ba5..52e450e9ba5 100644
--- a/spec/javascripts/vue_shared/components/user_avatar_link_spec.js
+++ b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js
diff --git a/spec/javascripts/vue_shared/components/user_avatar_svg_spec.js b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_svg_spec.js
index b8d639ffbec..b8d639ffbec 100644
--- a/spec/javascripts/vue_shared/components/user_avatar_svg_spec.js
+++ b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_svg_spec.js
diff --git a/spec/javascripts/vue_shared/components/user_avatar_image_spec.js b/spec/javascripts/vue_shared/components/user_avatar_image_spec.js
deleted file mode 100644
index 8daa7610274..00000000000
--- a/spec/javascripts/vue_shared/components/user_avatar_image_spec.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import Vue from 'vue';
-import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue';
-
-const UserAvatarImageComponent = Vue.extend(UserAvatarImage);
-
-describe('User Avatar Image Component', function () {
-  describe('Initialization', function () {
-    beforeEach(function () {
-      this.propsData = {
-        size: 99,
-        imgSrc: 'myavatarurl.com',
-        imgAlt: 'mydisplayname',
-        cssClasses: 'myextraavatarclass',
-        tooltipText: 'tooltip text',
-        tooltipPlacement: 'bottom',
-      };
-
-      this.userAvatarImage = new UserAvatarImageComponent({
-        propsData: this.propsData,
-      }).$mount();
-    });
-
-    it('should return a defined Vue component', function () {
-      expect(this.userAvatarImage).toBeDefined();
-    });
-
-    it('should have <img> as a child element', function () {
-      expect(this.userAvatarImage.$el.tagName).toBe('IMG');
-    });
-
-    it('should properly compute tooltipContainer', function () {
-      expect(this.userAvatarImage.tooltipContainer).toBe('body');
-    });
-
-    it('should properly render tooltipContainer', function () {
-      expect(this.userAvatarImage.$el.getAttribute('data-container')).toBe('body');
-    });
-
-    it('should properly compute avatarSizeClass', function () {
-      expect(this.userAvatarImage.avatarSizeClass).toBe('s99');
-    });
-
-    it('should properly render img css', function () {
-      const classList = this.userAvatarImage.$el.classList;
-      const containsAvatar = classList.contains('avatar');
-      const containsSizeClass = classList.contains('s99');
-      const containsCustomClass = classList.contains('myextraavatarclass');
-
-      expect(containsAvatar).toBe(true);
-      expect(containsSizeClass).toBe(true);
-      expect(containsCustomClass).toBe(true);
-    });
-  });
-});