rewrite unit tests for selector engine

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) {

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 = '<div></div>'
+
+      expect(SelectorEngine.matches(fixtureEl, 'div')).toEqual(true)
+    })
+  })
+
+  describe('find', () => {
+    it('should find elements', () => {
+      fixtureEl.innerHTML = '<div></div>'
+
+      const div = fixtureEl.querySelector('div')
+
+      expect(makeArray(SelectorEngine.find('div', fixtureEl))).toEqual([div])
+    })
+
+    it('should find elements globaly', () => {
+      fixtureEl.innerHTML = '<div id="test"></div>'
+
+      const div = fixtureEl.querySelector('#test')
+
+      expect(makeArray(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(makeArray(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 = 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 = '<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])
+    })
+  })
+})
+

js/tests/unit/dom/selector-engine.js

@@ -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)
-    $('<input type="checkbox" /> <button class="btn"></button>').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)
-    $('<input type="checkbox" /> <button class="btn"></button>').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)
-    $('<button class="btn">btn1</button> <button class="btn">btn2</button>').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)
-    $('<button class="btn">btn1</button> <button class="btn">btn2</button> <input type="text" />').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)
-
-    $('<input type="text" />').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 =
-      '<div class="test">' +
-      '  <button class="btn"></button>' +
-      '</div>'
-
-    $(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 =
-      '<div class="test"></div>' +
-      '<button class="btn"></button>'
-
-    $(html).appendTo('#qunit-fixture')
-    assert.strictEqual(SelectorEngine.prev($('.btn')[0], {}), null)
-    assert.strictEqual(SelectorEngine.prev($('.btn')[0], '.test')[0], $('.test')[0])
-  })
-})