Merge branch 'fe-commit-mr-pipelines' into 'master'

Use vue.js Pipelines table in commit and merge request view

Closes #27141

See merge request !8844

10 files changed, 410 insertions, 22 deletions

diff --git a/spec/controllers/projects/merge_requests_controller_spec.rb b/spec/controllers/projects/merge_requests_controller_spec.rb
index e019541e74f..d18e8c37901 100644
--- a/spec/controllers/projects/merge_requests_controller_spec.rb
+++ b/spec/controllers/projects/merge_requests_controller_spec.rb
@@ -22,23 +22,35 @@ describe Projects::MergeRequestsController do
       render_views
 
       let(:fork_project) { create(:forked_project_with_submodules) }
+      before { fork_project.team << [user, :master] }
 
-      before do
-        fork_project.team << [user, :master]
+      context 'when rendering HTML response' do
+        it 'renders new merge request widget template' do
+          submit_new_merge_request
+
+          expect(response).to be_success
+        end
       end
 
-      it 'renders it' do
-        get :new,
-            namespace_id: fork_project.namespace.to_param,
-            project_id: fork_project.to_param,
-            merge_request: {
-              source_branch: 'remove-submodule',
-              target_branch: 'master'
-            }
+      context 'when rendering JSON response' do
+        it 'renders JSON including serialized pipelines' do
+          submit_new_merge_request(format: :json)
 
-        expect(response).to be_success
+          expect(json_response).to have_key('pipelines')
+          expect(response).to be_ok
+        end
       end
     end
+
+    def submit_new_merge_request(format: :html)
+      get :new,
+          namespace_id: fork_project.namespace.to_param,
+          project_id: fork_project.to_param,
+          merge_request: {
+            source_branch: 'remove-submodule',
+            target_branch: 'master' },
+          format: format
+    end
   end
 
   shared_examples "loads labels" do |action|
@@ -689,15 +701,8 @@ describe Projects::MergeRequestsController do
             format: :json
       end
 
-      it 'responds with a rendered HTML partial' do
-        expect(response)
-          .to render_template('projects/merge_requests/show/_pipelines')
-        expect(json_response).to have_key 'html'
-      end
-
       it 'responds with serialized pipelines' do
-        expect(json_response).to have_key 'pipelines'
-        expect(json_response['pipelines']).not_to be_empty
+        expect(json_response).not_to be_empty
       end
     end
   end
diff --git a/spec/features/projects/commit/builds_spec.rb b/spec/features/projects/commit/builds_spec.rb
index 33f1c323af1..268d420c594 100644
--- a/spec/features/projects/commit/builds_spec.rb
+++ b/spec/features/projects/commit/builds_spec.rb
@@ -1,6 +1,6 @@
 require 'spec_helper'
 
-feature 'project commit pipelines' do
+feature 'project commit pipelines', js: true do
   given(:project) { create(:project) }
 
   background do
