Load participants async

21 files changed, 502 insertions, 125 deletions

diff --git a/spec/controllers/projects/merge_requests_controller_spec.rb b/spec/controllers/projects/merge_requests_controller_spec.rb
index b7cccddefdd..52ef8c6a589 100644
--- a/spec/controllers/projects/merge_requests_controller_spec.rb
+++ b/spec/controllers/projects/merge_requests_controller_spec.rb
@@ -83,15 +83,15 @@ describe Projects::MergeRequestsController do
     end
 
     describe 'as json' do
-      context 'with basic param' do
+      context 'with basic serializer param' do
         it 'renders basic MR entity as json' do
-          go(basic: true, format: :json)
+          go(serializer: 'basic', format: :json)
 
           expect(response).to match_response_schema('entities/merge_request_basic')
         end
       end
 
-      context 'without basic param' do
+      context 'without basic serializer param' do
         it 'renders the merge request in the json format' do
           go(format: :json)
 
diff --git a/spec/features/boards/boards_spec.rb b/spec/features/boards/boards_spec.rb
index 60ed17c0c81..ebe6939df4c 100644
--- a/spec/features/boards/boards_spec.rb
+++ b/spec/features/boards/boards_spec.rb
@@ -538,7 +538,7 @@ describe 'Issue Boards', :js do
     end
 
     it 'does not show create new list' do
-      expect(page).not_to have_selector('.js-new-board-list')
+      expect(page).not_to have_button('.js-new-board-list')
     end
 
     it 'does not allow dragging' do
diff --git a/spec/features/projects/merge_requests/user_manages_subscription_spec.rb b/spec/features/projects/merge_requests/user_manages_subscription_spec.rb
index 30a80f8e652..4ca435491cb 100644
--- a/spec/features/projects/merge_requests/user_manages_subscription_spec.rb
+++ b/spec/features/projects/merge_requests/user_manages_subscription_spec.rb
@@ -13,7 +13,7 @@ describe 'User manages subscription', :js do
   end
 
   it 'toggles subscription' do
-    subscribe_button = find('.issuable-subscribe-button span')
+    subscribe_button = find('.js-issuable-subscribe-button')
 
     expect(subscribe_button).to have_content('Subscribe')
 
