Use Vue component for job artifacts, Commit and Trigger Variables

6 files changed, 119 insertions, 121 deletions

diff --git a/spec/features/projects/artifacts/user_downloads_artifacts_spec.rb b/spec/features/projects/artifacts/user_downloads_artifacts_spec.rb
index 67ed2f18d76..554f0b49052 100644
--- a/spec/features/projects/artifacts/user_downloads_artifacts_spec.rb
+++ b/spec/features/projects/artifacts/user_downloads_artifacts_spec.rb
@@ -20,23 +20,13 @@ describe "User downloads artifacts" do
     end
 
     context "via job id" do
-      set(:url) { download_project_job_artifacts_path(project, job) }
+      let(:url) { download_project_job_artifacts_path(project, job) }
 
       it_behaves_like "downloading"
     end
 
     context "via branch name and job name" do
-      set(:url) { latest_succeeded_project_artifacts_path(project, "#{pipeline.ref}/download", job: job.name) }
-
-      it_behaves_like "downloading"
-    end
-
-    context "via clicking the `Download` button" do
-      set(:url) { project_job_path(project, job) }
-
-      before do
-        click_link("Download")
-      end
+      let(:url) { latest_succeeded_project_artifacts_path(project, "#{pipeline.ref}/download", job: job.name) }
 
       it_behaves_like "downloading"
     end
diff --git a/spec/features/projects/jobs_spec.rb b/spec/features/projects/jobs_spec.rb
index 83293c0ca7d..d0bf4975b81 100644
--- a/spec/features/projects/jobs_spec.rb
+++ b/spec/features/projects/jobs_spec.rb
@@ -5,7 +5,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
   let(:user) { create(:user) }
   let(:user_access_level) { :developer }
   let(:project) { create(:project, :repository) }
-  let(:pipeline) { create(:ci_pipeline, project: project) }
+  let(:pipeline) { create(:ci_pipeline, project: project, sha: project.commit('HEAD').sha) }
 
   let(:job) { create(:ci_build, :trace_live, pipeline: pipeline) }
   let(:job2) { create(:ci_build) }
@@ -20,7 +20,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
   end
 
   describe "GET /:project/jobs" do
-    let!(:job) { create(:ci_build,  pipeline: pipeline) }
+    let!(:job) { create(:ci_build, pipeline: pipeline) }
 
     context "Pending scope" do
       before do
@@ -115,22 +115,28 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
     context "Job from project" do
       let(:job) { create(:ci_build, :success, :trace_live, pipeline: pipeline) }
 
-      before do
+      it 'shows status name', :js do
         visit project_job_path(project, job)
-      end
 
-      it 'shows status name', :js do
+        wait_for_requests
+
         expect(page).to have_css('.ci-status.ci-success', text: 'passed')
       end
 
-      it 'shows commit`s data' do
-        expect(page.status_code).to eq(200)
+      it 'shows commit`s data', :js do
+        requests = inspect_requests() do
+          visit project_job_path(project, job)
+        end
+
+        wait_for_requests
+        expect(requests.first.status_code).to eq(200)
         expect(page).to have_content pipeline.sha[0..7]
-        expect(page).to have_content pipeline.git_commit_message
-        expect(page).to have_content pipeline.git_author_name
+        expect(page).to have_content pipeline.commit.title
       end
 
       it 'shows active job' do
+        visit project_job_path(project, job)
+
         expect(page).to have_selector('.build-job.active')
       end
     end
@@ -199,7 +205,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
       it { expect(page.status_code).to eq(404) }
     end
 
-    context "Download artifacts" do
+    context "Download artifacts", :js do
       before do
         job.update(legacy_artifacts_file: artifacts_file)
         visit project_job_path(project, job)
@@ -208,9 +214,22 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
       it 'has button to download artifacts' do
         expect(page).to have_content 'Download'
       end
+
+      it 'downloads the zip file when user clicks the download button' do
+        requests = inspect_requests() do
+          click_link 'Download'
+        end
+
+        artifact_request = requests.find { |req| req.url.match(%r{artifacts/download}) }
+
+        expect(artifact_request.response_headers["Content-Disposition"]).to eq(%Q{attachment; filename="#{job.artifacts_file.filename}"})
+        expect(artifact_request.response_headers['Content-Transfer-Encoding']).to eq("binary")
+        expect(artifact_request.response_headers['Content-Type']).to eq("image/gif")
+        expect(artifact_request.body).to eq(job.artifacts_file.file.read.b)
+      end
     end
 
-    context 'Artifacts expire date' do
+    context 'Artifacts expire date', :js do
       before do
         job.update(legacy_artifacts_file: artifacts_file,
                    artifacts_expire_at: expire_at)
