From 32ccde8ccdafa5920c5677c6caa7b22337e7cb44 Mon Sep 17 00:00:00 2001 From: Filipa Lacerda Date: Tue, 25 Sep 2018 08:07:47 +0000 Subject: Use Vue component for job artifacts, Commit and Trigger Variables --- .../jobs/components/artifacts_block_spec.js | 66 ++++++++++---------- .../jobs/components/commit_block_spec.js | 41 ++++++++----- .../jobs/components/trigger_block_spec.js | 71 ++++++++++++++++++++++ .../jobs/components/trigger_value_spec.js | 66 -------------------- 4 files changed, 131 insertions(+), 113 deletions(-) create mode 100644 spec/javascripts/jobs/components/trigger_block_spec.js delete mode 100644 spec/javascripts/jobs/components/trigger_value_spec.js (limited to 'spec/javascripts/jobs') 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_block_spec.js b/spec/javascripts/jobs/components/trigger_block_spec.js new file mode 100644 index 00000000000..e1b9898393e --- /dev/null +++ b/spec/javascripts/jobs/components/trigger_block_spec.js @@ -0,0 +1,71 @@ +import Vue from 'vue'; +import component from '~/jobs/components/trigger_block.vue'; +import mountComponent from '../../helpers/vue_mount_component_helper'; + +describe('Trigger block', () => { + const Component = Vue.extend(component); + let vm; + + afterEach(() => { + vm.$destroy(); + }); + + describe('with short token', () => { + it('renders short token', () => { + vm = mountComponent(Component, { + trigger: { + short_token: '0a666b2', + }, + }); + + expect(vm.$el.querySelector('.js-short-token').textContent).toContain('0a666b2'); + }); + }); + + describe('without short token', () => { + it('does not render short token', () => { + vm = mountComponent(Component, { trigger: {} }); + + expect(vm.$el.querySelector('.js-short-token')).toBeNull(); + }); + }); + + describe('with variables', () => { + describe('reveal variables', () => { + it('reveals variables on click', done => { + vm = mountComponent(Component, { + trigger: { + short_token: 'bd7e', + variables: [ + { key: 'UPLOAD_TO_GCS', value: 'false', public: false }, + { key: 'UPLOAD_TO_S3', value: 'true', public: false }, + ], + }, + }); + + vm.$el.querySelector('.js-reveal-variables').click(); + + vm + .$nextTick() + .then(() => { + expect(vm.$el.querySelector('.js-build-variables')).not.toBeNull(); + 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); + }); + }); + }); + + describe('without variables', () => { + it('does not render variables', () => { + vm = mountComponent(Component, { trigger: {} }); + + expect(vm.$el.querySelector('.js-reveal-variables')).toBeNull(); + expect(vm.$el.querySelector('.js-build-variables')).toBeNull(); + }); + }); +}); diff --git a/spec/javascripts/jobs/components/trigger_value_spec.js b/spec/javascripts/jobs/components/trigger_value_spec.js deleted file mode 100644 index 3d41a3cfac1..00000000000 --- a/spec/javascripts/jobs/components/trigger_value_spec.js +++ /dev/null @@ -1,66 +0,0 @@ -import Vue from 'vue'; -import component from '~/jobs/components/trigger_block.vue'; -import mountComponent from '../../helpers/vue_mount_component_helper'; - -describe('Trigger block', () => { - const Component = Vue.extend(component); - let vm; - - afterEach(() => { - vm.$destroy(); - }); - - describe('with short token', () => { - it('renders short token', () => { - vm = mountComponent(Component, { - shortToken: '0a666b2', - }); - - expect(vm.$el.querySelector('.js-short-token').textContent).toContain('0a666b2'); - }); - }); - - describe('without short token', () => { - it('does not render short token', () => { - vm = mountComponent(Component, {}); - - expect(vm.$el.querySelector('.js-short-token')).toBeNull(); - }); - }); - - describe('with variables', () => { - describe('reveal variables', () => { - it('reveals variables on click', done => { - vm = mountComponent(Component, { - variables: { - key: 'value', - variable: 'foo', - }, - }); - - vm.$el.querySelector('.js-reveal-variables').click(); - - vm - .$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'); - }) - .then(done) - .catch(done.fail); - }); - }); - }); - - describe('without variables', () => { - it('does not render variables', () => { - vm = mountComponent(Component); - - expect(vm.$el.querySelector('.js-reveal-variables')).toBeNull(); - expect(vm.$el.querySelector('.js-build-variables')).toBeNull(); - }); - }); -}); -- cgit v1.2.3