Merge branch '5480-sidebar-subscription-event-handling' into 'master'

Platform: Use component to emit event on Subscription toggle component instead of eventHub

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

3 files changed, 34 insertions, 2 deletions

diff --git a/spec/javascripts/sidebar/participants_spec.js b/spec/javascripts/sidebar/participants_spec.js
index 2a3b60c399c..e796ddee62f 100644
--- a/spec/javascripts/sidebar/participants_spec.js
+++ b/spec/javascripts/sidebar/participants_spec.js
@@ -170,5 +170,19 @@ describe('Participants', function () {
 
       expect(vm.isShowingMoreParticipants).toBe(true);
     });
+
+    it('clicking on participants icon emits `toggleSidebar` event', () => {
+      vm = mountComponent(Participants, {
+        loading: false,
+        participants: PARTICIPANT_LIST,
+        numberOfLessParticipants: 2,
+      });
+      spyOn(vm, '$emit');
+
+      const participantsIconEl = vm.$el.querySelector('.sidebar-collapsed-icon');
+
+      participantsIconEl.click();
+      expect(vm.$emit).toHaveBeenCalledWith('toggleSidebar');
+    });
   });
 });
diff --git a/spec/javascripts/sidebar/sidebar_subscriptions_spec.js b/spec/javascripts/sidebar/sidebar_subscriptions_spec.js
index 56a2543660b..9e437084224 100644
--- a/spec/javascripts/sidebar/sidebar_subscriptions_spec.js
+++ b/spec/javascripts/sidebar/sidebar_subscriptions_spec.js
@@ -3,7 +3,6 @@ import sidebarSubscriptions from '~/sidebar/components/subscriptions/sidebar_sub
 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 'spec/helpers/vue_mount_component_helper';
 import Mock from './mock_data';
 
@@ -32,7 +31,7 @@ describe('Sidebar Subscriptions', function () {
       mediator,
     });
 
-    eventHub.$emit('toggleSubscription');
+    vm.onToggleSubscription();
 
     expect(mediator.toggleSubscription).toHaveBeenCalled();
   });
diff --git a/spec/javascripts/sidebar/subscriptions_spec.js b/spec/javascripts/sidebar/subscriptions_spec.js
index aee8f0acbb9..f0a53e573c3 100644
--- a/spec/javascripts/sidebar/subscriptions_spec.js
+++ b/spec/javascripts/sidebar/subscriptions_spec.js
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 import subscriptions from '~/sidebar/components/subscriptions/subscriptions.vue';
+import eventHub from '~/sidebar/event_hub';
 import mountComponent from 'spec/helpers/vue_mount_component_helper';
 
 describe('Subscriptions', function () {
@@ -39,4 +40,22 @@ describe('Subscriptions', function () {
 
     expect(vm.$refs.toggleButton.$el.querySelector('.project-feature-toggle')).toHaveClass('is-checked');
   });
+
+  it('toggleSubscription method emits `toggleSubscription` event on eventHub and Component', () => {
+    vm = mountComponent(Subscriptions, { subscribed: true });
+    spyOn(eventHub, '$emit');
+    spyOn(vm, '$emit');
+
+    vm.toggleSubscription();
+    expect(eventHub.$emit).toHaveBeenCalledWith('toggleSubscription', jasmine.any(Object));
+    expect(vm.$emit).toHaveBeenCalledWith('toggleSubscription', jasmine.any(Object));
+  });
+
+  it('onClickCollapsedIcon method emits `toggleSidebar` event on component', () => {
+    vm = mountComponent(Subscriptions, { subscribed: true });
+    spyOn(vm, '$emit');
+
+    vm.onClickCollapsedIcon();
+    expect(vm.$emit).toHaveBeenCalledWith('toggleSidebar');
+  });
 });