使用 Controller As 语法测试变量绑定

Question

我正在尝试使用控制器作为语法来测试一个简单的表单控制器。我想要的是能够将不同的字段值传递给每个单元测试并查看控制器如何反应。我用作示例的代码：

控制器：

angular.module('auth').controller('LoginFormCtrl',['AuthService',function(AuthService) {
  var self = this;

  self.non_field_errors = {};

  self.login = function(){
    AuthService.login(self.login_details.username,self.login_details.password)
        .then(function(){
            //do routing stuff here
        },function(response){
            if('non_field_errors' in response){
                self.non_field_errors = response.non_field_errors;
            }
        });
    };
}]);

测试：

describe('LoginFormCtrl', function() {

var scope; //scope to bind controller to
var ctrl; //Controller to be tested

beforeEach(module('auth'));

//Mock out AuthService
beforeEach(module(function($provide){

    authService = {
        login: function(username,password){
            var deferred = $q.defer();
            if(username == 'test1' && password == 'password1'){
                deferred.resolve();
            }else{
                deferred.reject({non_field_errors:['non_field_error_1']});
            }
            return deferred;
        }
    };
    $provide.value('AuthService',authService);

}));

//Set up scope
beforeEach(inject(function($rootScope){
    scope = $rootScope.$new();
}));

//Set up spies
beforeEach(inject(function(AuthService){
    spyOn(AuthService,'login').andCallThrough();
}));

//Clean Up
afterEach(function(){
    ctrl = null;
});

it('should log the user in if they provide the correct details', inject(function($controller){

    ctrl = $controller('LoginFormCtrl',scope,{
        login_details:{
            username:'test1',
            password:'password1',
        }
    });

    ctrl.login();
    expect(AuthService.login).toHaveBeenCalledWith('test1','password1');
}));

});

我尝试了几种不同的方法，例如创建范围和直接操作 ctrl 变量。进行此类测试的最佳方法是什么？

Answer 1

首先实例化控制器：

ctrl = $controller('LoginFormCtrl');

Angular 将注入 AuthService。控制器中没有其他依赖项可注入，因此传递范围或 login_details 将不起作用。

然后设置其login_details:

ctrl.login_details = {
    username: 'test1',
    password: 'password1'
};

然后调用函数测试：

ctrl.login();

使用 Controller As 语法测试变量绑定

Testing variable binding using Controller As syntax

jasmine

angularjs

angularjs-controller