Merge branch '26371-native-emojis-v3' into 'master'

Add emoji images - Base Native Unicode Emojis

Closes #26371

See merge request !9569

1 files changed, 19 insertions, 93 deletions

diff --git a/spec/lib/banzai/filter/emoji_filter_spec.rb b/spec/lib/banzai/filter/emoji_filter_spec.rb
index c8e62f528df..707212e07fd 100644
--- a/spec/lib/banzai/filter/emoji_filter_spec.rb
+++ b/spec/lib/banzai/filter/emoji_filter_spec.rb
@@ -14,12 +14,12 @@ describe Banzai::Filter::EmojiFilter, lib: true do
 
   it 'replaces supported name emoji' do
     doc = filter('<p>:heart:</p>')
-    expect(doc.css('img').first.attr('src')).to eq 'https://foo.com/assets/2764.png'
+    expect(doc.css('gl-emoji').first.text).to eq '❤'
   end
 
   it 'replaces supported unicode emoji' do
     doc = filter('<p>❤️</p>')
-    expect(doc.css('img').first.attr('src')).to eq 'https://foo.com/assets/2764.png'
+    expect(doc.css('gl-emoji').first.text).to eq '❤'
   end
 
   it 'ignores unsupported emoji' do
@@ -30,152 +30,78 @@ describe Banzai::Filter::EmojiFilter, lib: true do
 
   it 'correctly encodes the URL' do
     doc = filter('<p>:+1:</p>')
-    expect(doc.css('img').first.attr('src')).to eq 'https://foo.com/assets/1F44D.png'
+    expect(doc.css('gl-emoji').first.text).to eq '👍'
   end
 
   it 'correctly encodes unicode to the URL' do
     doc = filter('<p>👍</p>')
-    expect(doc.css('img').first.attr('src')).to eq 'https://foo.com/assets/1F44D.png'
+    expect(doc.css('gl-emoji').first.text).to eq '👍'
   end
 
   it 'matches at the start of a string' do
     doc = filter(':+1:')
-    expect(doc.css('img').size).to eq 1
+    expect(doc.css('gl-emoji').size).to eq 1
   end
 
   it 'unicode matches at the start of a string' do
     doc = filter("'👍'")
-    expect(doc.css('img').size).to eq 1
+    expect(doc.css('gl-emoji').size).to eq 1
   end
 
   it 'matches at the end of a string' do
     doc = filter('This gets a :-1:')
-    expect(doc.css('img').size).to eq 1
+    expect(doc.css('gl-emoji').size).to eq 1
   end
 
   it 'unicode matches at the end of a string' do
     doc = filter('This gets a 👍')
-    expect(doc.css('img').size).to eq 1
+    expect(doc.css('gl-emoji').size).to eq 1
   end
 
   it 'matches with adjacent text' do
     doc = filter('+1 (:+1:)')
-    expect(doc.css('img').size).to eq 1
+    expect(doc.css('gl-emoji').size).to eq 1
   end
 
   it 'unicode matches with adjacent text' do
     doc = filter('+1 (👍)')
-    expect(doc.css('img').size).to eq 1
+    expect(doc.css('gl-emoji').size).to eq 1
   end
 
   it 'matches multiple emoji in a row' do
     doc = filter(':see_no_evil::hear_no_evil::speak_no_evil:')
-    expect(doc.css('img').size).to eq 3
+    expect(doc.css('gl-emoji').size).to eq 3
   end
 
   it 'unicode matches multiple emoji in a row' do
     doc = filter("'🙈🙉🙊'")
-    expect(doc.css('img').size).to eq 3
+    expect(doc.css('gl-emoji').size).to eq 3
   end
 
   it 'mixed matches multiple emoji in a row' do
     doc = filter("'🙈:see_no_evil:🙉:hear_no_evil:🙊:speak_no_evil:'")
-    expect(doc.css('img').size).to eq 6
+    expect(doc.css('gl-emoji').size).to eq 6
   end
 
