66 lines
2.3 KiB
JavaScript
66 lines
2.3 KiB
JavaScript
import { groups } from '../../../src/picker/groups'
|
|
import * as testingLibrary from '@testing-library/dom'
|
|
import {
|
|
waitFor, getAllByRole,
|
|
getByRole, fireEvent
|
|
} from '@testing-library/dom'
|
|
import { ALL_EMOJI, basicAfterEach, basicBeforeEach, tick, truncatedEmoji } from '../shared'
|
|
import Picker from '../../../src/picker/PickerElement'
|
|
import Database from '../../../src/database/Database'
|
|
import { resetResizeObserverSupported } from '../../../src/picker/utils/widthCalculator'
|
|
|
|
// TODO: we can remove these tests when/if we stop supporting browsers without ResizeObserver
|
|
// https://caniuse.com/resizeobserver
|
|
|
|
describe('ResizeObserver unsupported', () => {
|
|
let picker
|
|
let container
|
|
let oldResizeObserver
|
|
|
|
beforeEach(async () => {
|
|
basicBeforeEach()
|
|
|
|
oldResizeObserver = global.ResizeObserver
|
|
delete global.ResizeObserver
|
|
resetResizeObserverSupported()
|
|
|
|
picker = new Picker({ dataSource: ALL_EMOJI })
|
|
document.body.appendChild(picker)
|
|
container = picker.shadowRoot.querySelector('.picker')
|
|
await tick(40)
|
|
})
|
|
|
|
afterEach(async () => {
|
|
await tick(40)
|
|
document.body.removeChild(picker)
|
|
await tick(40)
|
|
await new Database({ dataSource: ALL_EMOJI }).delete()
|
|
await tick(40)
|
|
await basicAfterEach()
|
|
|
|
global.ResizeObserver = oldResizeObserver
|
|
resetResizeObserverSupported()
|
|
})
|
|
|
|
test('basic picker test', async () => {
|
|
const numInGroup1 = truncatedEmoji.filter(_ => _.group === 0).length
|
|
const numInGroup2 = truncatedEmoji.filter(_ => _.group === 1).length
|
|
|
|
await waitFor(() => expect(getByRole(container, 'button', { name: 'Choose a skin tone (currently Default)' })).toBeVisible())
|
|
expect(getAllByRole(container, 'tab')).toHaveLength(groups.length)
|
|
|
|
expect(getByRole(container, 'tab', { name: 'Smileys and emoticons', selected: true })).toBeVisible()
|
|
await waitFor(() => expect(
|
|
testingLibrary.getAllByRole(getByRole(container, 'tabpanel'), 'menuitem')).toHaveLength(numInGroup1)
|
|
)
|
|
|
|
expect(getByRole(container, 'tab', { name: 'People and body' })).toBeVisible()
|
|
fireEvent.click(getByRole(container, 'tab', { name: 'People and body' }))
|
|
|
|
await waitFor(() => expect(
|
|
testingLibrary.getAllByRole(getByRole(container, 'tabpanel'), 'menuitem')).toHaveLength(numInGroup2))
|
|
|
|
expect(getByRole(container, 'tab', { name: 'People and body', selected: true })).toBeVisible()
|
|
})
|
|
})
|