Merge branch 'master' into fix-no-template

9 files changed, 183 insertions, 12 deletions

diff --git a/spec/javascripts/vue_shared/components/clipboard_button_spec.js b/spec/javascripts/vue_shared/components/clipboard_button_spec.js
new file mode 100644
index 00000000000..08e4e1f8337
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/clipboard_button_spec.js
@@ -0,0 +1,31 @@
+import Vue from 'vue';
+import clipboardButton from '~/vue_shared/components/clipboard_button.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('clipboard button', () => {
+  let vm;
+
+  beforeEach(() => {
+    const Component = Vue.extend(clipboardButton);
+    vm = mountComponent(Component, {
+      text: 'copy me',
+      title: 'Copy this value into Clipboard!',
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders a button for clipboard', () => {
+    expect(vm.$el.tagName).toEqual('BUTTON');
+    expect(vm.$el.getAttribute('data-clipboard-text')).toEqual('copy me');
+    expect(vm.$el.querySelector('i').className).toEqual('fa fa-clipboard');
+  });
+
+  it('should have a tooltip with default values', () => {
+    expect(vm.$el.getAttribute('data-original-title')).toEqual('Copy this value into Clipboard!');
+    expect(vm.$el.getAttribute('data-placement')).toEqual('top');
+    expect(vm.$el.getAttribute('data-container')).toEqual(null);
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/confirmation_input_spec.js b/spec/javascripts/vue_shared/components/confirmation_input_spec.js
new file mode 100644
index 00000000000..a6a12614e77
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/confirmation_input_spec.js
@@ -0,0 +1,63 @@
+import Vue from 'vue';
+import confirmationInput from '~/vue_shared/components/confirmation_input.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('Confirmation input component', () => {
+  const Component = Vue.extend(confirmationInput);
+  const props = {
+    inputId: 'dummy-id',
+    confirmationKey: 'confirmation-key',
+    confirmationValue: 'confirmation-value',
+  };
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('props', () => {
+    beforeEach(() => {
+      vm = mountComponent(Component, props);
+    });
+
+    it('sets id of the input field to inputId', () => {
+      expect(vm.$refs.enteredValue.id).toBe(props.inputId);
+    });
+
+    it('sets name of the input field to confirmationKey', () => {
+      expect(vm.$refs.enteredValue.name).toBe(props.confirmationKey);
+    });
+  });
+
+  describe('computed', () => {
+    describe('inputLabel', () => {
+      it('escapes confirmationValue by default', () => {
+        vm = mountComponent(Component, { ...props, confirmationValue: 'n<e></e>ds escap"ng' });
+        expect(vm.inputLabel).toBe('Type <code>n&lt;e&gt;&lt;/e&gt;ds escap&quot;ng</code> to confirm:');
+      });
+
+      it('does not escape confirmationValue if escapeValue is false', () => {
+        vm = mountComponent(Component, { ...props, confirmationValue: 'n<e></e>ds escap"ng', shouldEscapeConfirmationValue: false });
+        expect(vm.inputLabel).toBe('Type <code>n<e></e>ds escap"ng</code> to confirm:');
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('hasCorrectValue', () => {
+      beforeEach(() => {
+        vm = mountComponent(Component, props);
+      });
+
+      it('returns false if entered value is incorrect', () => {
+        vm.$refs.enteredValue.value = 'incorrect';
+        expect(vm.hasCorrectValue()).toBe(false);
+      });
+
+      it('returns true if entered value is correct', () => {
+        vm.$refs.enteredValue.value = props.confirmationValue;
+        expect(vm.hasCorrectValue()).toBe(true);
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/loading_icon_spec.js b/spec/javascripts/vue_shared/components/loading_icon_spec.js
index 1baf3537741..5cd3466f501 100644
--- a/spec/javascripts/vue_shared/components/loading_icon_spec.js
+++ b/spec/javascripts/vue_shared/components/loading_icon_spec.js
@@ -16,7 +16,8 @@ describe('Loading Icon Component', () => {
     ).toEqual('fa fa-spin fa-spinner fa-1x');
 
     expect(component.$el.tagName).toEqual('DIV');
-    expect(component.$el.classList.contains('text-center')).toEqual(true);
+    expect(component.$el.classList).toContain('text-center');
+    expect(component.$el.classList).toContain('loading-container');
   });
 
   it('should render accessibility attributes', () => {
diff --git a/spec/javascripts/vue_shared/components/markdown/field_spec.js b/spec/javascripts/vue_shared/components/markdown/field_spec.js
index 24209be83fe..5f980bbf36c 100644
--- a/spec/javascripts/vue_shared/components/markdown/field_spec.js
+++ b/spec/javascripts/vue_shared/components/markdown/field_spec.js
@@ -12,14 +12,14 @@ describe('Markdown field component', () => {
 
   beforeEach((done) => {
     vm = new Vue({
+      components: {
+        fieldComponent,
+      },
       data() {
         return {
           text: 'testing\n123',
         };
       },
-      components: {
-        fieldComponent,
-      },
       template: `
         <field-component
           markdown-preview-path="/preview"
diff --git a/spec/javascripts/vue_shared/components/modal_spec.js b/spec/javascripts/vue_shared/components/modal_spec.js
index fe75a86cac8..a5f9c75be4e 100644
--- a/spec/javascripts/vue_shared/components/modal_spec.js
+++ b/spec/javascripts/vue_shared/components/modal_spec.js
@@ -25,7 +25,7 @@ describe('Modal', () => {
     });
 
     describe('with id', () => {
-      it('does not render a primary button', () => {
+      describe('does not render a primary button', () => {
         beforeEach(() => {
           vm = mountComponent(modalComponent, {
             id: 'my-modal',
diff --git a/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js b/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js
index 20363e78094..2de108da2ac 100644
--- a/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js
+++ b/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js
@@ -21,22 +21,21 @@ describe('collapsedGroupedDatePicker', () => {
     });
   });
 
-  it('toggleCollapse events', () => {
-    const toggleCollapse = jasmine.createSpy();
-
+  describe('toggleCollapse events', () => {
     beforeEach((done) => {
+      spyOn(vm, 'toggleSidebar');
       vm.minDate = new Date('07/17/2016');
       Vue.nextTick(done);
     });
 
     it('should emit when sidebar is toggled', () => {
       vm.$el.querySelector('.gutter-toggle').click();
-      expect(toggleCollapse).toHaveBeenCalled();
+      expect(vm.toggleSidebar).toHaveBeenCalled();
     });
 
     it('should emit when collapsed-calendar-icon is clicked', () => {
       vm.$el.querySelector('.sidebar-collapsed-icon').click();
-      expect(toggleCollapse).toHaveBeenCalled();
+      expect(vm.toggleSidebar).toHaveBeenCalled();
     });
   });
 
diff --git a/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js b/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js
new file mode 100644
index 00000000000..6940b04573e
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/stacked_progress_bar_spec.js
@@ -0,0 +1,77 @@
+import Vue from 'vue';
+
+import stackedProgressBarComponent from '~/vue_shared/components/stacked_progress_bar.vue';
+
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+const createComponent = (config) => {
+  const Component = Vue.extend(stackedProgressBarComponent);
+  const defaultConfig = Object.assign({}, {
+    successLabel: 'Synced',
+    failureLabel: 'Failed',
+    neutralLabel: 'Out of sync',
+    successCount: 10,
+    failureCount: 5,
+    totalCount: 20,
+  }, config);
+
+  return mountComponent(Component, defaultConfig);
+};
+
+describe('StackedProgressBarComponent', () => {
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponent();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('computed', () => {
+    describe('neutralCount', () => {
+      it('returns neutralCount based on totalCount, successCount and failureCount', () => {
+        expect(vm.neutralCount).toBe(5); // 20 - 10 - 5
+      });
+    });
+  });
+
+  describe('methods', () => {
+    describe('getPercent', () => {
+      it('returns percentage from provided count based on `totalCount`', () => {
+        expect(vm.getPercent(10)).toBe(50);
+      });
+    });
+
+    describe('barStyle', () => {
+      it('returns style string based on percentage provided', () => {
+        expect(vm.barStyle(50)).toBe('width: 50%;');
+      });
+    });
+
+    describe('getTooltip', () => {
+      it('returns label string based on label and count provided', () => {
+        expect(vm.getTooltip('Synced', 10)).toBe('Synced: 10');
+      });
+    });
+  });
+
+  describe('template', () => {
+    it('renders container element', () => {
+      expect(vm.$el.classList.contains('stacked-progress-bar')).toBeTruthy();
+    });
+
+    it('renders empty state when count is unavailable', () => {
+      const vmX = createComponent({ totalCount: 0, successCount: 0, failureCount: 0 });
+      expect(vmX.$el.querySelectorAll('.status-unavailable').length).not.toBe(0);
+      vmX.$destroy();
+    });
+
+    it('renders bar elements when count is available', () => {
+      expect(vm.$el.querySelectorAll('.status-green').length).not.toBe(0);
+      expect(vm.$el.querySelectorAll('.status-neutral').length).not.toBe(0);
+      expect(vm.$el.querySelectorAll('.status-red').length).not.toBe(0);
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/table_pagination_spec.js b/spec/javascripts/vue_shared/components/table_pagination_spec.js
index 1465ef5855f..c63f15e5880 100644
--- a/spec/javascripts/vue_shared/components/table_pagination_spec.js
+++ b/spec/javascripts/vue_shared/components/table_pagination_spec.js
@@ -32,7 +32,7 @@ describe('Pagination component', () => {
         change: spy,
       });
 
-      expect(component.$el.innerHTML).not.toBeDefined();
+      expect(component.$el.childNodes.length).toEqual(0);
     });
 
     describe('prev button', () => {
@@ -72,7 +72,6 @@ describe('Pagination component', () => {
         });
 
         component.$el.querySelector('.js-previous-button a').click();
-
         expect(spy).toHaveBeenCalledWith(1);
       });
     });
diff --git a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js
index 8450ad9dbcb..adf80d0c2bb 100644
--- a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js
+++ b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_link_spec.js
@@ -1,3 +1,4 @@
+import _ from 'underscore';
 import Vue from 'vue';
 import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';