From 32196a7fbed89171fa9be9bd937cd79bf9766ba7 Mon Sep 17 00:00:00 2001
From: Filipa Lacerda <filipa@gitlab.com>
Date: Mon, 13 Aug 2018 17:58:27 +0100
Subject: Creates Vue component for job log trace

---
 app/assets/javascripts/jobs/components/job_log.vue | 33 ++++++++++++++++
 changelogs/unreleased/50101-job-log-component.yml  |  5 +++
 spec/javascripts/jobs/job_log_spec.js              | 45 ++++++++++++++++++++++
 3 files changed, 83 insertions(+)
 create mode 100644 app/assets/javascripts/jobs/components/job_log.vue
 create mode 100644 changelogs/unreleased/50101-job-log-component.yml
 create mode 100644 spec/javascripts/jobs/job_log_spec.js

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();
+    });
+  });
+});
-- 
cgit v1.2.1