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