diff --git a/spec/javascripts/commit/pipelines/mock_data.js.es6 b/spec/javascripts/commit/pipelines/mock_data.js.es6
new file mode 100644
index 00000000000..5f0f26a013c
--- /dev/null
+++ b/spec/javascripts/commit/pipelines/mock_data.js.es6
@@ -0,0 +1,90 @@
+/* eslint-disable no-unused-vars */
+const pipeline = {
+  id: 73,
+  user: {
+    name: 'Administrator',
+    username: 'root',
+    id: 1,
+    state: 'active',
+    avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+    web_url: 'http://localhost:3000/root',
+  },
+  path: '/root/review-app/pipelines/73',
+  details: {
+    status: {
+      icon: 'icon_status_failed',
+      text: 'failed',
+      label: 'failed',
+      group: 'failed',
+      has_details: true,
+      details_path: '/root/review-app/pipelines/73',
+    },
+    duration: null,
+    finished_at: '2017-01-25T00:00:17.130Z',
+    stages: [{
+      name: 'build',
+      title: 'build: failed',
+      status: {
+        icon: 'icon_status_failed',
+        text: 'failed',
+        label: 'failed',
+        group: 'failed',
+        has_details: true,
+        details_path: '/root/review-app/pipelines/73#build',
+      },
+      path: '/root/review-app/pipelines/73#build',
+      dropdown_path: '/root/review-app/pipelines/73/stage.json?stage=build',
+    }],
+    artifacts: [],
+    manual_actions: [
+      {
+        name: 'stop_review',
+        path: '/root/review-app/builds/1463/play',
+      },
+      {
+        name: 'name',
+        path: '/root/review-app/builds/1490/play',
+      },
+    ],
+  },
+  flags: {
+    latest: true,
+    triggered: false,
+    stuck: false,
+    yaml_errors: false,
+    retryable: true,
+    cancelable: false,
+  },
+  ref:
+  {
+    name: 'master',
+    path: '/root/review-app/tree/master',
+    tag: false,
+    branch: true,
+  },
+  commit: {
+    id: 'fbd79f04fa98717641deaaeb092a4d417237c2e4',
+    short_id: 'fbd79f04',
+    title: 'Update .gitlab-ci.yml',
+    author_name: 'Administrator',
+    author_email: 'admin@example.com',
+    created_at: '2017-01-16T12:13:57.000-05:00',
+    committer_name: 'Administrator',
+    committer_email: 'admin@example.com',
+    message: 'Update .gitlab-ci.yml',
+    author: {
+      name: 'Administrator',
+      username: 'root',
+      id: 1,
+      state: 'active',
+      avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+      web_url: 'http://localhost:3000/root',
+    },
+    author_gravatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+    commit_url: 'http://localhost:3000/root/review-app/commit/fbd79f04fa98717641deaaeb092a4d417237c2e4',
+    commit_path: '/root/review-app/commit/fbd79f04fa98717641deaaeb092a4d417237c2e4',
+  },
+  retry_path: '/root/review-app/pipelines/73/retry',
+  created_at: '2017-01-16T17:13:59.800Z',
+  updated_at: '2017-01-25T00:00:17.132Z',
+};
diff --git a/spec/javascripts/commit/pipelines/pipelines_spec.js.es6 b/spec/javascripts/commit/pipelines/pipelines_spec.js.es6
new file mode 100644
index 00000000000..c2b61632827
--- /dev/null
+++ b/spec/javascripts/commit/pipelines/pipelines_spec.js.es6
@@ -0,0 +1,106 @@
+/* global pipeline, Vue */
+
+require('vue-resource');
+require('flash');
+require('~/commit/pipelines/pipelines_store');
+require('~/commit/pipelines/pipelines_service');
+require('~/commit/pipelines/pipelines_table');
+require('~vue_shared/vue_resource_interceptor');
+require('./mock_data');
+
+describe('Pipelines table in Commits and Merge requests', () => {
+  preloadFixtures('pipelines_table');
+
+  beforeEach(() => {
+    loadFixtures('pipelines_table');
+  });
+
+  describe('successfull request', () => {
+    describe('without pipelines', () => {
+      const pipelinesEmptyResponse = (request, next) => {
+        next(request.respondWith(JSON.stringify([]), {
+          status: 200,
+        }));
+      };
+
+      beforeEach(() => {
+        Vue.http.interceptors.push(pipelinesEmptyResponse);
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, pipelinesEmptyResponse,
+        );
+      });
+
+      it('should render the empty state', (done) => {
+        const component = new gl.commits.pipelines.PipelinesTableView({
+          el: document.querySelector('#commit-pipeline-table-view'),
+        });
+
+        setTimeout(() => {
+          expect(component.$el.querySelector('.js-blank-state-title').textContent).toContain('No pipelines to show');
+          done();
+        }, 1);
+      });
+    });
+
+    describe('with pipelines', () => {
+      const pipelinesResponse = (request, next) => {
+        next(request.respondWith(JSON.stringify([pipeline]), {
+          status: 200,
+        }));
+      };
+
+      beforeEach(() => {
+        Vue.http.interceptors.push(pipelinesResponse);
+      });
+
+      afterEach(() => {
+        Vue.http.interceptors = _.without(
+          Vue.http.interceptors, pipelinesResponse,
+        );
+      });
+
+      it('should render a table with the received pipelines', (done) => {
+        const component = new gl.commits.pipelines.PipelinesTableView({
+          el: document.querySelector('#commit-pipeline-table-view'),
+        });
+
+        setTimeout(() => {
+          expect(component.$el.querySelectorAll('table > tbody > tr').length).toEqual(1);
+          done();
+        }, 0);
+      });
+    });
+  });
+
+  describe('unsuccessfull request', () => {
+    const pipelinesErrorResponse = (request, next) => {
+      next(request.respondWith(JSON.stringify([]), {
+        status: 500,
+      }));
+    };
+
+    beforeEach(() => {
+      Vue.http.interceptors.push(pipelinesErrorResponse);
+    });
+
+    afterEach(() => {
+      Vue.http.interceptors = _.without(
+        Vue.http.interceptors, pipelinesErrorResponse,
+      );
+    });
+
+    it('should render empty state', (done) => {
+      const component = new gl.commits.pipelines.PipelinesTableView({
+        el: document.querySelector('#commit-pipeline-table-view'),
+      });
+
+      setTimeout(() => {
+        expect(component.$el.querySelector('.js-blank-state-title').textContent).toContain('No pipelines to show');
+        done();
+      }, 0);
+    });
+  });
+});
diff --git a/spec/javascripts/commit/pipelines/pipelines_store_spec.js.es6 b/spec/javascripts/commit/pipelines/pipelines_store_spec.js.es6
new file mode 100644
index 00000000000..a5a16544ffb
--- /dev/null
+++ b/spec/javascripts/commit/pipelines/pipelines_store_spec.js.es6
@@ -0,0 +1,30 @@
+require('~commit/pipelines/pipelines_store');
+
+describe('Store', () => {
+  const store = gl.commits.pipelines.PipelinesStore;
+
+  beforeEach(() => {
+    store.create();
+  });
+
+  it('should start with a blank state', () => {
+    expect(store.state.pipelines.length).toBe(0);
+  });
+
+  it('should store an array of pipelines', () => {
+    const pipelines = [
+      {
+        id: '1',
+        name: 'pipeline',
+      },
+      {
+        id: '2',
+        name: 'pipeline_2',
+      },
+    ];
+
+    store.store(pipelines);
+
+    expect(store.state.pipelines.length).toBe(pipelines.length);
+  });
+});
diff --git a/spec/javascripts/fixtures/pipelines_table.html.haml b/spec/javascripts/fixtures/pipelines_table.html.haml
new file mode 100644
index 00000000000..fbe4a434f76
--- /dev/null
+++ b/spec/javascripts/fixtures/pipelines_table.html.haml
@@ -0,0 +1,2 @@
+#commit-pipeline-table-view{ data: { endpoint: "endpoint" } }
+.pipeline-svgs{ data: { "commit_icon_svg": "svg"} }
diff --git a/spec/javascripts/vue_common_components/commit_spec.js.es6 b/spec/javascripts/vue_shared/components/commit_spec.js.es6
index bbd914de4ea..84d169a3fb9 100644
--- a/spec/javascripts/vue_common_components/commit_spec.js.es6
+++ b/spec/javascripts/vue_shared/components/commit_spec.js.es6
@@ -1,4 +1,4 @@
-require('~/vue_common_component/commit');
+require('~/vue_shared/components/committ');
 
 describe('Commit component', () => {
   let props;
diff --git a/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js.es6 b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js.es6
new file mode 100644
index 00000000000..e83a1749e82
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/pipelines_table_row_spec.js.es6
@@ -0,0 +1,89 @@
+/* global pipeline */
+
+require('~vue_shared/components/pipelines_table_row');
+require('./mock_data');
+
+describe('Pipelines Table Row', () => {
+  let component;
+  preloadFixtures('static/environments/element.html.raw');
+
+  beforeEach(() => {
+    loadFixtures('static/environments/element.html.raw');
+
+    component = new gl.pipelines.PipelinesTableRowComponent({
+      el: document.querySelector('.test-dom-element'),
+      propsData: {
+        pipeline,
+        svgs: {},
+      },
+    });
+  });
+
+  it('should render a table row', () => {
+    expect(component.$el).toEqual('TR');
+  });
+
+  describe('status column', () => {
+    it('should render a pipeline link', () => {
+      expect(
+        component.$el.querySelector('td.commit-link a').getAttribute('href'),
+      ).toEqual(pipeline.path);
+    });
+
+    it('should render status text', () => {
+      expect(
+        component.$el.querySelector('td.commit-link a').textContent,
+      ).toContain(pipeline.details.status.text);
+    });
+  });
+
+  describe('information column', () => {
+    it('should render a pipeline link', () => {
+      expect(
+        component.$el.querySelector('td:nth-child(2) a').getAttribute('href'),
+      ).toEqual(pipeline.path);
+    });
+
+    it('should render pipeline ID', () => {
+      expect(
+        component.$el.querySelector('td:nth-child(2) a > span').textContent,
+      ).toEqual(`#${pipeline.id}`);
+    });
+
+    describe('when a user is provided', () => {
+      it('should render user information', () => {
+        expect(
+          component.$el.querySelector('td:nth-child(2) a:nth-child(3)').getAttribute('href'),
+        ).toEqual(pipeline.user.web_url);
+
+        expect(
+          component.$el.querySelector('td:nth-child(2) img').getAttribute('title'),
+        ).toEqual(pipeline.user.name);
+      });
+    });
+  });
+
+  describe('commit column', () => {
+    it('should render link to commit', () => {
+      expect(
+        component.$el.querySelector('td:nth-child(3) .commit-id').getAttribute('href'),
+      ).toEqual(pipeline.commit.commit_path);
+    });
+  });
+
+  describe('stages column', () => {
+    it('should render an icon for each stage', () => {
+      expect(
+        component.$el.querySelectorAll('td:nth-child(4) .js-builds-dropdown-button').length,
+      ).toEqual(pipeline.details.stages.length);
+    });
+  });
+
+  describe('actions column', () => {
+    it('should render the provided actions', () => {
+      expect(
+        component.$el.querySelectorAll('td:nth-child(6) ul li').length,
+      ).toEqual(pipeline.details.manual_actions.length);
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/pipelines_table_spec.js.es6 b/spec/javascripts/vue_shared/components/pipelines_table_spec.js.es6
new file mode 100644
index 00000000000..adc9ea904cc
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/pipelines_table_spec.js.es6
@@ -0,0 +1,66 @@
+/* global pipeline */
+
+require('~vue_shared/components/pipelines_table');
+require('~lib/utils/datetime_utility');
+require('./mock_data');
+
+describe('Pipelines Table', () => {
+  preloadFixtures('static/environments/element.html.raw');
+
+  beforeEach(() => {
+    loadFixtures('static/environments/element.html.raw');
+  });
+
+  describe('table', () => {
+    let component;
+    beforeEach(() => {
+      component = new gl.pipelines.PipelinesTableComponent({
+        el: document.querySelector('.test-dom-element'),
+        propsData: {
+          pipelines: [],
+          svgs: {},
+        },
+      });
+    });
+
+    it('should render a table', () => {
+      expect(component.$el).toEqual('TABLE');
+    });
+
+    it('should render table head with correct columns', () => {
+      expect(component.$el.querySelector('th.js-pipeline-status').textContent).toEqual('Status');
+      expect(component.$el.querySelector('th.js-pipeline-info').textContent).toEqual('Pipeline');
+      expect(component.$el.querySelector('th.js-pipeline-commit').textContent).toEqual('Commit');
+      expect(component.$el.querySelector('th.js-pipeline-stages').textContent).toEqual('Stages');
+      expect(component.$el.querySelector('th.js-pipeline-date').textContent).toEqual('');
+      expect(component.$el.querySelector('th.js-pipeline-actions').textContent).toEqual('');
+    });
+  });
+
+  describe('without data', () => {
+    it('should render an empty table', () => {
+      const component = new gl.pipelines.PipelinesTableComponent({
+        el: document.querySelector('.test-dom-element'),
+        propsData: {
+          pipelines: [],
+          svgs: {},
+        },
+      });
+      expect(component.$el.querySelectorAll('tbody tr').length).toEqual(0);
+    });
+  });
+
+  describe('with data', () => {
+    it('should render rows', () => {
+      const component = new gl.pipelines.PipelinesTableComponent({
+        el: document.querySelector('.test-dom-element'),
+        propsData: {
+          pipelines: [pipeline],
+          svgs: {},
+        },
+      });
+
+      expect(component.$el.querySelectorAll('tbody tr').length).toEqual(1);
+    });
+  });
+});
diff --git a/spec/javascripts/vue_pagination/pagination_spec.js.es6 b/spec/javascripts/vue_shared/components/table_pagination_spec.js.es6
index 8935c474ee5..e84f0dcfe67 100644
--- a/spec/javascripts/vue_pagination/pagination_spec.js.es6
+++ b/spec/javascripts/vue_shared/components/table_pagination_spec.js.es6
@@ -1,5 +1,5 @@
 require('~/lib/utils/common_utils');
-require('~/vue_pagination/index');
+require('~/vue_shared/components/table_pagination');
 
 describe('Pagination component', () => {
   let component;