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

但我不知道我需要注入哪些服务，而且我也没有找到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()
});

Answer 2

我想我可以在接受的答案中添加一些细节：karma-ng-html2js-preprocessor应该以类似的方式在karma.conf.js文件中配置：

//karma.conf.js
ngHtml2JsPreprocessor: { 
    moduleName: 'templates'
},
files: [
    //... other files
    //my templates 
    'app/**/*.html'
],
preprocessors: {
    'app/**/*.html': ['ng-html2js']
}, 
plugins: [
    //... other plugins
    "karma-ng-html2js-preprocessor"
]

Answer 3

这是一种使用角度形式进行单元测试的方法，无需编译控制器的模板。在我的有限使用中对我有用。

describe('Test', function() {

  var $scope, fooController;

  beforeEach(function($rootScope, $controller, formDirective) {

    $scope = $rootScope.$new();
    fooController = $controller('fooController', {$scope: $scope});

    // we manually create the form controller
    fooController.form = $controller(formDirective[0].controller, {
      $scope: $scope,
      $element: angular.element("<form></form>"),
      $attrs: {}
    });

  });

  it('should test something', function() {
    expect(fooController.form.$valid).toBeFalsy();
  });

});

Answer 4

或者，如果您将WebPack与karma-webpack一起使用，则可以将模板包含require，而无需karma-ng-html2js-preprocessor个包裹：

describe("MyCtrl's form", function () {
    var $scope,
        MyCtrl;

    beforeEach(angular.mock.module("my.module"));

    beforeEach(inject(function (_$rootScope_, _$controller_, _$compile_) {
        $scope = _$rootScope_.$new();

        // Execute the controller's logic
        // Omit the ' as vm' suffix if you are not using controllerAs
        MyCtrl = _$controller_("MyCtrl as vm", { $scope: $scope });

        // Compile the template against our scope to populate form variables
        var html = require("./my.template.html"),
            template = angular.element(html);

        _$compile_(template)($scope);
    }));

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

HTML：

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

如何单元测试angularjs形式？

4 个答案: