Creates job log component

Creates vue and vuex support for new job log

Creates the new log.vue component to handle the
new format
Updates the store to use the new parser
Creates an utility function to handle the
incremental log

3 files changed, 117 insertions, 0 deletions

diff --git a/spec/javascripts/jobs/components/log/log_spec.js b/spec/javascripts/jobs/components/log/log_spec.js
new file mode 100644
index 00000000000..469bbf6714d
--- /dev/null
+++ b/spec/javascripts/jobs/components/log/log_spec.js
@@ -0,0 +1,77 @@
+import { mount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { logLinesParser } from '~/jobs/store/utils';
+import Log from '~/jobs/components/log/log.vue';
+import { jobLog } from './mock_data';
+
+describe('Job Log', () => {
+  let wrapper;
+  let actions;
+  let state;
+  let store;
+
+  const localVue = createLocalVue();
+  localVue.use(Vuex);
+
+  const createComponent = () => {
+    wrapper = mount(Log, {
+      sync: false,
+      localVue,
+      store,
+    });
+  };
+
+  beforeEach(() => {
+    actions = {
+      toggleCollapsibleLine: () => {},
+    };
+
+    state = {
+      trace: logLinesParser(jobLog),
+      traceEndpoint: 'jobs/id',
+    };
+
+    store = new Vuex.Store({
+      actions,
+      state,
+    });
+
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('line numbers', () => {
+    it('renders a line number for each open line', () => {
+      expect(wrapper.find('#L1').text()).toBe('1');
+      expect(wrapper.find('#L2').text()).toBe('2');
+      expect(wrapper.find('#L3').text()).toBe('3');
+    });
+
+    it('links to the provided path and correct line number', () => {
+      expect(wrapper.find('#L1').attributes('href')).toBe(`${state.traceEndpoint}#L1`);
+    });
+  });
+
+  describe('collapsible sections', () => {
+    it('renders a clickable header section', () => {
+      expect(wrapper.find('.collapsible-line').attributes('role')).toBe('button');
+    });
+
+    it('renders an icon with the closed state', () => {
+      expect(wrapper.find('.collapsible-line svg').classes()).toContain('ic-angle-right');
+    });
+
+    describe('on click header section', () => {
+      it('calls toggleCollapsibleLine', () => {
+        spyOn(wrapper.vm, 'toggleCollapsibleLine').and.callThrough();
+
+        wrapper.find('.collapsible-line').trigger('click');
+
+        expect(wrapper.vm.toggleCollapsibleLine).toHaveBeenCalled();
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/jobs/components/log/mock_data.js b/spec/javascripts/jobs/components/log/mock_data.js
new file mode 100644
index 00000000000..54a6d31b278
--- /dev/null
+++ b/spec/javascripts/jobs/components/log/mock_data.js
@@ -0,0 +1,26 @@
+// eslint-disable-next-line import/prefer-default-export
+export const jobLog = [
+  {
+    offset: 1000,
+    content: [{ text: 'Running with gitlab-runner 12.1.0 (de7731dd)' }],
+  },
+  {
+    offset: 1001,
+    content: [{ text: ' on docker-auto-scale-com 8a6210b8' }],
+  },
+  {
+    offset: 1002,
+    content: [
+      {
+        text: 'Using Docker executor with image dev.gitlab.org3',
+      },
+    ],
+    sections: ['prepare-executor'],
+    section_header: true,
+  },
+  {
+    offset: 1003,
+    content: [{ text: 'Starting service postgres:9.6.14 ...', style: 'text-green' }],
+    sections: ['prepare-executor'],
+  },
+];
diff --git a/spec/javascripts/jobs/store/actions_spec.js b/spec/javascripts/jobs/store/actions_spec.js
index 7b96df85b82..91d1942bdbf 100644
--- a/spec/javascripts/jobs/store/actions_spec.js
+++ b/spec/javascripts/jobs/store/actions_spec.js
@@ -16,6 +16,7 @@ import {
   stopPollingTrace,
   receiveTraceSuccess,
   receiveTraceError,
+  toggleCollapsibleLine,
   requestJobsForStage,
   fetchJobsForStage,
   receiveJobsForStageSuccess,
@@ -303,6 +304,19 @@ describe('Job State actions', () => {
     });
   });
 
+  describe('toggleCollapsibleLine', () => {
+    it('should commit TOGGLE_COLLAPSIBLE_LINE mutation ', done => {
+      testAction(
+        toggleCollapsibleLine,
+        { isClosed: true },
+        mockedState,
+        [{ type: types.TOGGLE_COLLAPSIBLE_LINE, payload: { isClosed: true } }],
+        [],
+        done,
+      );
+    });
+  });
+
   describe('requestJobsForStage', () => {
     it('should commit REQUEST_JOBS_FOR_STAGE mutation ', done => {
       testAction(