Wait for auto-devops CI jobs on the job page

These tests used to wait on the pipeline page which made debugging job
failures difficult

app/assets/javascripts/jobs/components/stages_dropdown.vue

@@ -39,7 +39,9 @@ export default {
     <ci-icon :status="pipeline.details.status" class="vertical-align-middle" />
 
     <span class="font-weight-bold">{{ __('Pipeline') }}</span>
-    <a :href="pipeline.path" class="js-pipeline-path link-commit">#{{ pipeline.id }}</a>
+    <a :href="pipeline.path" class="js-pipeline-path link-commit qa-pipeline-path"
+      >#{{ pipeline.id }}</a
+    >
     <template v-if="hasRef">
       {{ __('from') }}
       <a :href="pipeline.ref.path" class="link-commit ref-name">{{ pipeline.ref.name }}</a>

app/assets/javascripts/pipelines/components/graph/job_item.vue

@@ -108,7 +108,7 @@ export default {
       :href="status.details_path"
       :title="tooltipText"
       :class="cssClassJobName"
-      class="js-pipeline-graph-job-link"
+      class="js-pipeline-graph-job-link qa-job-link"
     >
       <job-name-component :name="job.name" :status="job.status" />
     </gl-link>

qa/qa/page/project/job/show.rb

@@ -16,11 +16,19 @@ module QA::Page
         element :status_badge
       end
 
+      view 'app/assets/javascripts/jobs/components/stages_dropdown.vue' do
+        element :pipeline_path
+      end
+
       def completed?
         COMPLETED_STATUSES.include?(status_badge)
       end
 
-      def passed?
+      def successful?(timeout: 60)
+        wait(reload: false, max: timeout) do
+          completed? && !trace_loading?
+        end
+
         status_badge == PASSED_STATUS
       end
 

qa/qa/page/project/pipeline/show.rb

@@ -11,7 +11,7 @@ module QA::Page
 
       view 'app/assets/javascripts/pipelines/components/graph/job_item.vue' do
         element :job_component, /class.*ci-job-component.*/ # rubocop:disable QA/ElementWithPattern
-        element :job_link, /class.*js-pipeline-graph-job-link.*/ # rubocop:disable QA/ElementWithPattern
+        element :job_link
       end
 
       view 'app/assets/javascripts/vue_shared/components/ci_icon.vue' do
@@ -32,6 +32,10 @@ module QA::Page
         end
       end
 
+      def go_to_job(job_name)
+        find_element(:job_link, job_name).click
+      end
+
       def go_to_first_job
         css = '.js-pipeline-graph-job-link'
 

qa/qa/specs/features/browser_ui/6_release/deploy_key/clone_using_deploy_key_spec.rb

@@ -95,11 +95,7 @@ module QA
           Page::Project::Pipeline::Show.act { go_to_first_job }
 
           Page::Project::Job::Show.perform do |job|
-            job.wait(reload: false) do
-              job.completed? && !job.trace_loading?
-            end
-
-            expect(job.passed?).to be_truthy, "Job status did not become \"passed\"."
+            expect(job).to be_successful, "Job status did not become \"passed\"."
             expect(job.output).to include(sha1sum)
           end
         end

qa/qa/specs/features/browser_ui/7_configure/auto_devops/create_project_with_auto_devops_spec.rb

@@ -75,9 +75,30 @@ module QA
             Page::Project::Pipeline::Index.act { go_to_latest_pipeline }
 
             Page::Project::Pipeline::Show.perform do |pipeline|
-              expect(pipeline).to have_build('build', status: :success, wait: 600)
-              expect(pipeline).to have_build('test', status: :success, wait: 600)
-              expect(pipeline).to have_build('production', status: :success, wait: 1200)
+              pipeline.go_to_job('build')
+            end
+            Page::Project::Job::Show.perform do |job|
+              expect(job).to be_sucessful(timeout: 600), "Job did not pass"
+
+              job.click_element(:pipeline_path)
+            end
+
+            Page::Project::Pipeline::Show.perform do |pipeline|
+              pipeline.go_to_job('test')
+            end
+            Page::Project::Job::Show.perform do |job|
+              expect(job).to be_sucessful(timeout: 600), "Job did not pass"
+
+              job.click_element(:pipeline_path)
+            end
+
+            Page::Project::Pipeline::Show.perform do |pipeline|
+              pipeline.go_to_job('production')
+            end
+            Page::Project::Job::Show.perform do |job|
+              expect(job).to be_sucessful(timeout: 1200), "Job did not pass"
+
+              job.click_element(:pipeline_path)
             end
 
             Page::Project::Menu.act { click_operations_environments }
@@ -115,9 +136,30 @@ module QA
             Page::Project::Pipeline::Index.act { go_to_latest_pipeline }
 
             Page::Project::Pipeline::Show.perform do |pipeline|
-              expect(pipeline).to have_build('build', status: :success, wait: 600)
-              expect(pipeline).to have_build('test', status: :success, wait: 600)
-              expect(pipeline).to have_build('production', status: :success, wait: 1200)
+              pipeline.go_to_job('build')
+            end
+            Page::Project::Job::Show.perform do |job|
+              expect(job).to be_sucessful(timeout: 600), "Job did not pass"
+
+              job.click_element(:pipeline_path)
+            end
+
+            Page::Project::Pipeline::Show.perform do |pipeline|
+              pipeline.go_to_job('test')
+            end
+            Page::Project::Job::Show.perform do |job|
+              expect(job).to be_sucessful(timeout: 600), "Job did not pass"
+
+              job.click_element(:pipeline_path)
+            end
+
+            Page::Project::Pipeline::Show.perform do |pipeline|
+              pipeline.go_to_job('production')
+            end
+            Page::Project::Job::Show.perform do |job|
+              expect(job).to be_sucessful(timeout: 1200), "Job did not pass"
+
+              job.click_element(:pipeline_path)
             end
 
             Page::Project::Menu.act { click_operations_environments }