Y.A.M の雑記帳: モダンな TypeScript テスト環境

「これが現代のテスト環境や、どやぁ。」と @vvakame が用意してくれました。 https://github.com/vvakame/typescript-project-sample

初心者の私にはたくさんのライブラリ（フレームワーク？）が入っててよくわからなかったので、それぞれの立ち位置を教えてもらったのでまとめておきます。

PhantomJS

PhantomJS は JavaScript の API も利用できる headless な WebKit です。実際の描画処理を行わないので速いという特徴があります。また、DOM 操作、CSS セレクタ、JSON、Canvas、SVG などいくつかの web 標準をネイティブでサポートしています。
JavaScript のエンジンは JavaScriptCore らしいです。

実際に Web ページにアクセスして、レンダリング結果の画面のキャプチャをとったり、ページのタイトルを取ってきたり、DOM の値を取ってきたり、いろいろできます。

Quick Start を見ると何ができるかが分かると思います。

例えば、

evaluate.js var url = "http://www.google.com"; var page = require("webpage").create(); page.open(url, function(status) { var title = page.evaluate(function() { return document.title; }); console.log("Page title is " + title); phantom.exit(); }); というコードを書いて実行すると、ページのタイトルを取れます。

$ phantomjs evaluate.js
Page title is Google

サンプルもたくさん用意されています。

Jasmine

Jasmine は JavaScript コードをテストするためのフレームワークです。使い方は Introduction のコードを見るのがわかりやすいです。その他の情報は Wiki にあります。

最新版は Jasmine 1.3.1 で https://github.com/pivotal/jasmine/downloads からダウンロードできます。

jasmine-standalone-1.3.1.zip を展開すると、次のような構成になっています。

lib/
spec/
src/
SpecRunner.html

lib/ には jasmine.js や jasmine-html.js が入っています。

SpecRunner.html は jasmine を使ったテストのサンプルです。
基本的には、この SpecRunner.html を自分のプロジェクトに合わせて変えることでテストをセットアップできます。

SpecRunner.html で Player.js, Song.js が指定されている部分

にテストしたい元コードを、
SpecHelper.js, PlayerSpec.js が指定されている部分に

テストコードを置きます。

下の方の Javascript のコードは window.onload でテストを実行し、結果を html に表示するための部分なので変更はいらいないです。


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Jasmine Spec Runner</title>

  <link rel="shortcut icon" type="image/png" href="lib/jasmine-1.3.1/jasmine_favicon.png">
  <link rel="stylesheet" type="text/css" href="lib/jasmine-1.3.1/jasmine.css">
  <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
  <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-html.js"></script>

  <!-- include source files here... -->
  <script type="text/javascript" src="src/Player.js"></script>
  <script type="text/javascript" src="src/Song.js"></script>

  <!-- include spec files here... -->
  <script type="text/javascript" src="spec/SpecHelper.js"></script>
  <script type="text/javascript" src="spec/PlayerSpec.js"></script>

  <script type="text/javascript">
    (function() {
      var jasmineEnv = jasmine.getEnv();
      jasmineEnv.updateInterval = 1000;

      var htmlReporter = new jasmine.HtmlReporter();

      jasmineEnv.addReporter(htmlReporter);

      jasmineEnv.specFilter = function(spec) {
        return htmlReporter.specFilter(spec);
      };

      var currentWindowOnload = window.onload;

      window.onload = function() {
        if (currentWindowOnload) {
          currentWindowOnload();
        }
        execJasmine();
      };

      function execJasmine() {
        jasmineEnv.execute();
      }

    })();
  </script>

</head>

<body>
</body>
</html>

この SpecRunner.html をブラウザで開くと、このようにテスト結果が表示されます。

Jasmine は JavaScript で構築されているため、Jasmine を実行するには、web page など JavaScript が実行できる環境にいなければいけません。

しかし、この JavaScript を実行するのに毎回ブラウザを立ち上げていたらテストに時間がかかってしまいます。そこで上記の PhantomJS の登場です。

追記 : X Windowとか動いてないLinux機上(大抵のJenkins氏が動いてるサーバはそういう環境)の上で、ブラウザを使ってテストしたいなーというのもある by @vvakame

例えば、
test-jasmine1.js


var url = "file:///home/yanzm/Downloads/jasmine-standalone-1.3.1/SpecRunner.html"
var page = require("webpage").create();

page.onConsoleMessage = function (msg) {
    if(msg == "finish-jasmine") {
        phantom.exit();
    }
    else if(msg != "\n") {
        console.log(msg);
    }   
};

