Commit 640062ab authored by Filipa Lacerda's avatar Filipa Lacerda

Adds tests for tabs in the rspec for pipelines

Adds tests for the Linked Tabs class

Removes event listener

Adds builds
parent 43e5009a
/**
* 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');
}
};
})();
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,8 +33,12 @@ class Projects::PipelinesController < Projects::ApplicationController
end
def builds
respond_to do |format|
format.html do
render 'show'
end
end
end
def retry
pipeline.retry_failed(current_user)
......
.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
......
......@@ -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
......
//= 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);
});
});
});
})();
%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
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment