diff options
-rw-r--r-- | app/assets/javascripts/jobs/components/job_log.vue | 33 | ||||
-rw-r--r-- | changelogs/unreleased/50101-job-log-component.yml | 5 | ||||
-rw-r--r-- | spec/javascripts/jobs/job_log_spec.js | 45 |
3 files changed, 83 insertions, 0 deletions
diff --git a/app/assets/javascripts/jobs/components/job_log.vue b/app/assets/javascripts/jobs/components/job_log.vue new file mode 100644 index 00000000000..3c4749d996b --- /dev/null +++ b/app/assets/javascripts/jobs/components/job_log.vue @@ -0,0 +1,33 @@ +<script> + export default { + name: 'JobLog', + props: { + trace: { + type: String, + required: true, + }, + isReceivingBuildTrace: { + type: Boolean, + required: true, + }, + }, + }; +</script> +<template> + <pre class="build-trace"> + <code + class="bash" + v-html="trace" + > + </code> + + <div + v-if="isReceivingBuildTrace" + class="js-log-animation build-loader-animation" + > + <div class="dot"></div> + <div class="dot"></div> + <div class="dot"></div> + </div> + </pre> +</template> diff --git a/changelogs/unreleased/50101-job-log-component.yml b/changelogs/unreleased/50101-job-log-component.yml new file mode 100644 index 00000000000..0759e7cfbd9 --- /dev/null +++ b/changelogs/unreleased/50101-job-log-component.yml @@ -0,0 +1,5 @@ +--- +title: Creates vue component for job log trace +merge_request: +author: +type: other diff --git a/spec/javascripts/jobs/job_log_spec.js b/spec/javascripts/jobs/job_log_spec.js new file mode 100644 index 00000000000..406f1c4ccc5 --- /dev/null +++ b/spec/javascripts/jobs/job_log_spec.js @@ -0,0 +1,45 @@ +import Vue from 'vue'; +import component from '~/jobs/components/job_log.vue'; +import mountComponent from '../helpers/vue_mount_component_helper'; + +describe('Job Log', () => { + const Component = Vue.extend(component); + let vm; + + const trace = 'Running with gitlab-runner 11.1.0 (081978aa)<br> on docker-auto-scale-com d5ae8d25<br>Using Docker executor with image dev.gitlab.org:5005/gitlab/gitlab-build-images:ruby-2.4.4-golang-1.9-git-2.18-chrome-67.0-node-8.x-yarn-1.2-postgresql-9.6-graphicsmagick-1.3.29 ...<br>'; + + afterEach(() => { + vm.$destroy(); + }); + + it('renders provided trace', () => { + vm = mountComponent(Component, { + trace, + isReceivingBuildTrace: true, + }); + + expect(vm.$el.querySelector('code').textContent).toContain('Running with gitlab-runner 11.1.0 (081978aa)'); + }); + + describe('while receiving trace', () => { + it('renders animation', () => { + vm = mountComponent(Component, { + trace, + isReceivingBuildTrace: true, + }); + + expect(vm.$el.querySelector('.js-log-animation')).not.toBeNull(); + }); + }); + + describe('when build trace has finishes', () => { + it('does not render animation', () => { + vm = mountComponent(Component, { + trace, + isReceivingBuildTrace: false, + }); + + expect(vm.$el.querySelector('.js-log-animation')).toBeNull(); + }); + }); +}); |