devs
/
emoji-picker-element
mirror of https://github.com/nolanlawson/emoji-picker-element.git
4
0
Fork 0
Code Issues Projects Releases Wiki Activity

test: improve tests

This commit is contained in:
Nolan Lawson 2020-06-10 20:14:26 -07:00
parent 56b3941872
commit 83bec1c541
3 changed files with 15 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -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",

11
src/picker/utils/calculateTextWidth.js
View File

@ -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
}
}

13
test/spec/picker/Picker.test.js
View File

@ -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)
}