diff options
-rw-r--r-- | app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue | 22 | ||||
-rw-r--r-- | spec/javascripts/sidebar/subscriptions_spec.js | 19 |
2 files changed, 40 insertions, 1 deletions
diff --git a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue index d69d100a26c..f0df759ef7a 100644 --- a/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue +++ b/app/assets/javascripts/sidebar/components/subscriptions/subscriptions.vue @@ -47,8 +47,25 @@ }, }, methods: { + /** + * We need to emit this event on both component & eventHub + * for 2 dependencies; + * + * 1. eventHub: This component is used in Issue Boards sidebar + * where component template is part of HAML + * and event listeners are tied to app's eventHub. + * 2. Component: This compone is also used in Epics in EE + * where listeners are tied to component event. + */ toggleSubscription() { + // App's eventHub event emission. eventHub.$emit('toggleSubscription', this.id); + + // Component event emission. + this.$emit('toggleSubscription', this.id); + }, + onClickCollapsedIcon() { + this.$emit('toggleSidebar'); }, }, }; @@ -56,7 +73,10 @@ <template> <div> - <div class="sidebar-collapsed-icon"> + <div + class="sidebar-collapsed-icon" + @click="onClickCollapsedIcon" + > <span v-tooltip :title="notificationTooltip" 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'); + }); }); |