Merge pull request #49 from github/custom-emoji-detection

Allow developers to override emoji support detection
github · Apr 5, 2022 · 9f7ef3c · 9f7ef3c
2 parents 8ff49aa + bbacb8e
commit 9f7ef3c
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 1 deletion.
diff --git a/src/index.ts b/src/index.ts
@@ -26,8 +26,9 @@ class GEmojiElement extends HTMLElement {
     this.setAttribute('tone', modifiers)
   }
 
+  static emojiSupportFunction = isEmojiSupported
   connectedCallback(): void {
-    if (this.image === null && !isEmojiSupported()) {
+    if (this.image === null && !GEmojiElement.emojiSupportFunction()) {
       const src = this.getAttribute('fallback-src')
       if (src) {
         this.textContent = ''

diff --git a/test/test.js b/test/test.js
@@ -216,4 +216,27 @@ describe('g-emoji', function () {
       assert.equal(GEmoji.innerHTML, '<img class="emoji" alt="" height="20" width="20" src="test.png">')
     })
   })
+
+  describe('in application with a custom emoji support function', function () {
+    afterEach(function () {
+      GEmojiElement.emojiSupportFunction = null
+      document.body.innerHTML = ''
+    })
+
+    it('shows the unicode emoji if the function returns true', function () {
+      GEmojiElement.emojiSupportFunction = () => true
+      document.body.innerHTML = '<g-emoji fallback-src="test.png">🦖</g-emoji>'
+
+      const emoji = document.querySelector('g-emoji')
+      assert.equal(emoji.innerHTML, '🦖')
+    })
+
+    it('shows the fall back image if the function returns true', function () {
+      GEmojiElement.emojiSupportFunction = () => false
+      document.body.innerHTML = '<g-emoji fallback-src="test.png">🦖</g-emoji>'
+
+      const emoji = document.querySelector('g-emoji')
+      assert.equal(emoji.innerHTML, '<img class="emoji" alt="" height="20" width="20" src="test.png">')
+    })
+  })
 })