Adds tests for tabs in the rspec for pipelines

Adds tests for the Linked Tabs class

Removes event listener

Adds builds

3 files changed, 73 insertions, 1 deletions

diff --git a/spec/features/projects/pipelines_spec.rb b/spec/features/projects/pipelines_spec.rb
index 03e89efb5d2..24e266e828f 100644
--- a/spec/features/projects/pipelines_spec.rb
+++ b/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
diff --git a/spec/javascripts/bootstrap_linked_tabs_spec.js.es6 b/spec/javascripts/bootstrap_linked_tabs_spec.js.es6
new file mode 100644
index 00000000000..9aa3c50611d
--- /dev/null
+++ b/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);
+      });
+    });
+  });
+})();
diff --git a/spec/javascripts/fixtures/linked_tabs.html.haml b/spec/javascripts/fixtures/linked_tabs.html.haml
new file mode 100644
index 00000000000..93c0cf97ff0
--- /dev/null
+++ b/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