bdd - 如何在 Emberjs 上对视图绑定和模板进行单元测试？

Question

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

如果应该对其进行测试，那么测试车把模板的最佳做法是什么……？

谢谢， 夏

Answer 1

我没有找到任何人直接谈论这个话题，所以我写了一篇关于我的发现的帖子。

我还开辟了一个新的开源项目，专门用于对 emberjs 应用程序进行单元测试，名为emberjs-tdd

基本上我所做的是使用 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项目中找到，所以请填写免费信息，将您的发现贡献给这个项目，以便我们更好地了解如何有效地完成这些工作。