如何单元测试DOM操作（茉莉花）(how to unit test DOM manipulation

我需要单元测试一些DOM操作功能茉莉花（目前我跑我的测试在浏览器中，并与噶）

我想知道什么是最好的办法是这样做呢？

例如，我可以模拟和存根的窗口和文档对象和spyOn一对夫妇的职能。但是，这并没有真正看起来像一个简单的解决方案，所以这就是为什么我问这个问题！

还是有做这更好的方式（不使用茉莉花也许）？

非常感谢

Answer 1:

我一直在使用一个有用的除了茉莉叫茉莉的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();

我发现茉莉，真正做到灵活和和气气用至今，我一直欣赏制作它的代码更好虽然三分球！

Answer 2:

我一直在寻找的东西为我自己，最后我做了一个小图书馆与19个的匹配器。也许你会发现它有用。 https://github.com/devrafalko/jasmine-DOM-custom-matchers