Adds Vuex store for the job log page

3 files changed, 857 insertions, 6 deletions

diff --git a/spec/javascripts/jobs/store/actions_spec.js b/spec/javascripts/jobs/store/actions_spec.js
new file mode 100644
index 00000000000..5042718dfa0
--- /dev/null
+++ b/spec/javascripts/jobs/store/actions_spec.js
@@ -0,0 +1,625 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import {
+  setJobEndpoint,
+  setTraceEndpoint,
+  setStagesEndpoint,
+  setJobsEndpoint,
+  clearEtagPoll,
+  stopPolling,
+  requestJob,
+  fetchJob,
+  receiveJobSuccess,
+  receiveJobError,
+  scrollTop,
+  scrollBottom,
+  requestTrace,
+  fetchTrace,
+  stopPollingTrace,
+  receiveTraceSuccess,
+  receiveTraceError,
+  fetchFavicon,
+  requestStatusFavicon,
+  receiveStatusFaviconSuccess,
+  requestStatusFaviconError,
+  requestStages,
+  fetchStages,
+  receiveStagesSuccess,
+  receiveStagesError,
+  requestJobsForStage,
+  setSelectedStage,
+  fetchJobsForStage,
+  receiveJobsForStageSuccess,
+  receiveJobsForStageError,
+} from '~/jobs/store/actions';
+import state from '~/jobs/store/state';
+import * as types from '~/jobs/store/mutation_types';
+import testAction from 'spec/helpers/vuex_action_helper';
+import { TEST_HOST } from 'spec/test_constants';
+
+describe('Job State actions', () => {
+  let mockedState;
+
+  beforeEach(() => {
+    mockedState = state();
+  });
+
+  describe('setJobEndpoint', () => {
+    it('should commit SET_JOB_ENDPOINT mutation', done => {
+      testAction(
+        setJobEndpoint,
+        'job/872324.json',
+        mockedState,
+        [{ type: types.SET_JOB_ENDPOINT, payload: 'job/872324.json' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('setTraceEndpoint', () => {
+    it('should commit SET_TRACE_ENDPOINT mutation', done => {
+      testAction(
+        setTraceEndpoint,
+        'job/872324/trace.json',
+        mockedState,
+        [{ type: types.SET_TRACE_ENDPOINT, payload: 'job/872324/trace.json' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('setStagesEndpoint', () => {
+    it('should commit SET_STAGES_ENDPOINT mutation', done => {
+      testAction(
+        setStagesEndpoint,
+        'job/872324/stages.json',
+        mockedState,
+        [{ type: types.SET_STAGES_ENDPOINT, payload: 'job/872324/stages.json' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('setJobsEndpoint', () => {
+    it('should commit SET_JOBS_ENDPOINT mutation', done => {
+      testAction(
+        setJobsEndpoint,
+        'job/872324/stages/build.json',
+        mockedState,
+        [{ type: types.SET_JOBS_ENDPOINT, payload: 'job/872324/stages/build.json' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('requestJob', () => {
+    it('should commit REQUEST_JOB mutation', done => {
+      testAction(requestJob, null, mockedState, [{ type: types.REQUEST_JOB }], [], done);
+    });
+  });
+
+  describe('fetchJob', () => {
+    let mock;
+
+    beforeEach(() => {
+      mockedState.jobEndpoint = `${TEST_HOST}/endpoint.json`;
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      mock.restore();
+      stopPolling();
+      clearEtagPoll();
+    });
+
+    describe('success', () => {
+      it('dispatches requestJob and receiveJobSuccess ', done => {
+        mock.onGet(`${TEST_HOST}/endpoint.json`).replyOnce(200, { id: 121212, name: 'karma' });
+
+        testAction(
+          fetchJob,
+          null,
+          mockedState,
+          [],
+          [
+            {
+              type: 'requestJob',
+            },
+            {
+              payload: { id: 121212, name: 'karma' },
+              type: 'receiveJobSuccess',
+            },
+          ],
+          done,
+        );
+      });
+    });
+
+    describe('error', () => {
+      beforeEach(() => {
+        mock.onGet(`${TEST_HOST}/endpoint.json`).reply(500);
+      });
+
+      it('dispatches requestJob and receiveJobError ', done => {
+        testAction(
+          fetchJob,
+          null,
+          mockedState,
+          [],
+          [
+            {
+              type: 'requestJob',
+            },
+            {
+              type: 'receiveJobError',
+            },
+          ],
+          done,
+        );
+      });
+    });
+  });
+
+  describe('receiveJobSuccess', () => {
+    it('should commit RECEIVE_JOB_SUCCESS mutation', done => {
+      testAction(
+        receiveJobSuccess,
+        { id: 121232132 },
+        mockedState,
+        [{ type: types.RECEIVE_JOB_SUCCESS, payload: { id: 121232132 } }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveJobError', () => {
+    it('should commit RECEIVE_JOB_ERROR mutation', done => {
+      testAction(receiveJobError, null, mockedState, [{ type: types.RECEIVE_JOB_ERROR }], [], done);
+    });
+  });
+
+  describe('scrollTop', () => {
+    it('should commit SCROLL_TO_TOP mutation', done => {
+      testAction(scrollTop, null, mockedState, [{ type: types.SCROLL_TO_TOP }], [], done);
+    });
+  });
+
+  describe('scrollBottom', () => {
+    it('should commit SCROLL_TO_BOTTOM mutation', done => {
+      testAction(scrollBottom, null, mockedState, [{ type: types.SCROLL_TO_BOTTOM }], [], done);
+    });
+  });
+
+  describe('requestTrace', () => {
+    it('should commit REQUEST_TRACE mutation', done => {
+      testAction(requestTrace, null, mockedState, [{ type: types.REQUEST_TRACE }], [], done);
+    });
+  });
+
+  describe('fetchTrace', () => {
+    let mock;
+
+    beforeEach(() => {
+      mockedState.traceEndpoint = `${TEST_HOST}/endpoint`;
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      mock.restore();
+      stopPolling();
+      clearEtagPoll();
+    });
+
+    describe('success', () => {
+      it('dispatches requestTrace, fetchFavicon, receiveTraceSuccess and stopPollingTrace when job is complete', done => {
+        mock.onGet(`${TEST_HOST}/endpoint/trace.json`).replyOnce(200, {
+          html: 'I, [2018-08-17T22:57:45.707325 #1841]  INFO -- :',
+          complete: true,
+        });
+
+        testAction(
+          fetchTrace,
+          null,
+          mockedState,
+          [],
+          [
+            {
+              type: 'requestTrace',
+            },
+            {
+              type: 'fetchFavicon',
+            },
+            {
+              payload: {
+                html: 'I, [2018-08-17T22:57:45.707325 #1841]  INFO -- :', complete: true,
+              },
+              type: 'receiveTraceSuccess',
+            },
+            {
+              type: 'stopPollingTrace',
+            },
+          ],
+          done,
+        );
+      });
+    });
+
+    describe('error', () => {
+      beforeEach(() => {
+        mock.onGet(`${TEST_HOST}/endpoint/trace.json`).reply(500);
+      });
+
+      it('dispatches requestTrace and receiveTraceError ', done => {
+        testAction(
+          fetchTrace,
+          null,
+          mockedState,
+          [],
+          [
+            {
+              type: 'requestTrace',
+            },
+            {
+              type: 'receiveTraceError',
+            },
+          ],
+          done,
+        );
+      });
+    });
+  });
+
+  describe('stopPollingTrace', () => {
+    it('should commit STOP_POLLING_TRACE mutation ', done => {
+      testAction(
+        stopPollingTrace,
+        null,
+        mockedState,
+        [{ type: types.STOP_POLLING_TRACE }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveTraceSuccess', () => {
+    it('should commit RECEIVE_TRACE_SUCCESS mutation ', done => {
+      testAction(
+        receiveTraceSuccess,
+        'hello world',
+        mockedState,
+        [{ type: types.RECEIVE_TRACE_SUCCESS, payload: 'hello world' }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveTraceError', () => {
+    it('should commit RECEIVE_TRACE_ERROR mutation ', done => {
+      testAction(
+        receiveTraceError,
+        null,
+        mockedState,
+        [{ type: types.RECEIVE_TRACE_ERROR }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('fetchFavicon', () => {
+    let mock;
+
+    beforeEach(() => {
+      mockedState.pagePath = `${TEST_HOST}/endpoint`;
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    describe('success', () => {
+      it('dispatches requestStatusFavicon and receiveStatusFaviconSuccess ', done => {
+        mock.onGet(`${TEST_HOST}/endpoint/status.json`).replyOnce(200);
+
+        testAction(
+          fetchFavicon,
+          null,
+          mockedState,
+          [],
+          [
+            {
+              type: 'requestStatusFavicon',
+            },
+            {
+              type: 'receiveStatusFaviconSuccess',
+            },
+          ],
+          done,
+        );
+      });
+    });
+
+    describe('error', () => {
+      beforeEach(() => {
+        mock.onGet(`${TEST_HOST}/endpoint/status.json`).replyOnce(500);
+      });
+
+      it('dispatches requestStatusFavicon and requestStatusFaviconError ', done => {
+        testAction(
+          fetchFavicon,
+          null,
+          mockedState,
+          [],
+          [
+            {
+              type: 'requestStatusFavicon',
+            },
+            {
+              type: 'requestStatusFaviconError',
+            },
+          ],
+          done,
+        );
+      });
+    });
+  });
+
+  describe('requestStatusFavicon', () => {
+    it('should commit REQUEST_STATUS_FAVICON mutation ', done => {
+      testAction(
+        requestStatusFavicon,
+        null,
+        mockedState,
+        [{ type: types.REQUEST_STATUS_FAVICON }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveStatusFaviconSuccess', () => {
+    it('should commit RECEIVE_STATUS_FAVICON_SUCCESS mutation ', done => {
+      testAction(
+        receiveStatusFaviconSuccess,
+        null,
+        mockedState,
+        [{ type: types.RECEIVE_STATUS_FAVICON_SUCCESS }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('requestStatusFaviconError', () => {
+    it('should commit RECEIVE_STATUS_FAVICON_ERROR mutation ', done => {
+      testAction(
+        requestStatusFaviconError,
+        null,
+        mockedState,
+        [{ type: types.RECEIVE_STATUS_FAVICON_ERROR }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('requestStages', () => {
+    it('should commit REQUEST_STAGES mutation ', done => {
+      testAction(requestStages, null, mockedState, [{ type: types.REQUEST_STAGES }], [], done);
+    });
+  });
+
+  describe('fetchStages', () => {
+    let mock;
+
+    beforeEach(() => {
+      mockedState.stagesEndpoint = `${TEST_HOST}/endpoint.json`;
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    describe('success', () => {
+      it('dispatches requestStages and receiveStagesSuccess ', done => {
+        mock.onGet(`${TEST_HOST}/endpoint.json`).replyOnce(200, [{ id: 121212, name: 'build' }]);
+
+        testAction(
+          fetchStages,
+          null,
+          mockedState,
+          [],
+          [
+            {
+              type: 'requestStages',
+            },
+            {
+              payload: [{ id: 121212, name: 'build' }],
+              type: 'receiveStagesSuccess',
+            },
+          ],
+          done,
+        );
+      });
+    });
+
+    describe('error', () => {
+      beforeEach(() => {
+        mock.onGet(`${TEST_HOST}/endpoint.json`).reply(500);
+      });
+
+      it('dispatches requestStages and receiveStagesError ', done => {
+        testAction(
+          fetchStages,
+          null,
+          mockedState,
+          [],
+          [
+            {
+              type: 'requestStages',
+            },
+            {
+              type: 'receiveStagesError',
+            },
+          ],
+          done,
+        );
+      });
+    });
+  });
+
+  describe('receiveStagesSuccess', () => {
+    it('should commit RECEIVE_STAGES_SUCCESS mutation ', done => {
+      testAction(
+        receiveStagesSuccess,
+        {},
+        mockedState,
+        [{ type: types.RECEIVE_STAGES_SUCCESS, payload: {} }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveStagesError', () => {
+    it('should commit RECEIVE_STAGES_ERROR mutation ', done => {
+      testAction(
+        receiveStagesError,
+        null,
+        mockedState,
+        [{ type: types.RECEIVE_STAGES_ERROR }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('requestJobsForStage', () => {
+    it('should commit REQUEST_JOBS_FOR_STAGE mutation ', done => {
+      testAction(
+        requestJobsForStage,
+        null,
+        mockedState,
+        [{ type: types.REQUEST_JOBS_FOR_STAGE }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('setSelectedStage', () => {
+    it('should commit SET_SELECTED_STAGE mutation ', done => {
+      testAction(
+        setSelectedStage,
+        { name: 'build' },
+        mockedState,
+        [{ type: types.SET_SELECTED_STAGE, payload: { name: 'build' } }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('fetchJobsForStage', () => {
+    let mock;
+
+    beforeEach(() => {
+      mockedState.stageJobsEndpoint = `${TEST_HOST}/endpoint.json`;
+      mock = new MockAdapter(axios);
+    });
+
+    afterEach(() => {
+      mock.restore();
+    });
+
+    describe('success', () => {
+      it('dispatches setSelectedStage, requestJobsForStage and receiveJobsForStageSuccess ', done => {
+        mock.onGet(`${TEST_HOST}/endpoint.json`).replyOnce(200, [{ id: 121212, name: 'build' }]);
+
+        testAction(
+          fetchJobsForStage,
+          null,
+          mockedState,
+          [],
+          [
+            {
+              type: 'setSelectedStage',
+              payload: null,
+            },
+            {
+              type: 'requestJobsForStage',
+            },
+            {
+              payload: [{ id: 121212, name: 'build' }],
+              type: 'receiveJobsForStageSuccess',
+            },
+          ],
+          done,
+        );
+      });
+    });
+
+    describe('error', () => {
+      beforeEach(() => {
+        mock.onGet(`${TEST_HOST}/endpoint.json`).reply(500);
+      });
+
+      it('dispatches setSelectedStage, requestJobsForStage and receiveJobsForStageError', done => {
+        testAction(
+          fetchJobsForStage,
+          null,
+          mockedState,
+          [],
+          [
+            {
+              payload: null,
+              type: 'setSelectedStage',
+            },
+            {
+              type: 'requestJobsForStage',
+            },
+            {
+              type: 'receiveJobsForStageError',
+            },
+          ],
+          done,
+        );
+      });
+    });
+  });
+
+  describe('receiveJobsForStageSuccess', () => {
+    it('should commit RECEIVE_JOBS_FOR_STAGE_SUCCESS mutation ', done => {
+      testAction(
+        receiveJobsForStageSuccess,
+        [{ id: 121212, name: 'karma' }],
+        mockedState,
+        [{ type: types.RECEIVE_JOBS_FOR_STAGE_SUCCESS, payload: [{ id: 121212, name: 'karma' }] }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveJobsForStageError', () => {
+    it('should commit RECEIVE_JOBS_FOR_STAGE_ERROR mutation ', done => {
+      testAction(
+        receiveJobsForStageError,
+        null,
+        mockedState,
+        [{ type: types.RECEIVE_JOBS_FOR_STAGE_ERROR }],
+        [],
+        done,
+      );
+    });
+  });
+});
diff --git a/spec/javascripts/jobs/store/mutations_spec.js b/spec/javascripts/jobs/store/mutations_spec.js
new file mode 100644
index 00000000000..6900b2e5602
--- /dev/null
+++ b/spec/javascripts/jobs/store/mutations_spec.js
@@ -0,0 +1,228 @@
+import state from '~/jobs/store/state';
+import mutations from '~/jobs/store/mutations';
+import * as types from '~/jobs/store/mutation_types';
+
+describe('Jobs Store Mutations', () => {
+  let stateCopy;
+
+  const html =
+    'I, [2018-08-17T22:57:45.707325 #1841]  INFO -- : Writing /builds/ab89e95b0fa0b9272ea0c797b76908f24d36992630e9325273a4ce3.png<br>I';
+
+  beforeEach(() => {
+    stateCopy = state();
+  });
+
+  describe('REQUEST_STATUS_FAVICON', () => {
+    it('should set fetchingStatusFavicon to true', () => {
+      mutations[types.REQUEST_STATUS_FAVICON](stateCopy);
+      expect(stateCopy.fetchingStatusFavicon).toEqual(true);
+    });
+  });
+
+  describe('RECEIVE_STATUS_FAVICON_SUCCESS', () => {
+    it('should set fetchingStatusFavicon to false', () => {
+      mutations[types.RECEIVE_STATUS_FAVICON_SUCCESS](stateCopy);
+      expect(stateCopy.fetchingStatusFavicon).toEqual(false);
+    });
+  });
+
+  describe('RECEIVE_STATUS_FAVICON_ERROR', () => {
+    it('should set fetchingStatusFavicon to false', () => {
+      mutations[types.RECEIVE_STATUS_FAVICON_ERROR](stateCopy);
+      expect(stateCopy.fetchingStatusFavicon).toEqual(false);
+    });
+  });
+
+  describe('RECEIVE_TRACE_SUCCESS', () => {
+    describe('when trace has state', () => {
+      it('sets traceState', () => {
+        const stateLog =
+          'eyJvZmZzZXQiOjczNDQ1MSwibl9vcGVuX3RhZ3MiOjAsImZnX2NvbG9yIjpudWxsLCJiZ19jb2xvciI6bnVsbCwic3R5bGVfbWFzayI6MH0=';
+        mutations[types.RECEIVE_TRACE_SUCCESS](stateCopy, {
+          state: stateLog,
+        });
+        expect(stateCopy.traceState).toEqual(stateLog);
+      });
+    });
+
+    describe('when traceSize is smaller than the total size', () => {
+      it('sets isTraceSizeVisible to true', () => {
+        mutations[types.RECEIVE_TRACE_SUCCESS](stateCopy, { total: 51184600, size: 1231 });
+
+        expect(stateCopy.isTraceSizeVisible).toEqual(true);
+      });
+    });
+
+    describe('when traceSize is bigger than the total size', () => {
+      it('sets isTraceSizeVisible to false', () => {
+        const copy = Object.assign({}, stateCopy, { traceSize: 5118460, size: 2321312 });
+
+        mutations[types.RECEIVE_TRACE_SUCCESS](copy, { total: 511846 });
+
+        expect(copy.isTraceSizeVisible).toEqual(false);
+      });
+    });
+
+    it('sets trace, trace size and isTraceComplete', () => {
+      mutations[types.RECEIVE_TRACE_SUCCESS](stateCopy, {
+        append: true,
+        html,
+        size: 511846,
+        complete: true,
+      });
+      expect(stateCopy.trace).toEqual(html);
+      expect(stateCopy.traceSize).toEqual(511846);
+      expect(stateCopy.isTraceComplete).toEqual(true);
+    });
+  });
+
+  describe('STOP_POLLING_TRACE', () => {
+    it('sets isTraceComplete to true', () => {
+      mutations[types.STOP_POLLING_TRACE](stateCopy);
+      expect(stateCopy.isTraceComplete).toEqual(true);
+    });
+  });
+
+  describe('RECEIVE_TRACE_ERROR', () => {
+    it('resets trace state and sets error to true', () => {
+      mutations[types.RECEIVE_TRACE_ERROR](stateCopy);
+      expect(stateCopy.isLoadingTrace).toEqual(false);
+      expect(stateCopy.isTraceComplete).toEqual(true);
+      expect(stateCopy.hasTraceError).toEqual(true);
+    });
+  });
+
+  describe('REQUEST_JOB', () => {
+    it('sets isLoading to true', () => {
+      mutations[types.REQUEST_JOB](stateCopy);
+
+      expect(stateCopy.isLoading).toEqual(true);
+    });
+  });
+
+  describe('RECEIVE_JOB_SUCCESS', () => {
+    beforeEach(() => {
+      mutations[types.RECEIVE_JOB_SUCCESS](stateCopy, { id: 1312321 });
+    });
+
+    it('sets is loading to false', () => {
+      expect(stateCopy.isLoading).toEqual(false);
+    });
+
+    it('sets hasError to false', () => {
+      expect(stateCopy.hasError).toEqual(false);
+    });
+
+    it('sets job data', () => {
+      expect(stateCopy.job).toEqual({ id: 1312321 });
+    });
+  });
+
+  describe('RECEIVE_JOB_ERROR', () => {
+    it('resets job data', () => {
+      mutations[types.RECEIVE_JOB_ERROR](stateCopy);
+
+      expect(stateCopy.isLoading).toEqual(false);
+      expect(stateCopy.hasError).toEqual(true);
+      expect(stateCopy.job).toEqual({});
+    });
+  });
+
+  describe('SCROLL_TO_TOP', () => {
+    beforeEach(() => {
+      mutations[types.SCROLL_TO_TOP](stateCopy);
+    });
+
+    it('sets isTraceScrolledToBottom to false', () => {
+      expect(stateCopy.isTraceScrolledToBottom).toEqual(false);
+    });
+
+    it('sets hasBeenScrolled to true', () => {
+      expect(stateCopy.hasBeenScrolled).toEqual(true);
+    });
+  });
+
+  describe('SCROLL_TO_BOTTOM', () => {
+    beforeEach(() => {
+      mutations[types.SCROLL_TO_BOTTOM](stateCopy);
+    });
+
+    it('sets isTraceScrolledToBottom to true', () => {
+      expect(stateCopy.isTraceScrolledToBottom).toEqual(true);
+    });
+
+    it('sets hasBeenScrolled to true', () => {
+      expect(stateCopy.hasBeenScrolled).toEqual(true);
+    });
+  });
+
+  describe('REQUEST_STAGES', () => {
+    it('sets isLoadingStages to true', () => {
+      mutations[types.REQUEST_STAGES](stateCopy);
+      expect(stateCopy.isLoadingStages).toEqual(true);
+    });
+  });
+
+  describe('RECEIVE_STAGES_SUCCESS', () => {
+    beforeEach(() => {
+      mutations[types.RECEIVE_STAGES_SUCCESS](stateCopy, [{ name: 'build' }]);
+    });
+
+    it('sets isLoadingStages to false', () => {
+      expect(stateCopy.isLoadingStages).toEqual(false);
+    });
+
+    it('sets stages', () => {
+      expect(stateCopy.stages).toEqual([{ name: 'build' }]);
+    });
+  });
+
+  describe('RECEIVE_STAGES_ERROR', () => {
+    beforeEach(() => {
+      mutations[types.RECEIVE_STAGES_ERROR](stateCopy);
+    });
+
+    it('sets isLoadingStages to false', () => {
+      expect(stateCopy.isLoadingStages).toEqual(false);
+    });
+
+    it('resets stages', () => {
+      expect(stateCopy.stages).toEqual([]);
+    });
+  });
+
+  describe('REQUEST_JOBS_FOR_STAGE', () => {
+    it('sets isLoadingStages to true', () => {
+      mutations[types.REQUEST_JOBS_FOR_STAGE](stateCopy);
+      expect(stateCopy.isLoadingJobs).toEqual(true);
+    });
+  });
+
+  describe('RECEIVE_JOBS_FOR_STAGE_SUCCESS', () => {
+    beforeEach(() => {
+      mutations[types.RECEIVE_JOBS_FOR_STAGE_SUCCESS](stateCopy, [{ name: 'karma' }]);
+    });
+
+    it('sets isLoadingJobs to false', () => {
+      expect(stateCopy.isLoadingJobs).toEqual(false);
+    });
+
+    it('sets jobs', () => {
+      expect(stateCopy.jobs).toEqual([{ name: 'karma' }]);
+    });
+  });
+
+  describe('RECEIVE_JOBS_FOR_STAGE_ERROR', () => {
+    beforeEach(() => {
+      mutations[types.RECEIVE_JOBS_FOR_STAGE_ERROR](stateCopy);
+    });
+
+    it('sets isLoadingJobs to false', () => {
+      expect(stateCopy.isLoadingJobs).toEqual(false);
+    });
+
+    it('resets jobs', () => {
+      expect(stateCopy.jobs).toEqual([]);
+    });
+  });
+});
diff --git a/spec/javascripts/lib/utils/common_utils_spec.js b/spec/javascripts/lib/utils/common_utils_spec.js
index 71b26a315af..babad296f09 100644
--- a/spec/javascripts/lib/utils/common_utils_spec.js
+++ b/spec/javascripts/lib/utils/common_utils_spec.js
@@ -403,6 +403,7 @@ describe('common_utils', () => {
     afterEach(() => {
       document.body.removeChild(document.getElementById('favicon'));
     });
+
     it('should set page favicon to provided favicon', () => {
       const faviconPath = '//custom_favicon';
       commonUtils.setFavicon(faviconPath);
@@ -479,17 +480,14 @@ describe('common_utils', () => {
     });
 
     it('should reset favicon in case of error', (done) => {
-      mock.onGet(BUILD_URL).networkError();
+      mock.onGet(BUILD_URL).replyOnce(500);
 
       commonUtils.setCiStatusFavicon(BUILD_URL)
-        .then(() => {
+        .catch(() => {
           const favicon = document.getElementById('favicon');
           expect(favicon.getAttribute('href')).toEqual(faviconDataUrl);
           done();
-        })
-        // Error is already caught in catch() block of setCiStatusFavicon,
-        // It won't throw another error for us to catch
-        .catch(done.fail);
+        });
     });
 
     it('should set page favicon to CI status favicon based on provided status', (done) => {