fix: tweak i18n names, add test for slow networks

README.md

@@ -276,13 +276,13 @@ Here is the default English `i81n` object (`"en"` locale):
     "flags": "Flags"
   },
   "categoriesLabel": "Categories",
-  "emojiUnsupported": "Your browser does not support color emoji.",
+  "emojiUnsupportedMessage": "Your browser does not support color emoji.",
   "favoritesLabel": "Favorites",
-  "loading": "Loading…",
-  "networkError": "Could not load emoji. Try refreshing.",
+  "loadingMessage": "Loading…",
+  "networkErrorMessage": "Could not load emoji. Try refreshing.",
   "regionLabel": "Emoji picker",
-  "search": "Search",
   "searchDescription": "When search results are available, press up or down to select and enter to choose.",
+  "searchLabel": "Search",
   "searchResultsLabel": "Search results",
   "skinToneDescription": "When expanded, press up or down to select and enter to choose.",
   "skinToneLabel": "Choose a skin tone (currently {skinTone})",
@@ -294,7 +294,7 @@ Here is the default English `i81n` object (`"en"` locale):
     "Medium-Dark",
     "Dark"
   ],
-  "skinTonesTitle": "Skin tones"
+  "skinTonesLabel": "Skin tones"
 }
 ```
 

src/picker/components/Picker/Picker.html

@@ -17,7 +17,7 @@
         type="search"
         role="combobox"
         enterkeyhint="search"
-        placeholder={i18n.search}
+        placeholder={i18n.searchLabel}
         autocapitalize="none"
         autocomplete="off"
         spellcheck="true"
@@ -29,7 +29,7 @@
         bind:value={rawSearchText}
         on:keydown={onSearchKeydown}
       >
-      <label class="sr-only" for="search">{i18n.search}</label>
+      <label class="sr-only" for="search">{i18n.searchLabel}</label>
       <span id="search-description" class="sr-only">{i18n.searchDescription}</span>
     </div>
     <div class="skintone-button-wrapper {skinTonePickerExpandedAfterAnimation ? 'expanded' : ''}">
@@ -50,7 +50,7 @@
          class="skintone-list {skinTonePickerExpanded ? '' : 'hidden no-animate'}"
          style="{skinTonePickerExpanded ? 'transform: translateY(0);' : 'transform: translateY(calc(-1 * var(--num-skintones) * var(--total-emoji-size)))'}"
          role="listbox"
-         aria-label={i18n.skinTonesTitle}
+         aria-label={i18n.skinTonesLabel}
          aria-activedescendant="skintone-{activeSkinTone}"
          aria-hidden={!skinTonePickerExpanded}
          on:keydown={onSkinToneOptionKeydown}

src/picker/components/Picker/Picker.js

@@ -93,7 +93,7 @@ function unicodeWithSkin (emoji, currentSkinTone) {
 
 emojiSupportLevelPromise.then(level => {
   if (!level) {
-    message = i18n.emojiUnsupported
+    message = i18n.emojiUnsupportedMessage
   }
 })
 
@@ -105,17 +105,17 @@ $: {
   // show a Loading message if it takes a long time, or show an error if there's a network/IDB error
   async function handleDatabaseLoading () {
     const timeoutHandle = setTimeout(() => {
-      message = i18n.loading
+      message = i18n.loadingMessage
     }, TIMEOUT_BEFORE_LOADING_MESSAGE)
     try {
       await database.ready()
       loaded = true
     } catch (err) {
       console.error(err)
-      message = i18n.networkError
+      message = i18n.networkErrorMessage
     } finally {
       clearTimeout(timeoutHandle)
-      if (message === i18n.loading) {
+      if (message === i18n.loadingMessage) {
         message = ''
       }
     }

src/picker/i18n/en.js

@@ -1,16 +1,16 @@
 export default {
-  emojiUnsupported: 'Your browser does not support color emoji.',
-  loading: 'Loading…',
-  networkError: 'Could not load emoji. Try refreshing.',
-  regionLabel: 'Emoji picker',
-  search: 'Search',
-  favoritesLabel: 'Favorites',
-  skinToneLabel: 'Choose a skin tone (currently {skinTone})',
-  skinToneDescription: 'When expanded, press up or down to select and enter to choose.',
-  skinTonesTitle: 'Skin tones',
-  searchResultsLabel: 'Search results',
-  searchDescription: 'When search results are available, press up or down to select and enter to choose.',
   categoriesLabel: 'Categories',
+  emojiUnsupportedMessage: 'Your browser does not support color emoji.',
+  favoritesLabel: 'Favorites',
+  loadingMessage: 'Loading…',
+  networkErrorMessage: 'Could not load emoji. Try refreshing.',
+  regionLabel: 'Emoji picker',
+  searchDescription: 'When search results are available, press up or down to select and enter to choose.',
+  searchLabel: 'Search',
+  searchResultsLabel: 'Search results',
+  skinToneDescription: 'When expanded, press up or down to select and enter to choose.',
+  skinToneLabel: 'Choose a skin tone (currently {skinTone})',
+  skinTonesLabel: 'Skin tones',
   skinTones: [
     'Default',
     'Light',

src/types/shared.ts

@@ -40,16 +40,16 @@ export interface PickerConstructorOptions {
 }
 
 export interface I18n {
-  emojiUnsupported: string
-  loading: string
-  networkError: string
+  emojiUnsupportedMessage: string
+  loadingMessage: string
+  networkErrorMessage: string
   regionLabel: string
-  search: string
+  searchLabel: string
   skinToneLabel: string
   searchResultsLabel: string
   categoriesLabel: string
   categories: I18nCategories
-  skinTonesTitle: string
+  skinTonesLabel: string
   skinTones: string[]
   searchDescription: string
   skinToneDescription: string

test/spec/picker/element.test.js

@@ -17,7 +17,7 @@ const { type, clear } = userEvent
 
 const frI18n = JSON.parse(JSON.stringify(enI18n))
 
-frI18n.search = 'Recherche'
+frI18n.searchLabel = 'Recherche'
 frI18n.skinTones[0] = 'Défaut'
 frI18n.categories['smileys-emotion'] = 'Sourires et emoticons'
 

test/spec/picker/errors.test.js

@@ -1,5 +1,5 @@
 import Picker from '../../../src/picker/PickerElement'
-import { ALL_EMOJI, basicAfterEach, basicBeforeEach, tick } from '../shared'
+import { ALL_EMOJI, basicAfterEach, basicBeforeEach, tick, truncatedEmoji } from '../shared'
 import Database from '../../../src/database/Database'
 import { getByRole, waitFor } from '@testing-library/dom'
 
@@ -20,22 +20,42 @@ describe('errors', () => {
 
   // can't seem to get jest to ignore these expected errors
   test.skip('offline shows an error', async () => {
-    const ERROR = 'error.json'
+    const dataSource = 'error.json'
 
-    fetch.get(ERROR, { body: null, status: 500 })
-    fetch.head(ERROR, { body: null, status: 500 })
-
-    const picker = new Picker({ dataSource: ERROR })
-    await tick(20)
-
-    await (expect(() => picker.database.ready())).rejects.toThrow()
+    fetch.get(dataSource, { body: null, status: 500 })
+    fetch.head(dataSource, { body: null, status: 500 })
 
+    const picker = new Picker({ dataSource })
     const container = picker.shadowRoot.querySelector('.picker')
     document.body.appendChild(picker)
 
-    await waitFor(() => expect(getByRole(container, 'alert', { name: /Could not load emoji/ })).toBeVisible())
+    await tick(20)
+
+    await expect(picker.database.ready()).rejects.toThrow()
+
+    await waitFor(() => expect(getByRole(container, 'alert').innerHTML).toContain('Could not load'))
 
     await new Database({ dataSource: ALL_EMOJI }).delete()
     document.body.removeChild(picker)
   })
+
+  test('slow networks show "Loading"', async () => {
+    const dataSource = 'slow.json'
+
+    fetch.get(dataSource, () => new Response(JSON.stringify(truncatedEmoji), { headers: { ETag: 'W/slow' } }),
+      { delay: 1500 })
+    fetch.head(dataSource, () => new Response(null, { headers: { ETag: 'W/slow' } }),
+      { delay: 1500 })
+
+    const picker = new Picker({ dataSource })
+    const container = picker.shadowRoot.querySelector('.picker')
+    document.body.appendChild(picker)
+    await tick(20)
+
+    await waitFor(() => expect(getByRole(container, 'alert').innerHTML).toContain('Loading'), { timeout: 2000 })
+    await waitFor(() => expect(getByRole(container, 'menuitem', { name: /😀/ })).toBeVisible(), { timeout: 2000 })
+
+    await new Database({ dataSource }).delete()
+    document.body.removeChild(picker)
+  }, 5000)
 })