如何对angularjs表单进行单元测试? [英] How to unit test angularjs form?

问题描述

我一直在学习 AngularJS，并且在单元测试方面进展非常顺利，但我遇到了一个棘手的问题.

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

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

如果我测试的是控制器之类的东西，我知道我会这样写(使用 Jasmine + Karma):

beforeEach(module('some.module'));beforeEach(inject(/* 服务 */) {/* 注入必要的服务 */});it('当输入错误时应该是无效的', function () {form.number = '不是数字';期望(form.number.$valid).toBeFalsy()；期望(form.$valid).toBeFalsy();});

但我不知道我需要注入哪些服务，而且我也没有在 forms 指南 或 ng-form 文档.

一个单元如何在 Angular 中测试表单?

解决方案

我不相信这是进行此类单元测试的最佳方式，但在 这个关于测试自定义角度指令的答案 和一些实验，我想出了一种对表单进行单元测试的方法.

安装后karma-ng-html2js-preprocessor 并对其进行配置，我设法进行了这样的工作单元测试:

var 作用域，形式；beforeEach(函数(){模块('我的模块');模块('模板');});beforeEach(inject($rootScope, $controller, $templateCache, $compile) {范围 = $rootScope.$new()ctrl = $controller('MyController'), {$scope":范围}templateHtml = $templateCache.get('path/to/my/template.html')formElem = angular.element("
" + templateHtml + "
")$compile(formElem)(范围)表单 = 范围.表单范围.$apply()}it('不应允许无效的`宽度`', function() {期望(form.$valid).toBeTruthy()；form.number.$setViewValue('香蕉');期望(form.number.$valid).toBeFalsy()});

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>

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

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.

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表单进行单元测试?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！