test: add test

src/picker/components/Picker/Picker.js

@@ -428,7 +428,6 @@ export function createRoot (shadowRoot, props) {
 
   function checkZwjSupportAndUpdate (zwjEmojisToCheck) {
     const allSupported = checkZwjSupport(zwjEmojisToCheck, refs.baselineEmoji, emojiToDomNode)
-    /* istanbul ignore if */
     if (!allSupported) {
       console.log('Not all ZWJ emoji are supported, forcing re-render')
       // Force update. We only do this if there are any unsupported ZWJ characters since otherwise,

src/picker/utils/checkZwjSupport.js

@@ -3,6 +3,12 @@ import { supportedZwjEmojis } from './emojiSupport'
 
 let baselineEmojiWidth
 
+// only used in tests
+let simulateBrowserNotSupportingZWJEmoji = false
+export function setSimulateBrowserNotSupportingZWJEmoji (value) {
+  simulateBrowserNotSupportingZWJEmoji = value
+}
+
 /**
  * Check if the given emojis containing ZWJ characters are supported by the current browser (don't render
  * as double characters) and return true if all are supported.
@@ -23,7 +29,7 @@ export function checkZwjSupport (zwjEmojisToCheck, baselineEmoji, emojiToDomNode
     // against are the ones that are 2x the size, because those are truly broken (person with red hair = person with
     // floating red wig, black cat = cat with black square, polar bear = bear with snowflake, etc.)
     // So here we set the threshold at 1.8 times the size of the baseline emoji.
-    const supported = emojiWidth / 1.8 < baselineEmojiWidth
+    const supported = !simulateBrowserNotSupportingZWJEmoji && emojiWidth / 1.8 < baselineEmojiWidth
     supportedZwjEmojis.set(emoji.unicode, supported)
     /* istanbul ignore next */
     if (!supported) {

test/spec/picker/zwjEmoji.test.js

@@ -0,0 +1,44 @@
+import Picker from '../../../src/picker/PickerElement'
+import { ALL_EMOJI, basicAfterEach, basicBeforeEach, truncatedEmoji } from '../shared'
+import { setSimulateBrowserNotSupportingZWJEmoji } from '../../../src/picker/utils/checkZwjSupport.js'
+import { supportedZwjEmojis } from '../../../src/picker/utils/emojiSupport.js'
+import { getAllByRole, getByRole, queryAllByRole, waitFor } from '@testing-library/dom'
+import { groups } from '../../../src/picker/groups.js'
+
+describe('ZWJ emoji', () => {
+  const simulations = [false, true]
+
+  simulations.forEach(simulateBrowserNotSupportingZWJ => {
+    describe(`simulateBrowserNotSupportingZWJ=${simulateBrowserNotSupportingZWJ}`, () => {
+      beforeEach(async () => {
+        await basicBeforeEach()
+        setSimulateBrowserNotSupportingZWJEmoji(simulateBrowserNotSupportingZWJ)
+      })
+      afterEach(async () => {
+        await basicAfterEach()
+        setSimulateBrowserNotSupportingZWJEmoji(false)
+        supportedZwjEmojis.clear() // reset global cache after each test
+      })
+
+      test('shows or hides ZWJ emoji appropriately', async () => {
+        console.log(truncatedEmoji)
+        const picker = new Picker({
+          dataSource: ALL_EMOJI
+        })
+
+        document.body.appendChild(picker)
+
+        const container = picker.shadowRoot.querySelector('.picker')
+
+        await waitFor(() => expect(getAllByRole(container, 'tab')).toHaveLength(groups.length))
+
+        getByRole(container, 'tab', { name: 'Flags' }).click()
+
+        // checkered flag is shown because it's not ZWJ, should always be shown
+        await waitFor(() => expect(getByRole(container, 'menuitem', { name: /🏁/ })).toBeVisible())
+        // pirate flag is a ZWJ combining black flag plus skull and crossbones, should be hidden if no browser support
+        await waitFor(() => expect(queryAllByRole(container, 'menuitem', { name: /🏴‍☠️/ })).toHaveLength(simulateBrowserNotSupportingZWJ ? 0 : 1))
+      })
+    })
+  })
+})