js-web-tools/lib/domElement.test.js

Tools for Javascript develpers

"use strict";

var _domElement = require("../domElement");

var _domElementClass = require("../domElementClass");

function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }

function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }

function _iterableToArrayLimit(arr, i) { if (!(Symbol.iterator in Object(arr) || Object.prototype.toString.call(arr) === "[object Arguments]")) { return; } var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }

function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }

describe('Closest tests', function () {
  beforeEach(function () {
    document.body.innerHTML = "\n      <ul id=\"one\" class=\"level-1\">\n        <li class=\"item-i\">I</li>\n        <li id=\"ii\" class=\"item-ii\">II\n          <ul class=\"level-2\">\n            <li class=\"item-a\">A</li>\n            <li class=\"item-b\">B\n              <ul class=\"level-3\">\n                <li class=\"item-1\">1</li>\n                <li class=\"item-2\">2</li>\n                <li class=\"item-3\">3</li>\n              </ul>\n            </li>\n            <li class=\"item-c\">C</li>\n          </ul>\n        </li>\n        <li class=\"item-iii\">III</li>\n      </ul>\n    ";
  });
  afterEach(function () {
    document.body.innerHTML = '';
  });
  it('get null target', function () {
    var element = document.getElementById('one');
    var notExistNode = document.getElementById('ii');
    var target = (0, _domElement.closest)(element, 'div', notExistNode);
    expect(target).toEqual(null);
  });
  it('get closest element', function () {
    var _document$getElements = document.getElementsByClassName('item-a'),
        _document$getElements2 = _slicedToArray(_document$getElements, 1),
        element = _document$getElements2[0];

    expect(element).toBeDefined();
    var target = (0, _domElement.closest)(element, 'ul');
    expect((0, _domElementClass.hasClass)(target, 'level-2')).toEqual(true);
  });
  it('stop to find closest element when set target node', function () {
    var _document$getElements3 = document.getElementsByClassName('item-b'),
        _document$getElements4 = _slicedToArray(_document$getElements3, 1),
        element = _document$getElements4[0];

    var _document$getElements5 = document.getElementsByClassName('level-3'),
        _document$getElements6 = _slicedToArray(_document$getElements5, 1),
        stopNode = _document$getElements6[0];

    var target = (0, _domElement.closest)(element, 'ul', stopNode);
    expect((0, _domElementClass.hasClass)(target, 'level-2')).toEqual(true);
  });
});
describe('Contains tests', function () {
  beforeEach(function () {
    document.body.innerHTML = "\n      <div id='item-1'>\n        <div id='item-2'>\n          <span id='item-3'>Item 1<span>\n          <span id='sibling-1'>Item 2<span>\n          <span id='sibling-2'>Item 3<span>\n          <span id='sibling-3'>Item 4<span>\n        </div>\n        <div id=\"item-4\" />\n      </div>\n    ";
  });
  afterEach(function () {
    var element = document.getElementById('item-1');
    element.parentNode.removeChild(element);
  });
  it('should check for contained element', function () {
    var child = document.getElementById('item-3');
    var parent = document.getElementById('item-1');
    expect((0, _domElement.contains)(parent, child)).toEqual(true);
    expect((0, _domElement.contains)(child, parent)).toEqual(false);
  });
  it('should handle orphaned elements', function () {
    var orphan = document.createElement('div');
    expect((0, _domElement.contains)(document.body, orphan)).toEqual(false);
  });
  it('should use compareDocumentPosition to compare elements', function () {
    var sibling2 = document.getElementById('item-2');
    var sibling4 = document.getElementById('item-4');
    sibling2.contains = null;
    expect((0, _domElement.contains)(sibling2, sibling4)).toEqual(false);
  });
});
describe('Query active element tests', function () {
  beforeEach(function () {
    document.body.innerHTML = "\n      <div id=\"container\">\n        <input id=\"text-input\" type=\"text\" />\n      </div>\n    ";
  });
  afterEach(function () {
    var element = document.getElementById('container');
    element.parentNode.removeChild(element);
  });
  it('should document body is active', function () {
    var activeElement = (0, _domElement.getActiveElement)();
    expect(activeElement).toEqual(document.body);
  });
  it('should return null when node has no activeElement or name', function () {
    var container = document.getElementById('container');
    var activeElement = (0, _domElement.getActiveElement)(container);
    container.activeElement = null;
    expect(activeElement).toEqual(null);
  });
  it('should document body is active', function () {
    document.getElementById('text-input').focus();
    var activeElement = (0, _domElement.getActiveElement)();
    expect(activeElement).toEqual(document.getElementById('text-input'));
  });
});
describe('Query select all', function () {
  beforeEach(function () {
    document.body.innerHTML = "\n      <div id=\"container\">\n        <span id=\"textID\">Text</span>\n      </div>\n    ";
  });
  afterEach(function () {
    var element = document.getElementById('container');
    element.parentNode.removeChild(element);
  });
  it('should document body is active', function () {
    var container = document.getElementById('container');

    var _querySelectorAll = (0, _domElement.querySelectorAll)(container, '#textID'),
        _querySelectorAll2 = _slicedToArray(_querySelectorAll, 1),
        target = _querySelectorAll2[0];

    expect(target).toEqual(document.getElementById('textID'));
  });
});