如何在Emberjs上单元测试视图绑定和模板？

Question

我正试图以TDD/BDD的方式进入ember,我想知道你如何对模板绑定或视图绑定进行单元测试？

如果应该对所有车把模板进行测试,那么测试车把模板的最佳做法是什么？

谢谢,Shai

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项目中找到,所以请填写免费将您的发现贡献给这个项目,这样我们就可以更好地了解如何有效地完成这些工作.