Use Vue component for job artifacts, Commit and Trigger Variables

3 files changed, 75 insertions, 57 deletions

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();