Emit `toggleSidebar` event on component when icon is clicked

2 files changed, 18 insertions, 0 deletions

diff --git a/app/assets/javascripts/sidebar/components/participants/participants.vue b/app/assets/javascripts/sidebar/components/participants/participants.vue
index 6d95153af28..8f9e6761d20 100644
--- a/app/assets/javascripts/sidebar/components/participants/participants.vue
+++ b/app/assets/javascripts/sidebar/components/participants/participants.vue
@@ -70,6 +70,9 @@
       toggleMoreParticipants() {
         this.isShowingMoreParticipants = !this.isShowingMoreParticipants;
       },
+      onClickCollapsedIcon() {
+        this.$emit('toggleSidebar');
+      },
     },
   };
 </script>
@@ -82,6 +85,7 @@
       data-container="body"
       data-placement="left"
       :title="participantLabel"
+      @click="onClickCollapsedIcon"
     >
       <i
         class="fa fa-users"
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');
+    });
   });
 });