Angularjs - 如何对表单验证进行单元测试答案

【问题标题】：Angularjs - how to unit test form validationAngularjs - 如何对表单验证进行单元测试
【发布时间】：2016-08-24 00:35:06
【问题描述】：

我正在使用 Jasmine 对我的 Angular 应用程序进行单元测试。如何在我的控制器中测试表单验证？比如我有一个登录功能：

$scope.login = function() {
    if($scope.form_login.$valid) {
      //send request with username and password
    };
};

我正在尝试将$valid 设置为true，但我无法访问此处的表单。我收到一个错误TypeError: Cannot set property '$valid' of undefined：

it('should not send request if form validation fails', function() {
    $controller('loginController', {$scope: $scope});
    $scope.form_login.$valid = true;
    $scope.login();
})

【问题讨论】：

标签： javascript angularjs jasmine

【解决方案1】：

单元测试不应该真正测试表单。要测试表单和其他与控制器无关的东西，请使用 e2e 测试。

但是，如果您真的想在单元测试中测试验证，请参阅 To test a custom validation angularjs directive 或 How to unit test angularjs form?

【讨论】：

正确答案，将尽可能多的代码逻辑从视图移动到控制器中，并使用单元测试测试控制器代码，使用量角器 e2e 测试进行表单测试
@danday74 如果使用服务登录，我可能正在测试该服务未被称为单元测试方法中的方法，而且，我可以使用 e2e 量角器在集成方法中进行测试

【解决方案2】：

如果您使用服务来保存数据

$scope.login = function() {
    if($scope.form_login.$valid) {
      //send request with username and password
      MyService.login();
    };
};

检查您的服务是否未被调用并将 $scope.form_login.$valid 属性模拟为 false；

var MyService, controllerInjector, rootScope;
beforeEach(inject(function($controller, _MyService_, $rootScope){

  controllerInjector = $controller;
  MyService = _MyService_;
  rootScope = $rootScope;

}))

it('should not send request if form validation fails', function() {
  var scope, controller;
  scope = rootScope.$new();
  scope.form_login = {
    $valid : false;
  }
  var loginController = controllerInjector('loginController', {
    $scope : scope
  });

  spyOn(MyService,'login');

  scope.login();

  expect(MyService.login).not.toHaveBeenCalled();

});

【讨论】：