import SelectorEngine from '../../../src/dom/selector-engine'
import { getFixture, clearFixture } from '../../helpers/fixture'
describe('SelectorEngine', () => {
let fixtureEl
beforeAll(() => {
fixtureEl = getFixture()
})
afterEach(() => {
clearFixture()
})
describe('find', () => {
it('should find elements', () => {
fixtureEl.innerHTML = '
'
const div = fixtureEl.querySelector('div')
expect(SelectorEngine.find('div', fixtureEl)).toEqual([div])
})
it('should find elements globally', () => {
fixtureEl.innerHTML = ''
const div = fixtureEl.querySelector('#test')
expect(SelectorEngine.find('#test')).toEqual([div])
})
it('should handle :scope selectors', () => {
fixtureEl.innerHTML = [
'',
' ',
' - ',
' link',
'
',
' ',
'
'
].join('')
const listEl = fixtureEl.querySelector('ul')
const aActive = fixtureEl.querySelector('.active')
expect(SelectorEngine.find(':scope > li > .active', listEl)).toEqual([aActive])
})
})
describe('findOne', () => {
it('should return one element', () => {
fixtureEl.innerHTML = ''
const div = fixtureEl.querySelector('#test')
expect(SelectorEngine.findOne('#test')).toEqual(div)
})
})
describe('children', () => {
it('should find children', () => {
fixtureEl.innerHTML = [
''
].join('')
const list = fixtureEl.querySelector('ul')
const liList = [].concat(...fixtureEl.querySelectorAll('li'))
const result = SelectorEngine.children(list, 'li')
expect(result).toEqual(liList)
})
})
describe('parents', () => {
it('should return parents', () => {
expect(SelectorEngine.parents(fixtureEl, 'body')).toHaveSize(1)
})
})
describe('prev', () => {
it('should return previous element', () => {
fixtureEl.innerHTML = ''
const btn = fixtureEl.querySelector('.btn')
const divTest = fixtureEl.querySelector('.test')
expect(SelectorEngine.prev(btn, '.test')).toEqual([divTest])
})
it('should return previous element with an extra element between', () => {
fixtureEl.innerHTML = [
'',
'',
''
].join('')
const btn = fixtureEl.querySelector('.btn')
const divTest = fixtureEl.querySelector('.test')
expect(SelectorEngine.prev(btn, '.test')).toEqual([divTest])
})
it('should return previous element with comments or text nodes between', () => {
fixtureEl.innerHTML = [
'',
'',
'',
'Text',
''
].join('')
const btn = fixtureEl.querySelector('.btn')
const divTest = fixtureEl.querySelectorAll('.test')[1]
expect(SelectorEngine.prev(btn, '.test')).toEqual([divTest])
})
})
describe('next', () => {
it('should return next element', () => {
fixtureEl.innerHTML = ''
const btn = fixtureEl.querySelector('.btn')
const divTest = fixtureEl.querySelector('.test')
expect(SelectorEngine.next(divTest, '.btn')).toEqual([btn])
})
it('should return next element with an extra element between', () => {
fixtureEl.innerHTML = [
'',
'',
''
].join('')
const btn = fixtureEl.querySelector('.btn')
const divTest = fixtureEl.querySelector('.test')
expect(SelectorEngine.next(divTest, '.btn')).toEqual([btn])
})
it('should return next element with comments or text nodes between', () => {
fixtureEl.innerHTML = [
'',
'',
'Text',
'',
''
].join('')
const btn = fixtureEl.querySelector('.btn')
const divTest = fixtureEl.querySelector('.test')
expect(SelectorEngine.next(divTest, '.btn')).toEqual([btn])
})
})
describe('focusableChildren', () => {
it('should return only elements with specific tag names', () => {
fixtureEl.innerHTML = [
'lorem
',
'lorem',
'lorem',
'',
'',
'',
'',
'lorem '
].join('')
const expectedElements = [
fixtureEl.querySelector('a'),
fixtureEl.querySelector('button'),
fixtureEl.querySelector('input'),
fixtureEl.querySelector('textarea'),
fixtureEl.querySelector('select'),
fixtureEl.querySelector('details')
]
expect(SelectorEngine.focusableChildren(fixtureEl)).toEqual(expectedElements)
})
it('should return any element with non negative tab index', () => {
fixtureEl.innerHTML = [
'lorem
',
'lorem
',
'lorem
'
].join('')
const expectedElements = [
fixtureEl.querySelector('[tabindex]'),
fixtureEl.querySelector('[tabindex="0"]'),
fixtureEl.querySelector('[tabindex="10"]')
]
expect(SelectorEngine.focusableChildren(fixtureEl)).toEqual(expectedElements)
})
it('should return not return elements with negative tab index', () => {
fixtureEl.innerHTML = ''
const expectedElements = []
expect(SelectorEngine.focusableChildren(fixtureEl)).toEqual(expectedElements)
})
it('should return contenteditable elements', () => {
fixtureEl.innerHTML = 'lorem
'
const expectedElements = [fixtureEl.querySelector('[contenteditable="true"]')]
expect(SelectorEngine.focusableChildren(fixtureEl)).toEqual(expectedElements)
})
it('should not return disabled elements', () => {
fixtureEl.innerHTML = ''
const expectedElements = []
expect(SelectorEngine.focusableChildren(fixtureEl)).toEqual(expectedElements)
})
it('should not return invisible elements', () => {
fixtureEl.innerHTML = ''
const expectedElements = []
expect(SelectorEngine.focusableChildren(fixtureEl)).toEqual(expectedElements)
})
})
})