Merge branch '50101-job-log-component' into 'master'

Creates a vue component for the job log trace output

See merge request gitlab-org/gitlab-ce!21167

app/assets/javascripts/jobs/components/job_log.vue

+<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>

changelogs/unreleased/50101-job-log-component.yml

+---
+title: Creates vue component for job log trace
+merge_request:
+author:
+type: other

spec/javascripts/jobs/job_log_spec.js

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