AngularJSテストのヒント：テスト指令

キーポイント

• AngularJSの指示はDOM操作にとって重要であり、アプリケーションの可用性に大きな影響を与えるため、単体テストでは無視することはできません。
• 命令テストには、命令が手動でコンパイルされているテスト環境を設定し、指示の機能を分離するために必要なオブジェクトとサービスをock笑することが含まれます。
• ディレクティブのlink関数は、DOM操作やイベント処理などのコアロジック実装を担当し、AngularJSのテストユーティリティを使用して徹底的にテストする必要があります。
• テスト中に命令で使用されているテンプレートを$templateCacheに統合することにより、テストプロセスを簡素化します。
• 分離されたスコープで命令をテストする場合、スコープのプロパティが適切にバインドされて実行されていることを確認します。これは、アプリケーションの指令の意図された機能に重要です。

ユニットテストは、ソフトウェア開発の不可欠な部分であり、コードエラーの削減に役立ちます。テストは、コードの品質を向上させるためのいくつかのタスクの1つです。 AngularJSはテスト可能性を念頭に置いて作成されるため、フレームワークの上に書かれたコードは簡単にテストできます。テストに関する最後の投稿では、ユニットテストコントローラー、サービス、およびプロバイダーを取り上げました。この記事では、命令テストについて引き続き議論しています。ディレクティブは、JavaScriptコードのオブジェクトとしてではなく、アプリケーションのHTMLテンプレートで使用されるため、他のコンポーネントとは異なります。私たちはDOM操作を実行するための指示を書きますが、それらは重要な役割を果たしているため、単体テストでそれらを無視することはできません。さらに、それらはアプリケーションの可用性に直接影響します。この記事の記事のいくつかの手法を使用するため、Angularjsテストの依存症についての以前の記事をチェックすることをお勧めします。このチュートリアルで開発されたコードを試してみたい場合は、設定したGitHubリポジトリをチェックアウトできます。

命令テスト

ディレクティブは、AngularJSで最も重要で複雑なコンポーネントです。ディレクティブテストは、機能のようなものとは呼ばれないため、注意が必要です。アプリケーションでは、ディレクティブがHTMLテンプレートに宣言的に適用されます。テンプレートがコンパイルされ、ユーザーが指示と対話すると、アクションが実行されます。ユニットテストを実行するときは、ユーザー操作を自動化し、HTMLを手動でコンパイルして指令の機能をテストする必要があります。

テストコマンドのオブジェクトを設定します

任意の言語をテストしたり、フレームワークで論理的なスニペットを使用したりするのと同じように、テスト指示を開始する前に、必要なオブジェクトへの参照を取得する必要があります。ここで作成される重要なオブジェクトは、テストする指令を含む要素です。指示が有効になるためには、指定された指令を備えたHTMLフラグメントをコンパイルする必要があります。たとえば、次の指令を検討してください：

<code class="language-javascript">angular.module('sampleDirectives', []).directive('firstDirective', function() {
  return function(scope, elem){
    elem.append('This span is appended from directive.');
  };
});</code>

ディレクティブのライフサイクルが開始され、コンパイルとリンク関数が実行されます。 $compileサービスを使用して、HTMLテンプレートを手動でコンパイルできます。以下のbeforeEachブロックは、上記の指示をコンパイルします：

<code class="language-javascript">angular.module('sampleDirectives', []).directive('firstDirective', function() {
  return function(scope, elem){
    elem.append('This span is appended from directive.');
  };
});</code>

編集後、命令のライフサイクルが開始されます。次のダイジェストサイクルの後、ディレクティブオブジェクトはページに表示されるのと同じ状態になります。ディレクティブが機能を実装するためのサービスに依存している場合、ディレクティブをコンパイルする前にサービスになりすまして、任意のサービス方法をテストで確認できるようにする必要があります。次のセクションで例を示します。

リンク関数をテスト

link関数は、ディレクティブ定義オブジェクト（DDO）で最も一般的に使用されるプロパティです。命令のコアロジックのほとんどが含まれています。このロジックには、単純なDOM操作、公開/購読イベントのリスニング、オブジェクトまたは属性の変更の監視、通話サービス、UIイベントの処理などが含まれます。これらのシナリオのほとんどをカバーしようとします。

dom operation

前のセクションで定義されている指令のケースから始めましょう。この指令は、指令を適用する要素の内容にスパン要素を追加します。指令内のスパンを探すことでテストできます。次のテストケースは、この動作を主張しています：

<code class="language-javascript">var compile, scope, directiveElem;

beforeEach(function(){
  module('sampleDirectives');

  inject(function($compile, $rootScope){
    compile = $compile;
    scope = $rootScope.$new();
  });

  directiveElem = getCompiledElement();
});

function getCompiledElement(){
  var element = angular.element('<div first-directive=""></div>');
  var compiledElement = compile(element)(scope);
  scope.$digest();
  return compiledElement;
}</code>

オブザーバー

指示は範囲の現在の状態に基づいて行動するため、スコープの状態が変更されたときに指示を更新するためにオブザーバーがいるはずです。オブザーバーのユニットテストは、データを操作し、$digestを呼び出すことによってオブザーバーに実行されるように強制する必要があり、命令のステータスをダイジェストサイクル後に確認する必要があります。次のコードは、上記の指令のわずかに変更されたバージョンです。スコープ上のフィールドを使用して、スパン内にテキストをバインドします：

<code class="language-javascript">it('should have span element', function () {
  var spanElement = directiveElem.find('span');
  expect(spanElement).toBeDefined();
  expect(spanElement.text()).toEqual('This span is appended from directive.');
});</code>

テストこの指令は、最初の指令に似ています。次のテストケースでは、命令のステータスが変更されたかどうかを確認します。

<code class="language-javascript">angular.module('sampleDirectives').directive('secondDirective', function(){
  return function(scope, elem){
    var spanElement = angular.element('' + scope.text + '');
    elem.append(spanElement);

    scope.$watch('text', function(newVal, oldVal){
      spanElement.text(newVal);
    });
  };
});</code>

テストプロパティのオブザーバーにも同じ手法を使用することもできます。

（後続のコンテンツは、スペースの制限のために簡素化され、要約され、コアテスト方法とアイデアは保持されます）

dom event jqliteのを使用して、クリックイベントをシミュレートして結果を確認できます。 triggerHandler

命令テンプレートテストテストを使用して、テストを簡素化します。 $templateCache

ディレクティブスコープテスト

プロパティバインディングと分離スコープのメソッド呼び出しを検証します。

がテスト

要求厳密な依存関係やオプションの依存関係を含むディレクティブの依存関係を検証します。

TESTの交換命令要素が交換されているかどうかを確認します。

transCludeテストディレクティブが翻訳されたコンテンツを正しく処理していることを確認します。

概要 この記事に示されているように、指示はAngularJSの他の概念よりもテストが困難です。同時に、アプリケーションの重要な部分を制御するため、無視することはできません。 AngularJSのテストエコシステムにより、プロジェクトの一部をテストしやすくなります。このチュートリアルを通して、あなたが今度は指示のテストに自信を持っていることを願っています。コメントセクションであなたの考えを教えてください。このチュートリアルで開発されたコードを試してみたい場合は、設定したGitHubリポジトリをチェックアウトできます。

（記事の長さのために、FAQの部分はここで省略されています。コアコンテンツは上にカバーされています。）

以上がAngularJSテストのヒント：テスト指令の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。