test: improve code coverage (#107)

jest.config.cjs

@@ -35,10 +35,10 @@ module.exports = {
       lines: 100
     },
     './src/picker/components/Picker/Picker.svelte': {
-      statements: 96,
-      branches: 94,
-      functions: 95,
-      lines: 97
+      statements: 97,
+      branches: 96,
+      functions: 100,
+      lines: 98
     }
   }
 }

package.json

@@ -139,6 +139,7 @@
       "crypto",
       "customElements",
       "CustomEvent",
+      "Event",
       "fetch",
       "getComputedStyle",
       "indexedDB",

src/picker/components/Picker/Picker.js

@@ -341,9 +341,7 @@ $: {
   } else {
     currentEmojis = currentEmojis.filter(isZwjSupported)
     requestAnimationFrame(() => { // reset scroll top to 0 when emojis change
-      if (process.env.NODE_ENV !== 'test') {
-        tabpanelElement.scrollTop = 0
-      }
+      tabpanelElement.scrollTop = 0
     })
   }
 }
@@ -386,6 +384,7 @@ async function getEmojisBySearchQuery (query) {
 
 $: {
   // consider initialLoad to be complete when the first tabpanel and favorites are rendered
+  /* istanbul ignore next */
   if (process.env.NODE_ENV !== 'production' || process.env.PERF) {
     if (currentEmojis.length && currentFavorites.length && initialLoad) {
       initialLoad = false

test/spec/picker/shared.js

@@ -3,7 +3,7 @@ import {
   getByRole, fireEvent, queryAllByRole
 } from '@testing-library/dom'
 
-export const openSkintoneListbox = async (container, skipActiveElementCheck) => {
+export async function openSkintoneListbox (container) {
   await waitFor(() => expect(getByRole(container, 'button', { name: /Choose a skin tone/ }))
     .toBeVisible())
   expect(queryAllByRole(container, 'listbox', { name: 'Skin tones' })).toHaveLength(0)
@@ -13,4 +13,7 @@ export const openSkintoneListbox = async (container, skipActiveElementCheck) =>
   getByRole(container, 'option', { name: 'Default', selected: true }).focus()
   await waitFor(() => expect(getByRole(container, 'option', { name: 'Default', selected: true }))
     .toBeVisible())
+  // JSDom doesn't fire transitionend events, so we do it manually here
+  // https://github.com/jsdom/jsdom/issues/1781#issuecomment-467935000
+  fireEvent(getByRole(container, 'listbox', { name: 'Skin tones' }), new Event('transitionend'))
 }