page.open(url, function(status) {
    page.evaluate(function() {

        var jasmineEnv = jasmine.getEnv();
        jasmineEnv.updateInterval = 1000;

        var consoleReporter = new jasmine.ConsoleReporter(
            function(log) {
                console.log(log);
            }, 
            function(runner) {
                console.log("finish-jasmine");
            }, 
            false);

        jasmineEnv.addReporter(consoleReporter);
        jasmineEnv.execute();
    });
});

SpecRunner.html


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <title>Jasmine Spec Runner</title>

  <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine.js"></script>
  <script type="text/javascript" src="lib/jasmine-1.3.1/jasmine-console.js"></script>

  <!-- include source files here... -->
  <script type="text/javascript" src="src/Player.js"></script>
  <script type="text/javascript" src="src/Song.js"></script>

  <!-- include spec files here... -->
  <script type="text/javascript" src="spec/SpecHelper.js"></script>
  <script type="text/javascript" src="spec/PlayerSpec.js"></script>
</head>

<body>
</body>
</html>

（jasmine-console.js の中身は ConsoleReporter.js です。）

のようにすると、コンソールからテストできるようになります。

$ phantomjs test-jasmin1.js 
Started
.
.
.
.
.
Finished in 0.005 seconds
5 specs, 0 failures

grunt

grunt は要は make みたいなものです。

make	grunt
Makefile	grunt.js
make hoge	grunt hoge

gruntfile と呼ばれる grunt.js に設定を書いていきます。
Getting Started を見るとなんとなく書き方がわかると思います。

grunt は実行時にカレントディレクトリの grunt.js を見に行くのですが、ない場合は見つけるまで親のディレクトリを遡って探します。普通はプロジェクトリポジトリのルートに置きます。
grunt.js は次の３つの要素からなる JavaScript です。

プロジェクトの設定（依存しているライブラリのダウンロードなど）
grunt のプラグインやタスクフォルダの読み込み
タスクとヘルパー

プロジェクトの設定は grunt.initConfig() で行います。
プラグインやタスクフォルダの指定は grunt.loadTasks() や grunt.loadNpmTasks() で行います。
タスクやヘルパーの指定は grunt.registerTask() で行います。


module.exports = function(grunt) {

  // Project configuration.
  grunt.initConfig({
    lint: {
      all: ['grunt.js', 'lib/**/*.js', 'test/**/*.js']
    },
    jshint: {
      options: {
        browser: true
      }
    }
  });

  // Load tasks from "grunt-sample" grunt plugin installed via Npm.
  grunt.loadNpmTasks('grunt-sample');

  // Default task.
  grunt.registerTask('default', 'lint sample');

};

各 grunt タスクは、grunt.initConfig() に渡されるオブジェクトで定義されている情報に依存します。
このオブジェクトは JavaScript であって JSON ではないので、プログラムで設定オブジェクトを生成させるようなこともできます。
ビルトインのタスクの設定オブジェクトの詳細は Document の Built-in tasks にあります。

フォルダからタスクやヘルパーを読み込むには
grunt.loadTask(folderName);
を使います。

npm を介して grunt のプラグインを読み込むには
grunt.loadNpmTasks(pluginName)
で行います。

grunt.registerTask() で default タスクを設定するまで、単に grunt を実行してもになにも起こりません。

grunt.registerTask('default', 'hoge_task fuga_task');

のように default タスクを登録すると

$ grunt
$ grunt default

と実行したときに第２引数で指定したタスクが実行されます。
上記の場合

$ grunt hoge_task fuga_task

と実行した場合と同じになります。

grunt.registerTask('test', 'hoge_test fuga_test');

のように、好きな alias を登録できます。
この場合、

$ grunt test

とすれば

$ grunt hoge_test fuga_test

と実行したのと同じになります。

init task（ビルトインのタスク）を見てみると、grunt による project の構成がだいだいわかると思います。

まとめ

@vvakame のプロジェクトの grunt.js では以下のライブラリを使っています。

Built-in tasks
watch
grunt-contrib
copy, less, clean,
grunt-typescript
typescript
grunt-jasmin-runner
jasmine
grunt-jasmine-node
jasmine_node

まとめると、
grunt でディレクトリの clean、typescript や less のコンパイル、jasmine の設定など
↓
jasmine で phantomJS を使ってテスト
↓
結果が JUnit 形式の XML で出力される（出力先は grunt.js で設定）

という流れです。

Y.A.M の雑記帳

2012年12月12日水曜日

モダンな TypeScript テスト環境

0 件のコメント:

コメントを投稿