js-web-tools/lib/__tests__/domElementClass.test.js

Tools for Javascript develpers

"use strict";

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

function defineProperty(element, propName, value) {
  Object.defineProperty(element, propName, {
    value: value
  });
}

describe('Element class tests', function () {
  beforeEach(function () {
    document.body.innerHTML = "\n      <div id=\"container\">\n        <div id=\"item-1\" />\n        <div id=\"item-2\" class=\"abc-class test-class\" />\n      </div>\n    ";
  });
  afterEach(function () {
    document.body.innerHTML = '';
  });
  it('hasClass should return true', function () {
    var element = document.getElementById('item-2');
    expect((0, _domElementClass.hasClass)(element, 'test-class')).toEqual(true);
    defineProperty(element, 'classList');
    expect((0, _domElementClass.hasClass)(element, 'test-class')).toEqual(true);
  });
  it('should add a class', function () {
    var element = document.getElementById('item-1');
    (0, _domElementClass.addClass)(element, 'plus-class');
    expect(element.className.includes('plus-class')).toEqual(true);
  });
  it('should add a class properly when using a fallback path', function () {
    var element = document.getElementById('item-1');
    defineProperty(element, 'classList');
    (0, _domElementClass.addClass)(element, 'new-class');
    expect(element.className.includes('new-class')).toEqual(true);
  });
  it('should add a class properly when className is not a string', function () {
    var element = document.getElementById('item-1');
    defineProperty(element, 'classList');
    defineProperty(element, 'className', {
      baseVal: 'base-class'
    });
    (0, _domElementClass.addClass)(element, 'new-class');
    var eleAttrs = element.getAttribute('class');
    expect(eleAttrs.includes('new-class')).toEqual(true);
    expect(eleAttrs.includes('base-class')).toEqual(true);
  });
  it('should add a class properly when className is not a string and baseVal is not set', function () {
    var element = document.getElementById('item-1');
    defineProperty(element, 'classList');
    defineProperty(element, 'className', {});
    (0, _domElementClass.addClass)(element, 'new-class');
    expect(element.getAttribute('class').includes('new-class')).toEqual(true);
  });
  it('should remove a class', function () {
    var element = document.getElementById('item-2');
    (0, _domElementClass.removeClass)(element, 'test-class');
    expect((0, _domElementClass.hasClass)(element, 'test-class')).toEqual(false);
    expect((0, _domElementClass.hasClass)(element, 'abc-class')).toEqual(true);
  });
  it('should remove a class when className is a string', function () {
    var element = document.getElementById('item-2');
    defineProperty(element, 'classList');
    (0, _domElementClass.removeClass)(element, 'test-class');
    expect((0, _domElementClass.hasClass)(element, 'test-class')).toEqual(false);
    expect((0, _domElementClass.hasClass)(element, 'abc-class')).toEqual(true);
  });
  it('should remove a class when className is not a string type', function () {
    var element = document.getElementById('item-2');
    defineProperty(element, 'classList');
    defineProperty(element, 'className', {});
    expect((0, _domElementClass.hasClass)(element, 'abc-class')).toEqual(false);
    (0, _domElementClass.removeClass)(element, 'test-class');
    expect(element.getAttribute('class').includes('test-class')).toEqual(false);
  });
  it('should toggle a class', function () {
    var element = document.getElementById('item-2');
    (0, _domElementClass.toggleClass)(element, 'test-class');
    expect((0, _domElementClass.hasClass)(element, 'test-class')).toEqual(false);
    (0, _domElementClass.toggleClass)(element, 'test-class');
    expect((0, _domElementClass.hasClass)(element, 'test-class')).toEqual(true);
  });
  it('should toggle a class when element has no classList', function () {
    var element = document.getElementById('item-2');
    defineProperty(element, 'classList');
    (0, _domElementClass.toggleClass)(element, 'new-class');
    expect((0, _domElementClass.hasClass)(element, 'new-class')).toEqual(true);
    (0, _domElementClass.toggleClass)(element, 'new-class');
    expect((0, _domElementClass.hasClass)(element, 'new-class')).toEqual(false);
  });
});