如何单元测试angularjs形式？

Question

我一直在学习AngularJS,关于单元测试的事情一直很顺利,但我已经达到了一个棘手的地方.

假设我有一个简单的表单,例如:

<form name="form">
    <input type="text" name="number" ng-pattern="/^d+$/">
</form>

如果我正在测试类似控制器的东西,我知道我会写这样的东西(使用Jasmine + Karma):

beforeEach(module('some.module'));

beforeEach(inject(/* services */) {
    /* inject necessary services */
});

it('should be invalid when given bad input', function () {
    form.number = 'Not a number';
    expect(form.number.$valid).toBeFalsy();
    expect(form.$valid).toBeFalsy();
});

但是我不知道我需要注入哪些服务,而且我没有在forms指南或文档中找到有关单元测试的ng-form文档.

一个单元如何测试Angular中的表单？

Answer 1

我不相信这是对这样的单元测试的最好方法,但是在测试自定义角度指令和一些实验的这个答案的帮助下,我想出了一种单元测试表单的方法.

安装karma-ng-html2js-preprocessor和配置后,我设法得到这样的工作单元测试:

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()
});