如何使用Jasmine / Karma测试对DOM元素的修改？

Question

I created simple function in Javascript that when instantiated as an object takes a DOM element as a parameter and then via its various methods can modify this element eg show, hide, apply classes etc.

I want to write unit tests to test its functionality but am not sure whats the best way to do this.

Having example below:

var Ns = {};

Ns.Dropdown = function(options) {

    this._$el = $(options.el);
    this._$ul = this._$el.find("ul");
}

Ns.Dropdown.prototype.open = function() {

    this._$ul.addClass("open");
}

How would I test that .open() does what its suppose to do. It suppose to make ul visible via appending class open and what would be the best way to test it? I created this short test using Jasmine (with Karma) and when it runs it fails:

describe("DropDown Selector", function() {

    var dd;

    beforeEach(function() {

        var element = document.createElement("div");

        element.innerHTML = '<div id="someId" class="">
            <span class="trigger"></span>
<ul><li data-value="0"><span>Hourly</span></li>
<li data-value="1"><span>Daily</span></li>              
<li data-value="2" class="selected"><span>Weekly</span></li>                                
</ul></div>';

        dd = new Ns.Dropdown({
            el: $("#someId")[0]
        });

    });

    it("Should open popup", function() {
        dd.open();
        expect($("#someId ul").hasClass("open")).toBeTruthy();
    });
});

I assume that when it runs the element is not appended to DOM just yet and $("#someId ul").hasClass("open") is false , even though that dd._$ul has class open on it already.

How would I test for this sort of thing where functions making modifications to DOM?

Answer 1

(For reference) : It might help to actually attach the element to the DOM.

This is the technique used in the jasmine-jquery lib, with wich you can write :

element = document.createElement("div");
...
jasmine.getFixtures().set(element);
...