import SelectorEngine from '../../../src/dom/selector-engine.js' import { clearFixture, getFixture } from '../../helpers/fixture.js' 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 = [ '' ].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) }) }) describe('getSelectorFromElement', () => { it('should get selector from data-bs-target', () => { fixtureEl.innerHTML = [ '
', '
' ].join('') const testEl = fixtureEl.querySelector('#test') expect(SelectorEngine.getSelectorFromElement(testEl)).toEqual('.target') }) it('should get selector from href if no data-bs-target set', () => { fixtureEl.innerHTML = [ '', '
' ].join('') const testEl = fixtureEl.querySelector('#test') expect(SelectorEngine.getSelectorFromElement(testEl)).toEqual('.target') }) it('should get selector from href if data-bs-target equal to #', () => { fixtureEl.innerHTML = [ '', '
' ].join('') const testEl = fixtureEl.querySelector('#test') expect(SelectorEngine.getSelectorFromElement(testEl)).toEqual('.target') }) it('should return null if a selector from a href is a url without an anchor', () => { fixtureEl.innerHTML = [ '', '
' ].join('') const testEl = fixtureEl.querySelector('#test') expect(SelectorEngine.getSelectorFromElement(testEl)).toBeNull() }) it('should return the anchor if a selector from a href is a url', () => { fixtureEl.innerHTML = [ '', '
' ].join('') const testEl = fixtureEl.querySelector('#test') expect(SelectorEngine.getSelectorFromElement(testEl)).toEqual('#target') }) it('should return null if selector not found', () => { fixtureEl.innerHTML = '' const testEl = fixtureEl.querySelector('#test') expect(SelectorEngine.getSelectorFromElement(testEl)).toBeNull() }) it('should return null if no selector', () => { fixtureEl.innerHTML = '
' const testEl = fixtureEl.querySelector('div') expect(SelectorEngine.getSelectorFromElement(testEl)).toBeNull() }) }) describe('getElementFromSelector', () => { it('should get element from data-bs-target', () => { fixtureEl.innerHTML = [ '
', '
' ].join('') const testEl = fixtureEl.querySelector('#test') expect(SelectorEngine.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target')) }) it('should get element from href if no data-bs-target set', () => { fixtureEl.innerHTML = [ '', '
' ].join('') const testEl = fixtureEl.querySelector('#test') expect(SelectorEngine.getElementFromSelector(testEl)).toEqual(fixtureEl.querySelector('.target')) }) it('should return null if element not found', () => { fixtureEl.innerHTML = '' const testEl = fixtureEl.querySelector('#test') expect(SelectorEngine.getElementFromSelector(testEl)).toBeNull() }) it('should return null if no selector', () => { fixtureEl.innerHTML = '
' const testEl = fixtureEl.querySelector('div') expect(SelectorEngine.getElementFromSelector(testEl)).toBeNull() }) }) describe('getMultipleElementsFromSelector', () => { it('should get elements from data-bs-target', () => { fixtureEl.innerHTML = [ '
', '
', '
' ].join('') const testEl = fixtureEl.querySelector('#test') expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target'))) }) it('should get elements in array, from href if no data-bs-target set', () => { fixtureEl.innerHTML = [ '', '
', '
' ].join('') const testEl = fixtureEl.querySelector('#test') expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toEqual(Array.from(fixtureEl.querySelectorAll('.target'))) }) it('should return empty array if elements not found', () => { fixtureEl.innerHTML = '' const testEl = fixtureEl.querySelector('#test') expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toHaveSize(0) }) it('should return empty array if no selector', () => { fixtureEl.innerHTML = '
' const testEl = fixtureEl.querySelector('div') expect(SelectorEngine.getMultipleElementsFromSelector(testEl)).toHaveSize(0) }) }) })