@@ -231,12 +250,12 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
 
         context 'when user has ability to update job' do
           it 'keeps artifacts when keep button is clicked' do
-            expect(page).to have_content 'The artifacts will be removed'
+            expect(page).to have_content 'The artifacts will be removed in'
 
             click_link 'Keep'
 
             expect(page).to have_no_link 'Keep'
-            expect(page).to have_no_content 'The artifacts will be removed'
+            expect(page).to have_no_content 'The artifacts will be removed in'
           end
         end
 
@@ -314,6 +333,7 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
 
       shared_examples 'expected variables behavior' do
         it 'shows variable key and value after click', :js do
+          expect(page).to have_content('Token')
           expect(page).to have_css('.js-reveal-variables')
           expect(page).not_to have_css('.js-build-variable')
           expect(page).not_to have_css('.js-build-value')
@@ -542,20 +562,26 @@ describe 'Jobs', :clean_gitlab_redis_shared_state do
     end
   end
 
-  describe "GET /:project/jobs/:id/download" do
+  describe "GET /:project/jobs/:id/download", :js do
     before do
       job.update(legacy_artifacts_file: artifacts_file)
       visit project_job_path(project, job)
+
       click_link 'Download'
     end
 
     context "Build from other project" do
       before do
         job2.update(legacy_artifacts_file: artifacts_file)
-        visit download_project_job_artifacts_path(project, job2)
       end
 
-      it { expect(page.status_code).to eq(404) }
+      it do
+        requests = inspect_requests() do
+          visit download_project_job_artifacts_path(project, job2)
+        end
+
+        expect(requests.first.status_code).to eq(404)
+      end
     end
   end
 