-  it 'has a title attribute' do
+  it 'has a data-name attribute' do
     doc = filter(':-1:')
-    expect(doc.css('img').first.attr('title')).to eq ':-1:'
+    expect(doc.css('gl-emoji').first.attr('data-name')).to eq 'thumbsdown'
   end
 
-  it 'unicode has a title attribute' do
-    doc = filter("'👎'")
-    expect(doc.css('img').first.attr('title')).to eq ':thumbsdown:'
-  end
-
-  it 'has an alt attribute' do
+  it 'has a data-unicode-version attribute' do
     doc = filter(':-1:')
-    expect(doc.css('img').first.attr('alt')).to eq ':-1:'
-  end
-
-  it 'unicode has an alt attribute' do
-    doc = filter("'👎'")
-    expect(doc.css('img').first.attr('alt')).to eq ':thumbsdown:'
-  end
-
-  it 'has an align attribute' do
-    doc = filter(':8ball:')
-    expect(doc.css('img').first.attr('align')).to eq 'absmiddle'
-  end
-
-  it 'unicode has an align attribute' do
-    doc = filter("'🎱'")
-    expect(doc.css('img').first.attr('align')).to eq 'absmiddle'
-  end
-
-  it 'has an emoji class' do
-    doc = filter(':cat:')
-    expect(doc.css('img').first.attr('class')).to eq 'emoji'
-  end
-
-  it 'unicode has an emoji class' do
-    doc = filter("'🐱'")
-    expect(doc.css('img').first.attr('class')).to eq 'emoji'
-  end
-
-  it 'has height and width attributes' do
-    doc = filter(':dog:')
-    img = doc.css('img').first
-
-    expect(img.attr('width')).to eq '20'
-    expect(img.attr('height')).to eq '20'
-  end
-
-  it 'unicode has height and width attributes' do
-    doc = filter("'🐶'")
-    img = doc.css('img').first
-
-    expect(img.attr('width')).to eq '20'
-    expect(img.attr('height')).to eq '20'
+    expect(doc.css('gl-emoji').first.attr('data-unicode-version')).to eq '6.0'
   end
 
   it 'keeps whitespace intact' do
     doc = filter('This deserves a :+1:, big time.')
 
-    expect(doc.to_html).to match(/^This deserves a <img.+>, big time\.\z/)
+    expect(doc.to_html).to match(/^This deserves a <gl-emoji.+>, big time\.\z/)
   end
 
   it 'unicode keeps whitespace intact' do
     doc = filter('This deserves a 🎱, big time.')
 
-    expect(doc.to_html).to match(/^This deserves a <img.+>, big time\.\z/)
-  end
-
-  it 'uses a custom asset_root context' do
-    root = Gitlab.config.gitlab.url + 'gitlab/root'
-
-    doc = filter(':smile:', asset_root: root)
-    expect(doc.css('img').first.attr('src')).to start_with(root)
-  end
-
-  it 'uses a custom asset_host context' do
-    ActionController::Base.asset_host = 'https://cdn.example.com'
-
-    doc = filter(':frowning:', asset_host: 'https://this-is-ignored-i-guess?')
-    expect(doc.css('img').first.attr('src')).to start_with('https://cdn.example.com')
-  end
-
-  it 'uses a custom asset_root context' do
-    root = Gitlab.config.gitlab.url + 'gitlab/root'
-
-    doc = filter("'🎱'", asset_root: root)
-    expect(doc.css('img').first.attr('src')).to start_with(root)
-  end
-
-  it 'uses a custom asset_host context' do
-    ActionController::Base.asset_host = 'https://cdn.example.com'
-
-    doc = filter("'🎱'", asset_host: 'https://this-is-ignored-i-guess?')
-    expect(doc.css('img').first.attr('src')).to start_with('https://cdn.example.com')
+    expect(doc.to_html).to match(/^This deserves a <gl-emoji.+>, big time\.\z/)
   end
 end