Add feature specs for jobs tab vue

Add feature specs for jobs tab vue
feature flag turned on.

app/assets/javascripts/pipelines/components/jobs/jobs_app.vue

@@ -112,7 +112,7 @@ export default {
       </gl-skeleton-loader>
     </div>
 
-    <jobs-table v-else :jobs="jobs" :table-fields="$options.fields" />
+    <jobs-table v-else :jobs="jobs" :table-fields="$options.fields" data-testid="jobs-tab-table" />
 
     <gl-intersection-observer v-if="jobsPageInfo.hasNextPage" @appear="fetchMoreJobs">
       <gl-loading-icon v-if="$apollo.loading" size="md" />

spec/features/commits_spec.rb

@@ -30,10 +30,10 @@ RSpec.describe 'Commits' do
         project.add_reporter(user)
       end
 
-      describe 'Commit builds with jobs_tab_feature flag off' do
+      describe 'Commit builds with jobs_tab_vue feature flag off' do
         before do
           stub_feature_flags(jobs_tab_vue: false)
-          visit pipeline_path(pipeline)
+          visit builds_project_pipeline_path(project, pipeline)
         end
 
         it { expect(page).to have_content pipeline.sha[0..7] }
@@ -45,6 +45,23 @@ RSpec.describe 'Commits' do
           end
         end
       end
+
+      describe 'Commit builds with jobs_tab_vue feature flag on', :js do
+        before do
+          visit builds_project_pipeline_path(project, pipeline)
+
+          wait_for_requests
+        end
+
+        it { expect(page).to have_content pipeline.sha[0..7] }
+
+        it 'contains generic commit status build' do
+          page.within('[data-testid="jobs-tab-table"]') do
+            expect(page).to have_content "##{status.id}" # build id
+            expect(page).to have_content 'generic'       # build name
+          end
+        end
+      end
     end
 
     context 'commit status is Ci Build' do
@@ -103,6 +120,18 @@ RSpec.describe 'Commits' do
           end
         end
 
+        context 'Download artifacts with jobs_tab_vue feature flag on', :js do
+          before do
+            create(:ci_job_artifact, :archive, file: artifacts_file, job: build)
+          end
+
+          it do
+            visit builds_project_pipeline_path(project, pipeline)
+            wait_for_requests
+            expect(page).to have_link('Download artifacts', href: download_project_job_artifacts_path(project, build, file_type: :archive))
+          end
+        end
+
         describe 'Cancel all builds' do
           it 'cancels commit', :js, :sidekiq_might_not_need_inline do
             visit pipeline_path(pipeline)
@@ -141,6 +170,27 @@ RSpec.describe 'Commits' do
         end
       end
 
+      context "when logged as reporter and with jobs_tab_vue feature flag on", :js do
+        before do
+          project.add_reporter(user)
+          create(:ci_job_artifact, :archive, file: artifacts_file, job: build)
+          visit builds_project_pipeline_path(project, pipeline)
+          wait_for_requests
+        end
+
+        it 'renders header' do
+          expect(page).to have_content pipeline.sha[0..7]
+          expect(page).to have_content pipeline.git_commit_message.gsub!(/\s+/, ' ')
+          expect(page).to have_content pipeline.user.name
+          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', :js, quarantine: 'https://gitlab.com/gitlab-org/gitlab/-/issues/299575' do
         before do
           project.update!(

spec/features/projects/pipelines/pipeline_spec.rb

@@ -1020,6 +1020,103 @@ RSpec.describe 'Pipeline', :js do
     end
   end
 
+  describe 'GET /:project/-/pipelines/:id/builds with jobs_tab_vue feature flag turned on' do
+    include_context 'pipeline builds'
+
+    let_it_be(:project) { create(:project, :repository) }
+
+    let(:pipeline) { create(:ci_pipeline, project: project, ref: 'master', sha: project.commit.id) }
+
+    before do
+      visit builds_project_pipeline_path(project, pipeline)
+    end
+
+    it 'shows a list of jobs' do
+      expect(page).to have_content('Test')
+      expect(page).to have_content(build_passed.id)
+      expect(page).to have_content('Deploy')
+      expect(page).to have_content(build_failed.id)
+      expect(page).to have_content(build_running.id)
+      expect(page).to have_content(build_external.id)
+      expect(page).to have_content('Retry')
+      expect(page).to have_content('Cancel running')
+      expect(page).to have_button('Play')
+    end
+
+    it 'shows jobs tab pane as active' do
+      expect(page).to have_css('#js-tab-builds.active')
+    end
+
+    context 'page tabs' do
+      it 'shows Pipeline, Jobs and DAG tabs with link' do
+        expect(page).to have_link('Pipeline')
+        expect(page).to have_link('Jobs')
+        expect(page).to have_link('Needs')
+      end
+
+      it 'shows counter in Jobs tab' do
+        expect(page.find('.js-builds-counter').text).to eq(pipeline.total_size.to_s)
+      end
+
+      it 'shows Jobs tab as active' do
+        expect(page).to have_css('li.js-builds-tab-link .active')
+      end
+    end
+
+    context 'retrying jobs' do
+      it { expect(page).not_to have_content('retried') }
+
+      context 'when retrying' do
+        before do
+          find('[data-testid="retry"]', match: :first).click
+        end
+
+        it 'does not show a "Retry" button', :sidekiq_might_not_need_inline do
+          expect(page).not_to have_content('Retry')
+        end
+      end
+    end
+
+    context 'canceling jobs' do
+      it { expect(page).not_to have_selector('.ci-canceled') }
+
+      context 'when canceling' do
+        before do
+          click_on 'Cancel running'
+        end
+
+        it 'does not show a "Cancel running" button', :sidekiq_might_not_need_inline do
+          expect(page).not_to have_content('Cancel running')
+        end
+      end
+    end
+
+    context 'playing manual job' do
+      before do
+        within '[data-testid="jobs-tab-table"]' do
+          click_button('Play')
+
+          wait_for_requests
+        end
+      end
+
+      it { expect(build_manual.reload).to be_pending }
+    end
+
+    context 'when user unschedules a delayed job' do
+      before do
+        within '[data-testid="jobs-tab-table"]' do
+          click_button('Unschedule')
+        end
+      end
+
+      it 'unschedules the delayed job and shows play button as a manual job' do
+        expect(page).to have_button('Play')
+        expect(page).not_to have_button('Unschedule')
+      end
+    end
+  end
+
   describe 'GET /:project/-/pipelines/:id/failures' do
     let(:pipeline) { create(:ci_pipeline, project: project, ref: 'master', sha: '1234') }
     let(:pipeline_failures_page) { failures_project_pipeline_path(project, pipeline) }