diff --git a/spec/fixtures/api/schemas/entities/issue.json b/spec/fixtures/api/schemas/entities/issue.json
new file mode 100644
index 00000000000..3d3329a3406
--- /dev/null
+++ b/spec/fixtures/api/schemas/entities/issue.json
@@ -0,0 +1,44 @@
+{
+  "type": "object",
+  "properties" : {
+    "id": { "type": "integer" },
+    "iid": { "type": "integer" },
+    "author_id": { "type": "integer" },
+    "description": { "type": ["string", "null"] },
+    "lock_version": { "type": ["string", "null"] },
+    "milestone_id": { "type": ["string", "null"] },
+    "title": { "type": "string" },
+    "moved_to_id": { "type": ["integer", "null"] },
+    "project_id": { "type": "integer" },
+    "web_url": { "type": "string" },
+    "state": { "type": "string" },
+    "create_note_path": { "type": "string" },
+    "preview_note_path": { "type": "string" },
+    "current_user": {
+      "type": "object",
+      "properties": {
+        "can_create_note": { "type": "boolean" },
+        "can_update": { "type": "boolean" }
+      }
+    },
+    "created_at": { "type": "date-time" },
+    "updated_at": { "type": "date-time" },
+    "branch_name": { "type": ["string", "null"] },
+    "due_date": { "type": "date" },
+    "confidential": { "type": "boolean" },
+    "discussion_locked": { "type": ["boolean", "null"] },
+    "updated_by_id": { "type": ["string", "null"] },
+    "deleted_at": { "type": ["string", "null"] },
+    "time_estimate": { "type": "integer" },
+    "total_time_spent": { "type": "integer" },
+    "human_time_estimate": { "type": ["integer", "null"] },
+    "human_total_time_spent": { "type": ["integer", "null"] },
+    "milestone": { "type": ["object", "null"] },
+    "labels": {
+      "type": "array",
+      "items": { "$ref": "label.json" }
+    },
+    "assignees": { "type": ["array", "null"] }
+  },
+  "additionalProperties": false
+}
diff --git a/spec/fixtures/api/schemas/entities/issue_sidebar.json b/spec/fixtures/api/schemas/entities/issue_sidebar.json
new file mode 100644
index 00000000000..682e345d5f5
--- /dev/null
+++ b/spec/fixtures/api/schemas/entities/issue_sidebar.json
@@ -0,0 +1,21 @@
+{
+  "type": "object",
+  "properties" : {
+    "id": { "type": "integer" },
+    "iid": { "type": "integer" },
+    "subscribed": { "type": "boolean" },
+    "time_estimate": { "type": "integer" },
+    "total_time_spent": { "type": "integer" },
+    "human_time_estimate": { "type": ["integer", "null"] },
+    "human_total_time_spent": { "type": ["integer", "null"] },
+    "participants": {
+      "type": "array",
+      "items": { "$ref": "../public_api/v4/user/basic.json" }
+    },
+    "assignees": {
+      "type": "array",
+      "items": { "$ref": "../public_api/v4/user/basic.json" }
+    }
+  },
+  "additionalProperties": false
+}
diff --git a/spec/fixtures/api/schemas/entities/label.json b/spec/fixtures/api/schemas/entities/label.json
new file mode 100644
index 00000000000..40dff764c17
--- /dev/null
+++ b/spec/fixtures/api/schemas/entities/label.json
@@ -0,0 +1,26 @@
+{
+  "type": "object",
+  "required": [
+    "id",
+    "color",
+    "description",
+    "title",
+    "priority"
+  ],
+  "properties": {
+    "id": { "type": "integer" },
+    "color": {
+      "type": "string",
+      "pattern": "^#[0-9A-Fa-f]{3}{1,2}$"
+    },
+    "description": { "type": ["string", "null"] },
+    "text_color": {
+      "type": "string",
+      "pattern": "^#[0-9A-Fa-f]{3}{1,2}$"
+    },
+    "type": { "type": "string" },
+    "title": { "type": "string" },
+    "priority": { "type": ["integer", "null"] }
+  },
+  "additionalProperties": false
+}
\ No newline at end of file
diff --git a/spec/fixtures/api/schemas/entities/merge_request_basic.json b/spec/fixtures/api/schemas/entities/merge_request_basic.json
index 6b14188582a..995f13381ad 100644
--- a/spec/fixtures/api/schemas/entities/merge_request_basic.json
+++ b/spec/fixtures/api/schemas/entities/merge_request_basic.json
@@ -9,7 +9,9 @@
     "human_time_estimate": { "type": ["string", "null"] },
     "human_total_time_spent": { "type": ["string", "null"] },
     "merge_error": { "type": ["string", "null"] },
-    "assignee_id": { "type": ["integer", "null"] }
+    "assignee_id": { "type": ["integer", "null"] },
+    "subscribed": { "type": ["boolean", "null"] },
+    "participants": { "type": "array" }
   },
   "additionalProperties": false
 }
