如何对 DOM 操作进行单元测试(使用 jasmine) [英] how to unit test DOM manipulation (with jasmine)

问题描述

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

I need to unit test some DOM manipulation functions with jasmine (currently I run my tests in the browser and with Karma)

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

I was wondering what the best approach would be to do this ?

例如，我可以模拟和存根 window 和 document 对象并监视它们的几个函数.但这看起来并不是一个简单的解决方案，所以这就是我问这个问题的原因！

For example, I can mock and stub the window and document objects and spyOn a couple of their functions. But this doesn't really look like an easy solution, so thats why I'm asking this question!

或者有更好的方法(也许不使用茉莉花)来做到这一点?

Or is there a better way (not using jasmine maybe) to do this ?

非常感谢

推荐答案

我一直在对 jasmine 使用一个有用的补充，叫做 jasmine-jquery 在 github 上可用.

I've been using a helpful addition to jasmine called jasmine-jquery available on github.

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

It gives you access to a number of useful extra matcher functions, to assert jquery objects and their properties.

特别是到目前为止我发现有用的功能是断言 dom 元素的属性，以及监视点击和提交等事件......

In particular the features I have found useful so far are asserting on attributes of dom elements, and spying on events such as clicks and submits...

这是一个有点做作的例子...... :)

Here is a somewhat contrived example... :)

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

到目前为止，我发现 jasmine 非常灵活且易于使用，但我一直很感激能够让代码变得更好的指针！

I've found jasmine to be really flexible and agreeable to use so far, I always appreciate pointers for making it the code better though!

这篇关于如何对 DOM 操作进行单元测试(使用 jasmine)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！