7 files changed, 356 insertions, 25 deletions

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');
+  });
+});