Fix tests

app/assets/javascripts/pipelines.js.es6

@@ -15,7 +15,9 @@
 
     addMarginToBuildColumns() {
       this.pipelineGraph = document.querySelector('.js-pipeline-graph');
-      const secondChildBuildNodes = document.querySelector('.js-pipeline-graph').querySelectorAll('.build:nth-child(2)');
+
+      const secondChildBuildNodes = this.pipelineGraph.querySelectorAll('.build:nth-child(2)');
+
       for (const buildNodeIndex in secondChildBuildNodes) {
         const buildNode = secondChildBuildNodes[buildNodeIndex];
         const firstChildBuildNode = buildNode.previousElementSibling;
@@ -28,6 +30,7 @@
         const columnBuilds = previousColumn.querySelectorAll('.build');
         if (columnBuilds.length === 1) previousColumn.classList.add('no-margin');
       }
+
       this.pipelineGraph.classList.remove('hidden');
     }
   }

app/views/projects/ci/builds/_build_pipeline.html.haml

 - is_playable = subject.playable? && can?(current_user, :update_build, @project)
 - if is_playable
-  = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, data: { toggle: 'tooltip', title: "#{subject.name} - play", container: '.pipeline-graph', placement: 'bottom' } do
+  = link_to play_namespace_project_build_path(subject.project.namespace, subject.project, subject, return_to: request.original_url), method: :post, data: { toggle: 'tooltip', title: "#{subject.name} - play", container: '.js-pipeline-graph', placement: 'bottom' } do
     = ci_icon_for_status('play')
     .ci-status-text= subject.name
 - elsif can?(current_user, :read_build, @project)
-  = link_to namespace_project_build_path(subject.project.namespace, subject.project, subject), data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.pipeline-graph', placement: 'bottom' } do
+  = link_to namespace_project_build_path(subject.project.namespace, subject.project, subject), data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.js-pipeline-graph', placement: 'bottom' } do
     %span{class: "ci-status-icon ci-status-icon-#{subject.status}"}
       = ci_icon_for_status(subject.status)
     .ci-status-text= subject.name

app/views/projects/generic_commit_statuses/_generic_commit_status_pipeline.html.haml

-%a{ data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.pipeline-graph', placement: 'bottom' } }
+%a{ data: { toggle: 'tooltip', title: "#{subject.name} - #{subject.status}", container: '.js-pipeline-graph', placement: 'bottom' } }
   - if subject.target_url
     = link_to subject.target_url do
       %span{class: "ci-status-icon ci-status-icon-#{subject.status}"}

app/views/projects/pipelines/_with_tabs.html.haml

@@ -12,7 +12,7 @@
 
 .tab-content
   #js-tab-pipeline.tab-pane
-    .build-content.middle-block
+    .build-content.middle-block.js-pipeline-graph
       = render "projects/pipelines/graph", pipeline: pipeline
 
   #js-tab-builds.tab-pane

spec/javascripts/fixtures/pipeline_graph.html.haml

-%div.pipeline-visualization.pipeline-graph
+%div.pipeline-visualization.js-pipeline-graph
   %ul.stage-column-list
     %li.stage-column
       .stage-name

spec/views/projects/pipelines/show.html.haml_spec.rb

@@ -28,7 +28,7 @@ describe 'projects/pipelines/show' do
   it 'shows a graph with grouped stages' do
     render
 
-    expect(rendered).to have_css('.pipeline-graph')
+    expect(rendered).to have_css('.js-pipeline-graph')
     expect(rendered).to have_css('.grouped-pipeline-dropdown')
 
     # stages