AngularJSジャスミンテスト - 要素分離スコープが定義されていません

Question

タイムアウトをテストしようとしていますが、要素の範囲に問題があります。私はJSテストを書くのが初めてです。

it('should have timer defined at start')のテストでは、my変数は未定義として記録されます。何故ですか？

私はisolateScope（）がディレクティブのスコープを引き出すと思っていましたか？

私のテストは、次のようになります。

app.directive('timeout', function(timeoutService){ 
    return { 
    restrict: "A", 
    scope: { 
       onWarning: "&", // what function to fire when showing a warning 
      }, 
      link: function(scope, elem, attr){ 
       scope.timeoutService = timeoutService; 
       if(!scope.onWarning){ 
        throw new Error("Must provide on-warning for timeout directive."); 
       } 
       //console.log(scope.onWarning, scope.onTimeout); 
       // register timeouts and warnings with the service 
       timeoutService.onWarning = scope.onWarning; 
      } 
    } 
}); 

app.service('timeoutService', function($timeout){ 
    var _this = this; 
    var timer = null; 
    var time = 5000; 

    this.startTimer = function(){ 
    timer = $timeout(function(){ 
     if(_this.onWarning){ 
     _this.onWarning()(); 
     } 
    }, time) 
    } 

    this.startTimer(); 

}) 

たぶん私は間違ってテストしてる？私のディレクティブは、このようになります

https://plnkr.co/edit/IMrPd9g6HFSkgHizFF9p?p=preview

describe('Testing timeout', function(){ 
    var scope, $timeout, element; 

    beforeEach(inject(function ($rootScope, $compile, _$timeout_, $injector){ 
      scope = $rootScope.$new(); 
      $timeout = _$timeout_; 

      scope.onWarning = function(){ 
       scope.warned = true; 
      }; 

      element = '<div timeout on-warning="onWarning" on-timeout="onTimeout"></div>'; 
      element = $compile(element)(scope); 

      scope.$apply(); 
      scope.$digest(); 

    })); 

    it('should have timer defined at start', function(){ 
    console.log(element.isolateScope() , scope) 
    expect(element.isolateScope().timeoutService.timer).not.toBeFalsy; 
    }); 

    it('should have run warning function', function(){ 
    $timeout.flush(5000); 
    expect(scope.warned).toBe(true); 
    }); 

}); 

Answer 1

あなたはブロックを記述あなたの 'テストのタイムアウト' は

beforeEach(module('plunker')); 

を呼び出す必要があります。

Answer 2

角チームはすでに$コンパイルサービスをテストしているので、ディレクティブのスコープに使用されていることがわかっているので、私はスコープを調べます。実際に言うと、私は通常、ディレクティブの外で定義されたコントローラを使用し、それをテストします。あなたのディレクティブに、コントローラの代わりにリンク関数を使用していることを除いて、あなたがそれをコンパイルしてテストする必要のあるものはないようです。

ディレクティブがtimeoutServiceをスコープに添付していません。だからあなたはそれを見ることができません（あなたはそうしてはいけません！）。

AngularJSには既に$ timerサービスがあります。あなた自身のサービスでそれを再度ラップすることは不必要でエラーが起こりやすいので、私はこれをしません。さらに、あなたのディレクティブに渡されるonWarning関数については全く知らない。代わりに、あなたのディレクティブから$ timeoutを呼び出し、それが保留中の呼び出しを持っていないこと、または$ timeout.flush（）の後にデータが正しい状態にあることを確認してください。 $ destroyで保留中のタイムアウトをキャンセルしたことを確認してください。