From c834895fa0e7d215ee8cb17b3efa8d0ce57a718c Mon Sep 17 00:00:00 2001 From: Johann-S Date: Sun, 24 Mar 2019 18:30:30 +0100 Subject: [PATCH] rewrite unit tests for selector engine --- js/src/dom/selector-engine.js | 26 +----- js/src/dom/selector-engine.spec.js | 115 +++++++++++++++++++++++++++ js/tests/unit/dom/selector-engine.js | 77 ------------------ 3 files changed, 117 insertions(+), 101 deletions(-) create mode 100644 js/src/dom/selector-engine.spec.js delete mode 100644 js/tests/unit/dom/selector-engine.js diff --git a/js/src/dom/selector-engine.js b/js/src/dom/selector-engine.js index eb6b680ac4..d66d8acfc8 100644 --- a/js/src/dom/selector-engine.js +++ b/js/src/dom/selector-engine.js @@ -22,37 +22,22 @@ const SelectorEngine = { }, find(selector, element = document.documentElement) { - if (typeof selector !== 'string') { - return null - } - return findFn.call(element, selector) }, findOne(selector, element = document.documentElement) { - if (typeof selector !== 'string') { - return null - } - return findOne.call(element, selector) }, children(element, selector) { - if (typeof selector !== 'string') { - return null - } - const children = makeArray(element.children) return children.filter(child => this.matches(child, selector)) }, parents(element, selector) { - if (typeof selector !== 'string') { - return null - } - const parents = [] + let ancestor = element.parentNode while (ancestor && ancestor.nodeType === Node.ELEMENT_NODE && ancestor.nodeType !== NODE_TEXT) { @@ -67,19 +52,12 @@ const SelectorEngine = { }, closest(element, selector) { - if (typeof selector !== 'string') { - return null - } - return closest.call(element, selector) }, prev(element, selector) { - if (typeof selector !== 'string') { - return null - } - const siblings = [] + let previous = element.previousSibling while (previous && previous.nodeType === Node.ELEMENT_NODE && previous.nodeType !== NODE_TEXT) { diff --git a/js/src/dom/selector-engine.spec.js b/js/src/dom/selector-engine.spec.js new file mode 100644 index 0000000000..28ccdf40b1 --- /dev/null +++ b/js/src/dom/selector-engine.spec.js @@ -0,0 +1,115 @@ +import SelectorEngine from './selector-engine' +import { makeArray } from '../util/index' + +/** Test helpers */ +import { getFixture, clearFixture } from '../../tests/helpers/fixture' + +describe('SelectorEngine', () => { + let fixtureEl + + beforeAll(() => { + fixtureEl = getFixture() + }) + + afterEach(() => { + clearFixture() + }) + + describe('matches', () => { + it('should return matched elements', () => { + fixtureEl.innerHTML = '
' + + expect(SelectorEngine.matches(fixtureEl, 'div')).toEqual(true) + }) + }) + + describe('find', () => { + it('should find elements', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('div') + + expect(makeArray(SelectorEngine.find('div', fixtureEl))).toEqual([div]) + }) + + it('should find elements globaly', () => { + fixtureEl.innerHTML = '
' + + const div = fixtureEl.querySelector('#test') + + expect(makeArray(SelectorEngine.find('#test'))).toEqual([div]) + }) + + it('should handle :scope selectors', () => { + fixtureEl.innerHTML = `` + + const listEl = fixtureEl.querySelector('ul') + const aActive = fixtureEl.querySelector('.active') + + expect(makeArray(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 = `` + + const list = fixtureEl.querySelector('ul') + const liList = makeArray(fixtureEl.querySelectorAll('li')) + const result = makeArray(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 = '
' + + 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]) + }) + }) +}) + diff --git a/js/tests/unit/dom/selector-engine.js b/js/tests/unit/dom/selector-engine.js deleted file mode 100644 index 80bee7800e..0000000000 --- a/js/tests/unit/dom/selector-engine.js +++ /dev/null @@ -1,77 +0,0 @@ -$(function () { - 'use strict' - - QUnit.module('selectorEngine') - - QUnit.test('should be defined', function (assert) { - assert.expect(1) - assert.ok(SelectorEngine, 'Manipulator is defined') - }) - - QUnit.test('should determine if an element match the selector', function (assert) { - assert.expect(2) - $(' ').appendTo('#qunit-fixture') - - assert.ok(!SelectorEngine.matches($('#qunit-fixture')[0], '.btn')) - assert.ok(SelectorEngine.matches($('.btn')[0], '.btn')) - }) - - QUnit.test('should find the selector, according to an element or not', function (assert) { - assert.expect(3) - $(' ').appendTo('#qunit-fixture') - - var btn = $('.btn').first()[0] - assert.strictEqual(SelectorEngine.find($('.btn')), null) - assert.equal(SelectorEngine.find('.btn')[0], btn) - assert.equal(SelectorEngine.find('.btn', $('#qunit-fixture')[0])[0], btn) - }) - - QUnit.test('should find the first element which match the selector, according to an element or not', function (assert) { - assert.expect(3) - $(' ').appendTo('#qunit-fixture') - - var btn = $('.btn').first()[0] - assert.strictEqual(SelectorEngine.findOne($('.btn')), null) - assert.equal(SelectorEngine.findOne('.btn'), btn) - assert.equal(SelectorEngine.findOne('.btn', $('#qunit-fixture')[0]), btn) - }) - - QUnit.test('should find children', function (assert) { - assert.expect(2) - $(' ').appendTo('#qunit-fixture') - - assert.strictEqual(SelectorEngine.children($('.btn')), null) - assert.equal(SelectorEngine.children($('#qunit-fixture')[0], '.btn').length, 2) - }) - - QUnit.test('should find the selector in parents', function (assert) { - assert.expect(2) - - $('').appendTo('#qunit-fixture') - assert.strictEqual(SelectorEngine.parents($('.container')[0], {}), null) - assert.strictEqual(SelectorEngine.parents($('input')[0], 'body').length, 1) - }) - - QUnit.test('should find the closest element according to the selector', function (assert) { - assert.expect(2) - var html = - '
' + - ' ' + - '
' - - $(html).appendTo('#qunit-fixture') - assert.strictEqual(SelectorEngine.closest($('.btn')[0], {}), null) - assert.strictEqual(SelectorEngine.closest($('.btn')[0], '.test'), $('.test')[0]) - }) - - QUnit.test('should fin previous element', function (assert) { - assert.expect(2) - var html = - '
' + - '' - - $(html).appendTo('#qunit-fixture') - assert.strictEqual(SelectorEngine.prev($('.btn')[0], {}), null) - assert.strictEqual(SelectorEngine.prev($('.btn')[0], '.test')[0], $('.test')[0]) - }) -})