Merge branch 'backport-add-epic-sidebar' into 'master'

Backport of add-epic-sidebar

See merge request gitlab-org/gitlab-ce!15335
(cherry picked from commit f8de23e626f7a1d0b2f80f996a5f129323adc970)

7 files changed, 335 insertions, 5 deletions

diff --git a/spec/javascripts/datetime_utility_spec.js b/spec/javascripts/datetime_utility_spec.js
index 3391cade541..0f7bf9ec712 100644
--- a/spec/javascripts/datetime_utility_spec.js
+++ b/spec/javascripts/datetime_utility_spec.js
@@ -1,4 +1,4 @@
-import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
+import * as datetimeUtility from '~/lib/utils/datetime_utility';
 
 (() => {
   describe('Date time utils', () => {
@@ -89,10 +89,22 @@ import { timeIntervalInWords } from '~/lib/utils/datetime_utility';
 
   describe('timeIntervalInWords', () => {
     it('should return string with number of minutes and seconds', () => {
-      expect(timeIntervalInWords(9.54)).toEqual('9 seconds');
-      expect(timeIntervalInWords(1)).toEqual('1 second');
-      expect(timeIntervalInWords(200)).toEqual('3 minutes 20 seconds');
-      expect(timeIntervalInWords(6008)).toEqual('100 minutes 8 seconds');
+      expect(datetimeUtility.timeIntervalInWords(9.54)).toEqual('9 seconds');
+      expect(datetimeUtility.timeIntervalInWords(1)).toEqual('1 second');
+      expect(datetimeUtility.timeIntervalInWords(200)).toEqual('3 minutes 20 seconds');
+      expect(datetimeUtility.timeIntervalInWords(6008)).toEqual('100 minutes 8 seconds');
+    });
+  });
+
+  describe('dateInWords', () => {
+    const date = new Date('07/01/2016');
+
+    it('should return date in words', () => {
+      expect(datetimeUtility.dateInWords(date)).toEqual('July 1, 2016');
+    });
+
+    it('should return abbreviated month name', () => {
+      expect(datetimeUtility.dateInWords(date, true)).toEqual('Jul 1, 2016');
     });
   });
 })();
diff --git a/spec/javascripts/lib/utils/text_utility_spec.js b/spec/javascripts/lib/utils/text_utility_spec.js
index 829b3ef5735..b9b0ddf2a83 100644
--- a/spec/javascripts/lib/utils/text_utility_spec.js
+++ b/spec/javascripts/lib/utils/text_utility_spec.js
@@ -21,9 +21,23 @@ describe('text_utility', () => {
     });
   });
 
