Merge branch '45318-junit-FE' into 'master'

Frontend code for "JUnit XML Test Summary In MR widget"

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

11 files changed, 531 insertions, 10 deletions

diff --git a/spec/javascripts/reports/components/grouped_test_reports_app_spec.js b/spec/javascripts/reports/components/grouped_test_reports_app_spec.js
new file mode 100644
index 00000000000..d86e565036c
--- /dev/null
+++ b/spec/javascripts/reports/components/grouped_test_reports_app_spec.js
@@ -0,0 +1,163 @@
+import Vue from 'vue';
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import state from '~/reports/store/state';
+import component from '~/reports/components/grouped_test_reports_app.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+import newFailedTestReports from '../mock_data/new_failures_report.json';
+import successTestReports from '../mock_data/no_failures_report.json';
+import mixedResultsTestReports from '../mock_data/new_and_fixed_failures_report.json';
+
+describe('Grouped Test Reports App', () => {
+  let vm;
+  let mock;
+  const Component = Vue.extend(component);
+
+  beforeEach(() => {
+    mock = new MockAdapter(axios);
+  });
+
+  afterEach(() => {
+    vm.$store.replaceState(state());
+    vm.$destroy();
+    mock.restore();
+  });
+
+  describe('with success result', () => {
+    beforeEach(() => {
+      mock.onGet('test_results.json').reply(200, successTestReports, {});
+      vm = mountComponent(Component, {
+        endpoint: 'test_results.json',
+      });
+    });
+
+    it('renders success summary text', done => {
+      setTimeout(() => {
+        expect(vm.$el.querySelector('.fa-spinner')).toBeNull();
+        expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual(
+          'Test summary contained no changed test results out of 11 total tests',
+        );
+
+        expect(vm.$el.textContent).toContain(
+          'rspec:pg found no changed test results out of 8 total tests',
+        );
+        expect(vm.$el.textContent).toContain(
+          'java ant found no changed test results out of 3 total tests',
+        );
+        done();
+      }, 0);
+    });
+  });
+
+  describe('with 204 result', () => {
+    beforeEach(() => {
+      mock.onGet('test_results.json').reply(204, {}, {});
+      vm = mountComponent(Component, {
+        endpoint: 'test_results.json',
+      });
+    });
+
+    it('renders success summary text', done => {
+      setTimeout(() => {
+        expect(vm.$el.querySelector('.fa-spinner')).not.toBeNull();
+        expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual(
+          'Test summary results are being parsed',
+        );
+
+        done();
+      }, 0);
+    });
+  });
+
+  describe('with new failed result', () => {
+    beforeEach(() => {
+      mock.onGet('test_results.json').reply(200, newFailedTestReports, {});
+      vm = mountComponent(Component, {
+        endpoint: 'test_results.json',
+      });
+    });
+
+    it('renders failed summary text + new badge', done => {
+      setTimeout(() => {
+        expect(vm.$el.querySelector('.fa-spinner')).toBeNull();
+        expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual(
+          'Test summary contained 2 failed test results out of 11 total tests',
+        );
+
+        expect(vm.$el.textContent).toContain(
+          'rspec:pg found 2 failed test results out of 8 total tests',
+        );
+        expect(vm.$el.textContent).toContain('New');
+        expect(vm.$el.textContent).toContain(
+          'java ant found no changed test results out of 3 total tests',
+        );
+        done();
+      }, 0);
+    });
+  });
+
+  describe('with mixed results', () => {
+    beforeEach(() => {
+      mock.onGet('test_results.json').reply(200, mixedResultsTestReports, {});
+      vm = mountComponent(Component, {
+        endpoint: 'test_results.json',
+      });
+    });
+
+    it('renders summary text', done => {
+      setTimeout(() => {
+        expect(vm.$el.querySelector('.fa-spinner')).toBeNull();
+        expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual(
+          'Test summary contained 2 failed test results and 2 fixed test results out of 11 total tests',
+        );
+
+        expect(vm.$el.textContent).toContain(
+          'rspec:pg found 1 failed test result and 2 fixed test results out of 8 total tests',
+        );
+        expect(vm.$el.textContent).toContain('New');
+        expect(vm.$el.textContent).toContain(
+          ' java ant found 1 failed test result out of 3 total tests',
+        );
+        done();
+      }, 0);
+    });
+  });
+
+  describe('with error', () => {
+    beforeEach(() => {
+      mock.onGet('test_results.json').reply(500, {}, {});
+      vm = mountComponent(Component, {
+        endpoint: 'test_results.json',
+      });
+    });
+
+    it('renders loading summary text with loading icon', done => {
+      setTimeout(() => {
+        expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual(
+          'Test summary failed loading results',
+        );
+        done();
+      }, 0);
+    });
+  });
+
+  describe('while loading', () => {
+    beforeEach(() => {
+      mock.onGet('test_results.json').reply(200, {}, {});
+      vm = mountComponent(Component, {
+        endpoint: 'test_results.json',
+      });
+    });
+
+    it('renders loading summary text with loading icon', done => {
+      expect(vm.$el.querySelector('.fa-spinner')).not.toBeNull();
+      expect(vm.$el.querySelector('.js-code-text').textContent.trim()).toEqual(
+        'Test summary results are being parsed',
+      );
+
+      setTimeout(() => {
+        done();
+      }, 0);
+    });
+  });
+});
diff --git a/spec/javascripts/reports/components/modal_spec.js b/spec/javascripts/reports/components/modal_spec.js
new file mode 100644
index 00000000000..3a567c40eca
--- /dev/null
+++ b/spec/javascripts/reports/components/modal_spec.js
@@ -0,0 +1,45 @@
+import Vue from 'vue';
+import component from '~/reports/components/modal.vue';
+import state from '~/reports/store/state';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+import { trimText } from '../../helpers/vue_component_helper';
+
+describe('Grouped Test Reports Modal', () => {
+  const Component = Vue.extend(component);
+  const modalDataStructure = state().modal.data;
+
+  // populate data
+  modalDataStructure.execution_time.value = 0.009411;
+  modalDataStructure.system_output.value = 'Failure/Error: is_expected.to eq(3)\n\n';
+  modalDataStructure.class.value = 'link';
+
+  let vm;
+
+  beforeEach(() => {
+    vm = mountComponent(Component, {
+      title: 'Test#sum when a is 1 and b is 2 returns summary',
+      modalData: modalDataStructure,
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders code block', () => {
+    expect(vm.$el.querySelector('code').textContent).toEqual(modalDataStructure.system_output.value);
+  });
+
+  it('renders link', () => {
+    expect(vm.$el.querySelector('.js-modal-link').getAttribute('href')).toEqual(modalDataStructure.class.value);
+    expect(trimText(vm.$el.querySelector('.js-modal-link').textContent)).toEqual(modalDataStructure.class.value);
+  });
+
+  it('renders miliseconds', () => {
+    expect(vm.$el.textContent).toContain(`${modalDataStructure.execution_time.value} ms`);
+  });
+
+  it('render title', () => {
+    expect(trimText(vm.$el.querySelector('.modal-title').textContent)).toEqual('Test#sum when a is 1 and b is 2 returns summary');
+  });
+});
diff --git a/spec/javascripts/reports/components/test_issue_body_spec.js b/spec/javascripts/reports/components/test_issue_body_spec.js
new file mode 100644
index 00000000000..0ea81f714e7
--- /dev/null
+++ b/spec/javascripts/reports/components/test_issue_body_spec.js
@@ -0,0 +1,71 @@
+import Vue from 'vue';
+import component from '~/reports/components/test_issue_body.vue';
+import createStore from '~/reports/store';
+import { mountComponentWithStore } from '../../helpers/vue_mount_component_helper';
+import { trimText } from '../../helpers/vue_component_helper';
+import { issue } from '../mock_data/mock_data';
+
+describe('Test Issue body', () => {
+  let vm;
+  const Component = Vue.extend(component);
+  const store = createStore();
+
+  const commonProps = {
+    issue,
+    status: 'failed',
+  };
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('on click', () => {
+    it('calls openModal action', () => {
+      vm = mountComponentWithStore(Component, {
+        store,
+        props: commonProps,
+      });
+
+      spyOn(vm, 'openModal');
+
+      vm.$el.querySelector('button').click();
+      expect(vm.openModal).toHaveBeenCalledWith({
+        issue: commonProps.issue,
+      });
+    });
+  });
+
+  describe('is new', () => {
+    beforeEach(() => {
+      vm = mountComponentWithStore(Component, {
+        store,
+        props: Object.assign({}, commonProps, { isNew: true }),
+      });
+    });
+
+    it('renders issue name', () => {
+      expect(vm.$el.textContent).toContain(commonProps.issue.name);
+    });
+
+    it('renders new badge', () => {
+      expect(trimText(vm.$el.querySelector('.badge').textContent)).toEqual('New');
+    });
+  });
+
+  describe('not new', () => {
+    beforeEach(() => {
+      vm = mountComponentWithStore(Component, {
+        store,
+        props: commonProps,
+      });
+    });
+
+    it('renders issue name', () => {
+      expect(vm.$el.textContent).toContain(commonProps.issue.name);
+    });
+
+    it('does not renders new badge', () => {
+      expect(vm.$el.querySelector('.badge')).toEqual(null);
+    });
+  });
+});
diff --git a/spec/javascripts/reports/mock_data/mock_data.js b/spec/javascripts/reports/mock_data/mock_data.js
new file mode 100644
index 00000000000..0d90253bad2
--- /dev/null
+++ b/spec/javascripts/reports/mock_data/mock_data.js
@@ -0,0 +1,8 @@
+// eslint-disable-next-line import/prefer-default-export
+export const issue = {
+  result: 'failure',
+  name: 'Test#sum when a is 1 and b is 2 returns summary',
+  execution_time: 0.009411,
+  system_output:
+    "Failure/Error: is_expected.to eq(3)\n\n  expected: 3\n       got: -1\n\n  (compared using ==)\n./spec/test_spec.rb:12:in `block (4 levels) in \u003ctop (required)\u003e'",
+};
diff --git a/spec/javascripts/reports/mock_data/new_and_fixed_failures_report.json b/spec/javascripts/reports/mock_data/new_and_fixed_failures_report.json
new file mode 100644
index 00000000000..ceaf894375a
--- /dev/null
+++ b/spec/javascripts/reports/mock_data/new_and_fixed_failures_report.json
@@ -0,0 +1 @@
+{"status":"failed","summary":{"total":11,"resolved":2,"failed":2},"suites":[{"name":"rspec:pg","status":"failed","summary":{"total":8,"resolved":2,"failed":1},"new_failures":[{"status":"failed","name":"Test#subtract when a is 2 and b is 1 returns correct result","execution_time":0.00908,"system_output":"Failure/Error: is_expected.to eq(1)\n\n  expected: 1\n       got: 3\n\n  (compared using ==)\n./spec/test_spec.rb:43:in `block (4 levels) in <top (required)>'"}],"resolved_failures":[{"status":"success","name":"Test#sum when a is 1 and b is 2 returns summary","execution_time":0.000318,"system_output":null},{"status":"success","name":"Test#sum when a is 100 and b is 200 returns summary","execution_time":0.000074,"system_output":null}],"existing_failures":[]},{"name":"java ant","status":"failed","summary":{"total":3,"resolved":0,"failed":1},"new_failures":[],"resolved_failures":[],"existing_failures":[{"status":"failed","name":"sumTest","execution_time":0.004,"system_output":"junit.framework.AssertionFailedError: expected:<3> but was:<-1>\n\tat CalculatorTest.sumTest(Unknown Source)\n\tat java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke0(Native Method)\n\tat java.base/jdk.internal.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)\n\tat java.base/jdk.internal.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)\n"}]}]}
\ No newline at end of file
diff --git a/spec/javascripts/reports/mock_data/new_failures_report.json b/spec/javascripts/reports/mock_data/new_failures_report.json
new file mode 100644
index 00000000000..930efe16f65
--- /dev/null
+++ b/spec/javascripts/reports/mock_data/new_failures_report.json
@@ -0,0 +1 @@
+{"summary":{"total":11,"resolved":0,"failed":2},"suites":[{"name":"rspec:pg","summary":{"total":8,"resolved":0,"failed":2},"new_failures":[{"result":"failure","name":"Test#sum when a is 1 and b is 2 returns summary","execution_time":0.009411,"system_output":"Failure/Error: is_expected.to eq(3)\n\n  expected: 3\n       got: -1\n\n  (compared using ==)\n./spec/test_spec.rb:12:in `block (4 levels) in <top (required)>'"},{"result":"failure","name":"Test#sum when a is 100 and b is 200 returns summary","execution_time":0.000162,"system_output":"Failure/Error: is_expected.to eq(300)\n\n  expected: 300\n       got: -100\n\n  (compared using ==)\n./spec/test_spec.rb:21:in `block (4 levels) in <top (required)>'"}],"resolved_failures":[],"existing_failures":[]},{"name":"java ant","summary":{"total":3,"resolved":0,"failed":0},"new_failures":[],"resolved_failures":[],"existing_failures":[]}]}
\ No newline at end of file
diff --git a/spec/javascripts/reports/mock_data/no_failures_report.json b/spec/javascripts/reports/mock_data/no_failures_report.json
new file mode 100644
index 00000000000..6c0675ff7dc
--- /dev/null
+++ b/spec/javascripts/reports/mock_data/no_failures_report.json
@@ -0,0 +1 @@
+{"status":"success","summary":{"total":11,"resolved":0,"failed":0},"suites":[{"name":"rspec:pg","status":"success","summary":{"total":8,"resolved":0,"failed":0},"new_failures":[],"resolved_failures":[],"existing_failures":[]},{"name":"java ant","status":"success","summary":{"total":3,"resolved":0,"failed":0},"new_failures":[],"resolved_failures":[],"existing_failures":[]}]}
\ No newline at end of file
diff --git a/spec/javascripts/reports/store/actions_spec.js b/spec/javascripts/reports/store/actions_spec.js
index c714c5af156..41137b50847 100644
--- a/spec/javascripts/reports/store/actions_spec.js
+++ b/spec/javascripts/reports/store/actions_spec.js
@@ -8,6 +8,8 @@ import {
   clearEtagPoll,
   receiveReportsSuccess,
   receiveReportsError,
+  openModal,
+  setModalData,
 } from '~/reports/store/actions';
 import state from '~/reports/store/state';
 import * as types from '~/reports/store/mutation_types';
@@ -56,7 +58,9 @@ describe('Reports Store Actions', () => {
 
     describe('success', () => {
       it('dispatches requestReports and receiveReportsSuccess ', done => {
-        mock.onGet(`${TEST_HOST}/endpoint.json`).replyOnce(200, { summary: {}, suites: [{ name: 'rspec' }] });
+        mock
+          .onGet(`${TEST_HOST}/endpoint.json`)
+          .replyOnce(200, { summary: {}, suites: [{ name: 'rspec' }] });
 
         testAction(
           fetchReports,
@@ -68,7 +72,7 @@ describe('Reports Store Actions', () => {
               type: 'requestReports',
             },
             {
-              payload: { summary: {}, suites: [{ name: 'rspec' }] },
+              payload: { data: { summary: {}, suites: [{ name: 'rspec' }] }, status: 200 },
               type: 'receiveReportsSuccess',
             },
           ],
@@ -103,16 +107,27 @@ describe('Reports Store Actions', () => {
   });
 
   describe('receiveReportsSuccess', () => {
-    it('should commit RECEIVE_REPORTS_SUCCESS mutation', done => {
+    it('should commit RECEIVE_REPORTS_SUCCESS mutation with 200', done => {
       testAction(
         receiveReportsSuccess,
-        { summary: {} },
+        { data: { summary: {} }, status: 200 },
         mockedState,
         [{ type: types.RECEIVE_REPORTS_SUCCESS, payload: { summary: {} } }],
         [],
         done,
       );
     });
+
+    it('should not commit RECEIVE_REPORTS_SUCCESS mutation with 204', done => {
+      testAction(
+        receiveReportsSuccess,
+        { data: { summary: {} }, status: 204 },
+        mockedState,
+        [],
+        [],
+        done,
+      );
+    });
   });
 
   describe('receiveReportsError', () => {
@@ -127,4 +142,30 @@ describe('Reports Store Actions', () => {
       );
     });
   });
+
+  describe('openModal', () => {
+    it('should dispatch setModalData', done => {
+      testAction(
+        openModal,
+        { name: 'foo' },
+        mockedState,
+        [],
+        [{ type: 'setModalData', payload: { name: 'foo' } }],
+        done,
+      );
+    });
+  });
+
+  describe('setModalData', () => {
+    it('should commit SET_ISSUE_MODAL_DATA', done => {
+      testAction(
+        setModalData,
+        { name: 'foo' },
+        mockedState,
+        [{ type: types.SET_ISSUE_MODAL_DATA, payload: { name: 'foo' } }],
+        [],
+        done,
+      );
+    });
+  });
 });
diff --git a/spec/javascripts/reports/store/mutations_spec.js b/spec/javascripts/reports/store/mutations_spec.js
index 3e0b15438c3..8f99d2675a5 100644
--- a/spec/javascripts/reports/store/mutations_spec.js
+++ b/spec/javascripts/reports/store/mutations_spec.js
@@ -1,6 +1,7 @@
 import state from '~/reports/store/state';
 import mutations from '~/reports/store/mutations';
 import * as types from '~/reports/store/mutation_types';
+import { issue } from '../mock_data/mock_data';
 
 describe('Reports Store Mutations', () => {
   let stateCopy;
@@ -42,24 +43,21 @@ describe('Reports Store Mutations', () => {
             {
               name: 'StringHelper#concatenate when a is git and b is lab returns summary',
               execution_time: 0.0092435,
-              system_output:
-                'Failure/Error: is_expected.to eq(\'gitlab\')',
+              system_output: "Failure/Error: is_expected.to eq('gitlab')",
             },
           ],
           resolved_failures: [
             {
               name: 'StringHelper#concatenate when a is git and b is lab returns summary',
               execution_time: 0.009235,
-              system_output:
-                'Failure/Error: is_expected.to eq(\'gitlab\')',
+              system_output: "Failure/Error: is_expected.to eq('gitlab')",
             },
           ],
           existing_failures: [
             {
               name: 'StringHelper#concatenate when a is git and b is lab returns summary',
               execution_time: 1232.08,
-              system_output:
-                'Failure/Error: is_expected.to eq(\'gitlab\')',
+              system_output: "Failure/Error: is_expected.to eq('gitlab')",
             },
           ],
         },
@@ -89,6 +87,7 @@ describe('Reports Store Mutations', () => {
     beforeEach(() => {
       mutations[types.RECEIVE_REPORTS_ERROR](stateCopy);
     });
+
     it('should reset isLoading', () => {
       expect(stateCopy.isLoading).toEqual(false);
     });
@@ -97,5 +96,25 @@ describe('Reports Store Mutations', () => {
       expect(stateCopy.hasError).toEqual(true);
     });
 
+    it('should reset reports', () => {
+      expect(stateCopy.reports).toEqual([]);
+    });
+  });
+
+  describe('SET_ISSUE_MODAL_DATA', () => {
+    beforeEach(() => {
+      mutations[types.SET_ISSUE_MODAL_DATA](stateCopy, {
+        issue,
+      });
+    });
+
+    it('should set modal title', () => {
+      expect(stateCopy.modal.title).toEqual(issue.name);
+    });
+
+    it('should set modal data', () => {
+      expect(stateCopy.modal.data.execution_time.value).toEqual(issue.execution_time);
+      expect(stateCopy.modal.data.system_output.value).toEqual(issue.system_output);
+    });
   });
 });
diff --git a/spec/javascripts/reports/store/utils_spec.js b/spec/javascripts/reports/store/utils_spec.js
new file mode 100644
index 00000000000..1679d120db2
--- /dev/null
+++ b/spec/javascripts/reports/store/utils_spec.js
@@ -0,0 +1,138 @@
+import * as utils from '~/reports/store/utils';
+import {
+  STATUS_FAILED,
+  STATUS_SUCCESS,
+  ICON_WARNING,
+  ICON_SUCCESS,
+  ICON_NOTFOUND,
+} from '~/reports/constants';
+
+describe('Reports store utils', () => {
+  describe('summaryTextbuilder', () => {
+    it('should render text for no changed results in multiple tests', () => {
+      const name = 'Test summary';
+      const data = { total: 10 };
+      const result = utils.summaryTextBuilder(name, data);
+
+      expect(result).toBe('Test summary contained no changed test results out of 10 total tests');
+    });
+
+    it('should render text for no changed results in one test', () => {
+      const name = 'Test summary';
+      const data = { total: 1 };
+      const result = utils.summaryTextBuilder(name, data);
+
+      expect(result).toBe('Test summary contained no changed test results out of 1 total test');
+    });
+
+    it('should render text for multiple failed results', () => {
+      const name = 'Test summary';
+      const data = { failed: 3, total: 10 };
+      const result = utils.summaryTextBuilder(name, data);
+
+      expect(result).toBe('Test summary contained 3 failed test results out of 10 total tests');
+    });
+
+    it('should render text for multiple fixed results', () => {
+      const name = 'Test summary';
+      const data = { resolved: 4, total: 10 };
+      const result = utils.summaryTextBuilder(name, data);
+
+      expect(result).toBe('Test summary contained 4 fixed test results out of 10 total tests');
+    });
+
+    it('should render text for multiple fixed, and multiple failed results', () => {
+      const name = 'Test summary';
+      const data = { failed: 3, resolved: 4, total: 10 };
+      const result = utils.summaryTextBuilder(name, data);
+
+      expect(result).toBe(
+        'Test summary contained 3 failed test results and 4 fixed test results out of 10 total tests',
+      );
+    });
+
+    it('should render text for a singular fixed, and a singular failed result', () => {
+      const name = 'Test summary';
+      const data = { failed: 1, resolved: 1, total: 10 };
+      const result = utils.summaryTextBuilder(name, data);
+
+      expect(result).toBe(
+        'Test summary contained 1 failed test result and 1 fixed test result out of 10 total tests',
+      );
+    });
+  });
+
+  describe('reportTextBuilder', () => {
+    it('should render text for no changed results in multiple tests', () => {
+      const name = 'Rspec';
+      const data = { total: 10 };
+      const result = utils.reportTextBuilder(name, data);
+
+      expect(result).toBe('Rspec found no changed test results out of 10 total tests');
+    });
+
+    it('should render text for no changed results in one test', () => {
+      const name = 'Rspec';
+      const data = { total: 1 };
+      const result = utils.reportTextBuilder(name, data);
+
+      expect(result).toBe('Rspec found no changed test results out of 1 total test');
+    });
+
+    it('should render text for multiple failed results', () => {
+      const name = 'Rspec';
+      const data = { failed: 3, total: 10 };
+      const result = utils.reportTextBuilder(name, data);
+
+      expect(result).toBe('Rspec found 3 failed test results out of 10 total tests');
+    });
+
+    it('should render text for multiple fixed results', () => {
+      const name = 'Rspec';
+      const data = { resolved: 4, total: 10 };
+      const result = utils.reportTextBuilder(name, data);
+
+      expect(result).toBe('Rspec found 4 fixed test results out of 10 total tests');
+    });
+
+    it('should render text for multiple fixed, and multiple failed results', () => {
+      const name = 'Rspec';
+      const data = { failed: 3, resolved: 4, total: 10 };
+      const result = utils.reportTextBuilder(name, data);
+
+      expect(result).toBe(
+        'Rspec found 3 failed test results and 4 fixed test results out of 10 total tests',
+      );
+    });
+
+    it('should render text for a singular fixed, and a singular failed result', () => {
+      const name = 'Rspec';
+      const data = { failed: 1, resolved: 1, total: 10 };
+      const result = utils.reportTextBuilder(name, data);
+
+      expect(result).toBe(
+        'Rspec found 1 failed test result and 1 fixed test result out of 10 total tests',
+      );
+    });
+  });
+
+  describe('statusIcon', () => {
+    describe('with failed status', () => {
+      it('returns ICON_WARNING', () => {
+        expect(utils.statusIcon(STATUS_FAILED)).toEqual(ICON_WARNING);
+      });
+    });
+
+    describe('with success status', () => {
+      it('returns ICON_SUCCESS', () => {
+        expect(utils.statusIcon(STATUS_SUCCESS)).toEqual(ICON_SUCCESS);
+      });
+    });
+
+    describe('without a status', () => {
+      it('returns ICON_NOTFOUND', () => {
+        expect(utils.statusIcon()).toEqual(ICON_NOTFOUND);
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/vue_shared/components/code_block_spec.js b/spec/javascripts/vue_shared/components/code_block_spec.js
new file mode 100644
index 00000000000..6b91a20ff76
--- /dev/null
+++ b/spec/javascripts/vue_shared/components/code_block_spec.js
@@ -0,0 +1,33 @@
+import Vue from 'vue';
+import component from '~/vue_shared/components/code_block.vue';
+import mountComponent from '../../helpers/vue_mount_component_helper';
+
+describe('Code Block', () => {
+  const Component = Vue.extend(component);
+  let vm;
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders a code block with the provided code', () => {
+    const code =
+      "Failure/Error: is_expected.to eq(3)\n\n  expected: 3\n       got: -1\n\n  (compared using ==)\n./spec/test_spec.rb:12:in `block (4 levels) in \u003ctop (required)\u003e'";
+
+    vm = mountComponent(Component, {
+      code,
+    });
+
+    expect(vm.$el.querySelector('code').textContent).toEqual(code);
+  });
+
+  it('escapes XSS injections', () => {
+    const code = 'CCC&lt;img src=x onerror=alert(document.domain)&gt;';
+
+    vm = mountComponent(Component, {
+      code,
+    });
+
+    expect(vm.$el.querySelector('code').textContent).toEqual(code);
+  });
+});