123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- import SelectorEngine from '../../../src/dom/selector-engine'
- /** Test helpers */
- import { getFixture, clearFixture } from '../../helpers/fixture'
- describe('SelectorEngine', () => {
- let fixtureEl
- beforeAll(() => {
- fixtureEl = getFixture()
- })
- afterEach(() => {
- clearFixture()
- })
- describe('find', () => {
- it('should find elements', () => {
- fixtureEl.innerHTML = '<div></div>'
- const div = fixtureEl.querySelector('div')
- expect(SelectorEngine.find('div', fixtureEl)).toEqual([div])
- })
- it('should find elements globaly', () => {
- fixtureEl.innerHTML = '<div id="test"></div>'
- const div = fixtureEl.querySelector('#test')
- expect(SelectorEngine.find('#test')).toEqual([div])
- })
- it('should handle :scope selectors', () => {
- fixtureEl.innerHTML = `<ul>
- <li></li>
- <li>
- <a href="#" class="active">link</a>
- </li>
- <li></li>
- </ul>`
- 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 = '<div id="test"></div>'
- const div = fixtureEl.querySelector('#test')
- expect(SelectorEngine.findOne('#test')).toEqual(div)
- })
- })
- describe('children', () => {
- it('should find children', () => {
- fixtureEl.innerHTML = `<ul>
- <li></li>
- <li></li>
- <li></li>
- </ul>`
- 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').length).toEqual(1)
- })
- })
- describe('prev', () => {
- it('should return previous element', () => {
- fixtureEl.innerHTML = '<div class="test"></div><button class="btn"></button>'
- 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 = [
- '<div class="test"></div>',
- '<span></span>',
- '<button class="btn"></button>'
- ].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 = [
- '<div class="test"></div>',
- '<div class="test"></div>',
- '<!-- Comment-->',
- 'Text',
- '<button class="btn"></button>'
- ].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 = '<div class="test"></div><button class="btn"></button>'
- 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 = [
- '<div class="test"></div>',
- '<span></span>',
- '<button class="btn"></button>'
- ].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 = [
- '<div class="test"></div>',
- '<!-- Comment-->',
- 'Text',
- '<button class="btn"></button>',
- '<button class="btn"></button>'
- ].join('')
- const btn = fixtureEl.querySelector('.btn')
- const divTest = fixtureEl.querySelector('.test')
- expect(SelectorEngine.next(divTest, '.btn')).toEqual([btn])
- })
- })
- })
|