[解決済み] AngularJSで孤立したスコープディレクティブをユニットテストする方法
2023-07-07 01:47:28
質問
AngularJSで孤立したスコープをユニットテストする良い方法は何でしょうか?
ディレクティブのスニペット
scope: {name: '=myGreet'},
link: function (scope, element, attrs) {
//show the initial state
greet(element, scope[attrs.myGreet]);
//listen for changes in the model
scope.$watch(attrs.myGreet, function (name) {
greet(element, name);
});
}
ディレクティブが変更に対してリスニングしていることを確認したい - これは ではなく で動作しません。
it('should watch for changes in the model', function () {
var elm;
//arrange
spyOn(scope, '$watch');
//act
elm = compile(validHTML)(scope);
//assert
expect(scope.$watch.callCount).toBe(1);
expect(scope.$watch).toHaveBeenCalledWith('name', jasmine.any(Function));
});
UPDATEです。 期待されるウォッチャーが子スコープに追加されているかどうかをチェックすることで動作するようになりましたが、非常にもろく、おそらく文書化されていない方法でアクセサを使用しています(別名、予告なしに変更される可能性があります!)。
//this is super brittle, is there a better way!?
elm = compile(validHTML)(scope);
expect(elm.scope().$$watchers[0].exp).toBe('name');
アップデイト2です。
私が言及したように、これは脆いです! このアイデアはまだ動作しますが、AngularJSの新しいバージョンでは、アクセッサが
scope()
から
isolateScope()
:
//this is STILL super brittle, is there a better way!?
elm = compile(validHTML)(scope);
expect(elm.isolateScope().$$watchers[0].exp).toBe('name');
どのように解決するのですか?
参照 angular要素apiドキュメント . もし 要素.scope() を使うと、ディレクティブの scope プロパティで定義した要素のスコープを取得します。もし 要素.isolateScope() を使用すると、分離されたスコープ全体を取得します。 例えば、あなたのディレクティブが次のようなものであったとします。
scope : {
myScopeThingy : '='
},
controller : function($scope){
$scope.myIsolatedThingy = 'some value';
}
そうすると、テストの中でelement.scope()を呼び出すと、以下のようになります。
{ myScopeThingy : 'whatever value this is bound to' }
しかし、element.isolateScope()を呼ぶと、次のようになります。
{
myScopeThingy : 'whatever value this is bound to',
myIsolatedThingy : 'some value'
}
これはangular 1.2.2か1.2.3時点のもので、正確にはわかりません。 以前のバージョンでは、element.scope()しかありませんでした。
関連
-
[解決済み] JavaScriptのオブジェクトが空であることをテストするにはどうすればよいですか?
-
[解決済み] プライベートメソッド、フィールド、インナークラスを持つクラスをテストするにはどうすればよいですか?
-
[解決済み] AngularJSでデータバインディングはどのように機能するのですか?
-
[解決済み] AngularJSを使用して、ブラウザのコンソールで$scope変数にアクセスするにはどうすればよいですか?
-
[解決済み] AngularJSで$scope.$watchと$scope.$applyを使用するにはどうすればよいですか?
-
[解決済み] AngularJS コントローラにおける 'this' と $scope の比較
-
[解決済み] TDDのためのJavaScriptユニットテストツール
-
[解決済み】AngularJSのディレクティブスコープにおける「@」と「=」の違いは何ですか?
-
[解決済み】AngularJSのスコーププロトタイピング/プロトタイピング継承のニュアンスとは?
-
[解決済み] URL/アドレスバーからJavascriptの関数を呼び出す
最新
-
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 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] jqueryでdivの要素がオーバーフローしていないかチェックする
-
[解決済み] チェックボックスが選択されているかどうかを確認するjQuery
-
[解決済み] Angularjs - 現在の日付を表示する
-
[解決済み] JavaScriptを使用してHTML要素に属性を追加/更新するには?
-
[解決済み] Javascript / jQueryでAndroid端末を検出する。
-
[解決済み] AngularJS - ngRepeatフィルタリングされた結果の参照を取得する方法
-
[解決済み] AJAX Mailchimp サインアップフォームの統合
-
[解決済み] 各オブジェクトに?重複
-
[解決済み] V8 Javascript エンジンのスタンドアロン実行
-
[解決済み] Fetch: ステータスがOKでない場合、プロミスを拒否し、エラーをキャッチするか?