javascript - 如何对 angularjs 表单进行单元测试？

Question

我一直在学习 AngularJS，并且单元测试方面的事情进展得相当顺利，但我遇到了一些棘手的问题。

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

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

如果我正在测试像 Controller 这样的东西，我知道我会写这样的东西(使用 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();
});

但我不知道需要注入(inject)哪些服务，并且我没有运气在 the forms guide 中找到有关单元测试的文档。或the ng-form documentation .

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

Answer 1

我不相信这是单元测试此类内容的最佳方法，但在 this answer on testing custom angular directives 的帮助下经过一些实验，我找到了一种对表单进行单元测试的方法。

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