Question

想象一个非常简单的 Angular 形式，其中两个输入字段绑定到两个范围变量，一个提交按钮调用控制器函数以在数据库中发送输入数据。

我的问题是 ，如果单元测试可以应用于此方案 。例如，是否可以测试UI - 输入验证？

我的猜测是否定的，因为我认为必须应用端到端测试（例如Selenium）。

我正在努力寻找合适的测试：例如我如何测试不允许输入字段中的某些字符？

我是否认为单元测试仅用于测试控制器方法和服务＆＃39;的？

Answer 1

如果您正在做一些手动操作（默认验证规则，如输入[编号]，那么您应该检查您的验证工作。）

如果您使用默认验证，您仍然可以在用户输入一些无效数据后检查输入值是否正确。

示例：

 describe('check default validation', function() {
   var $scope, form;
   beforeEach(module('exampleDirective'));
   beforeEach(inject(function($compile, $rootScope) {
     $scope = $rootScope;
     var element = angular.element(
       '<form name="form">' +
       '<input ng-model="model.somenum" name="somenum" integer />' +
       '</form>'
     );
     $scope.model = { somenum: null }
     $compile(element)($scope);
     form = $scope.form;
   }));

   describe('input type number should not accept string values', function() {
     it('should pass with integer', function() {
       form.somenum.$setViewValue('3');
       $scope.$digest();
       expect($scope.model.somenum).toEqual('3');
       expect(form.somenum.$valid).toBe(true);
     });
     it('should not pass with string', function() {
       form.somenum.$setViewValue('a');
       $scope.$digest();
       expect($scope.model.somenum).toBeUndefined();
       expect(form.somenum.$valid).toBe(false);
     });
   });
 });

自定义验证示例：

 var scope, form;

 beforeEach(function() {
   module('my-module');
   module('templates');
 });

 beforeEach(inject($rootScope, $controller, $templateCache, $compile) {
     scope = $rootScope.$new()

     ctrl = $controller('MyController'), {
         "$scope": scope
     }

     templateHtml = $templateCache.get('path/to/my/template.html')
     formElem = angular.element("<div>" + templateHtml + "</div>")
     $compile(formElem)(scope)
     form = scope.form

     scope.$apply()
 }

 it('should not allow an invalid `width`', function() {
   expect(form.$valid).toBeTruthy();
   form.number.$setViewValue('BANANA');
   expect(form.number.$valid).toBeFalsy()
 });

用于UI验证的单元测试

1 个答案: