2013-04-30 3 views
26

基本的に、私はMocha(ユニットテストの何千も書いてあります)にかなり慣れています。私はAngularJS(私の最初のプロジェクトを書きました)には全く新しいです。モカを使用してAngularJSコードをテストするにはどうすればよいですか?

今、私はMochaを使用してAngularJSのすべてのユニットを単体テストできるかと思います。

私は、モカがブラウザで動作していることを知っています。私はすでにこれを行っています。しかし、私は物事を構成し、設定するにはどうすればいいですか

私は私がする必要があると思います:

  • ロードAngularJS
  • ロードモカ
  • は、テストのそれぞれにおいて

私のテストをロードし、私は、コントローラをロードするサービスを必要とします、 ... テストする。それ、どうやったら出来るの?私が参照し、テスト中にそのコントローラをインスタンス化するにはどうすればよい

angular.controller('fooController', [ '$scope', function ($scope) { 
    // ... 
}]); 

:私は、ファイルは基本的に以下の内容で、単にスクリプトファイルです、require.jsまたはそのような何かを使用していないのですか? 同じサービスについても同様、ディレクティブは、...

は私が$scope$http &協力のためのモックを作成する必要があります。自分のために、またはいくつかの助けがありますか?

私はカルマテストランナー(以前はTestacularとして知られています)がいることを認識していますが、テストランナーを完全に切り替えることは望ましくありません。

+1

あなたはカルマを使用していないにもかかわらず、/Testacularでは、[angular-seed](https://github.com/angular/angular-seed)のいくつかの例を見てください。モジュールは、テストのためにモジュールを設定するために '角モック 'をどのように使用するかを示します。 – NilsH

+4

これはmochaを使ってテストするのに非常に便利な記事です:http://www.yearofmoo.com/2013/01/full-spectrum-testing-with-angularjs-and-testacular.html – zlog

+2

角種子プロジェクトはあまり役に立ちませんジャスミンを使用しているので。なぜmochaとそのアダプタを使用している例はありませんか? –

答えて

14

ことを行う1つの方法は、あなたのテストでAngular$injectorを使用することです:

myModule_test.js

suite('myModule', function(){ 
    setup(function(){ 
    var app = angular.module('myModule', []); 
    var injector = angular.injector(['myModule', 'ng']); 
    var service = injector.get('myService'); 
    }); 

    suite('myService', function(){ 
    test('should return correct value', function(){ 
     // perform test with an instance of service here 
    }); 
    }); 
}); 

あなたhtmlは次のようになります。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>myModule tests</title> 
    <link rel="stylesheet" media="all" href="vendor/mocha.css"> 
</head> 
<body> 
    <div id="mocha"><p><a href=".">Index</a></p></div> 
    <div id="messages"></div> 
    <div id="fixtures"></div> 
    <script src="vendor/mocha.js"></script> 
    <script src="vendor/chai.js"></script> 
    <script src="angular.min.js"></script> 
    <script src="myModule.js"></script> 
    <script>mocha.setup('tdd')</script> 
    <script src="myModule_test.js"></script> 
    <script>mocha.run();</script> 
</body> 
</html> 
3

の場合依存関係がなく、必要ではない角度のあるサービスを作成していますあなたはモジュールを角度に依存しない方法で書くことができます。そして、小さな角ラッパーを書くか、角度の存在をテストし、条件付きでサービスを作成します。

ここで私はモカ・テストを含め、両方の角度で使用することができ、モジュール、ブラウザ、およびノー​​ドモジュールを作成するために使用するアプローチの例です:

(function(global) { 
    //define your reusable component 
    var Cheeseburger = {}; 

    if (typeof angular != 'undefined') { 
     angular.module('Cheeseburger', []) 
      .value('Cheeseburger', Cheeseburger); 
    } 
    //node module 
    else if (typeof module != 'undefined' && module.exports) { 
     module.exports = Cheeseburger 
    } 
    //perhaps you'd like to use this with a namespace in the browser 
    else if (global.YourAppNamespace) { 
     global.YourAppNamespace.Cheeseburger = Cheeseburger 
    } 
    //or maybe you just want it to be global 
    else { 
     global.Cheeseburger = Cheeseburger 
    } 
})(this); 
関連する問題