angular.jsのkarmaを使ったテスト

AngularJSなコントローラーとかの単体テストに関しては

describe("...", function() {
  it("...", function() {
    var scope = {};
    var controller = new SampleController(scope);

    // 以下省略
  });
});

的な事が http://docs.angularjs.org/tutorial/step_02 には既に書いてあるから良いんだけど、で実際HTMLと組み合わせて処理とかをテストするにはどうすれば良いのかがこのセクションの次に書いてあるe2eテストっていう方式を採用すれば出来るらしい。んまぁそういう事じゃないような気もするのだけど

んまぁとりあえずやってみたんでレポート

構造

├── app
│   └── index.html
├── karma.e2e.js
├── src
│   └── sample.js
├── tests
│   └── e2e
│       └── sample.js
└── web-server.js

な感じになっとります

web-server.js

んまぁとにかく参考ベースが https://github.com/angular/angular-phonecat なんなので。script/web-server.jsをポチってくる。

※別に既にアプリケーションとして構築しているのなら必要ない。以下で設定するプロキシー先にアプリケーション先のアドレスを設定すれば良いだけだと思うので

src/sample.js

function SampleController($scope) {
  $scope.samples = [
    { "text": "hoge" },
    { "text": "fuga" },
    { "text": "foobar" }
  ]
}

ただ<li ng-repeat="sample in samples | filter:name">的な感じで動かすだけな物なので内容は殆ど無いって事で (それ以前にまだ使い始めたばかりなので)

app/index.html

<html ng-app>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
    <script type="text/javascript" src="../src/sample.js"></script>
  </head>
  <body>
    <input type="text" ng-model="name" />
    <div ng-controller="SampleController">
      <ul class="entries">
        <li ng-repeat="sample in samples | filter:name">{% raw %}{{sample.text}}{% endraw %}</li>
      </ul>
    </div>
  </body>
</html>

上記で書いたように<input type="text" ng-model="name" />で指定されたクエリーにより<li ng-repeat="">な所をフィルターするっていう所。そこをテストする

karma.e2e.js

// Karma configuration
// Generated on Tue Sep 10 2013 15:56:19 GMT+0900 (JST)

module.exports = function(config) {
  config.set({

    // base path, that will be used to resolve files and exclude
    basePath: ".",


    // frameworks to use
    frameworks: ["jasmine"],


    // list of files / patterns to load in the browser
    files: [
      // angularjsなe2eで使用する
      ANGULAR_SCENARIO,
      ANGULAR_SCENARIO_ADAPTER,
      "src/*.js",
      "tests/**/*.js"
    ],

    // web-server.jsでアクセス出来る所にproxy
    proxies: {
      "/": "http://localhost:8000"
    },


    // list of files to exclude
    exclude: [

    ],


    // test results reporter to use
    // possible values: "dots", "progress", "junit", "growl", "coverage"
    reporters: ["progress"],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_INFO,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // Start these browsers, currently available:
    // - Chrome
    // - ChromeCanary
    // - Firefox
    // - Opera
    // - Safari (only Mac)
    // - PhantomJS
    // - IE (only Windows)
    browsers: ["Chrome"],


    // If browser does not capture in given timeout [ms], kill it
    captureTimeout: 60000,


    // Continuous Integration mode
    // if true, it capture browsers, run tests and exit
    singleRun: false
  });
};

ベースはkarma initとかで生成して修正する感じで。

ANGULAR_SCENARIOとか使うと

Please use \`frameworks = ["ng-scenario"];\` instead

って怒られるけど、逆にこれをframeworksに追加するとbrowserだとかinputだとかrepeaterだとかが認識してくれないので。この件に関しては判明次第追記予定

tests/e2e/sample.js

describe("Sample", function() {

  beforeEach(function() {
    browser().navigateTo("../../app/index.html");
  });

  it("filter name query", function() {
    expect(repeater(".entries li").count()).toBe(3);

    input("name").enter("h");

    // ここでずっこける。hでフィルターすると結果は1件 (わざとです)
    expect(repeater(".entries li").count()).toBe(2);
  });
});

っていう感じ。んで

karma start karma.e2e.js

で実行すると

っていう感じでテストされる。