From 83bec1c5411716fd4a72756a4337988fe7252f0a Mon Sep 17 00:00:00 2001
From: Nolan Lawson <nolan@nolanlawson.com>
Date: Wed, 10 Jun 2020 20:14:26 -0700
Subject: [PATCH] test: improve tests

---
 README.md                              |  2 +-
 src/picker/utils/calculateTextWidth.js | 11 ++++++++---
 test/spec/picker/Picker.test.js        | 13 ++++++-------
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index dfbf4e6..842e7da 100644
--- a/README.md
+++ b/README.md
@@ -209,7 +209,7 @@ Here is the default English `i81n` object (`"en"` locale):
   "searchDescription": "When search results are available, press up or down to select and enter to choose.",
   "searchResultsLabel": "Search results",
   "skinToneDescription": "When expanded, press up or down to select and enter to choose.",
-  "skinToneLabel": "Choose a skin tone",
+  "skinToneLabel": "Choose a skin tone (currently {skinTone})",
   "skinTones": [
     "Default",
     "Light",
diff --git a/src/picker/utils/calculateTextWidth.js b/src/picker/utils/calculateTextWidth.js
index 174704f..53b995b 100644
--- a/src/picker/utils/calculateTextWidth.js
+++ b/src/picker/utils/calculateTextWidth.js
@@ -1,6 +1,11 @@
 // get the width of the text inside of a DOM node, via https://stackoverflow.com/a/59525891/680742
 export function calculateTextWidth (node) {
-  const range = document.createRange()
-  range.selectNode(node.firstChild)
-  return range.getBoundingClientRect().width
+  /* istanbul ignore else */
+  if (process.env.NODE_ENV === 'test') {
+    return 1
+  } else {
+    const range = document.createRange()
+    range.selectNode(node.firstChild)
+    return range.getBoundingClientRect().width
+  }
 }
diff --git a/test/spec/picker/Picker.test.js b/test/spec/picker/Picker.test.js
index f7b4ff8..98f659e 100644
--- a/test/spec/picker/Picker.test.js
+++ b/test/spec/picker/Picker.test.js
@@ -1,4 +1,4 @@
-import { basicBeforeEach, basicAfterEach, ALL_EMOJI, truncatedEmoji } from '../shared'
+import { basicBeforeEach, basicAfterEach, ALL_EMOJI, truncatedEmoji, tick } from '../shared'
 import * as testingLibrary from '@testing-library/dom'
 import Picker from '../../../src/picker/PickerElement.js'
 import userEvent from '@testing-library/user-event'
@@ -28,6 +28,7 @@ describe('Picker tests', () => {
   })
   afterEach(async () => {
     basicAfterEach()
+    await tick(20)
     await picker.database.delete()
   })
 
@@ -63,13 +64,12 @@ describe('Picker tests', () => {
     await fireEvent.click(getByRole('button', { name: 'Choose a skin tone (currently Default)' }))
     await waitFor(() => expect(getByRole('listbox', { name: 'Skin tones' })).toBeVisible())
     expect(getAllByRole('option')).toHaveLength(6)
-    expect(getByRole('option', { name: 'Default', selected: true })).toBeVisible()
-    getByRole('option', { name: 'Default', selected: true }).focus() // have to explicitly focus for some reason (?)
+    getByRole('option', { name: 'Default', selected: true }).focus()
+    await waitFor(() => expect(getByRole('option', { name: 'Default', selected: true })).toBe(activeElement()))
 
     const pressKeyAndExpectActiveOption = async (key, name) => {
       await fireEvent.keyDown(activeElement(), { key, code: key })
-      await waitFor(() => expect(getByRole('option', { name, selected: true })).toBeVisible())
-      getByRole('option', { name, selected: true }).focus() // have to explicitly focus for some reason (?)
+      await waitFor(() => expect(getByRole('option', { name, selected: true })).toBe(activeElement()))
     }
 
     await pressKeyAndExpectActiveOption('ArrowDown', 'Light')
@@ -95,8 +95,7 @@ describe('Picker tests', () => {
     const pressKeyAndExpectActiveTab = async (key, name, group) => {
       await fireEvent.keyDown(activeElement(), { key, code: key })
       await fireEvent.click(activeElement())
-      await waitFor(() => expect(getByRole('tab', { name, selected: true })).toBeVisible())
-      getByRole('tab', { name, selected: true }).focus() // have to explicitly focus for some reason (?)
+      await waitFor(() => expect(getByRole('tab', { name, selected: true })).toBe(activeElement()))
       await expectGroupLength(group)
     }