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

How to test modification to DOM elements with Jasmine/Karma?

本文关键字：DOM 元素 修改 测试 何使用 Jasmine Karma      更新时间：2023-09-26

我在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进行修改的情况下，我将如何测试这种事情？

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

这是jasmine jquery库中使用的技术，使用它可以编写：

element = document.createElement("div");
...
jasmine.getFixtures().set(element);
...
相关文章：