カスタムバリデーションのangularjsディレクティブをテストするには
2023-10-29 09:29:44
質問
このカスタム検証ディレクティブは、angularの公式サイトで紹介されている例です。 http://docs.angularjs.org/guide/forms テキスト入力が数値形式であるかどうかをチェックします。
var INTEGER_REGEXP = /^\-?\d*$/;
app.directive('integer', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
ctrl.$parsers.unshift(function(viewValue) {
if (INTEGER_REGEXP.test(viewValue)) {
// it is valid
ctrl.$setValidity('integer', true);
return viewValue;
} else {
// it is invalid, return undefined (no model update)
ctrl.$setValidity('integer', false);
return undefined;
}
});
}
};
});
このコードをユニットテストするために、こんなことを書きました。
describe('directives', function() {
beforeEach(module('exampleDirective'));
describe('integer', function() {
it('should validate an integer', function() {
inject(function($compile, $rootScope) {
var element = angular.element(
'<form name="form">' +
'<input ng-model="someNum" name="someNum" integer>' +
'</form>'
);
$compile(element)($rootScope);
$rootScope.$digest();
element.find('input').val(5);
expect($rootScope.someNum).toEqual(5);
});
});
});
});
すると、こんなエラーが出ます。
Expected undefined to equal 5.
Error: Expected undefined to equal 5.
何が起こっているかを見るために、いたるところに print 文を入れてみましたが、ディレクティブは決して呼び出されていないように見えます。 このような単純なディレクティブをテストする適切な方法は何でしょうか?
どのように解決するのですか?
他の解答のテストは、次のように書きます。
describe('directives', function() {
var $scope, form;
beforeEach(module('exampleDirective'));
beforeEach(inject(function($compile, $rootScope) {
$scope = $rootScope;
var element = angular.element(
'<form name="form">' +
'<input ng-model="model.somenum" name="somenum" integer />' +
'</form>'
);
$scope.model = { somenum: null }
$compile(element)($scope);
form = $scope.form;
}));
describe('integer', function() {
it('should pass with integer', function() {
form.somenum.$setViewValue('3');
$scope.$digest();
expect($scope.model.somenum).toEqual('3');
expect(form.somenum.$valid).toBe(true);
});
it('should not pass with string', function() {
form.somenum.$setViewValue('a');
$scope.$digest();
expect($scope.model.somenum).toBeUndefined();
expect(form.somenum.$valid).toBe(false);
});
});
});
なお
$scope.$digest()
の後に呼び出されることに注意してください。
$setViewValue
. これはフォームを「ダーティ」な状態にするもので、そうでなければ「プリミティブ」な状態のままとなり、おそらくあなたが望むものではありません。
関連
-
[解決済み] プライベートメソッド、フィールド、インナークラスを持つクラスをテストするにはどうすればよいですか?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み] フェイク、モッキング、スタビングの違いとは?
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
-
[解決済み] AngularJSで独自のスコープ*を持つカスタムディレクティブ内から親スコープにアクセスするにはどうすればよいですか?
-
[解決済み] Goでテストカバレッジを測定する方法
-
[解決済み] ユニットテストのROIを証明する確かな証拠はあるのか?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] ユニットテストの妥当なコードカバレッジは何%ですか(とその理由)?[クローズド]です。
-
[解決済み] Goでテストカバレッジを測定する方法
-
[解決済み] 抽象クラスのテスト
-
[解決済み] ユニットテストとは、どのようなもので、どのように行うのですか?[重複あり]
-
[解決済み] Go の testing パッケージを使用してテストのセットアップを行うにはどうすればよいですか?
-
[解決済み] ユニットテストでは重複したコードが許容されるのか?
-
[解決済み] ScalaTestとScala Specsのユニットテストフレームワークの違いは何ですか?
-
[解決済み] Kotlinでユニットテストのリソースを管理する方法、例えばデータベース接続や埋め込みelasticsearchサーバーを開始/停止する方法とは?
-
[解決済み] プログラマーはどのように協力してプロジェクトを進めるのか?
-
[解決済み] MOQ - 別のインターフェースにキャストする必要があるインターフェースをどのようにモックするか?