Adds .matches polyfill

Moves matches poly to the correct file
Divides pipelines index and show tests in order to be able to test with JS

3 files changed, 193 insertions, 158 deletions

diff --git a/app/assets/javascripts/extensions/element.js.es6 b/app/assets/javascripts/extensions/element.js.es6
index 6d9b0c4bc3e..0abe8644f30 100644
--- a/app/assets/javascripts/extensions/element.js.es6
+++ b/app/assets/javascripts/extensions/element.js.es6
@@ -1,9 +1,30 @@
 /* global Element */
 /* eslint-disable consistent-return, max-len */
 
-Element.prototype.matches = Element.prototype.matches || Element.prototype.msMatchesSelector;
-
 Element.prototype.closest = Element.prototype.closest || function closest(selector, selectedElement = this) {
   if (!selectedElement) return;
   return selectedElement.matches(selector) ? selectedElement : Element.prototype.closest(selector, selectedElement.parentElement);
 };
+
+/* eslint-disable */
+/**
+ * .matches polyfill from mdn
+ * https://developer.mozilla.org/en-US/docs/Web/API/Element/matches
+ *
+ * .matches is used in our code.
+ * In order to run the tests in Phantomjs we need this polyfill
+ */
+if (!Element.prototype.matches) {
+  Element.prototype.matches =
+      Element.prototype.matchesSelector ||
+      Element.prototype.mozMatchesSelector ||
+      Element.prototype.msMatchesSelector ||
+      Element.prototype.oMatchesSelector ||
+      Element.prototype.webkitMatchesSelector ||
+      function (s) {
+        var matches = (this.document || this.ownerDocument).querySelectorAll(s),
+          i = matches.length;
+        while (--i >= 0 && matches.item(i) !== this) {}
+        return i > -1;
+      };
+}
diff --git a/spec/features/projects/pipelines/pipeline_spec.rb b/spec/features/projects/pipelines/pipeline_spec.rb
new file mode 100644
index 00000000000..201caf3bbd3
--- /dev/null
+++ b/spec/features/projects/pipelines/pipeline_spec.rb
@@ -0,0 +1,170 @@
+require 'spec_helper'
+
+describe "Pipelines", feature: true, js: true do
+  include GitlabRoutingHelper
+
+  let(:project) { create(:empty_project) }
+  let(:user) { create(:user) }
+
+  before do
+    login_as(user)
+    project.team << [user, :developer]
+  end
+
+  describe 'GET /:project/pipelines/:id' do
+    let(:project) { create(:project) }
+    let(:pipeline) { create(:ci_pipeline, project: project, ref: 'master', sha: project.commit.id) }
+
+    before do
+      @success = create(:ci_build, :success, pipeline: pipeline, stage: 'build', name: 'build')
+      @failed = create(:ci_build, :failed, pipeline: pipeline, stage: 'test', name: 'test', commands: 'test')
+      @running = create(:ci_build, :running, pipeline: pipeline, stage: 'deploy', name: 'deploy')
+      @manual = create(:ci_build, :manual, pipeline: pipeline, stage: 'deploy', name: 'manual build')
+      @external = create(:generic_commit_status, status: 'success', pipeline: pipeline, name: 'jenkins', stage: 'external')
+    end
+
+    before { visit namespace_project_pipeline_path(project.namespace, project, pipeline) }
+
+    it 'shows a list of builds' do
+      expect(page).to have_content('Test')
+      expect(page).to have_content(@success.id)
+      expect(page).to have_content('Deploy')
+      expect(page).to have_content(@failed.id)
+      expect(page).to have_content(@running.id)
+      expect(page).to have_content(@external.id)
+      expect(page).to have_content('Retry failed')
+      expect(page).to have_content('Cancel running')
+      expect(page).to have_link('Play')
+    end
+
+    it 'shows Pipeline tab pane as active' do
+      expect(page).to have_css('#js-tab-pipeline.active')
+    end
+
+    context 'page 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
+
+      it 'shows Pipeline tab as active' do
+        expect(page).to have_css('.js-pipeline-tab-link.active')
+      end
+    end
+
+    context 'retrying builds' do
+      it { expect(page).not_to have_content('retried') }
+
+      context 'when retrying' do
+        before { click_on 'Retry failed' }
+
+        it { expect(page).not_to have_content('Retry failed') }
+        it { expect(page).to have_selector('.retried') }
+      end
+    end
+
+    context 'canceling builds' do
+      it { expect(page).not_to have_selector('.ci-canceled') }
+
+      context 'when canceling' 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
+
+    context 'playing manual build' do
+      before do
+        within '.pipeline-holder' do
+          click_link('Play')
+        end
+      end
+
+      it { expect(@manual.reload).to be_pending }
+    end
+  end
+
+  describe 'GET /:project/pipelines/:id/builds' do
+    let(:project) { create(:project) }
+    let(:pipeline) { create(:ci_pipeline, project: project, ref: 'master', sha: project.commit.id) }
+
+    before do
+      @success = create(:ci_build, :success, pipeline: pipeline, stage: 'build', name: 'build')
+      @failed = create(:ci_build, :failed, pipeline: pipeline, stage: 'test', name: 'test', commands: 'test')
+      @running = create(:ci_build, :running, pipeline: pipeline, stage: 'deploy', name: 'deploy')
+      @manual = create(:ci_build, :manual, pipeline: pipeline, stage: 'deploy', name: 'manual build')
+      @external = create(:generic_commit_status, status: 'success', pipeline: pipeline, name: 'jenkins', stage: 'external')
+    end
+
+    before { visit builds_namespace_project_pipeline_path(project.namespace, project, pipeline)}
+
+    it 'shows a list of builds' do
+      expect(page).to have_content('Test')
+      expect(page).to have_content(@success.id)
+      expect(page).to have_content('Deploy')
+      expect(page).to have_content(@failed.id)
+      expect(page).to have_content(@running.id)
+      expect(page).to have_content(@external.id)
+      expect(page).to have_content('Retry failed')
+      expect(page).to have_content('Cancel running')
+      expect(page).to have_link('Play')
+    end
+
+    it 'shows Builds tab pane as active' do
+      expect(page).to have_css('#js-tab-builds.active')
+    end
+
+    context 'page 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
+
+      it 'shows Builds tab as active' do
+        expect(page).to have_css('li.js-builds-tab-link.active')
+      end
+    end
+
+    context 'retrying builds' do
+      it { expect(page).not_to have_content('retried') }
+
+      context 'when retrying' do
+        before { click_on 'Retry failed' }
+
+        it { expect(page).not_to have_content('Retry failed') }
+        it { expect(page).to have_selector('.retried') }
+      end
+    end
+
+    context 'canceling builds' do
+      it { expect(page).not_to have_selector('.ci-canceled') }
+
+      context 'when canceling' 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
+
+    context 'playing manual build' do
+      before do
+        within '.pipeline-holder' do
+          click_link('Play')
+        end
+      end
+
+      it { expect(@manual.reload).to be_pending }
+    end
+  end
+
+end
diff --git a/spec/features/projects/pipelines_spec.rb b/spec/features/projects/pipelines/pipelines_spec.rb
index 0f4f46d59b5..f3731698a18 100644
--- a/spec/features/projects/pipelines_spec.rb
+++ b/spec/features/projects/pipelines/pipelines_spec.rb
@@ -152,162 +152,6 @@ describe "Pipelines" do
     end
   end
 
