web-dev-qa-db-ja.com

AngularJSディレクティブをテストする方法

私はRails 3.2アプリに取り組んでいます。必要なことを行うためにAngular PhantomJSを使用してJasmine仕様を実行するためにguard-jasmineを使用しています。

（関連する）htmlは次のとおりです。

<html id="ng-app" ng-app="app">
  <div id="directive-element" class="directive-element">
  </div>
</html>

Javascript（coffeescript内）は次のようになります。

window.Project =
  App: angular.module('app', [])
  Directive: {}

Project.Directive.DirectiveElement =
  ->
    restrict: 'C'
    link: (scope, element, attrs) ->
      element.html 'hello world'
Project.App.directive 'directiveElement', Project.Directive.DirectiveElement

上記のコードは、意図したとおりのことを行います。テストが問題です。私は彼らを全く働かせることはできません。これは私が試したことの一つです。これを投稿するのは、どこかで会話を始めるためだけです。

describe 'App.Directive.DirectiveElement', ->
  it 'updates directive-element', ->
    inject ($compile, $rootScope) ->
      element = $compile('<div id="app" ng-app="app"><div id="directive'element" class="directive-element"></div></div>')
      expect(element.text()).toEqual('hello world')

余談ですが、私はAngularJSが初めてなので、名前空間やモジュールなどに関して、私が従わないベストプラクティスがあれば、ガイダンスをいただければ幸いです。

これが機能するためのテストを取得するにはどうすればよいですか？

angularjstestingangularjs-directive
44
toadjamb

angle-ui/bootstrapでalertディレクティブをテストする方法 。

buttonsディレクティブ用のテストの別の簡単なセットです。

ここにいくつかのヒントがあります：

  • beforeEach(module('myModule'))でテストしているモジュールをテストランナーに必ず伝えてください。

  • ディレクティブに外部templateUrlがある場合は、何らかの方法でテストランナー用に事前キャッシュする必要があります。テストランナーは、GETテンプレートを非同期的に実行できません。ブートストラップでは、ビルドステップでテンプレートをjavascriptに挿入し、各テンプレートをモジュールにします。 _grunt-html2js_ gruntタスクを使用します。

  • テストでは、injectでbeforeEachヘルパーを使用して、$ compileと$ rootScope、および必要な他のサービスを注入します。 var myScope = $rootScope.$new()を使用して、各テストの新しいスコープを作成します。 var myElement = $compile('<my-directive></my-directive>')(myScope);を実行してディレクティブのインスタンスを作成し、その要素にアクセスできます。

  • ディレクティブが独自のスコープを作成し、それに対してテストしたい場合は、var directiveScope = myElement.children().scope()を実行することにより、そのディレクティブのスコープにアクセスできます-要素の子（ディレクティブ自体）を取得し、スコープを取得しますそれ。

  • タイムアウトをテストするには、$timeout.flush()を使用して、保留中のすべてのタイムアウトを終了できます。

  • 約束をテストするには、約束を解決するときに、次のダイジェストまでそのthenコールバックをnot呼び出すことを忘れないでください。したがって、テストでは、deferred.resolve(); scope.$apply();を何度も実行する必要があります。

the bootstrap repo 。で複雑さの異なるディレクティブのテストを見つけることができます。_src/{directiveName}/test/_を見てください。

68
Andrew Joslin

Angular Test Patterns が役立ちます。coffeescriptとjavascriptの両方に例があります。

ディレクティブの例 が 期待される出力のレンダリング であることを確認するテストパターンを次に示します。

12
daniellmb