From 640062abdbd1892dfcdd493bdab6d6c7d24fb3a6 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Thu, 24 Nov 2016 11:28:48 +0000
Subject: [PATCH] Adds tests for tabs in the rspec for pipelines
Adds tests for the Linked Tabs class
Removes event listener
Adds builds
---
.../lib/utils/bootstrap_linked_tabs.js.es6 | 7 ++-
.../projects/pipelines_controller.rb | 8 ++-
.../projects/pipelines/_with_tabs.html.haml | 6 +-
spec/features/projects/pipelines_spec.rb | 6 +-
.../bootstrap_linked_tabs_spec.js.es6 | 55 +++++++++++++++++++
.../fixtures/linked_tabs.html.haml | 13 +++++
6 files changed, 86 insertions(+), 9 deletions(-)
create mode 100644 spec/javascripts/bootstrap_linked_tabs_spec.js.es6
create mode 100644 spec/javascripts/fixtures/linked_tabs.html.haml
diff --git a/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js.es6 b/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js.es6
index 28239cd66a9..510ac77009b 100644
--- a/app/assets/javascripts/lib/utils/bootstrap_linked_tabs.js.es6
+++ b/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');
}
};
})();
diff --git a/app/controllers/projects/pipelines_controller.rb b/app/controllers/projects/pipelines_controller.rb
index de58f84f105..85188cfdd4c 100644
--- a/app/controllers/projects/pipelines_controller.rb
+++ b/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
diff --git a/app/views/projects/pipelines/_with_tabs.html.haml b/app/views/projects/pipelines/_with_tabs.html.haml
index 49a26b3f374..4cc0e116122 100644
--- a/app/views/projects/pipelines/_with_tabs.html.haml
+++ b/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
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
--
GitLab