如何单元测试DOM操作（使用茉莉）

Question

我需要用jasmine对一些DOM操作函数进行单元测试（目前我在浏览器和Karma中运行测试）

我想知道最好的方法是什么？

例如，我可以模拟和存根窗口，记录对象和spyOn的几个函数。但这看起来并不是一个简单的解决方案，所以我要问这个问题！

或者有没有更好的方法（也许不用茉莉花）来做到这一点？

非常感谢

Answer 1

我一直在为自己寻找一些东西，最后我用19个定制匹配器创建了一个小库。也许你会发现这很有帮助。https://github.com/devrafalko/jasmine-DOM-custom-matchers

Answer 2

我一直在使用jasmine的一个有用的补充，名为jasmine jquery，可以在github上找到。

它允许您访问许多有用的额外匹配器函数，以断言jquery对象及其属性。

到目前为止，我发现特别有用的功能是断言dom元素的属性，以及监视诸如单击和提交之类的事件。。。

这是一个有点做作的例子……：）

describe("An interactive page", function() {
    it("'s text area should not contain any text before pressing the button", function() {
        expect(Page.textArea).toBeEmpty();
    });

    it("should contain a text area div", function() {
        expect(Page.textArea).toBe('div#textArea');
    });

    it("should append a div containing a random string to the text area when clicking the button", function() {
        var clickEvent = spyOnEvent('#addTextButton', 'click');
        $('button#addTextButton').click();

        expect('click').toHaveBeenTriggeredOn('#addTextButton');
        expect(clickEvent).toHaveBeenTriggered();

        expect($('div.addedText:last')).not.toBeEmpty());
    });
});

下面是代码：

var Page = {
    title : 'a title',
    description : 'Some kind of description description',
    textArea : $('div#textArea'),
    addButton : $('button#addTextButton'),


    init : function() {
        var _this = this;
        this.addButton.click(function(){
        var randomString = _this.createRandomString();
            _this.addTextToPage(randomString);
        });
    },

    addTextToPage : function( text ) {
        var textDivToAdd = $('<div>').html('<p>'+text+'</p>');

        this.textArea.append( textDivToAdd );
    },

    createRandomString : function() {
        var text = "";
        var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        for( var i=0; i < 5; i++ )
             text += possible.charAt(Math.floor(Math.random() * possible.length));

        return text;
    },
};

Page.init();

到目前为止，我发现茉莉花非常灵活，使用起来也很愉快，我总是很感激指针让它成为更好的代码！