與模式

Question

茉莉花測試輸入我有以下的輸入形式：

<input type="email" name="email" ng-model="register.form.email" ng-pattern="emailRegex">

我想測試該窗體是無效的，如果用戶鍵入了無效的電子郵件：

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失敗，因爲輸入有效，但電子郵件正則表達式期望域。感覺就好像這個模式在我的測試中沒有使用，因爲當我將這個類型改爲文本時，它在第一次期望時已經失敗。我怎樣才能確保模式在測試中被挑選出來？

爲了完整，這是正則表達式（不是我寫的）：

^[_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,})$

更改類型text沒有工作。

我使用茉莉花2.4.1和角1.4.2。我使用ngHtml2JsPreprocessor作爲解釋here在我的測試中初始化表單。

編輯：

這是如何形成的初始化：

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

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('some@valid.address') 
 
    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" />

Answer 2

我想用form.email.$setViewValue，scope beeing傳遞給你的$編譯範圍後，你應該叫scope.$digest();。這是我在每次測試中使用的。

您還可以看到更多的相關信息就在這裏：https://stackoverflow.com/a/22772504/4583079