Changed tests to use JS tests

app/assets/javascripts/labels_select.js

@@ -34,7 +34,9 @@
 
         $sidebarLabelTooltip.tooltip();
 
-        new gl.CreateLabelDropdown($dropdown.closest('.dropdown').find('.dropdown-new-label'), projectId);
+        if ($dropdown.closest('.dropdown').find('.dropdown-new-label').length) {
+          new gl.CreateLabelDropdown($dropdown.closest('.dropdown').find('.dropdown-new-label'), projectId);
+        }
 
         saveLabelData = function() {
           var data, selected;

app/helpers/issuables_helper.rb

@@ -73,8 +73,7 @@ module IssuablesHelper
   end
 
   def issuable_labels_tooltip(labels, limit: 5)
-    first = labels[0...limit]
-    last = labels[(limit-1)...-1]
+    first, last = labels.partition.with_index{ |_, i| i < limit  }
 
     label_names = first.collect(&:name)
     label_names << "and #{last.size} more" unless last.empty?

app/views/shared/issuable/_sidebar.html.haml

@@ -109,7 +109,7 @@
 
       - if issuable.project.labels.any?
         .block.labels
-          .sidebar-collapsed-icon.js-sidebar-labels-tooltip{ title: issuable_labels_tooltip(issuable.labels), data: { placement: "left", container: "body" } }
+          .sidebar-collapsed-icon.js-sidebar-labels-tooltip{ title: issuable_labels_tooltip(issuable.labels_array), data: { placement: "left", container: "body" } }
             = icon('tags')
             %span
               = issuable.labels_array.size

spec/features/issues/issue_sidebar_spec.rb

 require 'rails_helper'
 
 feature 'Issue Sidebar', feature: true do
-  include WaitForAjax
-
   let(:project) { create(:project) }
   let(:issue) { create(:issue, project: project) }
   let!(:user) { create(:user)}
@@ -75,44 +73,6 @@ feature 'Issue Sidebar', feature: true do
     end
   end
 
-  context 'update labels', js: true do
-    before do
-      project.team << [user, :developer]
-      visit_issue(project, issue)
-    end
-
-    context 'more than 5' do
-      before do
-        create(:label, project: project, title: 'a')
-        create(:label, project: project, title: 'b')
-        create(:label, project: project, title: 'c')
-        create(:label, project: project, title: 'd')
-        create(:label, project: project, title: 'e')
-        create(:label, project: project, title: 'f')
-      end
-
-      it 'should update the tooltip for collapsed sidebar' do
-        page.within('.block.labels') do
-          find('.edit-link').click
-
-          page.within('.dropdown-menu-labels') do
-            click_link 'a'
-            click_link 'b'
-            click_link 'c'
-            click_link 'd'
-            click_link 'e'
-            click_link 'f'
-          end
-
-          find('.edit-link').click
-          wait_for_ajax 
-
-          expect(find('.js-sidebar-labels-tooltip', visible: false)['data-original-title']).to eq('a, b, c, d, e, and 1 more')
-        end
-      end
-    end
-  end
-
   def visit_issue(project, issue)
     visit namespace_project_issue_path(project.namespace, project, issue)
   end

spec/helpers/issuable_helper_spec.rb

+require 'spec_helper'
+
+describe IssuablesHelper do 
+  let(:label)  { build_stubbed(:label) }
+  let(:label2) { build_stubbed(:label) }
+
+  context 'label tooltip' do
+    it 'returns label text' do
+      expect(issuable_labels_tooltip([label])).to eq(label.title)
+    end
+
+    it 'returns label text' do
+      expect(issuable_labels_tooltip([label, label2], limit: 1)).to eq("#{label.title}, and 1 more")
+    end
+  end
+end

spec/javascripts/fixtures/issue_sidebar_label.html.haml

+.block.labels
+  .sidebar-collapsed-icon.js-sidebar-labels-tooltip
+  .title.hide-collapsed
+    %a.edit-link.pull-right{ href: "#" }
+      Edit
+  .selectbox.hide-collapsed{ style: "display: none;" }
+    .dropdown
+      %button.dropdown-menu-toggle.js-label-select.js-multiselect{"data-ability-name" => "issue", "data-field-name" => "issue[label_names][]", "data-issue-update" => "/root/test/issues/2.json", "data-labels" => "/root/test/labels.json", "data-project-id" => "12", "data-show-any" => "true", "data-show-no" => "true", "data-toggle" => "dropdown", :type => "button"}
+        %span.dropdown-toggle-text
+          Label
+        %i.fa.fa-chevron-down
+      .dropdown-menu.dropdown-select.dropdown-menu-paging.dropdown-menu-labels.dropdown-menu-selectable
+        .dropdown-page-one
+          .dropdown-content
+          .dropdown-loading
+            %i.fa.fa-spinner.fa-spin

spec/javascripts/labels_issue_sidebar_spec.js.es6

+//= require lib/utils/type_utility
+//= require jquery
+//= require bootstrap
+//= require gl_dropdown
+//= require select2
+//= require jquery.nicescroll
+//= require api
+//= require create_label
+//= require issuable_context
+//= require users_select
+//= require labels_select
+
+(() => {
+  let saveLabelCount = 0;
+  describe('Issue dropdown sidebar', () => {
+    fixture.preload('issue_sidebar_label.html');
+
+    beforeEach(() => {
+      fixture.load('issue_sidebar_label.html');
+      new IssuableContext('{"id":1,"name":"Administrator","username":"root"}');
+      new LabelsSelect();
+
+      spyOn(jQuery, 'ajax').and.callFake((req) => {
+        const d = $.Deferred();
+        let LABELS_DATA = []
+
+        if (req.url === '/root/test/labels.json') {
+          for (let i = 0; i < 10; i++) {
+            LABELS_DATA.push({id: i, title: `test ${i}`, color: '#5CB85C'});
+          }
+        } else if (req.url === '/root/test/issues/2.json') {
+          let tmp = []
+          for (let i = 0; i < saveLabelCount; i++) {
+            tmp.push({id: i, title: `test ${i}`, color: '#5CB85C'});
+          }
+          LABELS_DATA = {labels: tmp};
+        }
+
+        d.resolve(LABELS_DATA);
+        return d.promise();
+      });
+    });
+
+    it('changes collapsed tooltip when changing labels when less than 5', (done) => {
+      saveLabelCount = 5;
+      $('.edit-link').get(0).click();
+
+      setTimeout(() => {
+        expect($('.dropdown-content a').length).toBe(10);
+
+        $('.dropdow-content a').each((i, $link) => {
+          if (i < 5) {
+            $link.get(0).click();
+          }
+        });
+
+        $('.edit-link').get(0).click();
+
+        setTimeout(() => {
+          expect($('.sidebar-collapsed-icon').attr('data-original-title')).toBe('test 0, test 1, test 2, test 3, test 4');
+          done();
+        }, 0);
+      }, 0);
+    });
+
+    it('changes collapsed tooltip when changing labels when more than 5', (done) => {
+      saveLabelCount = 6;
+      $('.edit-link').get(0).click();
+
+      setTimeout(() => {
+        expect($('.dropdown-content a').length).toBe(10);
+
+        $('.dropdow-content a').each((i, $link) => {
+          if (i < 5) {
+            $link.get(0).click();
+          }
+        });
+
+        $('.edit-link').get(0).click();
+
+        setTimeout(() => {
+          expect($('.sidebar-collapsed-icon').attr('data-original-title')).toBe('test 0, test 1, test 2, test 3, test 4, and 1 more');
+          done();
+        }, 0);
+      }, 0);
+    });
+  });
+})();
+