45

私は AngularJS を使用する Rails 3.2 アプリに取り組んでいます。Angular で必要なことを実行することはできますが、自分が行っていることをテストする方法を理解するのに非常に苦労しています。私は Guard-jasmine を使用して、PhantomJS を使用して 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

上記のコードは、意図したことを正確に実行します。テストが問題です。私はそれらをまったく機能させることができません。これは私が試したことの1つです。これを投稿することは、ほとんどの場合、どこかで会話を開始するためだけです.

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 を初めて使用するので、名前空間やモジュールなどに関して、私が守っていないベスト プラクティスがあれば、アドバイスをいただければ幸いです。

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

4

2 に答える 2

69

angular-ui/bootstrap でアラート ディレクティブをテストする方法は次のとおりです。

ボタン ディレクティブ用の別の簡単なテスト セットを次に示します。

いくつかのヒントを次に示します。

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

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

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

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

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

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

さまざまな複雑さのディレクティブのテストは、ブートストラップ リポジトリにあります。ただ見てくださいsrc/{directiveName}/test/。

于 2012-10-06T14:21:17.287 に答える
12

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

サンプル ディレクティブが期待される出力をレンダリングしていることを確認するためのテスト パターンを次に示します。

于 2013-09-17T21:34:33.403 に答える