@qooxdoo/framework/source/class/qx/test/bom/element/Class.js

The JS Framework for Coders

/* ************************************************************************

   qooxdoo - the new era of web development

   http://qooxdoo.org

   Copyright:
     2007-2010 1&1 Internet AG, Germany, http://www.1und1.de

   License:
     MIT: https://opensource.org/licenses/MIT
     See the LICENSE file in the project's top-level directory for details.

   Authors:
     * Fabian Jakobs (fjakobs)

************************************************************************ */

qx.Class.define("qx.test.bom.element.Class", {
  extend: qx.dev.unit.TestCase,

  members: {
    setUp() {
      var div = document.createElement("div");
      div.id = "el";

      this._el = div;
      document.body.appendChild(div);
    },

    tearDown() {
      document.body.removeChild(this._el);
      this._el = null;
    },

    "test: get should return the className for svg element"() {
      if (document.createElementNS) {
        var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
        svg.setAttribute("id", "svgEl");
        svg.setAttribute("class", "svgclassname");
        document.body.appendChild(svg);
        var Class = qx.bom.element.Class;
        this.assertEquals("svgclassname", Class.get(svg));
        document.body.removeChild(svg);
      }
    },

    "test: get on new element should return empty string"() {
      var Class = qx.bom.element.Class;
      this.assertEquals("", Class.get(this._el));
    },

    "test: get should return the className"() {
      var Class = qx.bom.element.Class;
      this._el.className = "juhu kinners";
      this.assertEquals("juhu kinners", Class.get(this._el));
    },

    "test: add() on new element should set the class name"() {
      var Class = qx.bom.element.Class;
      this.assertEquals("juhu", Class.add(this._el, "juhu"));
      this.assertEquals("juhu", Class.get(this._el));
    },

    "test: add() on element with class should not set it again"() {
      var Class = qx.bom.element.Class;
      Class.add(this._el, "juhu");
      Class.add(this._el, "juhu");
      this.assertEquals("juhu", Class.get(this._el));
    },

    "test: addClasses() on new element should set multiple classes"() {
      var Class = qx.bom.element.Class;
      this.assertEquals(
        "juhu kinners",
        Class.addClasses(this._el, ["juhu", "kinners"])
      );

      this.assertEquals("juhu kinners", Class.get(this._el));
    },

    "test: addClasses() should ignore class names, which are already set"() {
      var Class = qx.bom.element.Class;
      Class.addClasses(this._el, ["juhu", "kinners"]);
      Class.addClasses(this._el, ["juhu"]);
      Class.addClasses(this._el, ["kinners"]);
      this.assertEquals("juhu kinners", Class.get(this._el));
    },

    "test: has()"() {
      var Class = qx.bom.element.Class;

      this.assertFalse(Class.has(this._el, "juhu"));

      Class.addClasses(this._el, ["juhu", "kinners"]);
      this.assertTrue(Class.has(this._el, "juhu"));
      this.assertTrue(Class.has(this._el, "kinners"));
      this.assertFalse(Class.has(this._el, "foo"));
    },

    "test: remove() non existing class should be ignored"() {
      var Class = qx.bom.element.Class;
      this.assertEquals("", Class.get(this._el));
      this.assertEquals("juhu", Class.remove(this._el, "juhu"));
      this.assertEquals("", Class.get(this._el));
    },

    "test: remove() existing classes"() {
      var Class = qx.bom.element.Class;
      Class.addClasses(this._el, ["juhu", "kinners"]);
      this.assertEquals("juhu", Class.remove(this._el, "juhu"));
      this.assertMatch(Class.get(this._el), /\s*kinners\s*/);
      this.assertEquals("kinners", Class.remove(this._el, "kinners"));
      this.assertEquals("", Class.get(this._el));
    },

    "test: removeClasses() to remove several classes at once"() {
      var Class = qx.bom.element.Class;
      Class.addClasses(this._el, ["a", "juhu", "b", "kinners", "c"]);
      this.assertEquals(
        "a b c",
        Class.removeClasses(this._el, ["kinners", "juhu"])
      );

      this.assertEquals("a b c", Class.get(this._el));
    },

    "test: replace()"() {
      var Class = qx.bom.element.Class;
      Class.addClasses(this._el, ["juhu", "kinners"]);
      this.assertEquals("foo", Class.replace(this._el, "juhu", "foo"));
      this.assertFalse(Class.has(this._el, "juhu"));
      this.assertTrue(Class.has(this._el, "foo"));
      this.assertTrue(Class.has(this._el, "kinners"));

      this.assertEquals("bar", Class.replace(this._el, "kinners", "bar"));
      this.assertFalse(Class.has(this._el, "juhu"));
      this.assertFalse(Class.has(this._el, "kinners"));
      this.assertTrue(Class.has(this._el, "foo"));
      this.assertTrue(Class.has(this._el, "bar"));

      this.assertEquals("", Class.replace(this._el, "i-dont-exist", "baz"));
      this.assertFalse(Class.has(this._el, "juhu"));
      this.assertFalse(Class.has(this._el, "kinners"));
      this.assertTrue(Class.has(this._el, "foo"));
      this.assertTrue(Class.has(this._el, "bar"));
      this.assertFalse(Class.has(this._el, "baz"));
    },

    "test: toggle() non existing class should add it"() {
      var Class = qx.bom.element.Class;
      this.assertEquals("juhu", Class.toggle(this._el, "juhu"));
      this.assertEquals("juhu", Class.get(this._el));
    },

    "test: toggle() existing class name should remove it"() {
      var Class = qx.bom.element.Class;
      Class.addClasses(this._el, ["juhu", "kinners"]);
      this.assertEquals("juhu", Class.toggle(this._el, "juhu"));
      this.assertMatch(Class.get(this._el), /\s*kinners\s*/);
    }
  }
});