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!18682

app/assets/javascripts/sidebar/components/subscriptions/sidebar_subscriptions.vue

 <script>
 import Store from '../../stores/sidebar_store';
-import eventHub from '../../event_hub';
 import Flash from '../../../flash';
 import { __ } from '../../../locale';
 import subscriptions from './subscriptions.vue';
@@ -20,12 +19,6 @@ export default {
       store: new Store(),
     };
   },
-  created() {
-    eventHub.$on('toggleSubscription', this.onToggleSubscription);
-  },
-  beforeDestroy() {
-    eventHub.$off('toggleSubscription', this.onToggleSubscription);
-  },
   methods: {
     onToggleSubscription() {
       this.mediator.toggleSubscription()
@@ -42,6 +35,7 @@ export default {
     <subscriptions
       :loading="store.isFetching.subscriptions"
       :subscribed="store.subscribed"
+      @toggleSubscription="onToggleSubscription"
     />
   </div>
 </template>

app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue

@@ -3,7 +3,6 @@
   import icon from '~/vue_shared/components/icon.vue';
   import toggleButton from '~/vue_shared/components/toggle_button.vue';
   import tooltip from '~/vue_shared/directives/tooltip';
-  import eventHub from '../../event_hub';
 
   const ICON_ON = 'notifications';
   const ICON_OFF = 'notifications-off';
@@ -48,7 +47,7 @@
     },
     methods: {
       toggleSubscription() {
-        eventHub.$emit('toggleSubscription', this.id);
+        this.$emit('toggleSubscription', this.id);
       },
     },
   };

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();
   });

spec/javascripts/sidebar/subscriptions_spec.js

@@ -39,4 +39,12 @@ describe('Subscriptions', function () {
 
     expect(vm.$refs.toggleButton.$el.querySelector('.project-feature-toggle')).toHaveClass('is-checked');
   });
+
+  it('toggleSubscription method emits `toggleSubscription` event on component', () => {
+    vm = mountComponent(Subscriptions, { subscribed: true });
+    spyOn(vm, '$emit');
+
+    vm.toggleSubscription();
+    expect(vm.$emit).toHaveBeenCalledWith('toggleSubscription', jasmine.any(Object));
+  });
 });