Creates base components for new job log

Creates a link component, a line component and
a clickable line component to handle the
new job log format

3 files changed, 173 insertions, 0 deletions

diff --git a/spec/javascripts/jobs/components/log/line_header_spec.js b/spec/javascripts/jobs/components/log/line_header_spec.js
new file mode 100644
index 00000000000..4efd412a6cd
--- /dev/null
+++ b/spec/javascripts/jobs/components/log/line_header_spec.js
@@ -0,0 +1,84 @@
+import { mount } from '@vue/test-utils';
+import LineHeader from '~/jobs/components/log/line_header.vue';
+import LineNumber from '~/jobs/components/log/line_number.vue';
+
+describe('Job Log Header Line', () => {
+  let wrapper;
+
+  const data = {
+    line: {
+      content: [
+        {
+          text: 'Running with gitlab-runner 12.1.0 (de7731dd)',
+          style: 'term-fg-l-green',
+        },
+      ],
+      lineNumber: 0,
+    },
+    isClosed: true,
+    path: '/jashkenas/underscore/-/jobs/335',
+  };
+
+  const createComponent = (props = {}) => {
+    wrapper = mount(LineHeader, {
+      sync: false,
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  describe('line', () => {
+    beforeEach(() => {
+      createComponent(data);
+    });
+
+    it('renders the line number component', () => {
+      expect(wrapper.contains(LineNumber)).toBe(true);
+    });
+
+    it('renders a span the provided text', () => {
+      expect(wrapper.find('span').text()).toBe(data.line.content[0].text);
+    });
+
+    it('renders the provided style as a class attribute', () => {
+      expect(wrapper.find('span').classes()).toContain(data.line.content[0].style);
+    });
+  });
+
+  describe('when isCloses is true', () => {
+    beforeEach(() => {
+      createComponent({ ...data, isClosed: true });
+    });
+
+    it('sets icon name to be angle-right', () => {
+      expect(wrapper.vm.iconName).toEqual('angle-right');
+    });
+  });
+
+  describe('when isCloses is false', () => {
+    beforeEach(() => {
+      createComponent({ ...data, isClosed: false });
+    });
+
+    it('sets icon name to be angle-down', () => {
+      expect(wrapper.vm.iconName).toEqual('angle-down');
+    });
+  });
+
+  describe('on click', () => {
+    beforeEach(() => {
+      createComponent(data);
+    });
+
+    it('emits toggleLine event', () => {
+      wrapper.trigger('click');
+
+      expect(wrapper.emitted().toggleLine.length).toBe(1);
+    });
+  });
+});
diff --git a/spec/javascripts/jobs/components/log/line_number_spec.js b/spec/javascripts/jobs/components/log/line_number_spec.js
new file mode 100644
index 00000000000..fcf2edf9159
--- /dev/null
+++ b/spec/javascripts/jobs/components/log/line_number_spec.js
@@ -0,0 +1,40 @@
+import { shallowMount } from '@vue/test-utils';
+import LineNumber from '~/jobs/components/log/line_number.vue';
+
+describe('Job Log Line Number', () => {
+  let wrapper;
+
+  const data = {
+    lineNumber: 0,
+    path: '/jashkenas/underscore/-/jobs/335',
+  };
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(LineNumber, {
+      sync: false,
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent(data);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders incremented lineNunber by 1', () => {
+    expect(wrapper.text()).toBe('1');
+  });
+
+  it('renders link with lineNumber as an ID', () => {
+    expect(wrapper.attributes().id).toBe('L1');
+  });
+
+  it('links to the provided path with line number as anchor', () => {
+    expect(wrapper.attributes().href).toBe(`${data.path}#L1`);
+  });
+});
diff --git a/spec/javascripts/jobs/components/log/line_spec.js b/spec/javascripts/jobs/components/log/line_spec.js
new file mode 100644
index 00000000000..ea593e3c39a
--- /dev/null
+++ b/spec/javascripts/jobs/components/log/line_spec.js
@@ -0,0 +1,49 @@
+import { shallowMount } from '@vue/test-utils';
+import Line from '~/jobs/components/log/line.vue';
+import LineNumber from '~/jobs/components/log/line_number.vue';
+
+describe('Job Log Line', () => {
+  let wrapper;
+
+  const data = {
+    line: {
+      content: [
+        {
+          text: 'Running with gitlab-runner 12.1.0 (de7731dd)',
+          style: 'term-fg-l-green',
+        },
+      ],
+      lineNumber: 0,
+    },
+    path: '/jashkenas/underscore/-/jobs/335',
+  };
+
+  const createComponent = (props = {}) => {
+    wrapper = shallowMount(Line, {
+      sync: false,
+      propsData: {
+        ...props,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent(data);
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders the line number component', () => {
+    expect(wrapper.contains(LineNumber)).toBe(true);
+  });
+
+  it('renders a span the provided text', () => {
+    expect(wrapper.find('span').text()).toBe(data.line.content[0].text);
+  });
+
+  it('renders the provided style as a class attribute', () => {
+    expect(wrapper.find('span').classes()).toContain(data.line.content[0].style);
+  });
+});