Pipeline show view real time header section

10 files changed, 162 insertions, 14 deletions

diff --git a/spec/features/commits_spec.rb b/spec/features/commits_spec.rb
index e6c4ab24de5..2772f05982a 100644
--- a/spec/features/commits_spec.rb
+++ b/spec/features/commits_spec.rb
@@ -76,7 +76,7 @@ describe 'Commits' do
           end
         end
 
-        describe 'Commit builds' do
+        describe 'Commit builds', :feature, :js do
           before do
             visit ci_status_path(pipeline)
           end
@@ -85,7 +85,6 @@ describe 'Commits' do
             expect(page).to have_content pipeline.sha[0..7]
             expect(page).to have_content pipeline.git_commit_message
             expect(page).to have_content pipeline.user.name
-            expect(page).to have_content pipeline.created_at.strftime('%b %d, %Y')
           end
         end
 
@@ -102,7 +101,7 @@ describe 'Commits' do
         end
 
         describe 'Cancel all builds' do
-          it 'cancels commit' do
+          it 'cancels commit', :js do
             visit ci_status_path(pipeline)
             click_on 'Cancel running'
             expect(page).to have_content 'canceled'
@@ -110,9 +109,9 @@ describe 'Commits' do
         end
 
         describe 'Cancel build' do
-          it 'cancels build' do
+          it 'cancels build', :js do
             visit ci_status_path(pipeline)
-            find('a.btn[title="Cancel"]').click
+            find('.js-btn-cancel-pipeline').click
             expect(page).to have_content 'canceled'
           end
         end
@@ -152,17 +151,20 @@ describe 'Commits' do
           visit ci_status_path(pipeline)
         end
 
-        it do
+        it 'Renders header', :feature, :js do
           expect(page).to have_content pipeline.sha[0..7]
           expect(page).to have_content pipeline.git_commit_message
           expect(page).to have_content pipeline.user.name
-          expect(page).to have_link('Download artifacts')
           expect(page).not_to have_link('Cancel running')
           expect(page).not_to have_link('Retry')
         end
+
+        it do
+          expect(page).to have_link('Download artifacts')
+        end
       end
 
