Merge branch 'ide-merge-requests-components' into 'master'

Show merge requests in IDE

Closes #45184

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

5 files changed, 311 insertions, 26 deletions

diff --git a/spec/javascripts/ide/components/merge_requests/dropdown_spec.js b/spec/javascripts/ide/components/merge_requests/dropdown_spec.js
new file mode 100644
index 00000000000..74884c9a362
--- /dev/null
+++ b/spec/javascripts/ide/components/merge_requests/dropdown_spec.js
@@ -0,0 +1,47 @@
+import Vue from 'vue';
+import { createStore } from '~/ide/stores';
+import Dropdown from '~/ide/components/merge_requests/dropdown.vue';
+import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+import { mergeRequests } from '../../mock_data';
+
+describe('IDE merge requests dropdown', () => {
+  const Component = Vue.extend(Dropdown);
+  let vm;
+
+  beforeEach(() => {
+    const store = createStore();
+
+    vm = createComponentWithStore(Component, store, { show: false }).$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('does not render tabs when show is false', () => {
+    expect(vm.$el.querySelector('.nav-links')).toBe(null);
+  });
+
+  describe('when show is true', () => {
+    beforeEach(done => {
+      vm.show = true;
+      vm.$store.state.mergeRequests.assigned.mergeRequests.push(mergeRequests[0]);
+
+      vm.$nextTick(done);
+    });
+
+    it('renders tabs', () => {
+      expect(vm.$el.querySelector('.nav-links')).not.toBe(null);
+    });
+
+    it('renders count for assigned & created data', () => {
+      expect(vm.$el.querySelector('.nav-links a').textContent).toContain('Created by me');
+      expect(vm.$el.querySelector('.nav-links a .badge').textContent).toContain('0');
+
+      expect(vm.$el.querySelectorAll('.nav-links a')[1].textContent).toContain('Assigned to me');
+      expect(
+        vm.$el.querySelectorAll('.nav-links a')[1].querySelector('.badge').textContent,
+      ).toContain('1');
+    });
+  });
+});
diff --git a/spec/javascripts/ide/components/merge_requests/item_spec.js b/spec/javascripts/ide/components/merge_requests/item_spec.js
new file mode 100644
index 00000000000..51c4cddef2f
--- /dev/null
+++ b/spec/javascripts/ide/components/merge_requests/item_spec.js
@@ -0,0 +1,61 @@
+import Vue from 'vue';
+import Item from '~/ide/components/merge_requests/item.vue';
+import mountCompontent from '../../../helpers/vue_mount_component_helper';
+
+describe('IDE merge request item', () => {
+  const Component = Vue.extend(Item);
+  let vm;
+
+  beforeEach(() => {
+    vm = mountCompontent(Component, {
+      item: {
+        iid: 1,
+        projectPathWithNamespace: 'gitlab-org/gitlab-ce',
+        title: 'Merge request title',
+      },
+      currentId: '1',
+      currentProjectId: 'gitlab-org/gitlab-ce',
+    });
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('renders merge requests data', () => {
+    expect(vm.$el.textContent).toContain('Merge request title');
+    expect(vm.$el.textContent).toContain('gitlab-org/gitlab-ce!1');
+  });
+
+  it('renders icon if ID matches currentId', () => {
+    expect(vm.$el.querySelector('.ic-mobile-issue-close')).not.toBe(null);
+  });
+
+  it('does not render icon if ID does not match currentId', done => {
+    vm.currentId = '2';
+
+    vm.$nextTick(() => {
+      expect(vm.$el.querySelector('.ic-mobile-issue-close')).toBe(null);
+
+      done();
+    });
+  });
+
+  it('does not render icon if project ID does not match', done => {
+    vm.currentProjectId = 'test/test';
+
+    vm.$nextTick(() => {
+      expect(vm.$el.querySelector('.ic-mobile-issue-close')).toBe(null);
+
+      done();
+    });
+  });
+
+  it('emits click event on click', () => {
+    spyOn(vm, '$emit');
+
+    vm.$el.click();
+
+    expect(vm.$emit).toHaveBeenCalledWith('click', vm.item);
+  });
+});
diff --git a/spec/javascripts/ide/components/merge_requests/list_spec.js b/spec/javascripts/ide/components/merge_requests/list_spec.js
new file mode 100644
index 00000000000..f4b393778dc
--- /dev/null
+++ b/spec/javascripts/ide/components/merge_requests/list_spec.js
@@ -0,0 +1,126 @@
+import Vue from 'vue';
+import store from '~/ide/stores';
+import List from '~/ide/components/merge_requests/list.vue';
+import { createComponentWithStore } from '../../../helpers/vue_mount_component_helper';
+import { mergeRequests } from '../../mock_data';
+import { resetStore } from '../../helpers';
+
+describe('IDE merge requests list', () => {
+  const Component = Vue.extend(List);
+  let vm;
+
+  beforeEach(() => {
+    vm = createComponentWithStore(Component, store, {
+      type: 'created',
+      emptyText: 'empty text',
+    });
+
+    spyOn(vm, 'fetchMergeRequests');
+
+    vm.$mount();
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+
+    resetStore(vm.$store);
+  });
+
+  it('calls fetch on mounted', () => {
+    expect(vm.fetchMergeRequests).toHaveBeenCalledWith({
+      type: 'created',
+      search: '',
+    });
+  });
+
+  it('renders loading icon', done => {
+    vm.$store.state.mergeRequests.created.isLoading = true;
+
+    vm.$nextTick(() => {
+      expect(vm.$el.querySelector('.loading-container')).not.toBe(null);
+
+      done();
+    });
+  });
+
+  it('renders empty text when no merge requests exist', () => {
+    expect(vm.$el.textContent).toContain('empty text');
+  });
+
+  it('renders no search results text when search is not empty', done => {
+    vm.search = 'testing';
+
+    vm.$nextTick(() => {
+      expect(vm.$el.textContent).toContain('No merge requests found');
+
+      done();
+    });
+  });
+
+  describe('with merge requests', () => {
+    beforeEach(done => {
+      vm.$store.state.mergeRequests.created.mergeRequests.push({
+        ...mergeRequests[0],
+        projectPathWithNamespace: 'gitlab-org/gitlab-ce',
+      });
+
+      vm.$nextTick(done);
+    });
+
+    it('renders list', () => {
+      expect(vm.$el.querySelectorAll('li').length).toBe(1);
+      expect(vm.$el.querySelector('li').textContent).toContain(mergeRequests[0].title);
+    });
+
+    it('calls openMergeRequest when clicking merge request', done => {
+      spyOn(vm, 'openMergeRequest');
+      vm.$el.querySelector('li button').click();
+
+      vm.$nextTick(() => {
+        expect(vm.openMergeRequest).toHaveBeenCalledWith({
+          projectPath: 'gitlab-org/gitlab-ce',
+          id: 1,
+        });
+
+        done();
+      });
+    });
+  });
+
+  describe('focusSearch', () => {
+    it('focuses search input when loading is false', done => {
+      spyOn(vm.$refs.searchInput, 'focus');
+
+      vm.$store.state.mergeRequests.created.isLoading = false;
+      vm.focusSearch();
+
+      vm.$nextTick(() => {
+        expect(vm.$refs.searchInput.focus).toHaveBeenCalled();
+
+        done();
+      });
+    });
+  });
+
+  describe('searchMergeRequests', () => {
+    beforeEach(() => {
+      spyOn(vm, 'loadMergeRequests');
+
+      jasmine.clock().install();
+    });
+
+    afterEach(() => {
+      jasmine.clock().uninstall();
+    });
+
+    it('calls loadMergeRequests on input in search field', () => {
+      const event = new Event('input');
+
+      vm.$el.querySelector('input').dispatchEvent(event);
+
+      jasmine.clock().tick(300);
+
+      expect(vm.loadMergeRequests).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/spec/javascripts/ide/stores/modules/merge_requests/actions_spec.js b/spec/javascripts/ide/stores/modules/merge_requests/actions_spec.js
index b571cfb963a..d178a44b76a 100644
--- a/spec/javascripts/ide/stores/modules/merge_requests/actions_spec.js
+++ b/spec/javascripts/ide/stores/modules/merge_requests/actions_spec.js
@@ -8,7 +8,9 @@ import actions, {
   receiveMergeRequestsSuccess,
   fetchMergeRequests,
   resetMergeRequests,
+  openMergeRequest,
 } from '~/ide/stores/modules/merge_requests/actions';
+import router from '~/ide/ide_router';
 import { mergeRequests } from '../../../mock_data';
 import testAction from '../../../../helpers/vuex_action_helper';
 
@@ -29,9 +31,9 @@ describe('IDE merge requests actions', () => {
     it('should should commit request', done => {
       testAction(
         requestMergeRequests,
-        null,
+        'created',
         mockedState,
-        [{ type: types.REQUEST_MERGE_REQUESTS }],
+        [{ type: types.REQUEST_MERGE_REQUESTS, payload: 'created' }],
         [],
         done,
       );
@@ -48,16 +50,16 @@ describe('IDE merge requests actions', () => {
     it('should should commit error', done => {
       testAction(
         receiveMergeRequestsError,
-        null,
+        'created',
         mockedState,
-        [{ type: types.RECEIVE_MERGE_REQUESTS_ERROR }],
+        [{ type: types.RECEIVE_MERGE_REQUESTS_ERROR, payload: 'created' }],
         [],
         done,
       );
     });
 
     it('creates flash message', () => {
-      receiveMergeRequestsError({ commit() {} });
+      receiveMergeRequestsError({ commit() {} }, 'created');
 
       expect(flashSpy).toHaveBeenCalled();
     });
@@ -67,9 +69,14 @@ describe('IDE merge requests actions', () => {
     it('should commit received data', done => {
       testAction(
         receiveMergeRequestsSuccess,
-        'data',
+        { type: 'created', data: 'data' },
         mockedState,
-        [{ type: types.RECEIVE_MERGE_REQUESTS_SUCCESS, payload: 'data' }],
+        [
+          {
+            type: types.RECEIVE_MERGE_REQUESTS_SUCCESS,
+            payload: { type: 'created', data: 'data' },
+          },
+        ],
         [],
         done,
       );
@@ -86,14 +93,14 @@ describe('IDE merge requests actions', () => {
         mock.onGet(/\/api\/v4\/merge_requests(.*)$/).replyOnce(200, mergeRequests);
       });
 
-      it('calls API with params from state', () => {
+      it('calls API with params', () => {
         const apiSpy = spyOn(axios, 'get').and.callThrough();
 
-        fetchMergeRequests({ dispatch() {}, state: mockedState });
+        fetchMergeRequests({ dispatch() {}, state: mockedState }, { type: 'created' });
 
         expect(apiSpy).toHaveBeenCalledWith(jasmine.anything(), {
           params: {
-            scope: 'assigned-to-me',
+            scope: 'created-by-me',
             state: 'opened',
             search: '',
           },
@@ -103,11 +110,14 @@ describe('IDE merge requests actions', () => {
       it('calls API with search', () => {
         const apiSpy = spyOn(axios, 'get').and.callThrough();
 
-        fetchMergeRequests({ dispatch() {}, state: mockedState }, 'testing search');
+        fetchMergeRequests(
+          { dispatch() {}, state: mockedState },
+          { type: 'created', search: 'testing search' },
+        );
 
         expect(apiSpy).toHaveBeenCalledWith(jasmine.anything(), {
           params: {
-            scope: 'assigned-to-me',
+            scope: 'created-by-me',
             state: 'opened',
             search: 'testing search',
           },
@@ -117,7 +127,7 @@ describe('IDE merge requests actions', () => {
       it('dispatches request', done => {
         testAction(
           fetchMergeRequests,
-          null,
+          { type: 'created' },
           mockedState,
           [],
           [
@@ -132,13 +142,16 @@ describe('IDE merge requests actions', () => {
       it('dispatches success with received data', done => {
         testAction(
           fetchMergeRequests,
-          null,
+          { type: 'created' },
           mockedState,
           [],
           [
             { type: 'requestMergeRequests' },
             { type: 'resetMergeRequests' },
-            { type: 'receiveMergeRequestsSuccess', payload: mergeRequests },
+            {
+              type: 'receiveMergeRequestsSuccess',
+              payload: { type: 'created', data: mergeRequests },
+            },
           ],
           done,
         );
@@ -153,7 +166,7 @@ describe('IDE merge requests actions', () => {
       it('dispatches error', done => {
         testAction(
           fetchMergeRequests,
-          null,
+          { type: 'created' },
           mockedState,
           [],
           [
@@ -171,12 +184,47 @@ describe('IDE merge requests actions', () => {
     it('commits reset', done => {
       testAction(
         resetMergeRequests,
-        null,
+        'created',
         mockedState,
-        [{ type: types.RESET_MERGE_REQUESTS }],
+        [{ type: types.RESET_MERGE_REQUESTS, payload: 'created' }],
         [],
         done,
       );
     });
   });
+
+  describe('openMergeRequest', () => {
+    beforeEach(() => {
+      spyOn(router, 'push');
+    });
+
+    it('commits reset mutations and actions', done => {
+      testAction(
+        openMergeRequest,
+        { projectPath: 'gitlab-org/gitlab-ce', id: '1' },
+        mockedState,
+        [
+          { type: 'CLEAR_PROJECTS' },
+          { type: 'SET_CURRENT_MERGE_REQUEST', payload: '1' },
+          { type: 'RESET_OPEN_FILES' },
+        ],
+        [
+          { type: 'pipelines/stopPipelinePolling' },
+          { type: 'pipelines/clearEtagPoll' },
+          { type: 'pipelines/resetLatestPipeline' },
+          { type: 'setCurrentBranchId', payload: '' },
+        ],
+        done,
+      );
+    });
+
+    it('pushes new route', () => {
+      openMergeRequest(
+        { commit() {}, dispatch() {} },
+        { projectPath: 'gitlab-org/gitlab-ce', id: '1' },
+      );
+
+      expect(router.push).toHaveBeenCalledWith('/project/gitlab-org/gitlab-ce/merge_requests/1');
+    });
+  });
 });
diff --git a/spec/javascripts/ide/stores/modules/merge_requests/mutations_spec.js b/spec/javascripts/ide/stores/modules/merge_requests/mutations_spec.js
index 664d3914564..ea03131d90d 100644
--- a/spec/javascripts/ide/stores/modules/merge_requests/mutations_spec.js
+++ b/spec/javascripts/ide/stores/modules/merge_requests/mutations_spec.js
@@ -12,26 +12,29 @@ describe('IDE merge requests mutations', () => {
 
   describe(types.REQUEST_MERGE_REQUESTS, () => {
     it('sets loading to true', () => {
-      mutations[types.REQUEST_MERGE_REQUESTS](mockedState);
+      mutations[types.REQUEST_MERGE_REQUESTS](mockedState, 'created');
 
-      expect(mockedState.isLoading).toBe(true);
+      expect(mockedState.created.isLoading).toBe(true);
     });
   });
 
   describe(types.RECEIVE_MERGE_REQUESTS_ERROR, () => {
     it('sets loading to false', () => {
-      mutations[types.RECEIVE_MERGE_REQUESTS_ERROR](mockedState);
+      mutations[types.RECEIVE_MERGE_REQUESTS_ERROR](mockedState, 'created');
 
-      expect(mockedState.isLoading).toBe(false);
+      expect(mockedState.created.isLoading).toBe(false);
     });
   });
 
   describe(types.RECEIVE_MERGE_REQUESTS_SUCCESS, () => {
     it('sets merge requests', () => {
       gon.gitlab_url = gl.TEST_HOST;
-      mutations[types.RECEIVE_MERGE_REQUESTS_SUCCESS](mockedState, mergeRequests);
+      mutations[types.RECEIVE_MERGE_REQUESTS_SUCCESS](mockedState, {
+        type: 'created',
+        data: mergeRequests,
+      });
 
-      expect(mockedState.mergeRequests).toEqual([
+      expect(mockedState.created.mergeRequests).toEqual([
         {
           id: 1,
           iid: 1,
@@ -47,9 +50,9 @@ describe('IDE merge requests mutations', () => {
     it('clears merge request array', () => {
       mockedState.mergeRequests = ['test'];
 
-      mutations[types.RESET_MERGE_REQUESTS](mockedState);
+      mutations[types.RESET_MERGE_REQUESTS](mockedState, 'created');
 
-      expect(mockedState.mergeRequests).toEqual([]);
+      expect(mockedState.created.mergeRequests).toEqual([]);
     });
   });
 });