diff --git a/spec/javascripts/jobs/components/artifacts_block_spec.js b/spec/javascripts/jobs/components/artifacts_block_spec.js
index a06d287b3fa..2fa7ff653fe 100644
--- a/spec/javascripts/jobs/components/artifacts_block_spec.js
+++ b/spec/javascripts/jobs/components/artifacts_block_spec.js
@@ -11,6 +11,19 @@ describe('Artifacts block', () => {
   const timeago = getTimeago();
   const formatedDate = timeago.format(expireAt);
 
+  const expiredArtifact = {
+    expire_at: expireAt,
+    expired: true,
+  };
+
+  const nonExpiredArtifact = {
+    download_path: '/gitlab-org/gitlab-ce/-/jobs/98314558/artifacts/download',
+    browse_path: '/gitlab-org/gitlab-ce/-/jobs/98314558/artifacts/browse',
+    keep_path: '/gitlab-org/gitlab-ce/-/jobs/98314558/artifacts/keep',
+    expire_at: expireAt,
+    expired: false,
+  };
+
   afterEach(() => {
     vm.$destroy();
   });
@@ -18,100 +31,87 @@ describe('Artifacts block', () => {
   describe('with expired artifacts', () => {
     it('renders expired artifact date and info', () => {
       vm = mountComponent(Component, {
-        haveArtifactsExpired: true,
-        willArtifactsExpire: false,
-        expireAt,
+        artifact: expiredArtifact,
       });
 
       expect(vm.$el.querySelector('.js-artifacts-removed')).not.toBeNull();
       expect(vm.$el.querySelector('.js-artifacts-will-be-removed')).toBeNull();
       expect(vm.$el.textContent).toContain(formatedDate);
+      expect(vm.$el.querySelector('.js-artifacts-removed').textContent.trim()).toEqual(
+        'The artifacts were removed',
+      );
     });
   });
 
   describe('with artifacts that will expire', () => {
     it('renders will expire artifact date and info', () => {
       vm = mountComponent(Component, {
-        haveArtifactsExpired: false,
-        willArtifactsExpire: true,
-        expireAt,
+        artifact: nonExpiredArtifact,
       });
 
       expect(vm.$el.querySelector('.js-artifacts-removed')).toBeNull();
       expect(vm.$el.querySelector('.js-artifacts-will-be-removed')).not.toBeNull();
       expect(vm.$el.textContent).toContain(formatedDate);
+      expect(vm.$el.querySelector('.js-artifacts-will-be-removed').textContent.trim()).toEqual(
+        'The artifacts will be removed in',
+      );
     });
   });
 
-  describe('when the user can keep the artifacts', () => {
+  describe('with keep path', () => {
     it('renders the keep button', () => {
       vm = mountComponent(Component, {
-        haveArtifactsExpired: true,
-        willArtifactsExpire: false,
-        expireAt,
-        keepArtifactsPath: '/keep',
+        artifact: nonExpiredArtifact,
       });
 
       expect(vm.$el.querySelector('.js-keep-artifacts')).not.toBeNull();
     });
   });
 
-  describe('when the user can not keep the artifacts', () => {
+  describe('without keep path', () => {
     it('does not render the keep button', () => {
       vm = mountComponent(Component, {
-        haveArtifactsExpired: true,
-        willArtifactsExpire: false,
-        expireAt,
+        artifact: expiredArtifact,
       });
 
       expect(vm.$el.querySelector('.js-keep-artifacts')).toBeNull();
     });
   });
 
-  describe('when the user can download the artifacts', () => {
+  describe('with download path', () => {
     it('renders the download button', () => {
       vm = mountComponent(Component, {
-        haveArtifactsExpired: true,
-        willArtifactsExpire: false,
-        expireAt,
-        downloadArtifactsPath: '/download',
+        artifact: nonExpiredArtifact,
       });
 
       expect(vm.$el.querySelector('.js-download-artifacts')).not.toBeNull();
     });
   });
 
-  describe('when the user can not download the artifacts', () => {
+  describe('without download path', () => {
     it('does not render the keep button', () => {
       vm = mountComponent(Component, {
-        haveArtifactsExpired: true,
-        willArtifactsExpire: false,
-        expireAt,
+        artifact: expiredArtifact,
       });
 
       expect(vm.$el.querySelector('.js-download-artifacts')).toBeNull();
     });
   });
 
-  describe('when the user can browse the artifacts', () => {
+  describe('with browse path', () => {
     it('does not render the browse button', () => {
       vm = mountComponent(Component, {
-        haveArtifactsExpired: true,
-        willArtifactsExpire: false,
-        expireAt,
-        browseArtifactsPath: '/browse',
+        artifact: nonExpiredArtifact,
       });
 
       expect(vm.$el.querySelector('.js-browse-artifacts')).not.toBeNull();
     });
   });
 
-  describe('when the user can not browse the artifacts', () => {
+  describe('without browse path', () => {
     it('does not render the browse button', () => {
       vm = mountComponent(Component, {
-        haveArtifactsExpired: true,
-        willArtifactsExpire: false,
-        expireAt,
+        artifact: expiredArtifact,
       });
 
       expect(vm.$el.querySelector('.js-browse-artifacts')).toBeNull();
diff --git a/spec/javascripts/jobs/components/commit_block_spec.js b/spec/javascripts/jobs/components/commit_block_spec.js
index e21fa9c2874..61ee993f46a 100644
--- a/spec/javascripts/jobs/components/commit_block_spec.js
+++ b/spec/javascripts/jobs/components/commit_block_spec.js
@@ -7,11 +7,16 @@ describe('Commit block', () => {
   let vm;
 
   const props = {
-    pipelineShortSha: '1f0fb84f',
-    pipelineShaPath: 'commit/1f0fb84fb6770d74d97eee58118fd3909cd4f48c',
-    mergeRequestReference: '!21244',
-    mergeRequestPath: 'merge_requests/21244',
-    gitCommitTitlte: 'Regenerate pot files',
+    commit: {
+      short_id: '1f0fb84f',
+      commit_path: 'commit/1f0fb84fb6770d74d97eee58118fd3909cd4f48c',
+      title: 'Update README.md',
+    },
+    mergeRequest: {
+      iid: '!21244',
+      path: 'merge_requests/21244',
+    },
+    isLastBlock: true,
   };
 
   afterEach(() => {
@@ -26,12 +31,18 @@ describe('Commit block', () => {
     });
 
     it('renders pipeline short sha link', () => {
-      expect(vm.$el.querySelector('.js-commit-sha').getAttribute('href')).toEqual(props.pipelineShaPath);
-      expect(vm.$el.querySelector('.js-commit-sha').textContent.trim()).toEqual(props.pipelineShortSha);
+      expect(vm.$el.querySelector('.js-commit-sha').getAttribute('href')).toEqual(
+        props.commit.commit_path,
+      );
+      expect(vm.$el.querySelector('.js-commit-sha').textContent.trim()).toEqual(
+        props.commit.short_id,
+      );
     });
 
     it('renders clipboard button', () => {
-      expect(vm.$el.querySelector('button').getAttribute('data-clipboard-text')).toEqual(props.pipelineShortSha);
+      expect(vm.$el.querySelector('button').getAttribute('data-clipboard-text')).toEqual(
+        props.commit.short_id,
+      );
     });
   });
 
@@ -41,17 +52,19 @@ describe('Commit block', () => {
         ...props,
       });
 
-      expect(vm.$el.querySelector('.js-link-commit').getAttribute('href')).toEqual(props.mergeRequestPath);
-      expect(vm.$el.querySelector('.js-link-commit').textContent.trim()).toEqual(props.mergeRequestReference);
-
+      expect(vm.$el.querySelector('.js-link-commit').getAttribute('href')).toEqual(
+        props.mergeRequest.path,
+      );
+      expect(vm.$el.querySelector('.js-link-commit').textContent.trim()).toEqual(
+        props.mergeRequest.iid,
+      );
     });
   });
 
   describe('without merge request', () => {
     it('does not render merge request', () => {
       const copyProps = Object.assign({}, props);
-      delete copyProps.mergeRequestPath;
-      delete copyProps.mergeRequestReference;
+      delete copyProps.mergeRequest;
 
       vm = mountComponent(Component, {
         ...copyProps,
@@ -67,7 +80,7 @@ describe('Commit block', () => {
         ...props,
       });
 
-      expect(vm.$el.textContent).toContain(props.gitCommitTitlte);
+      expect(vm.$el.textContent).toContain(props.commit.title);
     });
   });
 });
diff --git a/spec/javascripts/jobs/components/trigger_value_spec.js b/spec/javascripts/jobs/components/trigger_block_spec.js
index 3d41a3cfac1..e1b9898393e 100644
--- a/spec/javascripts/jobs/components/trigger_value_spec.js
+++ b/spec/javascripts/jobs/components/trigger_block_spec.js
@@ -13,7 +13,9 @@ describe('Trigger block', () => {
   describe('with short token', () => {
     it('renders short token', () => {
       vm = mountComponent(Component, {
-        shortToken: '0a666b2',
+        trigger: {
+          short_token: '0a666b2',
+        },
       });
 
       expect(vm.$el.querySelector('.js-short-token').textContent).toContain('0a666b2');
@@ -22,7 +24,7 @@ describe('Trigger block', () => {
 
   describe('without short token', () => {
     it('does not render short token', () => {
-      vm = mountComponent(Component, {});
+      vm = mountComponent(Component, { trigger: {} });
 
       expect(vm.$el.querySelector('.js-short-token')).toBeNull();
     });
@@ -32,9 +34,12 @@ describe('Trigger block', () => {
     describe('reveal variables', () => {
       it('reveals variables on click', done => {
         vm = mountComponent(Component, {
-          variables: {
-            key: 'value',
-            variable: 'foo',
+          trigger: {
+            short_token: 'bd7e',
+            variables: [
+              { key: 'UPLOAD_TO_GCS', value: 'false', public: false },
+              { key: 'UPLOAD_TO_S3', value: 'true', public: false },
+            ],
           },
         });
 
@@ -44,10 +49,10 @@ describe('Trigger block', () => {
           .$nextTick()
           .then(() => {
             expect(vm.$el.querySelector('.js-build-variables')).not.toBeNull();
-            expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('key');
-            expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('value');
-            expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('variable');
-            expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('foo');
+            expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('UPLOAD_TO_GCS');
+            expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('false');
+            expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('UPLOAD_TO_S3');
+            expect(vm.$el.querySelector('.js-build-variables').textContent).toContain('true');
           })
           .then(done)
           .catch(done.fail);
@@ -57,7 +62,7 @@ describe('Trigger block', () => {
 
   describe('without variables', () => {
     it('does not render variables', () => {
-      vm = mountComponent(Component);
+      vm = mountComponent(Component, { trigger: {} });
 
       expect(vm.$el.querySelector('.js-reveal-variables')).toBeNull();
       expect(vm.$el.querySelector('.js-build-variables')).toBeNull();
diff --git a/spec/views/projects/jobs/show.html.haml_spec.rb b/spec/views/projects/jobs/show.html.haml_spec.rb
index c93152b88e3..496646dc623 100644
--- a/spec/views/projects/jobs/show.html.haml_spec.rb
+++ b/spec/views/projects/jobs/show.html.haml_spec.rb
@@ -188,40 +188,4 @@ describe 'projects/jobs/show' do
       expect(rendered).not_to have_link('New issue')
     end
   end
-
-  context 'when incomplete trigger_request is used' do
-    before do
-      build.trigger_request = FactoryBot.build(:ci_trigger_request, trigger: nil)
-    end
-
-    it 'test should not render token block' do
-      render
-
-      expect(rendered).not_to have_content('Token')
-    end
-  end
-
-  context 'when complete trigger_request is used' do
-    before do
-      build.trigger_request = FactoryBot.build(:ci_trigger_request)
-    end
-
-    it 'should render token' do
-      render
-
-      expect(rendered).to have_content('Token')
-      expect(rendered).to have_content(build.trigger_request.trigger.short_token)
-    end
-  end
-
-  describe 'commit title in sidebar' do
-    let(:commit_title) { project.commit.title }
-
-    it 'shows commit title and not show commit message' do
-      render
-
-      expect(rendered).to have_css('p.build-light-text.append-bottom-0',
-        text: /\A\n#{Regexp.escape(commit_title)}\n\Z/)
-    end
-  end
 end