web-dev-qa-db-ja.com

DOM操作を単体テストする方法（ジャスミンを使用）

ジャスミンを使用していくつかのDOM操作関数を単体テストする必要があります（現在、ブラウザーとKarmaでテストを実行しています）

私はこれを行うための最良のアプローチは何だろうと思っていましたか？

たとえば、windowおよびdocumentオブジェクトのモックとスタブを作成し、それらのいくつかの機能をspyOnできます。しかし、これは実際には簡単な解決策のようには見えないため、この質問をしています。

または、これを行うためのより良い方法（おそらくジャスミンを使用しない）がありますか？

どうもありがとう

unit-testingjasminedom-manipulation
37
Jeanluca Scaljeri

私は jasmine-jquery と呼ばれるジャスミンへの便利な追加を使用しています。

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

これまでのところ、ジャスミンは非常に柔軟で使いやすいとわかりましたが、コードをより良くするためのポインタを常に感謝しています！

28
tlcowling

私は自分のために何かを探していましたが、最終的に19のカスタムマッチャーで小さなライブラリを作成しました。たぶん役立つでしょう。 https://github.com/devrafalko/jasmine-DOM-custom-matchers

3
Paweł