読者です 読者をやめる 読者になる 読者になる

けさらんぱさらん

方向性は定めず、ただ思いつくままに

Chutzpahを使ったTypeScriptのテストで困ったこと

TypeScript

VisualStudioでJavaScript単体テストもやってくれるようにするアドインのChutzpahですが
TypeScriptを使ったプロジェクトだといくつか困った問題が発生します。

こんなテストが有ったとします。
JavaScriptではなくTypeScriptで書いてます。
(この例だと分かりづらいですけど・・・)

/// <reference path="typings/jquery/jquery.d.ts" />
/// <reference path="typings/jasmine/jasmine.d.ts" />

describe("test_", () => {

    it("hoge", () => {
        spyOn($, "ajax").andCallFake(
            function (_) {
                var d = $.Deferred();
                d.resolve([
                    { id: 1, name: "佐藤" },
                    { id: 2, name: "鈴木" }
                ]);

                return d.promise();
            });;

        // なんかテスト
    });
});

これをテストエクスプローラで見ると
f:id:cer1974:20131014213612p:plain:w300
こんな感じで1つのテストが3つに見えてしまいます。
しかも1つは文字化けしてます。

1つは、WebEssentialsというアドインがTypeScriptをコンパイルした時に
生成されるminifyの方もテスト対象になってしまっているからです。
ASP.NET MVCの場合は、minifyは必要ないのでこれは生成されないように設定を変更します。

[ツール]→[オプション]から[Web Essentials]を選択し[Minify generated JavaScript]をfalseにします。
f:id:cer1974:20131014214418p:plain
※既に出来てしまっているminifyファイルは削除してください。

もう1つが分かりにくかったのですが、Chutzpahは生成されたJavaScriptではなくTypeScriptでもテストが出来るようで
JavaScriptとTypeScriptのどちらもテストをしてしまっています。
これを設定でJavaScriptだけにします。(TypeScriptの方は文字化けしてしまっている方なので使いません)

[ツール]→[オプション]から[Chutzpah]を選択し[Testing Mode]をJavaScriptにします。
f:id:cer1974:20131014215357p:plain

これで1つになりました。
f:id:cer1974:20131014215554p:plain:w300


実はもう1つ困ったことが起こるんです。
このテストを実行するとこんな感じでエラーになります。
f:id:cer1974:20131014220219p:plain:w300
$という変数が無いと言ってますね

TypeScript的な参照は1行目で行ってますが
生成されたJavaScriptにはjQueryJavaScriptファイルがどこにあるのか分かりません。

jQueryJavaScriptファイルを参照できるように1行目に追記します。
普通のrefernceだとコンパイルエラーになるので注意です。

/// <chutzpah_reference path="jquery-2.0.3.js" />
/// <reference path="typings/jquery/jquery.d.ts" />
/// <reference path="typings/jasmine/jasmine.d.ts" />

これでテストが成功します。
f:id:cer1974:20131014221735p:plain:w300