模式的Jasmine测试输入

Question

我有一个包含以下输入的表单：

<代码>

我想测试表单是否无效，如果用户键入无效的电子邮件：

it('...', function() {
    form.email.$setViewValue('invalid');
    expect(form.email.$valid).toBeFalsy(); // OK
    form.email.$setViewValue('invalid@');    
    expect(form.email.$valid).toBeFalsy(); // OK
    form.email.$setViewValue('invalid@host');     
    expect(form.email.$valid).toBeFalsy(); // Not OK    
});

最后一个expectatijon失败，因为输入是有效的，尽管电子邮件正则表达式需要一个域。感觉好像在我的测试中没有使用该模式，因为当我将类型更改为text时，它已经在第一次预期中失败了。我如何确保模式在测试中被提取出来？

为了完整起见，这是正则表达式(不是我写的):

^[_A-Za-z0-9-] （\.[_A-Za-z0-9-] ）*@[_A-Za-z0-9] [_A-Za-z0-9-]*[_A-Za-z0-9] （\.[A-Za-z0-9] ）*（\.[A-Za-z]{2，}）$

将类型更改为＜code＞文本

我使用jasmine 2.4.1和角1.4.2。正如这里所解释的，我使用ngHtml2Js预处理器在我的测试中初始化表单。

编辑:

这是如何初始化表单：

beforeEach(inject(function($rootScope, $templateCache, $compile) {
   var $scope = $rootScope.$new();
    vm = $controller('RegisterController', {$scope: $scope});
    var templateHtml = $templateCache.get("register.html");
    var template = angular.element("<div>" + templateHtml + "</div>");
    $compile(template)($scope);
    var form = $scope.registerForm;
    $scope.$apply();
    scope = $scope;
}));

Answer 1

我认为您应该在使用form.email.$setViewValue后调用scope.$digest（）;，将范围分配给您的$compile。这就是我在每次测试中使用的。

您还可以在此处查看更多信息：https://stackoverflow.com/a/22772504/4583079

Answer 2

AngularJS仍然在开发方式上工作

angular.module('app', [])

describe('Registration form', () => {
  'use strict'

  beforeEach(module('app'))

  let form
  let scope

  beforeEach(inject(($rootScope, $compile) => {
    scope = $rootScope.$new()
    var formElem = ['<form name="registrationForm">',
      '<input type="text" name="number" ng-model="input" ng-pattern="/^[_A-Za-z0-9-]+(\.[_A-Za-z0-9-]+)*@[_A-Za-z0-9]+[_A-Za-z0-9-]*[_A-Za-z0-9]+(\.[A-Za-z0-9]+)*(\.[A-Za-z]{2,})$/">',
      '</form>'
    ].join('')
    $compile(formElem)(scope)
    form = scope.registrationForm
  }))

  it('has no `$valid` state', () => {
    expect(form.$valid).toBeTruthy()
    form.number.$setViewValue('invalid email address')
    expect(form.number.$valid).toBeFalsy()
  })

  it('has `$valid` state', () => {
    expect(form.$valid).toBeTruthy()
    form.number.$setViewValue('[e-mail]')
    expect(form.number.$valid).toBeTruthy()
  })
})

<script src="https://safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-mocks.js"></script>
<link href="https://safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" />