-      context 'when accessing internal project with disallowed access' do
+      context 'when accessing internal project with disallowed access', :feature, :js do
         before do
           project.update(
             visibility_level: Gitlab::VisibilityLevel::INTERNAL,
@@ -175,7 +177,7 @@ describe 'Commits' do
           expect(page).to have_content pipeline.sha[0..7]
           expect(page).to have_content pipeline.git_commit_message
           expect(page).to have_content pipeline.user.name
-          expect(page).not_to have_link('Download artifacts')
+
           expect(page).not_to have_link('Cancel running')
           expect(page).not_to have_link('Retry')
         end
diff --git a/spec/features/projects/pipelines/pipeline_spec.rb b/spec/features/projects/pipelines/pipeline_spec.rb
index cfac54ef259..36a3ddca6ef 100644
--- a/spec/features/projects/pipelines/pipeline_spec.rb
+++ b/spec/features/projects/pipelines/pipeline_spec.rb
@@ -229,7 +229,6 @@ describe 'Pipeline', :feature, :js do
         before { find('.js-retry-button').trigger('click') }
 
         it { expect(page).not_to have_content('Retry') }
-        it { expect(page).to have_selector('.retried') }
       end
     end
 
@@ -240,7 +239,6 @@ describe 'Pipeline', :feature, :js do
         before { click_on 'Cancel running' }
 
         it { expect(page).not_to have_content('Cancel running') }
-        it { expect(page).to have_selector('.ci-canceled') }
       end
     end
 
diff --git a/spec/javascripts/pipelines/header_component_spec.js b/spec/javascripts/pipelines/header_component_spec.js
new file mode 100644
index 00000000000..b8531350e43
--- /dev/null
+++ b/spec/javascripts/pipelines/header_component_spec.js
@@ -0,0 +1,60 @@
+import Vue from 'vue';
+import headerComponent from '~/pipelines/components/header_component.vue';
+import eventHub from '~/pipelines/event_hub';
+
+describe('Pipeline details header', () => {
+  let HeaderComponent;
+  let vm;
+  let props;
+
+  beforeEach(() => {
+    HeaderComponent = Vue.extend(headerComponent);
+
+    props = {
+      pipeline: {
+        details: {
+          status: {
+            group: 'failed',
+            icon: 'ci-status-failed',
+            label: 'failed',
+            text: 'failed',
+            details_path: 'path',
+          },
+        },
+        id: 123,
+        created_at: '2017-05-08T14:57:39.781Z',
+        user: {
+          web_url: 'path',
+          name: 'Foo',
+          username: 'foobar',
+          email: 'foo@bar.com',
+          avatar_url: 'link',
+        },
+        retry_path: 'path',
+      },
+      isLoading: false,
+    };
+
+    vm = new HeaderComponent({ propsData: props }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('should render provided pipeline info', () => {
+    expect(
+      vm.$el.querySelector('.header-main-content').textContent.replace(/\s+/g, ' ').trim(),
+    ).toEqual('failed Pipeline #123 triggered 3 weeks ago by Foo');
+  });
+
+  describe('action buttons', () => {
+    it('should call postAction when button action is clicked', () => {
+      eventHub.$on('headerPostAction', (action) => {
+        expect(action.path).toEqual('path');
+      });
+
+      vm.$el.querySelector('button').click();
+    });
+  });
+});
diff --git a/spec/javascripts/pipelines/pipeline_details_mediator_spec.js b/spec/javascripts/pipelines/pipeline_details_mediator_spec.js
new file mode 100644
index 00000000000..9fec2f61f78
--- /dev/null
+++ b/spec/javascripts/pipelines/pipeline_details_mediator_spec.js
@@ -0,0 +1,41 @@
+import Vue from 'vue';
+import PipelineMediator from '~/pipelines/pipeline_details_mediatior';
+
+describe('PipelineMdediator', () => {
+  let mediator;
+  beforeEach(() => {
+    mediator = new PipelineMediator({ endpoint: 'foo' });
+  });
+
+  it('should set defaults', () => {
+    expect(mediator.options).toEqual({ endpoint: 'foo' });
+    expect(mediator.state.isLoading).toEqual(false);
+    expect(mediator.store).toBeDefined();
+    expect(mediator.service).toBeDefined();
+  });
+
+  describe('request and store data', () => {
+    const interceptor = (request, next) => {
+      next(request.respondWith(JSON.stringify({ foo: 'bar' }), {
+        status: 200,
+      }));
+    };
+
+    beforeEach(() => {
+      Vue.http.interceptors.push(interceptor);
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(Vue.http.interceptor, interceptor);
+    });
+
+    it('should store received data', (done) => {
+      mediator.fetchPipeline();
+
+      setTimeout(() => {
+        expect(mediator.store.state.pipeline).toEqual({ foo: 'bar' });
+        done();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/pipelines/pipeline_store_spec.js b/spec/javascripts/pipelines/pipeline_store_spec.js
new file mode 100644
index 00000000000..85d13445b01
--- /dev/null
+++ b/spec/javascripts/pipelines/pipeline_store_spec.js
@@ -0,0 +1,27 @@
+import PipelineStore from '~/pipelines/stores/pipeline_store';
+
+describe('Pipeline Store', () => {
+  let store;
+
+  beforeEach(() => {
+    store = new PipelineStore();
+  });
+
+  it('should set defaults', () => {
+    expect(store.state).toEqual({ pipeline: {} });
+    expect(store.state.pipeline).toEqual({});
+  });
+
+  describe('storePipeline', () => {
+    it('should store empty object if none is provided', () => {
+      store.storePipeline();
+
+      expect(store.state.pipeline).toEqual({});
+    });
+
+    it('should store received object', () => {
+      store.storePipeline({ foo: 'bar' });
+      expect(store.state.pipeline).toEqual({ foo: 'bar' });
+    });
+  });
+});
diff --git a/spec/javascripts/pipelines/pipeline_url_spec.js b/spec/javascripts/pipelines/pipeline_url_spec.js
index d74b1281668..594a9856d2c 100644
--- a/spec/javascripts/pipelines/pipeline_url_spec.js
+++ b/spec/javascripts/pipelines/pipeline_url_spec.js
@@ -47,6 +47,7 @@ describe('Pipeline Url Component', () => {
           web_url: '/',
           name: 'foo',
           avatar_url: '/',
+          path: '/',
         },
       },
     };
diff --git a/spec/javascripts/vue_shared/components/commit_spec.js b/spec/javascripts/vue_shared/components/commit_spec.js
index 0638483e7aa..050170a54e9 100644
--- a/spec/javascripts/vue_shared/components/commit_spec.js
+++ b/spec/javascripts/vue_shared/components/commit_spec.js
@@ -24,6 +24,7 @@ describe('Commit component', () => {
         author: {
           avatar_url: 'https://gitlab.com/uploads/user/avatar/300478/avatar.png',
           web_url: 'https://gitlab.com/jschatz1',
+          path: '/jschatz1',
           username: 'jschatz1',
         },
       },
@@ -46,6 +47,7 @@ describe('Commit component', () => {
         author: {
           avatar_url: 'https://gitlab.com/uploads/user/avatar/300478/avatar.png',
           web_url: 'https://gitlab.com/jschatz1',
+          path: '/jschatz1',
           username: 'jschatz1',
         },
         commitIconSvg: '<svg></svg>',
@@ -81,7 +83,7 @@ describe('Commit component', () => {
       it('should render a link to the author profile', () => {
         expect(
           component.$el.querySelector('.commit-title .avatar-image-container').getAttribute('href'),
-        ).toEqual(props.author.web_url);
+        ).toEqual(props.author.path);
       });
 
       it('Should render the author avatar with title and alt attributes', () => {
diff --git a/spec/javascripts/vue_shared/components/header_ci_component_spec.js b/spec/javascripts/vue_shared/components/header_ci_component_spec.js
index 1bf8916b3d0..2b51c89f311 100644
--- a/spec/javascripts/vue_shared/components/header_ci_component_spec.js
+++ b/spec/javascripts/vue_shared/components/header_ci_component_spec.js
@@ -33,12 +33,14 @@ describe('Header CI Component', () => {
           path: 'path',
           type: 'button',
           cssClass: 'btn',
+          isLoading: false,
         },
         {
           label: 'Go',
           path: 'path',
           type: 'link',
           cssClass: 'link',
+          isLoading: false,
         },
       ],
     };
@@ -79,4 +81,13 @@ describe('Header CI Component', () => {
     expect(vm.$el.querySelector('.link').textContent.trim()).toEqual(props.actions[1].label);
     expect(vm.$el.querySelector('.link').getAttribute('href')).toEqual(props.actions[0].path);
   });
+
+  it('should show loading icon', (done) => {
+    vm.actions[0].isLoading = true;
+
+    Vue.nextTick(() => {
+      expect(vm.$el.querySelector('.btn .fa-spinner').getAttribute('style')).toEqual('');
+      done();
+    });
+  });
 });
diff --git a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
index 286118917e8..67419cfcbea 100644
--- a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
+++ b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js
@@ -76,7 +76,7 @@ describe('Pipelines Table Row', () => {
       it('should render user information', () => {
         expect(
           component.$el.querySelector('td:nth-child(2) a:nth-child(3)').getAttribute('href'),
-        ).toEqual(pipeline.user.web_url);
+        ).toEqual(pipeline.user.path);
 
         expect(
           component.$el.querySelector('td:nth-child(2) img').getAttribute('data-original-title'),
@@ -120,7 +120,7 @@ describe('Pipelines Table Row', () => {
       component = buildComponent(pipeline);
       const { commitAuthorLink, commitAuthorName } = findElements();
 
-      expect(commitAuthorLink).toEqual(pipeline.commit.author.web_url);
+      expect(commitAuthorLink).toEqual(pipeline.commit.author.path);
       expect(commitAuthorName).toEqual(pipeline.commit.author.username);
     });
 
diff --git a/spec/serializers/user_entity_spec.rb b/spec/serializers/user_entity_spec.rb
index c5d11cbcf5e..cd778e49107 100644
--- a/spec/serializers/user_entity_spec.rb
+++ b/spec/serializers/user_entity_spec.rb
@@ -1,6 +1,8 @@
 require 'spec_helper'
 
 describe UserEntity do
+  include Gitlab::Routing
+
   let(:entity) { described_class.new(user) }
   let(:user) { create(:user) }
   subject { entity.as_json }
@@ -20,4 +22,8 @@ describe UserEntity do
   it 'does not expose 2FA OTPs' do
     expect(subject).not_to include(/otp/)
   end
+
+  it 'exposes user path' do
+    expect(subject[:path]).to eq user_path(user)
+  end
 end