キーポイント

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

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

命令テスト

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

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

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

angular.module('sampleDirectives', []).directive('firstDirective', function() {
  return function(scope, elem){
    elem.append('This span is appended from directive.');
  };
});

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

angular.module('sampleDirectives', []).directive('firstDirective', function() {
  return function(scope, elem){
    elem.append('This span is appended from directive.');
  };
});

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

リンク関數(shù)をテスト

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

dom operation

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

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;
}

オブザーバー

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

it('should have span element', function () {
  var spanElement = directiveElem.find('span');
  expect(spanElement).toBeDefined();
  expect(spanElement.text()).toEqual('This span is appended from directive.');
});

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

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);
    });
  };
});

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

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

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

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

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

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

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

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

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

以上がAngularJSテストのヒント：テスト指令の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。