bdd - Emberjs でビュー バインディングとテンプレートを単体テストする方法は?

Question

私は TDD/BDD を ember にしようとしていますが、テンプレート バインディングの単体テストやバインディングの表示をどのように行うのか疑問に思っていました。

また、ハンドルバー テンプレートをテストする必要がある場合、ハンドルバー テンプレートをテストするためのベスト プラクティスは何ですか?

ありがとう、シャイ

Answer 1

このテーマについて直接話している人を見つけられなかったので、私の調査結果について投稿を書きました。

また、 emberjs-tddという名前の emberjs アプリの単体テスト専用の新しいオープン ソース プロジェクトも開始しました。

基本的に私が行ったことは、View.$() 関数を使用して、テンプレート要素がビューに接続されていることをテストし、バインディングにはモック データ インジェクションを使用してから、入力値をモック データと比較することです。

何かのようなもの：

 describe("Given a login view it", function(){
    var loginView = null;

    beforeEach(function(){
        loginView = LoginView.create();

        Ember.run(function(){
            loginView.append();
        }); 
    });

    afterEach(function(){
        Ember.run(function(){
            loginView.remove();
        });
        loginView = null;
    });


    it("Should be defined", function(){
        expect(loginView).toBeDefined();
    });

    it ("Should have a user property", function(){
        expect(loginView.get("user")).toBeDefined();
    });

    describe("Should have a template and it", function(){

        it("Should have an user input", function(){
            expect(loginView.$("input.userInput").length).toEqual(1);
        });

        it("Should bind the username input value to the user.name property", function(){
            Ember.run(function(){
                loginView.set("user", Em.Object.create({name:"mockValue"}));
            });
            expect(loginView.$("input.userInput").val()).toEqual("mockValue");  
        });

        it("Should have a login button", function(){
            expect(loginView.$("button.loginButton").length).toEqual(1);
        });


    });

});

そして私のビューコードは次のとおりです。

define(["text!templates/LoginView.handlebars","ember"],function(LoginTemplate){
 var loginView = Em.View.extend({
    template: Em.Handlebars.compile(LoginTemplate),
    user: null
 });
 return loginView;
});

そして私のテンプレート：

{{view Ember.TextField class="userInput" valueBinding="user.name"}}
<button class="loginButton">Login</button>

繰り返しになりますが、完全なプロジェクトはemberjs-tddプロジェクトにありますので、このプロジェクトに調査結果を自由に記入してください。これを効率的に行う方法についてより良いアイデアを得ることができます。