-  describe 'GET /:project/pipelines/:id' do
-    let(:project) { create(:project) }
-    let(:pipeline) { create(:ci_pipeline, project: project, ref: 'master', sha: project.commit.id) }
-
-    before do
-      @success = create(:ci_build, :success, pipeline: pipeline, stage: 'build', name: 'build')
-      @failed = create(:ci_build, :failed, pipeline: pipeline, stage: 'test', name: 'test', commands: 'test')
-      @running = create(:ci_build, :running, pipeline: pipeline, stage: 'deploy', name: 'deploy')
-      @manual = create(:ci_build, :manual, pipeline: pipeline, stage: 'deploy', name: 'manual build')
-      @external = create(:generic_commit_status, status: 'success', pipeline: pipeline, name: 'jenkins', stage: 'external')
-    end
-
-    before { visit namespace_project_pipeline_path(project.namespace, project, pipeline) }
-
-    it 'shows a list of builds' do
-      expect(page).to have_content('Test')
-      expect(page).to have_content(@success.id)
-      expect(page).to have_content('Deploy')
-      expect(page).to have_content(@failed.id)
-      expect(page).to have_content(@running.id)
-      expect(page).to have_content(@external.id)
-      expect(page).to have_content('Retry failed')
-      expect(page).to have_content('Cancel running')
-      expect(page).to have_link('Play')
-    end
-
-    it 'shows Pipeline tab pane as active' do
-      expect(page).to have_css('#js-tab-pipeline.active')
-    end
-
-    context 'page 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
-
-      it 'shows Pipeline tab as active' do
-        expect(page).to have_css('li.js-pipeline-tab-link.active')
-      end
-    end
-
-    context 'retrying builds' do
-      it { expect(page).not_to have_content('retried') }
-
-      context 'when retrying' do
-        before { click_on 'Retry failed' }
-
-        it { expect(page).not_to have_content('Retry failed') }
-        it { expect(page).to have_selector('.retried') }
-      end
-    end
-
-    context 'canceling builds' do
-      it { expect(page).not_to have_selector('.ci-canceled') }
-
-      context 'when canceling' 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
-
-    context 'playing manual build' do
-      before do
-        within '.pipeline-holder' do
-          click_link('Play')
-        end
-      end
-
-      it { expect(@manual.reload).to be_pending }
-    end
-  end
-
-  describe 'GET /:project/pipelines/:id/builds' do
-    let(:project) { create(:project) }
-    let(:pipeline) { create(:ci_pipeline, project: project, ref: 'master', sha: project.commit.id) }
-
-    before do
-      @success = create(:ci_build, :success, pipeline: pipeline, stage: 'build', name: 'build')
-      @failed = create(:ci_build, :failed, pipeline: pipeline, stage: 'test', name: 'test', commands: 'test')
-      @running = create(:ci_build, :running, pipeline: pipeline, stage: 'deploy', name: 'deploy')
-      @manual = create(:ci_build, :manual, pipeline: pipeline, stage: 'deploy', name: 'manual build')
-      @external = create(:generic_commit_status, status: 'success', pipeline: pipeline, name: 'jenkins', stage: 'external')
-    end
-
-    before { visit builds_namespace_project_pipeline_path(project.namespace, project, pipeline)}
-
-    it 'shows a list of builds' do
-      expect(page).to have_content('Test')
-      expect(page).to have_content(@success.id)
-      expect(page).to have_content('Deploy')
-      expect(page).to have_content(@failed.id)
-      expect(page).to have_content(@running.id)
-      expect(page).to have_content(@external.id)
-      expect(page).to have_content('Retry failed')
-      expect(page).to have_content('Cancel running')
-      expect(page).to have_link('Play')
-    end
-
-    it 'shows Builds tab pane as active' do
-      expect(page).to have_css('#js-tab-builds.active')
-    end
-
-    context 'page 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
-
-      it 'shows Builds tab as active' do
-        expect(page).to have_css('li.js-builds-tab-link.active')
-      end
-    end
-
-    context 'retrying builds' do
-      it { expect(page).not_to have_content('retried') }
-
-      context 'when retrying' do
-        before { click_on 'Retry failed' }
-
-        it { expect(page).not_to have_content('Retry failed') }
-        it { expect(page).to have_selector('.retried') }
-      end
-    end
-
-    context 'canceling builds' do
-      it { expect(page).not_to have_selector('.ci-canceled') }
-
-      context 'when canceling' 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
-
-    context 'playing manual build' do
-      before do
-        within '.pipeline-holder' do
-          click_link('Play')
-        end
-      end
-
-      it { expect(@manual.reload).to be_pending }
-    end
-  end
-
   describe 'POST /:project/pipelines' do
     let(:project) { create(:project) }