Adds tests for tabs in the rspec for pipelines

Adds tests for the Linked Tabs class

Removes event listener

Adds builds

app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js.es6

@@ -1,4 +1,3 @@
-
 /**
  * Linked Tabs
  *
@@ -61,7 +60,9 @@
       }
 
       // since this is a custom event we need jQuery :(
-      $(document).on('shown.bs.tab', `${this.options.parentEl} a[data-toggle="tab"]`, evt => this.tabShown(evt));
+      $(document)
+        .off('shown.bs.tab', `${this.options.parentEl} a[data-toggle="tab"]`)
+        .on('shown.bs.tab', `${this.options.parentEl} a[data-toggle="tab"]`, evt => this.tabShown(evt));
 
       this.activateTab(this.action);
     }
@@ -104,7 +105,7 @@
      * Note: Will trigger `shown.bs.tab`
      */
     activateTab() {
-      return $(`.pipelines-tabs a[data-action='${this.action}']`).tab('show');
+      return $(`${this.options.parentEl} a[data-action='${this.action}']`).tab('show');
     }
   };
 })();

app/controllers/projects/pipelines_controller.rb

@@ -1,6 +1,6 @@
 class Projects::PipelinesController < Projects::ApplicationController
   before_action :pipeline, except: [:index, :new, :create]
-  before_action :commit, only: [:show]
+  before_action :commit, only: [:show, :builds]
   before_action :authorize_read_pipeline!
   before_action :authorize_create_pipeline!, only: [:new, :create]
   before_action :authorize_update_pipeline!, only: [:retry, :cancel]
@@ -33,7 +33,11 @@ class Projects::PipelinesController < Projects::ApplicationController
   end
 
   def builds
-    render 'show'
+    respond_to do |format|
+      format.html do
+        render 'show'
+      end
+    end
   end
 
   def retry

app/views/projects/pipelines/_with_tabs.html.haml

@@ -1,12 +1,12 @@
 .tabs-holder
   %ul.pipelines-tabs.nav-links.no-top.no-bottom
     %li
-      = link_to namespace_project_pipeline_path(@project.namespace, @project, @pipeline), data: { target: 'div#js-tab-pipeline', action: 'pipelines', toggle: 'tab' } do
+      = link_to namespace_project_pipeline_path(@project.namespace, @project, @pipeline), data: { target: 'div#js-tab-pipeline', action: 'pipelines', toggle: 'tab' },  class: 'pipeline-tab' do
         Pipeline
     %li
-      = link_to builds_namespace_project_pipeline_path(@project.namespace, @project, @pipeline), data: {target: 'div#js-tab-builds', action: 'builds', toggle: 'tab' } do
+      = link_to builds_namespace_project_pipeline_path(@project.namespace, @project, @pipeline), data: {target: 'div#js-tab-builds', action: 'builds', toggle: 'tab' }, class: 'builds-tab' do
         Builds
-        %span.badge= pipeline.statuses.count
+        %span.badge.js-builds-counter= pipeline.statuses.count
 
 
 

spec/features/projects/pipelines_spec.rb

@@ -179,10 +179,14 @@ describe "Pipelines" do
     end
 
     context 'page tabs' do
-      it 'should have two tabs' do
+      it 'shows Pipeline and Builds tabs with link' do
         expect(page).to have_link('Pipeline')
         expect(page).to have_link('Builds')
       end
+
+      it 'shows counter in Builds tab' do
+        expect(page.find('.js-builds-counter').text).to eq(pipeline.statuses.count.to_s)
+      end
     end
 
     context 'retrying builds' do

spec/javascripts/bootstrap_linked_tabs_spec.js.es6

@@ -0,0 +1,55 @@
+//= require lib/utils/bootstrap_linked_tabs
+
+(() => {
+  describe('Linked Tabs', () => {
+    fixture.preload('linked_tabs');
+
+    beforeEach(() => {
+      fixture.load('linked_tabs');
+    });
+
+    describe('when is initialized', () => {
+      it('should activate the tab correspondent to the given action', () => {
+        const linkedTabs = new window.gl.LinkedTabs({ // eslint-disable-line
+          action: 'tab1',
+          defaultAction: 'tab1',
+          parentEl: '.linked-tabs',
+        });
+
+        expect(document.querySelector('#tab1').classList).toContain('active');
+      });
+
+      it('should active the default tab action when the action is show', () => {
+        const linkedTabs = new window.gl.LinkedTabs({ // eslint-disable-line
+          action: 'show',
+          defaultAction: 'tab1',
+          parentEl: '.linked-tabs',
+        });
+
+        expect(document.querySelector('#tab1').classList).toContain('active');
+      });
+    });
+
+    describe('on click', () => {
+      it('should change the url according to the clicked tab', () => {
+        const historySpy = spyOn(history, 'replaceState').and.callFake(() => {});
+
+        const linkedTabs = new window.gl.LinkedTabs({ // eslint-disable-line
+          action: 'show',
+          defaultAction: 'tab1',
+          parentEl: '.linked-tabs',
+        });
+
+        const secondTab = document.querySelector('.linked-tabs li:nth-child(2) a');
+        const newState = secondTab.getAttribute('href') + linkedTabs.currentLocation.search + linkedTabs.currentLocation.hash;
+
+        secondTab.click();
+
+        expect(historySpy).toHaveBeenCalledWith({
+          turbolinks: true,
+          url: newState,
+        }, document.title, newState);
+      });
+    });
+  });
+})();

spec/javascripts/fixtures/linked_tabs.html.haml

@@ -0,0 +1,13 @@
+%ul.nav.nav-tabs.linked-tabs
+  %li
+    %a{ href: 'foo/bar/1', data: { target: 'div#tab1', action: 'tab1', toggle: 'tab' } }
+      Tab 1
+  %li
+    %a{ href: 'foo/bar/1/context', data: { target: 'div#tab2', action: 'tab2', toggle: 'tab' } }
+      Tab 2
+
+.tab-content
+  #tab1.tab-pane
+    Tab 1 Content
+  #tab2.tab-pane
+    Tab 2 Content