Merge branch 'ide-jobs-list' into 'master'

Pipelines store actions & states in web IDE

Closes #44604

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

5 files changed, 527 insertions, 2 deletions

diff --git a/spec/javascripts/helpers/vuex_action_helper.js b/spec/javascripts/helpers/vuex_action_helper.js
index 83f29d1b0c2..d6ab0aeeed7 100644
--- a/spec/javascripts/helpers/vuex_action_helper.js
+++ b/spec/javascripts/helpers/vuex_action_helper.js
@@ -55,7 +55,7 @@ export default (action, payload, state, expectedMutations, expectedActions, done
   };
 
   // call the action with mocked store and arguments
-  action({ commit, state, dispatch }, payload);
+  action({ commit, state, dispatch, rootState: state }, payload);
 
   // check if no mutations should have been dispatched
   if (expectedMutations.length === 0) {
diff --git a/spec/javascripts/ide/mock_data.js b/spec/javascripts/ide/mock_data.js
index c059862b9d1..7e641c7984b 100644
--- a/spec/javascripts/ide/mock_data.js
+++ b/spec/javascripts/ide/mock_data.js
@@ -1,4 +1,3 @@
-// eslint-disable-next-line import/prefer-default-export
 export const projectData = {
   id: 1,
   name: 'abcproject',
@@ -14,3 +13,49 @@ export const projectData = {
   mergeRequests: {},
   merge_requests_enabled: true,
 };
+
+export const pipelines = [
+  {
+    id: 1,
+    ref: 'master',
+    sha: '123',
+    status: 'failed',
+  },
+  {
+    id: 2,
+    ref: 'master',
+    sha: '213',
+    status: 'success',
+  },
+];
+
+export const jobs = [
+  {
+    id: 1,
+    name: 'test',
+    status: 'failed',
+    stage: 'test',
+    duration: 1,
+  },
+  {
+    id: 2,
+    name: 'test 2',
+    status: 'failed',
+    stage: 'test',
+    duration: 1,
+  },
+  {
+    id: 3,
+    name: 'test 3',
+    status: 'failed',
+    stage: 'test',
+    duration: 1,
+  },
+  {
+    id: 4,
+    name: 'test 3',
+    status: 'failed',
+    stage: 'build',
+    duration: 1,
+  },
+];
diff --git a/spec/javascripts/ide/stores/modules/pipelines/actions_spec.js b/spec/javascripts/ide/stores/modules/pipelines/actions_spec.js
new file mode 100644
index 00000000000..85fbcf8084b
--- /dev/null
+++ b/spec/javascripts/ide/stores/modules/pipelines/actions_spec.js
@@ -0,0 +1,289 @@
+import MockAdapter from 'axios-mock-adapter';
+import axios from '~/lib/utils/axios_utils';
+import actions, {
+  requestLatestPipeline,
+  receiveLatestPipelineError,
+  receiveLatestPipelineSuccess,
+  fetchLatestPipeline,
+  requestJobs,
+  receiveJobsError,
+  receiveJobsSuccess,
+  fetchJobs,
+} from '~/ide/stores/modules/pipelines/actions';
+import state from '~/ide/stores/modules/pipelines/state';
+import * as types from '~/ide/stores/modules/pipelines/mutation_types';
+import testAction from '../../../../helpers/vuex_action_helper';
+import { pipelines, jobs } from '../../../mock_data';
+
+describe('IDE pipelines actions', () => {
+  let mockedState;
+  let mock;
+
+  beforeEach(() => {
+    mockedState = state();
+    mock = new MockAdapter(axios);
+
+    gon.api_version = 'v4';
+    mockedState.currentProjectId = 'test/project';
+  });
+
+  afterEach(() => {
+    mock.restore();
+  });
+
+  describe('requestLatestPipeline', () => {
+    it('commits request', done => {
+      testAction(
+        requestLatestPipeline,
+        null,
+        mockedState,
+        [{ type: types.REQUEST_LATEST_PIPELINE }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('receiveLatestPipelineError', () => {
+    it('commits error', done => {
+      testAction(
+        receiveLatestPipelineError,
+        null,
+        mockedState,
+        [{ type: types.RECEIVE_LASTEST_PIPELINE_ERROR }],
+        [],
+        done,
+      );
+    });
+
+    it('creates flash message', () => {
+      const flashSpy = spyOnDependency(actions, 'flash');
+
+      receiveLatestPipelineError({ commit() {} });
+
+      expect(flashSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('receiveLatestPipelineSuccess', () => {
+    it('commits pipeline', done => {
+      testAction(
+        receiveLatestPipelineSuccess,
+        pipelines[0],
+        mockedState,
+        [{ type: types.RECEIVE_LASTEST_PIPELINE_SUCCESS, payload: pipelines[0] }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('fetchLatestPipeline', () => {
+    describe('success', () => {
+      beforeEach(() => {
+        mock.onGet(/\/api\/v4\/projects\/(.*)\/pipelines(.*)/).replyOnce(200, pipelines);
+      });
+
+      it('dispatches request', done => {
+        testAction(
+          fetchLatestPipeline,
+          '123',
+          mockedState,
+          [],
+          [{ type: 'requestLatestPipeline' }, { type: 'receiveLatestPipelineSuccess' }],
+          done,
+        );
+      });
+
+      it('dispatches success with latest pipeline', done => {
+        testAction(
+          fetchLatestPipeline,
+          '123',
+          mockedState,
+          [],
+          [
+            { type: 'requestLatestPipeline' },
+            { type: 'receiveLatestPipelineSuccess', payload: pipelines[0] },
+          ],
+          done,
+        );
+      });
+
+      it('calls axios with correct params', () => {
+        const apiSpy = spyOn(axios, 'get').and.callThrough();
+
+        fetchLatestPipeline({ dispatch() {}, rootState: state }, '123');
+
+        expect(apiSpy).toHaveBeenCalledWith(jasmine.anything(), {
+          params: {
+            sha: '123',
+            per_page: '1',
+          },
+        });
+      });
+    });
+
+    describe('error', () => {
+      beforeEach(() => {
+        mock.onGet(/\/api\/v4\/projects\/(.*)\/pipelines(.*)/).replyOnce(500);
+      });
+
+      it('dispatches error', done => {
+        testAction(
+          fetchLatestPipeline,
+          '123',
+          mockedState,
+          [],
+          [{ type: 'requestLatestPipeline' }, { type: 'receiveLatestPipelineError' }],
+          done,
+        );
+      });
+    });
+  });
+
+  describe('requestJobs', () => {
+    it('commits request', done => {
+      testAction(requestJobs, null, mockedState, [{ type: types.REQUEST_JOBS }], [], done);
+    });
+  });
+
+  describe('receiveJobsError', () => {
+    it('commits error', done => {
+      testAction(
+        receiveJobsError,
+        null,
+        mockedState,
+        [{ type: types.RECEIVE_JOBS_ERROR }],
+        [],
+        done,
+      );
+    });
+
+    it('creates flash message', () => {
+      const flashSpy = spyOnDependency(actions, 'flash');
+
+      receiveJobsError({ commit() {} });
+
+      expect(flashSpy).toHaveBeenCalled();
+    });
+  });
+
+  describe('receiveJobsSuccess', () => {
+    it('commits jobs', done => {
+      testAction(
+        receiveJobsSuccess,
+        jobs,
+        mockedState,
+        [{ type: types.RECEIVE_JOBS_SUCCESS, payload: jobs }],
+        [],
+        done,
+      );
+    });
+  });
+
+  describe('fetchJobs', () => {
+    let page = '';
+
+    beforeEach(() => {
+      mockedState.latestPipeline = pipelines[0];
+    });
+
+    describe('success', () => {
+      beforeEach(() => {
+        mock.onGet(/\/api\/v4\/projects\/(.*)\/pipelines\/(.*)\/jobs/).replyOnce(() => [
+          200,
+          jobs,
+          {
+            'x-next-page': page,
+          },
+        ]);
+      });
+
+      it('dispatches request', done => {
+        testAction(
+          fetchJobs,
+          null,
+          mockedState,
+          [],
+          [{ type: 'requestJobs' }, { type: 'receiveJobsSuccess' }],
+          done,
+        );
+      });
+
+      it('dispatches success with latest pipeline', done => {
+        testAction(
+          fetchJobs,
+          null,
+          mockedState,
+          [],
+          [{ type: 'requestJobs' }, { type: 'receiveJobsSuccess', payload: jobs }],
+          done,
+        );
+      });
+
+      it('dispatches twice for both pages', done => {
+        page = '2';
+
+        testAction(
+          fetchJobs,
+          null,
+          mockedState,
+          [],
+          [
+            { type: 'requestJobs' },
+            { type: 'receiveJobsSuccess', payload: jobs },
+            { type: 'fetchJobs', payload: '2' },
+            { type: 'requestJobs' },
+            { type: 'receiveJobsSuccess', payload: jobs },
+          ],
+          done,
+        );
+      });
+
+      it('calls axios with correct URL', () => {
+        const apiSpy = spyOn(axios, 'get').and.callThrough();
+
+        fetchJobs({ dispatch() {}, state: mockedState, rootState: mockedState });
+
+        expect(apiSpy).toHaveBeenCalledWith('/api/v4/projects/test%2Fproject/pipelines/1/jobs', {
+          params: { page: '1' },
+        });
+      });
+
+      it('calls axios with page next page', () => {
+        const apiSpy = spyOn(axios, 'get').and.callThrough();
+
+        fetchJobs({ dispatch() {}, state: mockedState, rootState: mockedState });
+
+        expect(apiSpy).toHaveBeenCalledWith('/api/v4/projects/test%2Fproject/pipelines/1/jobs', {
+          params: { page: '1' },
+        });
+
+        page = '2';
+
+        fetchJobs({ dispatch() {}, state: mockedState, rootState: mockedState }, page);
+
+        expect(apiSpy).toHaveBeenCalledWith('/api/v4/projects/test%2Fproject/pipelines/1/jobs', {
+          params: { page: '2' },
+        });
+      });
+    });
+
+    describe('error', () => {
+      beforeEach(() => {
+        mock.onGet(/\/api\/v4\/projects\/(.*)\/pipelines(.*)/).replyOnce(500);
+      });
+
+      it('dispatches error', done => {
+        testAction(
+          fetchJobs,
+          null,
+          mockedState,
+          [],
+          [{ type: 'requestJobs' }, { type: 'receiveJobsError' }],
+          done,
+        );
+      });
+    });
+  });
+});
diff --git a/spec/javascripts/ide/stores/modules/pipelines/getters_spec.js b/spec/javascripts/ide/stores/modules/pipelines/getters_spec.js
new file mode 100644
index 00000000000..b2a7e8a9025
--- /dev/null
+++ b/spec/javascripts/ide/stores/modules/pipelines/getters_spec.js
@@ -0,0 +1,71 @@
+import * as getters from '~/ide/stores/modules/pipelines/getters';
+import state from '~/ide/stores/modules/pipelines/state';
+
+describe('IDE pipeline getters', () => {
+  let mockedState;
+
+  beforeEach(() => {
+    mockedState = state();
+  });
+
+  describe('hasLatestPipeline', () => {
+    it('returns false when loading is true', () => {
+      mockedState.isLoadingPipeline = true;
+
+      expect(getters.hasLatestPipeline(mockedState)).toBe(false);
+    });
+
+    it('returns false when pipelines is null', () => {
+      mockedState.latestPipeline = null;
+
+      expect(getters.hasLatestPipeline(mockedState)).toBe(false);
+    });
+
+    it('returns false when loading is true & pipelines is null', () => {
+      mockedState.latestPipeline = null;
+      mockedState.isLoadingPipeline = true;
+
+      expect(getters.hasLatestPipeline(mockedState)).toBe(false);
+    });
+
+    it('returns true when loading is false & pipelines is an object', () => {
+      mockedState.latestPipeline = {
+        id: 1,
+      };
+      mockedState.isLoadingPipeline = false;
+
+      expect(getters.hasLatestPipeline(mockedState)).toBe(true);
+    });
+  });
+
+  describe('failedJobs', () => {
+    it('returns array of failed jobs', () => {
+      mockedState.stages = [
+        {
+          title: 'test',
+          jobs: [{ id: 1, status: 'failed' }, { id: 2, status: 'success' }],
+        },
+        {
+          title: 'build',
+          jobs: [{ id: 3, status: 'failed' }, { id: 4, status: 'failed' }],
+        },
+      ];
+
+      expect(getters.failedJobs(mockedState).length).toBe(3);
+      expect(getters.failedJobs(mockedState)).toEqual([
+        {
+          id: 1,
+          status: jasmine.anything(),
+        },
+        {
+          id: 3,
+          status: jasmine.anything(),
+        },
+        {
+          id: 4,
+          status: jasmine.anything(),
+        },
+      ]);
+    });
+  });
+});
diff --git a/spec/javascripts/ide/stores/modules/pipelines/mutations_spec.js b/spec/javascripts/ide/stores/modules/pipelines/mutations_spec.js
new file mode 100644
index 00000000000..8262e916243
--- /dev/null
+++ b/spec/javascripts/ide/stores/modules/pipelines/mutations_spec.js
@@ -0,0 +1,120 @@
+import mutations from '~/ide/stores/modules/pipelines/mutations';
+import state from '~/ide/stores/modules/pipelines/state';
+import * as types from '~/ide/stores/modules/pipelines/mutation_types';
+import { pipelines, jobs } from '../../../mock_data';
+
+describe('IDE pipelines mutations', () => {
+  let mockedState;
+
+  beforeEach(() => {
+    mockedState = state();
+  });
+
+  describe(types.REQUEST_LATEST_PIPELINE, () => {
+    it('sets loading to true', () => {
+      mutations[types.REQUEST_LATEST_PIPELINE](mockedState);
+
+      expect(mockedState.isLoadingPipeline).toBe(true);
+    });
+  });
+
+  describe(types.RECEIVE_LASTEST_PIPELINE_ERROR, () => {
+    it('sets loading to false', () => {
+      mutations[types.RECEIVE_LASTEST_PIPELINE_ERROR](mockedState);
+
+      expect(mockedState.isLoadingPipeline).toBe(false);
+    });
+  });
+
+  describe(types.RECEIVE_LASTEST_PIPELINE_SUCCESS, () => {
+    it('sets loading to false on success', () => {
+      mutations[types.RECEIVE_LASTEST_PIPELINE_SUCCESS](mockedState, pipelines[0]);
+
+      expect(mockedState.isLoadingPipeline).toBe(false);
+    });
+
+    it('sets latestPipeline', () => {
+      mutations[types.RECEIVE_LASTEST_PIPELINE_SUCCESS](mockedState, pipelines[0]);
+
+      expect(mockedState.latestPipeline).toEqual({
+        id: pipelines[0].id,
+        status: pipelines[0].status,
+      });
+    });
+
+    it('does not set latest pipeline if pipeline is null', () => {
+      mutations[types.RECEIVE_LASTEST_PIPELINE_SUCCESS](mockedState, null);
+
+      expect(mockedState.latestPipeline).toEqual(null);
+    });
+  });
+
+  describe(types.REQUEST_JOBS, () => {
+    it('sets jobs loading to true', () => {
+      mutations[types.REQUEST_JOBS](mockedState);
+
+      expect(mockedState.isLoadingJobs).toBe(true);
+    });
+  });
+
+  describe(types.RECEIVE_JOBS_ERROR, () => {
+    it('sets jobs loading to false', () => {
+      mutations[types.RECEIVE_JOBS_ERROR](mockedState);
+
+      expect(mockedState.isLoadingJobs).toBe(false);
+    });
+  });
+
+  describe(types.RECEIVE_JOBS_SUCCESS, () => {
+    it('sets jobs loading to false on success', () => {
+      mutations[types.RECEIVE_JOBS_SUCCESS](mockedState, jobs);
+
+      expect(mockedState.isLoadingJobs).toBe(false);
+    });
+
+    it('sets stages', () => {
+      mutations[types.RECEIVE_JOBS_SUCCESS](mockedState, jobs);
+
+      expect(mockedState.stages.length).toBe(2);
+      expect(mockedState.stages).toEqual([
+        {
+          title: 'test',
+          jobs: jasmine.anything(),
+        },
+        {
+          title: 'build',
+          jobs: jasmine.anything(),
+        },
+      ]);
+    });
+
+    it('sets jobs in stages', () => {
+      mutations[types.RECEIVE_JOBS_SUCCESS](mockedState, jobs);
+
+      expect(mockedState.stages[0].jobs.length).toBe(3);
+      expect(mockedState.stages[1].jobs.length).toBe(1);
+      expect(mockedState.stages).toEqual([
+        {
+          title: jasmine.anything(),
+          jobs: jobs.filter(job => job.stage === 'test').map(job => ({
+            id: job.id,
+            name: job.name,
+            status: job.status,
+            stage: job.stage,
+            duration: job.duration,
+          })),
+        },
+        {
+          title: jasmine.anything(),
+          jobs: jobs.filter(job => job.stage === 'build').map(job => ({
+            id: job.id,
+            name: job.name,
+            status: job.status,
+            stage: job.stage,
+            duration: job.duration,
+          })),
+        },
+      ]);
+    });
+  });
+});