diff options
author | Filipa Lacerda <filipa@gitlab.com> | 2018-08-13 17:58:27 +0100 |
---|---|---|
committer | Filipa Lacerda <filipa@gitlab.com> | 2018-08-13 17:58:27 +0100 |
commit | 32196a7fbed89171fa9be9bd937cd79bf9766ba7 (patch) | |
tree | 6f2e6a79e9cc26ae567e00d9fa7d04e266fba7c7 | |
parent | f7f31a6f910325d4456bc3a344bf359f2d59a4ee (diff) | |
download | gitlab-ce-32196a7fbed89171fa9be9bd937cd79bf9766ba7.tar.gz |
Creates Vue component for job log trace
-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(); + }); + }); +}); |