Fixed emoji awards not being added to notes

Closes https://gitlab.com/gitlab-org/gitlab-ce/issues/55141

3 files changed, 36 insertions, 1 deletions

diff --git a/app/assets/javascripts/notes/components/notes_app.vue b/app/assets/javascripts/notes/components/notes_app.vue
index 445d3267a3f..27f896cee35 100644
--- a/app/assets/javascripts/notes/components/notes_app.vue
+++ b/app/assets/javascripts/notes/components/notes_app.vue
@@ -102,7 +102,7 @@ export default {
     if (parentElement && parentElement.classList.contains('js-vue-notes-event')) {
       parentElement.addEventListener('toggleAward', event => {
         const { awardName, noteId } = event.detail;
-        this.actionToggleAward({ awardName, noteId });
+        this.toggleAward({ awardName, noteId });
       });
     }
   },
diff --git a/spec/features/merge_request/user_awards_emoji_spec.rb b/spec/features/merge_request/user_awards_emoji_spec.rb
index 859a4c65562..93376bc8ce0 100644
--- a/spec/features/merge_request/user_awards_emoji_spec.rb
+++ b/spec/features/merge_request/user_awards_emoji_spec.rb
@@ -4,11 +4,14 @@ describe 'Merge request > User awards emoji', :js do
   let(:project) { create(:project, :public, :repository) }
   let(:user) { project.creator }
   let(:merge_request) { create(:merge_request, source_project: project, author: create(:user)) }
+  let!(:note) { create(:note, noteable: merge_request, project: merge_request.project) }
 
   describe 'logged in' do
     before do
       sign_in(user)
       visit project_merge_request_path(project, merge_request)
+
+      wait_for_requests
     end
 
     it 'adds award to merge request' do
@@ -36,6 +39,15 @@ describe 'Merge request > User awards emoji', :js do
       expect(page).to have_selector('.emoji-menu', count: 1)
     end
 
+    it 'adds awards to note' do
+      first('.js-note-emoji').click
+      first('.emoji-menu .js-emoji-btn').click
+
+      wait_for_requests
+
+      expect(page).to have_selector('.js-awards-block')
+    end
+
     describe 'the project is archived' do
       let(:project) { create(:project, :public, :repository, :archived) }
 
diff --git a/spec/javascripts/notes/components/note_app_spec.js b/spec/javascripts/notes/components/note_app_spec.js
index 0081f42c330..22bee049f9c 100644
--- a/spec/javascripts/notes/components/note_app_spec.js
+++ b/spec/javascripts/notes/components/note_app_spec.js
@@ -30,6 +30,8 @@ describe('note_app', () => {
     jasmine.addMatchers(vueMatchers);
     $('body').attr('data-page', 'projects:merge_requests:show');
 
+    setFixtures('<div class="js-vue-notes-event"><div id="app"></div></div>');
+
     const IssueNotesApp = Vue.extend(notesApp);
 
     store = createStore();
@@ -43,6 +45,7 @@ describe('note_app', () => {
       return mountComponentWithStore(IssueNotesApp, {
         props,
         store,
+        el: document.getElementById('app'),
       });
     };
   });
@@ -283,4 +286,24 @@ describe('note_app', () => {
       }, 0);
     });
   });
+
+  describe('emoji awards', () => {
+    it('dispatches toggleAward after toggleAward event', () => {
+      const toggleAwardEvent = new CustomEvent('toggleAward', {
+        detail: {
+          awardName: 'test',
+          noteId: 1,
+        },
+      });
+
+      spyOn(vm.$store, 'dispatch');
+
+      vm.$el.parentElement.dispatchEvent(toggleAwardEvent);
+
+      expect(vm.$store.dispatch).toHaveBeenCalledWith('toggleAward', {
+        awardName: 'test',
+        noteId: 1,
+      });
+    });
+  });
 });