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

【问题标题】：How to test modification to DOM elements with Jasmine/Karma?如何使用 Jasmine/Karma 测试对 DOM 元素的修改？
【发布时间】：2015-01-06 07:54:29
【问题描述】：

我在 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() 是否按照它的设想进行。它假设通过附加类open 使ul 可见，那么测试它的最佳方法是什么？我使用 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，我将如何测试这种事情？

【问题讨论】：

标签： javascript unit-testing testing jasmine karma-runner

【解决方案1】：

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

这是jasmine-jquery lib 中使用的技术，您可以使用它来编写：

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

【讨论】：