カルマ/ジャスミン指令テストdomはコンパイルできませんが、それにはアクセスできません

Question

私の指示のfocusElementの機能をテストする方法を見つけようとしています。しかし、どういうわけか、私のテストで関数を呼び出すたびに、classElements変数は定義されていません。誰かが手がかりを持っていますか？ここ

ディレクティブ機能はここ

 $scope.focusElement = function() { 
      if (attrs.focusToClass) { 
       $scope.classElements = angular.element(document.querySelectorAll('.' + attrs.focusToClass)); 

       if (attrs.focusToClassIndex) { 
        // Focus to the class with the specified index. 
        // Index should be within the length of elements and must not be a negative number. 
        if (attrs.focusToClassIndex < $scope.classElements.length && attrs.focusToClassIndex >= 0) { 
         $scope.elementToFocus = $scope.classElements[attrs.focusToClassIndex]; 
        } 
       } else { 
        // Goes to the first index if the index is not specified. 
        $scope.elementToFocus = $scope.classElements[0]; 
       } 
      } else if (attrs.focusToId) { 
       // Focus to the given ID 
       $scope.elementToFocus = angular.element(document.querySelector('#' + attrs.focusToId))[0]; 
      } 

      if ($scope.elementToFocus) { 
       $scope.elementToFocus.focus(); 
      } 
     } 

あるユニットテストコードです。

describe('focusElement function', function() { 
    var targetElement; 
    var element; 
    var elementScope; 
    var elementToFocus; 

    beforeEach(function() { 
     targetElement = $compile('<div id="targetDiv" class="targetClass"><span id="targetSpan" class="targetClass"></span></div>')($rootScope); 
     $rootScope.$apply(); 
    }); 

    it('should return the class element with index 0', function() { 
     element = $compile('<div next-focus focus-to-class="targetClass"></div>')($rootScope); 
    }); 

    it('should return the class element with the specific index within the range', function() { 
     element = $compile('<div next-focus focus-to-class="targetClass" focus-to-class-index="1"></div>')($rootScope); 
    }); 

    it('should return the class element with the specific index outside the range', function() { 
     element = $compile('<div next-focus focus-to-class="targetClass" focus-to-class-index="-1"></div>')($rootScope); 
    }); 

    it('should return the id element', function() { 
     element = $compile('<div next-focus focus-to-id="targetDiv"></div>')($rootScope); 
    }); 

    afterEach(function() { 
     elementScope = element.scope(); 
     spyOn(elementScope, 'focusElement').and.callThrough(); 
     elementScope.focusElement(); 
     console.log(elementScope.classElements); 

     expect(elementScope.focusElement).toHaveBeenCalled(); 
     expect(elementScope.elementToFocus).toBeDefined(); 
     expect(elementScope.elementToFocus.focus).toHaveBeenCalled(); 
    }); 
}); 

Here is the error

Answer 1

エラーは、テスト対象ユニットを含むコードに直接documentを使用した結果です。解決策はdocumentを直接使用しないようにあなたのコードをリファクタリングすることです。のスタイル$()の構文を使用して同じ動作を得るには、$()が注射可能な依存関係を操作してからfixturesのようなものを使用し、テスト中の既知のコンテキスト。すでにJasmineを使用しているので、これを簡単に行うための便利なAPIとして、jasmine-jqueryを調べることをお勧めします。

（また、この特定のケースでは、あなた可能性あなたbeforeEach()コールバックでdocument.querySelectorAllもセットアップスタブ/モック。）

だその場所-ない-問題を-から幹とどのようツー修正 - （高レベル）しかし、それは進む前にカルマを少し良く理解するのに払う。

1. 拡張可能な「ダミー」HTTPサーバ（filesで構成されている）コンテンツをサービスする：細かい点がたくさん飛ばし

   は、基本的にカルマは、1つのアプリケーションに統合三つで構成されています。このサーバーはExpress JSアプリとして構成されています。カスタムミドルウェアを統合する必要があるかどうかを覚えておくと便利です。例えば。あなたのAngularアプリケーションコードが対話するためのダミーのAPIサーバを提供するために、サーバ上の追加のパスを公開することです。覚えておくべき特別なパスは、あなたのKarma config（作業ディレクトリ）で定義されているプロジェクトディレクトリに対応する '/ base'です。

2. ブラウザは、HTTPサーバー上の合成されたダミーの 'index.html'種類のページ（filesのすべてのエントリがどのようにincluded: trueがロードされるか、基本的に<script>タグ）をポイントするドライバです。
3. ユニットテストロジック、レポート作成などを統合するためのAPI /フレームワークです。これはkarma-jasmineタイプのプラグインが相互作用する場所であり、カルマがどのように出力を取り戻し、テストが成功したかどうかを判断する方法です。

ポイント＃2及び＃3は、環境（window）とHTML（document）は、本質的にカルマの内部実装の詳細として扱われるべきであり、試験中に依拠されるべきではないことを特に意味を有します。つまり、テスト対象のコードもこれらの詳細に頼ってはならないということです。これは、依存関係として$()のコンテキストで渡すようにコードを再構築する必要があるため、テストでよく知られているフィクスチャと実際のアプリケーションの通常のコンテキストを渡すことができます。