+<<<<<<< HEAD
   describe('gl.text.pluralize', () => {
     it('returns pluralized', () => {
       expect(gl.text.pluralize('test', 2)).toBe('tests');
+=======
+  describe('capitalizeFirstCharacter', () => {
+    it('returns string with first letter capitalized', () => {
+      expect(textUtils.capitalizeFirstCharacter('gitlab')).toEqual('Gitlab');
+      expect(textUtils.highCountTrim(105)).toBe('99+');
+      expect(textUtils.highCountTrim(100)).toBe('99+');
+    });
+  });
+
+  describe('humanize', () => {
+    it('should remove underscores and uppercase the first letter', () => {
+      expect(textUtils.humanize('foo_bar')).toEqual('Foo bar');
+>>>>>>> f8de23e626... Merge branch 'backport-add-epic-sidebar' into 'master'
     });
 
     it('returns pluralized when count is 0', () => {
diff --git a/spec/javascripts/vue_shared/components/pikaday_spec.js b/spec/javascripts/vue_shared/components/pikaday_spec.js
new file mode 100644
index 00000000000..47af9534737
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/pikaday_spec.js
@@ -0,0 +1,29 @@
+import Vue from 'vue';
+import datePicker from '~/vue_shared/components/pikaday.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('datePicker', () => {
+  let vm;
+  beforeEach(() => {
+    const DatePicker = Vue.extend(datePicker);
+    vm = mountComponent(DatePicker, {
+      label: 'label',
+    });
+  });
+
+  it('should render label text', () => {
+    expect(vm.$el.querySelector('.dropdown-toggle-text').innerText.trim()).toEqual('label');
+  });
+
+  it('should show calendar', () => {
+    expect(vm.$el.querySelector('.pika-single')).toBeDefined();
+  });
+
+  it('should toggle when dropdown is clicked', () => {
+    const hidePicker = jasmine.createSpy();
+    vm.$on('hidePicker', hidePicker);
+
+    vm.$el.querySelector('.dropdown-menu-toggle').click();
+    expect(hidePicker).toHaveBeenCalled();
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js b/spec/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js
new file mode 100644
index 00000000000..cce53193870
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js
@@ -0,0 +1,35 @@
+import Vue from 'vue';
+import collapsedCalendarIcon from '~/vue_shared/components/sidebar/collapsed_calendar_icon.vue';
+import mountComponent from '../../../helpers/vue_mount_component_helper';
+
+describe('collapsedCalendarIcon', () => {
+  let vm;
+  beforeEach(() => {
+    const CollapsedCalendarIcon = Vue.extend(collapsedCalendarIcon);
+    vm = mountComponent(CollapsedCalendarIcon, {
+      containerClass: 'test-class',
+      text: 'text',
+      showIcon: false,
+    });
+  });
+
+  it('should add class to container', () => {
+    expect(vm.$el.classList.contains('test-class')).toEqual(true);
+  });
+
+  it('should hide calendar icon if showIcon', () => {
+    expect(vm.$el.querySelector('.fa-calendar')).toBeNull();
+  });
+
+  it('should render text', () => {
+    expect(vm.$el.querySelector('span').innerText.trim()).toEqual('text');
+  });
+
+  it('should emit click event when container is clicked', () => {
+    const click = jasmine.createSpy();
+    vm.$on('click', click);
+
+    vm.$el.click();
+    expect(click).toHaveBeenCalled();
+  });
+});
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
new file mode 100644
index 00000000000..20363e78094
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js
@@ -0,0 +1,91 @@
+import Vue from 'vue';
+import collapsedGroupedDatePicker from '~/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue';
+import mountComponent from '../../../helpers/vue_mount_component_helper';
+
+describe('collapsedGroupedDatePicker', () => {
+  let vm;
+  beforeEach(() => {
+    const CollapsedGroupedDatePicker = Vue.extend(collapsedGroupedDatePicker);
+    vm = mountComponent(CollapsedGroupedDatePicker, {
+      showToggleSidebar: true,
+    });
+  });
+
+  it('should render toggle sidebar if showToggleSidebar', (done) => {
+    expect(vm.$el.querySelector('.issuable-sidebar-header')).toBeDefined();
+
+    vm.showToggleSidebar = false;
+    Vue.nextTick(() => {
+      expect(vm.$el.querySelector('.issuable-sidebar-header')).toBeNull();
+      done();
+    });
+  });
+
+  it('toggleCollapse events', () => {
+    const toggleCollapse = jasmine.createSpy();
+
+    beforeEach((done) => {
+      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();
+    });
+
+    it('should emit when collapsed-calendar-icon is clicked', () => {
+      vm.$el.querySelector('.sidebar-collapsed-icon').click();
+      expect(toggleCollapse).toHaveBeenCalled();
+    });
+  });
+
+  describe('minDate and maxDate', () => {
+    beforeEach((done) => {
+      vm.minDate = new Date('07/17/2016');
+      vm.maxDate = new Date('07/17/2017');
+      Vue.nextTick(done);
+    });
+
+    it('should render both collapsed-calendar-icon', () => {
+      const icons = vm.$el.querySelectorAll('.sidebar-collapsed-icon');
+      expect(icons.length).toEqual(2);
+      expect(icons[0].innerText.trim()).toEqual('Jul 17 2016');
+      expect(icons[1].innerText.trim()).toEqual('Jul 17 2017');
+    });
+  });
+
+  describe('minDate', () => {
+    beforeEach((done) => {
+      vm.minDate = new Date('07/17/2016');
+      Vue.nextTick(done);
+    });
+
+    it('should render minDate in collapsed-calendar-icon', () => {
+      const icons = vm.$el.querySelectorAll('.sidebar-collapsed-icon');
+      expect(icons.length).toEqual(1);
+      expect(icons[0].innerText.trim()).toEqual('From Jul 17 2016');
+    });
+  });
+
+  describe('maxDate', () => {
+    beforeEach((done) => {
+      vm.maxDate = new Date('07/17/2017');
+      Vue.nextTick(done);
+    });
+
+    it('should render maxDate in collapsed-calendar-icon', () => {
+      const icons = vm.$el.querySelectorAll('.sidebar-collapsed-icon');
+      expect(icons.length).toEqual(1);
+      expect(icons[0].innerText.trim()).toEqual('Until Jul 17 2017');
+    });
+  });
+
+  describe('no dates', () => {
+    it('should render None', () => {
+      const icons = vm.$el.querySelectorAll('.sidebar-collapsed-icon');
+      expect(icons.length).toEqual(1);
+      expect(icons[0].innerText.trim()).toEqual('None');
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/sidebar/date_picker_spec.js b/spec/javascripts/vue_shared/components/sidebar/date_picker_spec.js
new file mode 100644
index 00000000000..926e11b4d30
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/sidebar/date_picker_spec.js
@@ -0,0 +1,117 @@
+import Vue from 'vue';
+import sidebarDatePicker from '~/vue_shared/components/sidebar/date_picker.vue';
+import mountComponent from '../../../helpers/vue_mount_component_helper';
+
+describe('sidebarDatePicker', () => {
+  let vm;
+  beforeEach(() => {
+    const SidebarDatePicker = Vue.extend(sidebarDatePicker);
+    vm = mountComponent(SidebarDatePicker, {
+      label: 'label',
+      isLoading: true,
+    });
+  });
+
+  it('should emit toggleCollapse when collapsed toggle sidebar is clicked', () => {
+    const toggleCollapse = jasmine.createSpy();
+    vm.$on('toggleCollapse', toggleCollapse);
+
+    vm.$el.querySelector('.issuable-sidebar-header .gutter-toggle').click();
+    expect(toggleCollapse).toHaveBeenCalled();
+  });
+
+  it('should render collapsed-calendar-icon', () => {
+    expect(vm.$el.querySelector('.sidebar-collapsed-icon')).toBeDefined();
+  });
+
+  it('should render label', () => {
+    expect(vm.$el.querySelector('.title').innerText.trim()).toEqual('label');
+  });
+
+  it('should render loading-icon when isLoading', () => {
+    expect(vm.$el.querySelector('.fa-spin')).toBeDefined();
+  });
+
+  it('should render value when not editing', () => {
+    expect(vm.$el.querySelector('.value-content')).toBeDefined();
+  });
+
+  it('should render None if there is no selectedDate', () => {
+    expect(vm.$el.querySelector('.value-content span').innerText.trim()).toEqual('None');
+  });
+
+  it('should render date-picker when editing', (done) => {
+    vm.editing = true;
+    Vue.nextTick(() => {
+      expect(vm.$el.querySelector('.pika-label')).toBeDefined();
+      done();
+    });
+  });
+
+  describe('editable', () => {
+    beforeEach((done) => {
+      vm.editable = true;
+      Vue.nextTick(done);
+    });
+
+    it('should render edit button', () => {
+      expect(vm.$el.querySelector('.title .btn-blank').innerText.trim()).toEqual('Edit');
+    });
+
+    it('should enable editing when edit button is clicked', (done) => {
+      vm.isLoading = false;
+      Vue.nextTick(() => {
+        vm.$el.querySelector('.title .btn-blank').click();
+        expect(vm.editing).toEqual(true);
+        done();
+      });
+    });
+  });
+
+  it('should render date if selectedDate', (done) => {
+    vm.selectedDate = new Date('07/07/2017');
+    Vue.nextTick(() => {
+      expect(vm.$el.querySelector('.value-content strong').innerText.trim()).toEqual('Jul 7, 2017');
+      done();
+    });
+  });
+
+  describe('selectedDate and editable', () => {
+    beforeEach((done) => {
+      vm.selectedDate = new Date('07/07/2017');
+      vm.editable = true;
+      Vue.nextTick(done);
+    });
+
+    it('should render remove button if selectedDate and editable', () => {
+      expect(vm.$el.querySelector('.value-content .btn-blank').innerText.trim()).toEqual('remove');
+    });
+
+    it('should emit saveDate when remove button is clicked', () => {
+      const saveDate = jasmine.createSpy();
+      vm.$on('saveDate', saveDate);
+
+      vm.$el.querySelector('.value-content .btn-blank').click();
+      expect(saveDate).toHaveBeenCalled();
+    });
+  });
+
+  describe('showToggleSidebar', () => {
+    beforeEach((done) => {
+      vm.showToggleSidebar = true;
+      Vue.nextTick(done);
+    });
+
+    it('should render toggle-sidebar when showToggleSidebar', () => {
+      expect(vm.$el.querySelector('.title .gutter-toggle')).toBeDefined();
+    });
+
+    it('should emit toggleCollapse when toggle sidebar is clicked', () => {
+      const toggleCollapse = jasmine.createSpy();
+      vm.$on('toggleCollapse', toggleCollapse);
+
+      vm.$el.querySelector('.title .gutter-toggle').click();
+      expect(toggleCollapse).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/sidebar/toggle_sidebar_spec.js b/spec/javascripts/vue_shared/components/sidebar/toggle_sidebar_spec.js
new file mode 100644
index 00000000000..752a9e89d50
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/sidebar/toggle_sidebar_spec.js
@@ -0,0 +1,32 @@
+import Vue from 'vue';
+import toggleSidebar from '~/vue_shared/components/sidebar/toggle_sidebar.vue';
+import mountComponent from '../../../helpers/vue_mount_component_helper';
+
+describe('toggleSidebar', () => {
+  let vm;
+  beforeEach(() => {
+    const ToggleSidebar = Vue.extend(toggleSidebar);
+    vm = mountComponent(ToggleSidebar, {
+      collapsed: true,
+    });
+  });
+
+  it('should render << when collapsed', () => {
+    expect(vm.$el.querySelector('.fa').classList.contains('fa-angle-double-left')).toEqual(true);
+  });
+
+  it('should render >> when collapsed', () => {
+    vm.collapsed = false;
+    Vue.nextTick(() => {
+      expect(vm.$el.querySelector('.fa').classList.contains('fa-angle-double-right')).toEqual(true);
+    });
+  });
+
+  it('should emit toggle event when button clicked', () => {
+    const toggle = jasmine.createSpy();
+    vm.$on('toggle', toggle);
+    vm.$el.click();
+
+    expect(toggle).toHaveBeenCalled();
+  });
+});