Merge branch '28589-emoji-status-popover-doesn-t-show-emoji-when-it-s-in-the-message' into 'master'

Whitelist `gl-emoji` element in tooltips

See merge request gitlab-org/gitlab!32604

app/assets/javascripts/commons/bootstrap.js

@@ -70,7 +70,12 @@ whitelist.acronym = [];
 whitelist.blockquote = [];
 whitelist.del = [];
 whitelist.ins = [];
-whitelist['gl-emoji'] = [];
+whitelist['gl-emoji'] = [
+  'data-name',
+  'data-unicode-version',
+  'data-fallback-src',
+  'data-fallback-sprite-class',
+];
 
 // Whitelisting SVG tags and attributes
 whitelist.svg = ['viewBox'];

changelogs/unreleased/28589-emoji-status-popover-doesn-t-show-emoji-when-it-s-in-the-message.yml

+---
+title: Fix rendering of emojis in status tooltips
+merge_request: 32604
+author:
+type: fixed

spec/features/issues/user_views_issue_spec.rb

@@ -35,18 +35,38 @@ describe "User views issue" do
   describe 'user status' do
     subject { visit(project_issue_path(project, issue)) }
 
-    describe 'showing status of the author of the issue' do
+    context 'when showing status of the author of the issue' do
       it_behaves_like 'showing user status' do
         let(:user_with_status) { issue.author }
       end
     end
 
-    describe 'showing status of a user who commented on an issue', :js do
+    context 'when showing status of a user who commented on an issue', :js do
       let!(:note) { create(:note, noteable: issue, project: project, author: user_with_status) }
 
       it_behaves_like 'showing user status' do
         let(:user_with_status) { create(:user) }
       end
     end
+
+    context 'when status message has an emoji', :js do
+      let(:message) { 'My status with an emoji' }
+      let(:message_emoji) { 'basketball' }
+
+      let!(:note) { create(:note, noteable: issue, project: project, author: user) }
+      let!(:status) { create(:user_status, user: user, emoji: 'smirk', message: "#{message} :#{message_emoji}:") }
+
+      it 'correctly renders the emoji' do
+        tooltip_span = page.first(".user-status-emoji[title^='#{message}']")
+
+        tooltip_span.hover
+
+        tooltip = page.find('.tooltip .tooltip-inner')
+
+        page.within(tooltip) do
+          expect(page).to have_emoji(message_emoji)
+        end
+      end
+    end
   end
 end