如何单元测试angularjs形式？

问题描述

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

I have been learning AngularJS and things have been going pretty smoothly regarding unit testing, but I've reached a bit of a tricky spot.

假设我有一个简单形式，例如：

Suppose I have a simple form, for example:

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

如果我正在测试类似控制器的东西，我知道我会写这样的东西（使用Jasmine + Karma）：

If I was testing something like a controller, I know that I would write it something like this (using 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();
});

但我不知道我需要注入哪些服务，而且我没有运气在或 ng-form 文档。

But I don't know which services I need to inject, and I haven't had any luck finding documentation on unit testing in either the forms guide or the ng-form documentation.

一个单位如何在Angular中测试表单？

How does one unit test a form in Angular?

推荐答案

我不相信这是对这样的东西进行单元测试的最好方法，但是在和一些实验时，我想出了一种单元测试表单的方法。

I'm not convinced this is the best way to unit test something like this but with some help from this answer on testing custom angular directives and some experimentation, I figured out a way to unit test the form.

安装并对其进行配置，我设法克和这样的工作单位测试：

After installing karma-ng-html2js-preprocessor and configuring it, I managed to get a working unit test like this:

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

这篇关于如何单元测试angularjs形式？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！