refactor(sidebar): Refactored Karma spec files to Jest

fix #58830

Added changelog

Updated to use jest functions

Added mock implementation

13 files changed, 0 insertions, 1044 deletions

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
deleted file mode 100644
index 6bff1521695..00000000000
--- a/spec/javascripts/vue_shared/components/sidebar/collapsed_calendar_icon_spec.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import Vue from 'vue';
-import collapsedCalendarIcon from '~/vue_shared/components/sidebar/collapsed_calendar_icon.vue';
-import mountComponent from 'spec/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
deleted file mode 100644
index c507a97d37e..00000000000
--- a/spec/javascripts/vue_shared/components/sidebar/collapsed_grouped_date_picker_spec.js
+++ /dev/null
@@ -1,86 +0,0 @@
-import Vue from 'vue';
-import collapsedGroupedDatePicker from '~/vue_shared/components/sidebar/collapsed_grouped_date_picker.vue';
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-describe('collapsedGroupedDatePicker', () => {
-  let vm;
-  beforeEach(() => {
-    const CollapsedGroupedDatePicker = Vue.extend(collapsedGroupedDatePicker);
-    vm = mountComponent(CollapsedGroupedDatePicker, {
-      showToggleSidebar: true,
-    });
-  });
-
-  describe('toggleCollapse events', () => {
-    beforeEach(done => {
-      spyOn(vm, 'toggleSidebar');
-      vm.minDate = new Date('07/17/2016');
-      Vue.nextTick(done);
-    });
-
-    it('should emit when collapsed-calendar-icon is clicked', () => {
-      vm.$el.querySelector('.sidebar-collapsed-icon').click();
-
-      expect(vm.toggleSidebar).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');
-    });
-
-    it('should have tooltip as `Start and due date`', () => {
-      const icons = vm.$el.querySelectorAll('.sidebar-collapsed-icon');
-
-      expect(icons[0].dataset.originalTitle).toBe('Start and due date');
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/sidebar/date_picker_spec.js b/spec/javascripts/vue_shared/components/sidebar/date_picker_spec.js
deleted file mode 100644
index 805ba7b9947..00000000000
--- a/spec/javascripts/vue_shared/components/sidebar/date_picker_spec.js
+++ /dev/null
@@ -1,121 +0,0 @@
-import Vue from 'vue';
-import sidebarDatePicker from '~/vue_shared/components/sidebar/date_picker.vue';
-import mountComponent from 'spec/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/labels_select/base_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js
deleted file mode 100644
index c44b04009ca..00000000000
--- a/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js
+++ /dev/null
@@ -1,130 +0,0 @@
-import Vue from 'vue';
-
-import LabelsSelect from '~/labels_select';
-import baseComponent from '~/vue_shared/components/sidebar/labels_select/base.vue';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-import { mockConfig, mockLabels } from './mock_data';
-
-const createComponent = (config = mockConfig) => {
-  const Component = Vue.extend(baseComponent);
-
-  return mountComponent(Component, config);
-};
-
-describe('BaseComponent', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('computed', () => {
-    describe('hiddenInputName', () => {
-      it('returns correct string when showCreate prop is `true`', () => {
-        expect(vm.hiddenInputName).toBe('issue[label_names][]');
-      });
-
-      it('returns correct string when showCreate prop is `false`', () => {
-        const mockConfigNonEditable = Object.assign({}, mockConfig, { showCreate: false });
-        const vmNonEditable = createComponent(mockConfigNonEditable);
-
-        expect(vmNonEditable.hiddenInputName).toBe('label_id[]');
-        vmNonEditable.$destroy();
-      });
-    });
-
-    describe('createLabelTitle', () => {
-      it('returns `Create project label` when `isProject` prop is true', () => {
-        expect(vm.createLabelTitle).toBe('Create project label');
-      });
-
-      it('return `Create group label` when `isProject` prop is false', () => {
-        const mockConfigGroup = Object.assign({}, mockConfig, { isProject: false });
-        const vmGroup = createComponent(mockConfigGroup);
-
-        expect(vmGroup.createLabelTitle).toBe('Create group label');
-        vmGroup.$destroy();
-      });
-    });
-
-    describe('manageLabelsTitle', () => {
-      it('returns `Manage project labels` when `isProject` prop is true', () => {
-        expect(vm.manageLabelsTitle).toBe('Manage project labels');
-      });
-
-      it('return `Manage group labels` when `isProject` prop is false', () => {
-        const mockConfigGroup = Object.assign({}, mockConfig, { isProject: false });
-        const vmGroup = createComponent(mockConfigGroup);
-
-        expect(vmGroup.manageLabelsTitle).toBe('Manage group labels');
-        vmGroup.$destroy();
-      });
-    });
-  });
-
-  describe('methods', () => {
-    describe('handleClick', () => {
-      it('emits onLabelClick event with label and list of labels as params', () => {
-        spyOn(vm, '$emit');
-        vm.handleClick(mockLabels[0]);
-
-        expect(vm.$emit).toHaveBeenCalledWith('onLabelClick', mockLabels[0]);
-      });
-    });
-
-    describe('handleCollapsedValueClick', () => {
-      it('emits toggleCollapse event on component', () => {
-        spyOn(vm, '$emit');
-        vm.handleCollapsedValueClick();
-
-        expect(vm.$emit).toHaveBeenCalledWith('toggleCollapse');
-      });
-    });
-
-    describe('handleDropdownHidden', () => {
-      it('emits onDropdownClose event on component', () => {
-        spyOn(vm, '$emit');
-        vm.handleDropdownHidden();
-
-        expect(vm.$emit).toHaveBeenCalledWith('onDropdownClose');
-      });
-    });
-  });
-
-  describe('mounted', () => {
-    it('creates LabelsSelect object and assigns it to `labelsDropdon` as prop', () => {
-      expect(vm.labelsDropdown instanceof LabelsSelect).toBe(true);
-    });
-  });
-
-  describe('template', () => {
-    it('renders component container element with classes `block labels`', () => {
-      expect(vm.$el.classList.contains('block')).toBe(true);
-      expect(vm.$el.classList.contains('labels')).toBe(true);
-    });
-
-    it('renders `.selectbox` element', () => {
-      expect(vm.$el.querySelector('.selectbox')).not.toBeNull();
-      expect(vm.$el.querySelector('.selectbox').getAttribute('style')).toBe('display: none;');
-    });
-
-    it('renders `.dropdown` element', () => {
-      expect(vm.$el.querySelector('.dropdown')).not.toBeNull();
-    });
-
-    it('renders `.dropdown-menu` element', () => {
-      const dropdownMenuEl = vm.$el.querySelector('.dropdown-menu');
-
-      expect(dropdownMenuEl).not.toBeNull();
-      expect(dropdownMenuEl.querySelector('.dropdown-page-one')).not.toBeNull();
-      expect(dropdownMenuEl.querySelector('.dropdown-content')).not.toBeNull();
-      expect(dropdownMenuEl.querySelector('.dropdown-loading')).not.toBeNull();
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js
deleted file mode 100644
index 0689fc1cf1f..00000000000
--- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js
+++ /dev/null
@@ -1,95 +0,0 @@
-import Vue from 'vue';
-
-import dropdownButtonComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_button.vue';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-import { mockConfig, mockLabels } from './mock_data';
-
-const componentConfig = Object.assign({}, mockConfig, {
-  fieldName: 'label_id[]',
-  labels: mockLabels,
-  showExtraOptions: false,
-});
-
-const createComponent = (config = componentConfig) => {
-  const Component = Vue.extend(dropdownButtonComponent);
-
-  return mountComponent(Component, config);
-};
-
-describe('DropdownButtonComponent', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('computed', () => {
-    describe('dropdownToggleText', () => {
-      it('returns text as `Label` when `labels` prop is empty array', () => {
-        const mockEmptyLabels = Object.assign({}, componentConfig, { labels: [] });
-        const vmEmptyLabels = createComponent(mockEmptyLabels);
-
-        expect(vmEmptyLabels.dropdownToggleText).toBe('Label');
-        vmEmptyLabels.$destroy();
-      });
-
-      it('returns first label name with remaining label count when `labels` prop has more than one item', () => {
-        const mockMoreLabels = Object.assign({}, componentConfig, {
-          labels: mockLabels.concat(mockLabels),
-        });
-        const vmMoreLabels = createComponent(mockMoreLabels);
-
-        expect(vmMoreLabels.dropdownToggleText).toBe(
-          `Foo Label +${mockMoreLabels.labels.length - 1} more`,
-        );
-        vmMoreLabels.$destroy();
-      });
-
-      it('returns first label name when `labels` prop has only one item present', () => {
-        const singleLabel = Object.assign({}, componentConfig, {
-          labels: [mockLabels[0]],
-        });
-        const vmSingleLabel = createComponent(singleLabel);
-
-        expect(vmSingleLabel.dropdownToggleText).toBe(mockLabels[0].title);
-
-        vmSingleLabel.$destroy();
-      });
-    });
-  });
-
-  describe('template', () => {
-    it('renders component container element of type `button`', () => {
-      expect(vm.$el.nodeName).toBe('BUTTON');
-    });
-
-    it('renders component container element with required data attributes', () => {
-      expect(vm.$el.dataset.abilityName).toBe(vm.abilityName);
-      expect(vm.$el.dataset.fieldName).toBe(vm.fieldName);
-      expect(vm.$el.dataset.issueUpdate).toBe(vm.updatePath);
-      expect(vm.$el.dataset.labels).toBe(vm.labelsPath);
-      expect(vm.$el.dataset.namespacePath).toBe(vm.namespace);
-      expect(vm.$el.dataset.showAny).not.toBeDefined();
-    });
-
-    it('renders dropdown toggle text element', () => {
-      const dropdownToggleTextEl = vm.$el.querySelector('.dropdown-toggle-text');
-
-      expect(dropdownToggleTextEl).not.toBeNull();
-      expect(dropdownToggleTextEl.innerText.trim()).toBe('Foo Label +1 more');
-    });
-
-    it('renders dropdown button icon', () => {
-      const dropdownIconEl = vm.$el.querySelector('i.fa');
-
-      expect(dropdownIconEl).not.toBeNull();
-      expect(dropdownIconEl.classList.contains('fa-chevron-down')).toBe(true);
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js
deleted file mode 100644
index b8f32f96332..00000000000
--- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js
+++ /dev/null
@@ -1,108 +0,0 @@
-import Vue from 'vue';
-
-import dropdownCreateLabelComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-import { mockSuggestedColors } from './mock_data';
-
-const createComponent = headerTitle => {
-  const Component = Vue.extend(dropdownCreateLabelComponent);
-
-  return mountComponent(Component, {
-    headerTitle,
-  });
-};
-
-describe('DropdownCreateLabelComponent', () => {
-  let vm;
-
-  beforeEach(() => {
-    gon.suggested_label_colors = mockSuggestedColors;
-    vm = createComponent();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('created', () => {
-    it('initializes `suggestedColors` prop on component from `gon.suggested_color_labels` object', () => {
-      expect(vm.suggestedColors.length).toBe(mockSuggestedColors.length);
-    });
-  });
-
-  describe('template', () => {
-    it('renders component container element with classes `dropdown-page-two dropdown-new-label`', () => {
-      expect(vm.$el.classList.contains('dropdown-page-two', 'dropdown-new-label')).toBe(true);
-    });
-
-    it('renders `Go back` button on component header', () => {
-      const backButtonEl = vm.$el.querySelector(
-        '.dropdown-title button.dropdown-title-button.dropdown-menu-back',
-      );
-
-      expect(backButtonEl).not.toBe(null);
-      expect(backButtonEl.querySelector('.fa-arrow-left')).not.toBe(null);
-    });
-
-    it('renders component header element as `Create new label` when `headerTitle` prop is not provided', () => {
-      const headerEl = vm.$el.querySelector('.dropdown-title');
-
-      expect(headerEl.innerText.trim()).toContain('Create new label');
-    });
-
-    it('renders component header element with value of `headerTitle` prop', () => {
-      const headerTitle = 'Create project label';
-      const vmWithHeaderTitle = createComponent(headerTitle);
-      const headerEl = vmWithHeaderTitle.$el.querySelector('.dropdown-title');
-
-      expect(headerEl.innerText.trim()).toContain(headerTitle);
-      vmWithHeaderTitle.$destroy();
-    });
-
-    it('renders `Close` button on component header', () => {
-      const closeButtonEl = vm.$el.querySelector(
-        '.dropdown-title button.dropdown-title-button.dropdown-menu-close',
-      );
-
-      expect(closeButtonEl).not.toBe(null);
-      expect(closeButtonEl.querySelector('.fa-times.dropdown-menu-close-icon')).not.toBe(null);
-    });
-
-    it('renders `Name new label` input element', () => {
-      expect(vm.$el.querySelector('.dropdown-labels-error.js-label-error')).not.toBe(null);
-      expect(vm.$el.querySelector('input#new_label_name.default-dropdown-input')).not.toBe(null);
-    });
-
-    it('renders suggested colors list elements', () => {
-      const colorsListContainerEl = vm.$el.querySelector('.suggest-colors.suggest-colors-dropdown');
-
-      expect(colorsListContainerEl).not.toBe(null);
-      expect(colorsListContainerEl.querySelectorAll('a').length).toBe(mockSuggestedColors.length);
-
-      const colorItemEl = colorsListContainerEl.querySelectorAll('a')[0];
-
-      expect(colorItemEl.dataset.color).toBe(vm.suggestedColors[0]);
-      expect(colorItemEl.getAttribute('style')).toBe('background-color: rgb(0, 51, 204);');
-    });
-
-    it('renders color input element', () => {
-      expect(vm.$el.querySelector('.dropdown-label-color-input')).not.toBe(null);
-      expect(
-        vm.$el.querySelector('.dropdown-label-color-preview.js-dropdown-label-color-preview'),
-      ).not.toBe(null);
-
-      expect(vm.$el.querySelector('input#new_label_color.default-dropdown-input')).not.toBe(null);
-    });
-
-    it('renders component action buttons', () => {
-      const createBtnEl = vm.$el.querySelector('button.js-new-label-btn');
-      const cancelBtnEl = vm.$el.querySelector('button.js-cancel-label-btn');
-
-      expect(createBtnEl).not.toBe(null);
-      expect(createBtnEl.innerText.trim()).toBe('Create');
-      expect(cancelBtnEl.innerText.trim()).toBe('Cancel');
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js
deleted file mode 100644
index 3711e9dac8c..00000000000
--- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js
+++ /dev/null
@@ -1,76 +0,0 @@
-import Vue from 'vue';
-
-import dropdownFooterComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_footer.vue';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-import { mockConfig } from './mock_data';
-
-const createComponent = (
-  labelsWebUrl = mockConfig.labelsWebUrl,
-  createLabelTitle,
-  manageLabelsTitle,
-) => {
-  const Component = Vue.extend(dropdownFooterComponent);
-
-  return mountComponent(Component, {
-    labelsWebUrl,
-    createLabelTitle,
-    manageLabelsTitle,
-  });
-};
-
-describe('DropdownFooterComponent', () => {
-  const createLabelTitle = 'Create project label';
-  const manageLabelsTitle = 'Manage project labels';
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('template', () => {
-    it('renders link element with `Create new label` when `createLabelTitle` prop is not provided', () => {
-      const createLabelEl = vm.$el.querySelector('.dropdown-footer-list .dropdown-toggle-page');
-
-      expect(createLabelEl).not.toBeNull();
-      expect(createLabelEl.innerText.trim()).toBe('Create new label');
-    });
-
-    it('renders link element with value of `createLabelTitle` prop', () => {
-      const vmWithCreateLabelTitle = createComponent(mockConfig.labelsWebUrl, createLabelTitle);
-      const createLabelEl = vmWithCreateLabelTitle.$el.querySelector(
-        '.dropdown-footer-list .dropdown-toggle-page',
-      );
-
-      expect(createLabelEl.innerText.trim()).toBe(createLabelTitle);
-      vmWithCreateLabelTitle.$destroy();
-    });
-
-    it('renders link element with `Manage labels` when `manageLabelsTitle` prop is not provided', () => {
-      const manageLabelsEl = vm.$el.querySelector('.dropdown-footer-list .dropdown-external-link');
-
-      expect(manageLabelsEl).not.toBeNull();
-      expect(manageLabelsEl.getAttribute('href')).toBe(vm.labelsWebUrl);
-      expect(manageLabelsEl.innerText.trim()).toBe('Manage labels');
-    });
-
-    it('renders link element with value of `manageLabelsTitle` prop', () => {
-      const vmWithManageLabelsTitle = createComponent(
-        mockConfig.labelsWebUrl,
-        createLabelTitle,
-        manageLabelsTitle,
-      );
-      const manageLabelsEl = vmWithManageLabelsTitle.$el.querySelector(
-        '.dropdown-footer-list .dropdown-external-link',
-      );
-
-      expect(manageLabelsEl.innerText.trim()).toBe(manageLabelsTitle);
-      vmWithManageLabelsTitle.$destroy();
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js
deleted file mode 100644
index 115e21e4f9f..00000000000
--- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import Vue from 'vue';
-
-import dropdownHeaderComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_header.vue';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-const createComponent = () => {
-  const Component = Vue.extend(dropdownHeaderComponent);
-
-  return mountComponent(Component);
-};
-
-describe('DropdownHeaderComponent', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('template', () => {
-    it('renders header text element', () => {
-      const headerEl = vm.$el.querySelector('.dropdown-title span');
-
-      expect(headerEl.innerText.trim()).toBe('Assign labels');
-    });
-
-    it('renders `Close` button element', () => {
-      const closeBtnEl = vm.$el.querySelector(
-        '.dropdown-title button.dropdown-title-button.dropdown-menu-close',
-      );
-
-      expect(closeBtnEl).not.toBeNull();
-      expect(closeBtnEl.querySelector('.fa-times.dropdown-menu-close-icon')).not.toBeNull();
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js
deleted file mode 100644
index c30e619e76b..00000000000
--- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js
+++ /dev/null
@@ -1,42 +0,0 @@
-import Vue from 'vue';
-
-import dropdownSearchInputComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-const createComponent = () => {
-  const Component = Vue.extend(dropdownSearchInputComponent);
-
-  return mountComponent(Component);
-};
-
-describe('DropdownSearchInputComponent', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('template', () => {
-    it('renders input element with type `search`', () => {
-      const inputEl = vm.$el.querySelector('input.dropdown-input-field');
-
-      expect(inputEl).not.toBeNull();
-      expect(inputEl.getAttribute('type')).toBe('search');
-    });
-
-    it('renders search icon element', () => {
-      expect(vm.$el.querySelector('.fa-search.dropdown-input-search')).not.toBeNull();
-    });
-
-    it('renders clear search icon element', () => {
-      expect(
-        vm.$el.querySelector('.fa-times.dropdown-input-clear.js-dropdown-input-clear'),
-      ).not.toBeNull();
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js
deleted file mode 100644
index 6c84d2e167c..00000000000
--- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import Vue from 'vue';
-
-import dropdownTitleComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_title.vue';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-const createComponent = (canEdit = true) => {
-  const Component = Vue.extend(dropdownTitleComponent);
-
-  return mountComponent(Component, {
-    canEdit,
-  });
-};
-
-describe('DropdownTitleComponent', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('template', () => {
-    it('renders title text', () => {
-      expect(vm.$el.classList.contains('title', 'hide-collapsed')).toBe(true);
-      expect(vm.$el.innerText.trim()).toContain('Labels');
-    });
-
-    it('renders spinner icon element', () => {
-      expect(vm.$el.querySelector('.fa-spinner.fa-spin.block-loading')).not.toBeNull();
-    });
-
-    it('renders `Edit` button element', () => {
-      const editBtnEl = vm.$el.querySelector('button.edit-link.js-sidebar-dropdown-toggle');
-
-      expect(editBtnEl).not.toBeNull();
-      expect(editBtnEl.innerText.trim()).toBe('Edit');
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js
deleted file mode 100644
index 4d3de5e474d..00000000000
--- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js
+++ /dev/null
@@ -1,98 +0,0 @@
-import Vue from 'vue';
-
-import dropdownValueCollapsedComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-import { mockLabels } from './mock_data';
-
-const createComponent = (labels = mockLabels) => {
-  const Component = Vue.extend(dropdownValueCollapsedComponent);
-
-  return mountComponent(Component, {
-    labels,
-  });
-};
-
-describe('DropdownValueCollapsedComponent', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('computed', () => {
-    describe('labelsList', () => {
-      it('returns default text when `labels` prop is empty array', () => {
-        const vmEmptyLabels = createComponent([]);
-
-        expect(vmEmptyLabels.labelsList).toBe('Labels');
-        vmEmptyLabels.$destroy();
-      });
-
-      it('returns labels names separated by coma when `labels` prop has more than one item', () => {
-        const labels = mockLabels.concat(mockLabels);
-        const vmMoreLabels = createComponent(labels);
-
-        const expectedText = labels.map(label => label.title).join(', ');
-
-        expect(vmMoreLabels.labelsList).toBe(expectedText);
-        vmMoreLabels.$destroy();
-      });
-
-      it('returns labels names separated by coma with remaining labels count and `and more` phrase when `labels` prop has more than five items', () => {
-        const mockMoreLabels = Object.assign([], mockLabels);
-        for (let i = 0; i < 6; i += 1) {
-          mockMoreLabels.unshift(mockLabels[0]);
-        }
-
-        const vmMoreLabels = createComponent(mockMoreLabels);
-
-        const expectedText = `${mockMoreLabels
-          .slice(0, 5)
-          .map(label => label.title)
-          .join(', ')}, and ${mockMoreLabels.length - 5} more`;
-
-        expect(vmMoreLabels.labelsList).toBe(expectedText);
-        vmMoreLabels.$destroy();
-      });
-
-      it('returns first label name when `labels` prop has only one item present', () => {
-        const text = mockLabels.map(label => label.title).join(', ');
-
-        expect(vm.labelsList).toBe(text);
-      });
-    });
-  });
-
-  describe('methods', () => {
-    describe('handleClick', () => {
-      it('emits onValueClick event on component', () => {
-        spyOn(vm, '$emit');
-        vm.handleClick();
-
-        expect(vm.$emit).toHaveBeenCalledWith('onValueClick');
-      });
-    });
-  });
-
-  describe('template', () => {
-    it('renders component container element with tooltip`', () => {
-      expect(vm.$el.dataset.placement).toBe('left');
-      expect(vm.$el.dataset.container).toBe('body');
-      expect(vm.$el.dataset.originalTitle).toBe(vm.labelsList);
-    });
-
-    it('renders tags icon element', () => {
-      expect(vm.$el.querySelector('.fa-tags')).not.toBeNull();
-    });
-
-    it('renders labels count', () => {
-      expect(vm.$el.querySelector('span').innerText.trim()).toBe(`${vm.labels.length}`);
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js
deleted file mode 100644
index 35a9c300953..00000000000
--- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js
+++ /dev/null
@@ -1,137 +0,0 @@
-import Vue from 'vue';
-import $ from 'jquery';
-
-import dropdownValueComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value.vue';
-
-import mountComponent from 'spec/helpers/vue_mount_component_helper';
-
-import { mockConfig, mockLabels } from './mock_data';
-
-const createComponent = (
-  labels = mockLabels,
-  labelFilterBasePath = mockConfig.labelFilterBasePath,
-) => {
-  const Component = Vue.extend(dropdownValueComponent);
-
-  return mountComponent(Component, {
-    labels,
-    labelFilterBasePath,
-    enableScopedLabels: true,
-  });
-};
-
-describe('DropdownValueComponent', () => {
-  let vm;
-
-  beforeEach(() => {
-    vm = createComponent();
-  });
-
-  afterEach(() => {
-    vm.$destroy();
-  });
-
-  describe('computed', () => {
-    describe('isEmpty', () => {
-      it('returns true if `labels` prop is empty', () => {
-        const vmEmptyLabels = createComponent([]);
-
-        expect(vmEmptyLabels.isEmpty).toBe(true);
-        vmEmptyLabels.$destroy();
-      });
-
-      it('returns false if `labels` prop is empty', () => {
-        expect(vm.isEmpty).toBe(false);
-      });
-    });
-  });
-
-  describe('methods', () => {
-    describe('labelFilterUrl', () => {
-      it('returns URL string starting with labelFilterBasePath and encoded label.title', () => {
-        expect(
-          vm.labelFilterUrl({
-            title: 'Foo bar',
-          }),
-        ).toBe('/gitlab-org/my-project/issues?label_name[]=Foo%20bar');
-      });
-    });
-
-    describe('labelStyle', () => {
-      it('returns object with `color` & `backgroundColor` properties from label.textColor & label.color', () => {
-        const label = {
-          textColor: '#FFFFFF',
-          color: '#BADA55',
-        };
-        const styleObj = vm.labelStyle(label);
-
-        expect(styleObj.color).toBe(label.textColor);
-        expect(styleObj.backgroundColor).toBe(label.color);
-      });
-    });
-
-    describe('scopedLabelsDescription', () => {
-      it('returns html for tooltip', () => {
-        const html = vm.scopedLabelsDescription(mockLabels[1]);
-        const $el = $.parseHTML(html);
-
-        expect($el[0]).toHaveClass('scoped-label-tooltip-title');
-        expect($el[2].textContent).toEqual(mockLabels[1].description);
-      });
-    });
-
-    describe('showScopedLabels', () => {
-      it('returns true if the label is scoped label', () => {
-        expect(vm.showScopedLabels(mockLabels[1])).toBe(true);
-      });
-
-      it('returns false when label is a regular label', () => {
-        expect(vm.showScopedLabels(mockLabels[0])).toBe(false);
-      });
-    });
-  });
-
-  describe('template', () => {
-    it('renders component container element with classes `hide-collapsed value issuable-show-labels`', () => {
-      expect(vm.$el.classList.contains('hide-collapsed', 'value', 'issuable-show-labels')).toBe(
-        true,
-      );
-    });
-
-    it('render slot content inside component when `labels` prop is empty', () => {
-      const vmEmptyLabels = createComponent([]);
-
-      expect(vmEmptyLabels.$el.querySelector('.text-secondary').innerText.trim()).toBe(
-        mockConfig.emptyValueText,
-      );
-      vmEmptyLabels.$destroy();
-    });
-
-    it('renders label element with filter URL', () => {
-      expect(vm.$el.querySelector('a').getAttribute('href')).toBe(
-        '/gitlab-org/my-project/issues?label_name[]=Foo%20Label',
-      );
-    });
-
-    it('renders label element and styles based on label details', () => {
-      const labelEl = vm.$el.querySelector('a span.badge.color-label');
-
-      expect(labelEl).not.toBeNull();
-      expect(labelEl.getAttribute('style')).toBe('background-color: rgb(186, 218, 85);');
-      expect(labelEl.innerText.trim()).toBe(mockLabels[0].title);
-    });
-
-    describe('label is of scoped-label type', () => {
-      it('renders a scoped-label-wrapper span to incorporate 2 anchors', () => {
-        expect(vm.$el.querySelector('span.scoped-label-wrapper')).not.toBeNull();
-      });
-
-      it('renders anchor tag containing question icon', () => {
-        const anchor = vm.$el.querySelector('.scoped-label-wrapper a.scoped-label');
-
-        expect(anchor).not.toBeNull();
-        expect(anchor.querySelector('i.fa-question-circle')).not.toBeNull();
-      });
-    });
-  });
-});
diff --git a/spec/javascripts/vue_shared/components/sidebar/toggle_sidebar_spec.js b/spec/javascripts/vue_shared/components/sidebar/toggle_sidebar_spec.js
deleted file mode 100644
index c911a129173..00000000000
--- a/spec/javascripts/vue_shared/components/sidebar/toggle_sidebar_spec.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import Vue from 'vue';
-import toggleSidebar from '~/vue_shared/components/sidebar/toggle_sidebar.vue';
-import mountComponent from 'spec/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();
-  });
-});