Unit Tests

[thipages]

Hi, I just written some unit tests on Dominus. I use QUnit. Is it ok for you or do you prefer another framework?

[thipages]

Find here three basic tests (one fails) in tests.zip which contains \tests folder with

• tests.js
• index.html

Feel free to change parts/all/not commit.

[Gurigraphics]

Liked it. very simple. If you want you can send the folder with the tests to the project. I would change only the names to make the understanding more modular:

/* ----- VARS ----- */

var DOM, HTML;
var METHODS = {}
var VIEW = {}
var QUNIT = {}
QUNIT.tests = {}

/* ----- METHODS ----- */

METHODS.newDOM = function() {
  DOM = new Dominus();
  HTML = DOM.HTML();
}

METHODS.add = function( HTML_key ) {
   DOM.add(HTML_key,"#DOM_test")
}

/* ----- VIEW ----- */

VIEW.result = function() {
  //console.log(document.getElementById("DOM_test").innerHTML);
  return document.getElementById("DOM_test").innerHTML;
}

/* ----- QUNIT ----- */

QUNIT.run = function() {
  for (var prop in QUNIT.tests) {
    if ( QUNIT.tests.hasOwnProperty(prop)) {
      (function (p) {
        QUnit.test(prop, function (assert) {
          assert.ok(QUNIT.tests[p]() === VIEW.result());
        });
      }(prop));
    }
  }
}

QUNIT.tests["empty_element"]=function () {
    METHODS.newDOM();
    HTML["a"] = {};
    METHODS.add("a");
    return '<div></div>';
};

QUNIT.tests["element"]=function () {
    METHODS.newDOM();
    HTML["a"] = {
        tag: "div",
        id: "element",
        html: "Hello World"
    };
    METHODS.add("a");
    return '<div id="element">Hello World</div>';
};

QUNIT.tests["elements_hierarchy"]=function () {
    METHODS.newDOM();
    HTML.a = {
        tag: "ul",
        id: "a",
        html: "a_b"
    };
    HTML.a_b = [
        { tag:"li", id: "a_b_1", html: "0", class: "hide" },
        { tag:"li", id: "a_b_2", html: "1", class: "hide" }
    ];
    METHODS.add("a");
    return '<ul id="a"><li id="a_b_1" class="hide">0</li><li id="a_b_2" class="hide">1</li></ul>';
};

QUNIT.run();

[thipages]

Please do it. I did not succeed creating a pull request and create a folder tests.... shame on me

[thipages]

I have improved the output (passed or failed) in order to better identify the position of the error in case of failure. Added : METHODS.findFirstDiffPos and VIEW.getMessage Changed : QUNIT.run

I can manage a pull request on these changes after your initial commit

/* ----- VARS ----- */

var DOM, HTML;
var METHODS = {}
var VIEW = {}
var QUNIT = {}
QUNIT.tests = {}

/* ----- METHODS ----- */

METHODS.newDOM = function() {
    DOM = new Dominus();
    HTML = DOM.HTML();
}

METHODS.add = function( HTML_key ) {
    DOM.add(HTML_key,"#DOM_test")
}

METHODS.findFirstDiffPos=function (a, b) {
    var longerLength = Math.max(a.length, b.length);
    for (var i = 0; i < longerLength; i++) {
        if (a[i] !== b[i]) return i;
    }
    return -1;
};

/* ----- VIEW ----- */

VIEW.result = function() {
    //console.log(document.getElementById("DOM_test").innerHTML);
    return document.getElementById("DOM_test").innerHTML;
}

VIEW.getMessage=function (isOk, actual, expected) {
    var pos, message;
    if (isOk) {
        message="Passed : "+actual;
    } else {
        pos=METHODS.findFirstDiffPos(actual,expected);
        message="Error from |---| : "+actual.substr(0,pos)+"|---|"+actual.substr(pos) + " VS "+expected.substr(pos,10)+" ...";
    }
    return message;
};

/* ----- QUNIT ----- */

QUNIT.run = function() {
    for (var prop in QUNIT.tests) {
        if ( QUNIT.tests.hasOwnProperty(prop)) {
            (function (p) {
                var actual, isOk, expected, message;
                expected=QUNIT.tests[p]();
                isOk = (expected === (actual=VIEW.result()));
                message=VIEW.getMessage(isOk, actual, expected);
                QUnit.test(prop, function (assert) {
                    assert.ok(isOk, message);
                });
            }(prop));
        }
    }
};

QUNIT.tests["empty_element"]=function () {
    METHODS.newDOM();
    HTML["a"] = {};
    METHODS.add("a");
    return '<div></div>';
};

QUNIT.tests["element"]=function () {
    METHODS.newDOM();
    HTML["a"] = {
        tag: "div",
        id: "element",
        html: "Hello World"
    };
    METHODS.add("a");
    return '<div id="element">Hello World</div>';
};

QUNIT.tests["elements_hierarchy"]=function () {
    METHODS.newDOM();
    HTML.a = {
        tag: "ul",
        id: "a",
        html: "a_b"
    };
    HTML.a_b = [
        { tag:"li", id: "a_b_1", html: "0", class: "hide" },
        { tag:"li", id: "a_b_2", html: "1", class: "hide" }
    ];
    METHODS.add("a");
    return '<ul id="a"><li id="a_b_1" class="hide">0</li><li id="a_b_2" class="hide">1</li></ul>';
};

QUNIT.run();

[Gurigraphics]

Message gets cut off

Error from |---| : <ul id="a"><li id="a_b_1" class="hide">0|---|0
</li><li id="a_b_2" class="hide">1</li></ul> VS </li><li i ...

Would be good :

Expected value: "<div> </div>
Current value: "<div> other</ div>

[thipages]

clear, but I did not succed on having a break line . HTML code added is part of the response.

[Gurigraphics]

Could this be another:

QUnit.test(prop, function (assert) {
    assert.ok(isOk, message);
    assert.equal("just nows", "just now");
 });

Expected: "just now"
Result: "just nows"
Diff: "just nows"

[thipages]

done. See pull request