common-sk/modules/dom_test.js

import { $, $$, findParent } from './dom.js'

let container = document.createElement('div');
document.body.appendChild(container);

beforeEach(function() {
  container.innerHTML = `
  <div id=delta class=alpha></div>
  <span class=alpha></span>
  <span class=beta></span>
  <video id=epsilon class=alpha></video>
`
});

afterEach(function() {
  container.innerHTML = '';
});

describe('$ aka querySelectorAll', function() {
  // checks that each "array-like" thing has
  // the same things in the same indices.
  // Useful for comparing the "not-quite-Array" that
  // querySelectorAll returns.
  function assertEquals(arr, qsa) {
    assert.isOk(arr);
    assert.equal(arr.length, qsa.length);
    for (let i = 0; i < arr.length; i++) {
      assert.equal(arr[i], qsa[i]);
    }
  }

  it('should mimic querySelectorAll', function(){
    assertEquals($('.alpha', container),
                 container.querySelectorAll('.alpha'));
    assertEquals($('#epsilon', container),
                 container.querySelectorAll('#epsilon'));
    assertEquals($('span', container),
                 container.querySelectorAll('span'));
  });

  it('should default to document', function(){
    assertEquals($('.alpha'),
                 document.querySelectorAll('.alpha'));
    assertEquals($('#epsilon'),
                 document.querySelectorAll('#epsilon'));
    assertEquals($('span'),
                 document.querySelectorAll('span'));
  });

  it('should return a real array', function(){
    let arr = $('.alpha');
    assert.isTrue(Array.isArray(arr));
  });

  it('returns empty array if not found', function(){
    let arr = $('#not-found');
    assert.deepEqual([], arr);
  });
});

describe('$$ aka querySelector', function() {
  it('should mimic querySelector', function(){
    assert.equal($$('.alpha', container),
                 container.querySelector('.alpha'));
    assert.equal($$('#epsilon', container),
                 container.querySelector('#epsilon'));
    assert.equal($$('span', container),
                 container.querySelector('span'));
  });

  it('should default to document', function(){
    assert.equal($$('.alpha'),
                 document.querySelector('.alpha'));
    assert.equal($$('#epsilon'),
                 document.querySelector('#epsilon'));
    assert.equal($$('span'),
                 document.querySelector('span'));
  });

  it('returns a single item', function(){
    let ele = $$('.alpha');
    assert.isFalse(Array.isArray(ele));
    assert.equal('delta', ele.id);
  });

});

describe('findParent', function() {
  it('identifies the correct parent element', function() {
    // Add an HTML tree to the document.
    var div = document.createElement('div');
    div.innerHTML =
      '<div id=a>' +
      '  <p id=aa>' +
      '    <span id=aaa>span</span>' +
      '    <span id=aab>span</span>' +
      '  </p>' +
      '  <span id=ab>' +
      '    <p id=aba>para</p>' +
      '  </span>' +
      '  <div id=ac>' +
      '    <p id=aca>para</p>' +
      '  </div>' +
      '</div>' +
      '<div id=b>' +
      '  <p id=ba>para</p>' +
      '</div>' +
      '<span id=c>' +
      '  <span id=ca>' +
      '    <p id=caa>para</p>' +
      '  </span>' +
      '</span>';
    assert.equal(findParent($$('#a', div), 'DIV'), $$('#a', div), 'Top level');
    assert.equal(findParent($$('#a', div), 'SPAN'), null);
    assert.equal(findParent($$('#aa', div), 'DIV'), $$('#a', div));
    assert.equal(findParent($$('#aaa', div), 'DIV'), $$('#a', div));
    assert.equal(findParent($$('#aaa', div), 'P'), $$('#aa', div));
    assert.equal(findParent($$('#aab', div), 'SPAN'), $$('#aab', div));
    assert.equal(findParent($$('#ab', div), 'P'), null);
    assert.equal(findParent($$('#aba', div), 'SPAN'), $$('#ab', div));
    assert.equal(findParent($$('#ac', div), 'DIV'), $$('#ac', div));
    assert.equal(findParent($$('#aca', div), 'DIV'), $$('#ac', div));
    assert.equal(findParent($$('#ba', div), 'DIV'), $$('#b', div));
    assert.equal(findParent($$('#caa', div), 'DIV'), div);
    assert.equal(findParent($$('#ca', div), 'SPAN'), $$('#ca', div));
    assert.equal(findParent($$('#caa', div), 'SPAN'), $$('#ca', div));
  });
});