diff options
author | Kushal Pandya <kushal@gitlab.com> | 2018-05-03 10:31:52 +0300 |
---|---|---|
committer | Kushal Pandya <kushal@gitlab.com> | 2018-05-03 14:04:01 +0300 |
commit | d2665707c04594a6cea22ebb3b4d89a0577d02c5 (patch) | |
tree | 2050b5c2e885ca9dcdbbf7e3b4774fd0f4c15309 | |
parent | b2e1b70927f94a50a83e5afef359775894bd6b03 (diff) |
Emit `toggleSubscription`, `toggleSidebar` events on component
-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'); + }); }); |