diff --git a/spec/fixtures/api/schemas/issue.json b/spec/fixtures/api/schemas/issue.json
index e1f62508933..a55ecaa5697 100644
--- a/spec/fixtures/api/schemas/issue.json
+++ b/spec/fixtures/api/schemas/issue.json
@@ -19,32 +19,7 @@
     },
     "labels": {
       "type": "array",
-      "items": {
-        "type": "object",
-        "required": [
-          "id",
-          "color",
-          "description",
-          "title",
-          "priority"
-        ],
-        "properties": {
-          "id": { "type": "integer" },
-          "color": {
-            "type": "string",
-            "pattern": "^#[0-9A-Fa-f]{3}{1,2}+$"
-          },
-          "description": { "type": ["string", "null"] },
-          "text_color": {
-            "type": "string",
-            "pattern": "^#[0-9A-Fa-f]{3}{1,2}+$"
-          },
-          "type": { "type": "string" },
-          "title": { "type": "string" },
-          "priority": { "type": ["integer", "null"] }
-        },
-        "additionalProperties": false
-      }
+      "items": { "$ref": "entities/label.json" }
     },
     "assignee": {
       "id": { "type": "integet" },
diff --git a/spec/javascripts/issuable_context_spec.js b/spec/javascripts/issuable_context_spec.js
deleted file mode 100644
index f266209027a..00000000000
--- a/spec/javascripts/issuable_context_spec.js
+++ /dev/null
@@ -1,33 +0,0 @@
-import $ from 'jquery';
-import IssuableContext from '~/issuable_context';
-
-describe('IssuableContext', () => {
-  describe('toggleHiddenParticipants', () => {
-    const event = jasmine.createSpyObj('event', ['preventDefault']);
-
-    beforeEach(() => {
-      spyOn($.fn, 'data').and.returnValue('data');
-      spyOn($.fn, 'text').and.returnValue('data');
-    });
-
-    afterEach(() => {
-      gl.lazyLoader = undefined;
-    });
-
-    it('calls loadCheck if lazyLoader is set', () => {
-      gl.lazyLoader = jasmine.createSpyObj('lazyLoader', ['loadCheck']);
-
-      IssuableContext.prototype.toggleHiddenParticipants(event);
-
-      expect(gl.lazyLoader.loadCheck).toHaveBeenCalled();
-    });
-
-    it('does not throw if lazyLoader is not defined', () => {
-      gl.lazyLoader = undefined;
-
-      const toggle = IssuableContext.prototype.toggleHiddenParticipants.bind(null, event);
-
-      expect(toggle).not.toThrow();
-    });
-  });
-});
diff --git a/spec/javascripts/sidebar/mock_data.js b/spec/javascripts/sidebar/mock_data.js
index e2b6bcabc98..0682b463043 100644
--- a/spec/javascripts/sidebar/mock_data.js
+++ b/spec/javascripts/sidebar/mock_data.js
@@ -109,12 +109,14 @@ const sidebarMockData = {
       labels: [],
       web_url: '/root/some-project/issues/5',
     },
+    '/gitlab-org/gitlab-shell/issues/5/toggle_subscription': {},
   },
 };
 
 export default {
   mediator: {
     endpoint: '/gitlab-org/gitlab-shell/issues/5.json',
+    toggleSubscriptionEndpoint: '/gitlab-org/gitlab-shell/issues/5/toggle_subscription',
     moveIssueEndpoint: '/gitlab-org/gitlab-shell/issues/5/move',
     projectsAutocompleteEndpoint: '/autocomplete/projects?project_id=15',
     editable: true,
diff --git a/spec/javascripts/sidebar/participants_spec.js b/spec/javascripts/sidebar/participants_spec.js
new file mode 100644
index 00000000000..30cc549c7c0
--- /dev/null
+++ b/spec/javascripts/sidebar/participants_spec.js
@@ -0,0 +1,174 @@
+import Vue from 'vue';
+import participants from '~/sidebar/components/participants/participants.vue';
+import mountComponent from '../helpers/vue_mount_component_helper';
+
+const PARTICIPANT = {
+  id: 1,
+  state: 'active',
+  username: 'marcene',
+  name: 'Allie Will',
+  web_url: 'foo.com',
+  avatar_url: 'gravatar.com/avatar/xxx',
+};
+
+const PARTICIPANT_LIST = [
+  PARTICIPANT,
+  { ...PARTICIPANT, id: 2 },
+  { ...PARTICIPANT, id: 3 },
+];
+
+describe('Participants', function () {
+  let vm;
+  let Participants;
+
+  beforeEach(() => {
+    Participants = Vue.extend(participants);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  describe('collapsed sidebar state', () => {
+    it('shows loading spinner when loading', () => {
+      vm = mountComponent(Participants, {
+        loading: true,
+      });
+
+      expect(vm.$el.querySelector('.js-participants-collapsed-loading-icon')).toBeDefined();
+    });
+
+    it('shows participant count when given', () => {
+      vm = mountComponent(Participants, {
+        loading: false,
+        participants: PARTICIPANT_LIST,
+      });
+      const countEl = vm.$el.querySelector('.js-participants-collapsed-count');
+
+      expect(countEl.textContent.trim()).toBe(`${PARTICIPANT_LIST.length}`);
+    });
+
+    it('shows full participant count when there are hidden participants', () => {
+      vm = mountComponent(Participants, {
+        loading: false,
+        participants: PARTICIPANT_LIST,
+        numberOfLessParticipants: 1,
+      });
+      const countEl = vm.$el.querySelector('.js-participants-collapsed-count');
+
+      expect(countEl.textContent.trim()).toBe(`${PARTICIPANT_LIST.length}`);
+    });
+  });
+
+  describe('expanded sidebar state', () => {
+    it('shows loading spinner when loading', () => {
+      vm = mountComponent(Participants, {
+        loading: true,
+      });
+
+      expect(vm.$el.querySelector('.js-participants-expanded-loading-icon')).toBeDefined();
+    });
+
+    it('when only showing visible participants, shows an avatar only for each participant under the limit', (done) => {
+      const numberOfLessParticipants = 2;
+      vm = mountComponent(Participants, {
+        loading: false,
+        participants: PARTICIPANT_LIST,
+        numberOfLessParticipants,
+      });
+      vm.isShowingMoreParticipants = false;
+
+      Vue.nextTick()
+        .then(() => {
+          const participantEls = vm.$el.querySelectorAll('.js-participants-author');
+
+          expect(participantEls.length).toBe(numberOfLessParticipants);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('when only showing all participants, each has an avatar', (done) => {
+      const numberOfLessParticipants = 2;
+      vm = mountComponent(Participants, {
+        loading: false,
+        participants: PARTICIPANT_LIST,
+        numberOfLessParticipants,
+      });
+      vm.isShowingMoreParticipants = true;
+
+      Vue.nextTick()
+        .then(() => {
+          const participantEls = vm.$el.querySelectorAll('.js-participants-author');
+
+          expect(participantEls.length).toBe(PARTICIPANT_LIST.length);
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('does not have more participants link when they can all be shown', () => {
+      const numberOfLessParticipants = 100;
+      vm = mountComponent(Participants, {
+        loading: false,
+        participants: PARTICIPANT_LIST,
+        numberOfLessParticipants,
+      });
+      const moreParticipantLink = vm.$el.querySelector('.js-toggle-participants-button');
+
+      expect(PARTICIPANT_LIST.length).toBeLessThan(numberOfLessParticipants);
+      expect(moreParticipantLink).toBeNull();
+    });
+
+    it('when too many participants, has more participants link to show more', (done) => {
+      vm = mountComponent(Participants, {
+        loading: false,
+        participants: PARTICIPANT_LIST,
+        numberOfLessParticipants: 2,
+      });
+      vm.isShowingMoreParticipants = false;
+
+      Vue.nextTick()
+        .then(() => {
+          const moreParticipantLink = vm.$el.querySelector('.js-toggle-participants-button');
+
+          expect(moreParticipantLink.textContent.trim()).toBe('+ 1 more');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('when too many participants and already showing them, has more participants link to show less', (done) => {
+      vm = mountComponent(Participants, {
+        loading: false,
+        participants: PARTICIPANT_LIST,
+        numberOfLessParticipants: 2,
+      });
+      vm.isShowingMoreParticipants = true;
+
+      Vue.nextTick()
+        .then(() => {
+          const moreParticipantLink = vm.$el.querySelector('.js-toggle-participants-button');
+
+          expect(moreParticipantLink.textContent.trim()).toBe('- show less');
+        })
+        .then(done)
+        .catch(done.fail);
+    });
+
+    it('clicking more participants link emits event', () => {
+      vm = mountComponent(Participants, {
+        loading: false,
+        participants: PARTICIPANT_LIST,
+        numberOfLessParticipants: 2,
+      });
+      const moreParticipantLink = vm.$el.querySelector('.js-toggle-participants-button');
+
+      expect(vm.isShowingMoreParticipants).toBe(false);
+
+      moreParticipantLink.click();
+
+      expect(vm.isShowingMoreParticipants).toBe(true);
+    });
+  });
+});
diff --git a/spec/javascripts/sidebar/sidebar_mediator_spec.js b/spec/javascripts/sidebar/sidebar_mediator_spec.js
index 3aa8ca5db0d..7deb1fd2118 100644
--- a/spec/javascripts/sidebar/sidebar_mediator_spec.js
+++ b/spec/javascripts/sidebar/sidebar_mediator_spec.js
@@ -57,8 +57,8 @@ describe('Sidebar mediator', () => {
       .then(() => {
         expect(this.mediator.service.getProjectsAutocomplete).toHaveBeenCalledWith(searchTerm);
         expect(this.mediator.store.setAutocompleteProjects).toHaveBeenCalled();
-        done();
       })
+      .then(done)
       .catch(done.fail);
   });
 
@@ -72,8 +72,21 @@ describe('Sidebar mediator', () => {
       .then(() => {
         expect(this.mediator.service.moveIssue).toHaveBeenCalledWith(moveToProjectId);
         expect(gl.utils.visitUrl).toHaveBeenCalledWith('/root/some-project/issues/5');
-        done();
       })
+      .then(done)
+      .catch(done.fail);
+  });
+
+  it('toggle subscription', (done) => {
+    this.mediator.store.setSubscribedState(false);
+    spyOn(this.mediator.service, 'toggleSubscription').and.callThrough();
+
+    this.mediator.toggleSubscription()
+      .then(() => {
+        expect(this.mediator.service.toggleSubscription).toHaveBeenCalled();
+        expect(this.mediator.store.subscribed).toEqual(true);
+      })
+      .then(done)
       .catch(done.fail);
   });
 });
diff --git a/spec/javascripts/sidebar/sidebar_service_spec.js b/spec/javascripts/sidebar/sidebar_service_spec.js
index a4bd8ba8d88..7324d34d84a 100644
--- a/spec/javascripts/sidebar/sidebar_service_spec.js
+++ b/spec/javascripts/sidebar/sidebar_service_spec.js
@@ -7,6 +7,7 @@ describe('Sidebar service', () => {
     Vue.http.interceptors.push(Mock.sidebarMockInterceptor);
     this.service = new SidebarService({
       endpoint: '/gitlab-org/gitlab-shell/issues/5.json',
+      toggleSubscriptionEndpoint: '/gitlab-org/gitlab-shell/issues/5/toggle_subscription',
       moveIssueEndpoint: '/gitlab-org/gitlab-shell/issues/5/move',
       projectsAutocompleteEndpoint: '/autocomplete/projects?project_id=15',
     });
@@ -23,6 +24,7 @@ describe('Sidebar service', () => {
         expect(resp).toBeDefined();
         done();
       })
+      .then(done)
       .catch(done.fail);
   });
 
@@ -30,8 +32,8 @@ describe('Sidebar service', () => {
     this.service.update('issue[assignee_ids]', [1])
       .then((resp) => {
         expect(resp).toBeDefined();
-        done();
       })
+      .then(done)
       .catch(done.fail);
   });
 
@@ -39,8 +41,8 @@ describe('Sidebar service', () => {
     this.service.getProjectsAutocomplete()
       .then((resp) => {
         expect(resp).toBeDefined();
-        done();
       })
+      .then(done)
       .catch(done.fail);
   });
 
@@ -48,8 +50,17 @@ describe('Sidebar service', () => {
     this.service.moveIssue(123)
       .then((resp) => {
         expect(resp).toBeDefined();
-        done();
       })
+      .then(done)
+      .catch(done.fail);
+  });
+
+  it('toggles the subscription', (done) => {
+    this.service.toggleSubscription()
+      .then((resp) => {
+        expect(resp).toBeDefined();
+      })
+      .then(done)
       .catch(done.fail);
   });
 });
diff --git a/spec/javascripts/sidebar/sidebar_store_spec.js b/spec/javascripts/sidebar/sidebar_store_spec.js
index 69eb3839d67..51dee64fb93 100644
--- a/spec/javascripts/sidebar/sidebar_store_spec.js
+++ b/spec/javascripts/sidebar/sidebar_store_spec.js
@@ -2,21 +2,36 @@ import SidebarStore from '~/sidebar/stores/sidebar_store';
 import Mock from './mock_data';
 import UsersMockHelper from '../helpers/user_mock_data_helper';
 
-describe('Sidebar store', () => {
-  const assignee = {
-    id: 2,
-    name: 'gitlab user 2',
-    username: 'gitlab2',
-    avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-  };
-
-  const anotherAssignee = {
-    id: 3,
-    name: 'gitlab user 3',
-    username: 'gitlab3',
-    avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
-  };
+const ASSIGNEE = {
+  id: 2,
+  name: 'gitlab user 2',
+  username: 'gitlab2',
+  avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+};
+
+const ANOTHER_ASSINEE = {
+  id: 3,
+  name: 'gitlab user 3',
+  username: 'gitlab3',
+  avatar_url: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+};
+
+const PARTICIPANT = {
+  id: 1,
+  state: 'active',
+  username: 'marcene',
+  name: 'Allie Will',
+  web_url: 'foo.com',
+  avatar_url: 'gravatar.com/avatar/xxx',
+};
+
+const PARTICIPANT_LIST = [
+  PARTICIPANT,
+  { ...PARTICIPANT, id: 2 },
+  { ...PARTICIPANT, id: 3 },
+];
 
+describe('Sidebar store', () => {
   beforeEach(() => {
     this.store = new SidebarStore({
       currentUser: {
@@ -40,23 +55,23 @@ describe('Sidebar store', () => {
   });
 
   it('adds a new assignee', () => {
-    this.store.addAssignee(assignee);
+    this.store.addAssignee(ASSIGNEE);
     expect(this.store.assignees.length).toEqual(1);
   });
 
   it('removes an assignee', () => {
-    this.store.removeAssignee(assignee);
+    this.store.removeAssignee(ASSIGNEE);
     expect(this.store.assignees.length).toEqual(0);
   });
 
   it('finds an existent assignee', () => {
     let foundAssignee;
 
-    this.store.addAssignee(assignee);
-    foundAssignee = this.store.findAssignee(assignee);
+    this.store.addAssignee(ASSIGNEE);
+    foundAssignee = this.store.findAssignee(ASSIGNEE);
     expect(foundAssignee).toBeDefined();
-    expect(foundAssignee).toEqual(assignee);
-    foundAssignee = this.store.findAssignee(anotherAssignee);
+    expect(foundAssignee).toEqual(ASSIGNEE);
+    foundAssignee = this.store.findAssignee(ANOTHER_ASSINEE);
     expect(foundAssignee).toBeUndefined();
   });
 
@@ -65,6 +80,28 @@ describe('Sidebar store', () => {
     expect(this.store.assignees.length).toEqual(0);
   });
 
+  it('sets participants data', () => {
+    expect(this.store.participants.length).toEqual(0);
+
+    this.store.setParticipantsData({
+      participants: PARTICIPANT_LIST,
+    });
+
+    expect(this.store.isFetching.participants).toEqual(false);
+    expect(this.store.participants.length).toEqual(PARTICIPANT_LIST.length);
+  });
+
+  it('sets subcriptions data', () => {
+    expect(this.store.subscribed).toEqual(null);
+
+    this.store.setSubscriptionsData({
+      subscribed: true,
+    });
+
+    expect(this.store.isFetching.subscriptions).toEqual(false);
+    expect(this.store.subscribed).toEqual(true);
+  });
+
   it('set assigned data', () => {
     const users = {
       assignees: UsersMockHelper.createNumberRandomUsers(3),
@@ -75,6 +112,14 @@ describe('Sidebar store', () => {
     expect(this.store.assignees.length).toEqual(3);
   });
 
+  it('sets fetching state', () => {
+    expect(this.store.isFetching.participants).toEqual(true);
+
+    this.store.setFetchingState('participants', false);
+
+    expect(this.store.isFetching.participants).toEqual(false);
+  });
+
   it('set time tracking data', () => {
     this.store.setTimeTrackingData(Mock.time);
     expect(this.store.timeEstimate).toEqual(Mock.time.time_estimate);
@@ -90,6 +135,14 @@ describe('Sidebar store', () => {
     expect(this.store.autocompleteProjects).toEqual(projects);
   });
 
+  it('sets subscribed state', () => {
+    expect(this.store.subscribed).toEqual(null);
+
+    this.store.setSubscribedState(true);
+
+    expect(this.store.subscribed).toEqual(true);
+  });
+
   it('set move to project ID', () => {
     const projectId = 7;
     this.store.setMoveToProjectId(projectId);
diff --git a/spec/javascripts/sidebar/sidebar_subscriptions_spec.js b/spec/javascripts/sidebar/sidebar_subscriptions_spec.js
new file mode 100644
index 00000000000..7adf22b0f1f
--- /dev/null
+++ b/spec/javascripts/sidebar/sidebar_subscriptions_spec.js
@@ -0,0 +1,36 @@
+import Vue from 'vue';
+import sidebarSubscriptions from '~/sidebar/components/subscriptions/sidebar_subscriptions.vue';
+import SidebarMediator from '~/sidebar/sidebar_mediator';
+import SidebarService from '~/sidebar/services/sidebar_service';
+import SidebarStore from '~/sidebar/stores/sidebar_store';
+import eventHub from '~/sidebar/event_hub';
+import mountComponent from '../helpers/vue_mount_component_helper';
+import Mock from './mock_data';
+
+describe('Sidebar Subscriptions', function () {
+  let vm;
+  let SidebarSubscriptions;
+
+  beforeEach(() => {
+    SidebarSubscriptions = Vue.extend(sidebarSubscriptions);
+    // Setup the stores, services, etc
+    // eslint-disable-next-line no-new
+    new SidebarMediator(Mock.mediator);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+    SidebarService.singleton = null;
+    SidebarStore.singleton = null;
+    SidebarMediator.singleton = null;
+  });
+
+  it('calls the mediator toggleSubscription on event', () => {
+    spyOn(SidebarMediator.prototype, 'toggleSubscription').and.returnValue(Promise.resolve());
+    vm = mountComponent(SidebarSubscriptions, {});
+
+    eventHub.$emit('toggleSubscription');
+
+    expect(SidebarMediator.prototype.toggleSubscription).toHaveBeenCalled();
+  });
+});
diff --git a/spec/javascripts/sidebar/subscriptions_spec.js b/spec/javascripts/sidebar/subscriptions_spec.js
new file mode 100644
index 00000000000..9b33dd02fb9
--- /dev/null
+++ b/spec/javascripts/sidebar/subscriptions_spec.js
@@ -0,0 +1,42 @@
+import Vue from 'vue';
+import subscriptions from '~/sidebar/components/subscriptions/subscriptions.vue';
+import mountComponent from '../helpers/vue_mount_component_helper';
+
+describe('Subscriptions', function () {
+  let vm;
+  let Subscriptions;
+
+  beforeEach(() => {
+    Subscriptions = Vue.extend(subscriptions);
+  });
+
+  afterEach(() => {
+    vm.$destroy();
+  });
+
+  it('shows loading spinner when loading', () => {
+    vm = mountComponent(Subscriptions, {
+      loading: true,
+      subscribed: undefined,
+    });
+
+    expect(vm.$refs.loadingButton.loading).toBe(true);
+    expect(vm.$refs.loadingButton.label).toBeUndefined();
+  });
+
+  it('has "Subscribe" text when currently not subscribed', () => {
+    vm = mountComponent(Subscriptions, {
+      subscribed: false,
+    });
+
+    expect(vm.$refs.loadingButton.label).toBe('Subscribe');
+  });
+
+  it('has "Unsubscribe" text when currently not subscribed', () => {
+    vm = mountComponent(Subscriptions, {
+      subscribed: true,
+    });
+
+    expect(vm.$refs.loadingButton.label).toBe('Unsubscribe');
+  });
+});
diff --git a/spec/models/concerns/subscribable_spec.rb b/spec/models/concerns/subscribable_spec.rb
index 28ff8158e0e..45dfb136aea 100644
--- a/spec/models/concerns/subscribable_spec.rb
+++ b/spec/models/concerns/subscribable_spec.rb
@@ -6,6 +6,12 @@ describe Subscribable, 'Subscribable' do
   let(:user_1)   { create(:user) }
 
   describe '#subscribed?' do
+    context 'without user' do
+      it 'returns false' do
+        expect(resource.subscribed?(nil, project)).to be_falsey
+      end
+    end
+
     context 'without project' do
       it 'returns false when no subscription exists' do
         expect(resource.subscribed?(user_1)).to be_falsey
diff --git a/spec/serializers/issue_serializer_spec.rb b/spec/serializers/issue_serializer_spec.rb
new file mode 100644
index 00000000000..75578816e75
--- /dev/null
+++ b/spec/serializers/issue_serializer_spec.rb
@@ -0,0 +1,27 @@
+require 'spec_helper'
+
+describe IssueSerializer do
+  let(:resource) { create(:issue) }
+  let(:user)     { create(:user) }
+  let(:json_entity) do
+    described_class.new(current_user: user)
+      .represent(resource, serializer: serializer)
+      .with_indifferent_access
+  end
+
+  context 'non-sidebar issue serialization' do
+    let(:serializer) { nil }
+
+    it 'matches issue json schema' do
+      expect(json_entity).to match_schema('entities/issue')
+    end
+  end
+
+  context 'sidebar issue serialization' do
+    let(:serializer) { 'sidebar' }
+
+    it 'matches sidebar issue json schema' do
+      expect(json_entity).to match_schema('entities/issue_sidebar')
+    end
+  end
+end
diff --git a/spec/serializers/merge_request_basic_serializer_spec.rb b/spec/serializers/merge_request_basic_serializer_spec.rb
index 4daf5a59d0c..1fad8e6bc5d 100644
--- a/spec/serializers/merge_request_basic_serializer_spec.rb
+++ b/spec/serializers/merge_request_basic_serializer_spec.rb
@@ -4,9 +4,13 @@ describe MergeRequestBasicSerializer do
   let(:resource) { create(:merge_request) }
   let(:user)     { create(:user) }
 
-  subject { described_class.new.represent(resource) }
+  let(:json_entity) do
+    described_class.new(current_user: user)
+      .represent(resource, serializer: 'basic')
+      .with_indifferent_access
+  end
 
-  it 'has important MergeRequest attributes' do
-    expect(subject).to include(:merge_status)
+  it 'matches basic merge request json' do
+    expect(json_entity).to match_schema('entities/merge_request_basic')
   end
 end
diff --git a/spec/serializers/merge_request_serializer_spec.rb b/spec/serializers/merge_request_serializer_spec.rb
index 73fbecc153d..e3abefa6d63 100644
--- a/spec/serializers/merge_request_serializer_spec.rb
+++ b/spec/serializers/merge_request_serializer_spec.rb
@@ -9,11 +9,11 @@ describe MergeRequestSerializer do
   end
 
   describe '#represent' do
-    let(:opts) { { basic: basic } }
-    subject { serializer.represent(merge_request, basic: basic) }
+    let(:opts) { { serializer: serializer_entity } }
+    subject { serializer.represent(merge_request, serializer: serializer_entity) }
 
-    context 'when basic param is truthy' do
-      let(:basic) { true }
+    context 'when passing basic serializer param' do
+      let(:serializer_entity) { 'basic' }
 
       it 'calls super class #represent with correct params' do
         expect_any_instance_of(BaseSerializer).to receive(:represent)
@@ -23,8 +23,8 @@ describe MergeRequestSerializer do
       end
     end
 
-    context 'when basic param is falsy' do
-      let(:basic) { false }
+    context 'when serializer param is falsy' do
+      let(:serializer_entity) { nil }
 
       it 'calls super class #represent with correct params' do
         expect_any_instance_of(BaseSerializer).to receive(:represent)
diff --git a/spec/views/shared/issuable/_participants.html.haml.rb b/spec/views/shared/issuable/_participants.html.haml.rb
deleted file mode 100644
index 51059d4c0d7..00000000000
--- a/spec/views/shared/issuable/_participants.html.haml.rb
+++ /dev/null
@@ -1,26 +0,0 @@
-require 'spec_helper'
-require 'nokogiri'
-
-describe 'shared/issuable/_participants.html.haml' do
-  let(:project) { create(:project) }
-  let(:participants)  { create_list(:user, 100) }
-
-  before do
-    allow(view).to receive_messages(project: project,
-                                    participants: participants)
-  end
-
-  it 'renders lazy loaded avatars' do
-    render 'shared/issuable/participants'
-
-    html = Nokogiri::HTML(rendered)
-
-    avatars = html.css('.participants-author img')
-
-    avatars.each do |avatar|
-      expect(avatar[:class]).to include('lazy')
-      expect(avatar[:src]).to eql(LazyImageTagHelper.placeholder_image)
-      expect(avatar[:"data-src"]).to match('http://www.gravatar.com/avatar/')
-    end
-  end
-end