web-dev-qa-db-ja.com

角度でイベントをテストするにはどうすればよいですか？

イベントが正しく送信またはブロードキャストされることをテストし、イベントを手動でトリガーする必要があります。

これを行う最良の方法は何ですか？

angularjsunit-testingjavascript-eventsangularjs-directivejasmine
65
Kenneth Lynne

イベントの発生とキャッチに関するテストが必要な場合は、これがその方法です。特定のイベント（$emit- edまたは$broadcast- ed）が確実に発生するようにするには、スパイを使用します。 $emitまたは$broadcastを呼び出すスコープへの参照が必要で、次のようなことをするだけです。

spyOn(scope, "$emit")
//run code to test
expect(scope.$emit).toHaveBeenCalledWith("MY_EVENT_ID", other, possible, args);

$emitで渡される引数を必要としない場合、または心配したくない場合は、$onを$rootScopeに配置し、フラグを設定して、イベントが発行されました。このようなもの：

var eventEmitted = false;
$rootScope.$on("MY_EVENT_ID", function() {
   eventEmitted = true;
});
//run code to test
expect(eventEmitted).toBe(true);

イベントがキャッチされたときに実行される機能をテストするには（$on）、少し簡単です。 inject関数から$rootScopeを取得し、目的のイベントを送信します。

$rootScope.$broadcast("EVENT_TO_TEST", other, possible, args);
//expects for event here

今、私はこのイベント処理がディレクティブまたはコントローラー（またはその両方）で発生することを想像します。ディレクティブテストの設定については、 https://github.com/vojtajina/ng-directive-testing を参照してください。コントローラーテストのセットアップについては、 https://github.com/angular/angular-phonecat/blob/master/test/unit/controllersSpec.js#L27 をご覧ください。

お役に立てれば。

121
dnc253

A1にこの構文を使用しました

=========== Controller ========
    var vm = this;
    $scope.$on('myEvent', function(event, data){
        console.log('event number', data.id);
    });
============ Test =============
 it('should throw myEvent', function() {
    var data = {};
    $scope.$broadcast('myEvent', {id:1});
    $scope.$broadcast('myEvent', {id:2});
    $scope.$broadcast('myEvent', {id:3});
});

============ Output ============
Chrome LOG: '--------------------------------------------'
Chrome LOG: 'event number', 1
Chrome LOG: 'event number', 2
Chrome LOG: 'event number', 3
0
Jnewbie

以下は、angular JS

注入中に、以下のようにrootScopeとスコープスタブを初期化します。

var rootScope;
var scopeStub = beforeEach(function() {
    inject(function($rootScope, _$controller_) {
        rootScope = $rootScope;
        scopeStub = $rootScope.$new();
        $controller = _$controller_;
    });
});

コントローラが作成された後、以下のようにrootScopeを使用してイベントを発生させます。

rootScope.$broadcast('eventName', parameter1);
0
Dilip Nannaware