5

ブラウザー内の TS コードのテストを書いているときに、次の問題に遭遇しました。私の「テスト」コード ファイルは、「アプリケーション」コード ファイルとは別のフォルダーにあります (これは諦めたくありません)。したがって、「アプリ」モジュールをインポートするには、次のようにする必要があります。

    // tests/TS/SubComponent/Module.Test.ts
    import m = module("../../Web/Scripts/SubComponent/Module");

これは問題なくコンパイルされます。しかし、ブラウザーにロードすると、明らかに機能しません。ブラウザーで実行されている RequireJS の観点からすると、モジュールは " app/SubComponent/Module " にあるためです (Web サーバーと RequireJS 構成を介して再マップされた後)。

TS 0.8.3 ではこの巧妙なトリックを実行できましたが、0.9.0 では機能しなくなりました。これは、コンパイラがモジュールをインターフェイスとして扱うことを許可しないためです。

問題は、クライアント側のコードをどのようにテストするかということです。明らかに、そうしているのは私だけではありませんよね？:-)

4

5 に答える 5

1

私は、大規模な javascript プロジェクトの一部を typescript に移行する必要があるプロジェクトの最中にいます。これが、テストを実行し続ける方法です。

  1. grunt-typescript タスクを使用して、すべての.tsファイルを監視し、ソースからtmpフォルダーに (ソースマップと共に)コンパイルします。typescript ファイルのみを処理する必要がある場合は、tscin watch モードを使用してそれを行うこともできます。後者の方が高速ですが、前者では livereload を使用して JavaScript ファイルと TypeScript ファイルを同時に編集できました。

  2. .tsファイルをインクルードしますkarma.confが、監視したりインクルードしたりしません:

    // list of files / patterns to load in the browser
files = [
  JASMINE,
  JASMINE_ADAPTER,

  // ...

  // We want the *.js to appear in in the window.__karma__.files list
  { pattern: 'app/**/*.ts', included: false, watched: false, served: true },

  { pattern: 'app/**/*.js', included: false },

  // We do watch the folder where the typescript files are compiled
  { pattern: 'tmp/**/*.js', included: false }, 

  // ...

  // Finally, the test-main file.
  'tests/test-main.js'
];

  3. 最後に、test-main.jsファイル内で、typescript ファイルの名前をマングルし、require モジュールとして (対応する.jsファイルへの)正しいパスで宣言しtest-main.jsます。

    var dynPaths = {
      'jquery'               : 'lib/jquery.min',
      'text'                 : 'lib/text'
  };

var baseUrl = 'base/app/',
    compilePathUrl = '../tmp/';

Object.keys(window.__karma__.files)
    .forEach(function (file) {
        if ((/\.ts$/).test(file)) {
            // For a typescript file, include compiled file's path
            var fileName = file.match(/(.*)\.ts$/)[1].substr(1),
                moduleName = fileName.substr(baseUrl.length);
            dynPaths[moduleName] = compilePathUrl +
                                    fileName.substr(baseUrl.length);
        }
    });

require({
  // Karma serves files from '/base'
  baseUrl: '/' + baseUrl,
  paths: dynPaths,
  shim: { /* ... */ },

  deps: [ /* tests */ ],

  // start test run, once requirejs is done
  callback: function () {
      window.__karma__.start();
  }
});

次に、typescript ファイルを編集すると、それらはコンパイルされ、tmpjavascript ファイルとしてフォルダーに配置されます。これらは の自動監視をトリガーkarmaし、テストを再実行します。テストではrequire、typescript ファイルへのパスを明示的に上書きしたため、呼び出しは正しく解決されます。

これは少しハッキリしていることに気づきましたが、REQUIRE_ADAPTER. だから私はそれを行うためのよりクリーンな方法はないと思いました。

typescript がより一般的になれば、テストのサポートが向上することを願っています。

于 2013-07-04T16:19:21.923 に答える