Question

我在Javascript中创建了简单函数，当实例化为对象时，将DOM元素作为参数，然后通过其各种方法可以修改此元素，例如显示，隐藏，应用课程等。

我想编写单元测试来测试其功能，但我不确定最好的方法是什么。

以下示例：

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");
}

我如何测试.open()做了它想做的事情。它假设通过附加类ul使open可见，那么测试它的最佳方法是什么？我使用Jasmine（使用Karma）创建了这个简短的测试，当它运行时它失败了：

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();
    });
});

我假设在运行时，元素尚未附加到DOM，$("#someId ul").hasClass("open")为false，即使dd._$ul已经打开了类。

我如何测试功能对DOM进行修改的这类事情？

Answer 1

（供参考）：将元素实际附加到DOM可能会有所帮助。

这是jasmine-jquery lib中使用的技术，你可以写：

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

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

1 个答案: