TypeScript：如何測試客戶端代碼？

Question

當我為瀏覽器中的TS代碼編寫測試時，我遇到了以下問題。 我的“測試”代碼文件位於與“應用程序”代碼文件不同的文件夾中（我不願意放棄的安排）。 因此，為了導入我的“app”模塊，我必須這樣做：

    // 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中它不再有效，因為現在編譯器不允許我將模塊視為接口 。

所以問題是： 你如何測試客戶端代碼？ 顯然，我不能成為唯一一個這樣做的人，是嗎？ :-)

Answer 1

我不知道你是否使用Visual Studio - 下一步是Visual Studio特定的......

我是這樣做的：

在我的測試項目中，我創建了一個名為“ReferencedScripts”的文件夾，並從正在測試的項目中引用了腳本（添加現有項目>添加為鏈接）。 將文件設置為復制到輸出文件夾。

來源： 在Visual Studio中包含JavaScript和TypeScript測試 。

使用add-as-link使腳本在測試項目中可用。

不使用Visual Studio？ 我建議創建一個任務/作業/批處理文件，將文件復制到測試文件夾中。 您甚至可以使用tsc為您執行此任務。

Answer 2

我正處於一個項目的中間，我必須將大型javascript項目的一部分遷移到typescript，這就是我設法保持測試運行的方式：

1. 使用grunt-typescript任務來查看和編譯我的.ts文件，從源到tmp文件夾（帶有源映射）。 如果您只需要處理打字稿文件，那么您也可以在監視模式下使用tsc來執行此操作。 后者會更快，但前者允許我使用livereload同時編輯javascript和typescript文件。

2. 在karma.conf包含.ts文件，但不要觀察它們或包含它們：

    // 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文件中，我test-main.js文件的名稱，並將它們聲明為需要模塊，並在test-main.js使用正確的路徑（到相應的.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(); } }); 

然后，當我編輯打字稿文件時，它們被編譯並作為javascript文件放在tmp文件夾中。 這些引發karma的自動監視並重新進行測試。 在測試中， require調用正確解析，因為我們已經明確地覆蓋了typescript文件的路徑。

我意識到這有點hacky，但我不得不在嘗試用REQUIRE_ADAPTER包含所有測試時跳過類似的箍。 所以我認為沒有更清潔的方法。

希望如果打字稿變得更加普遍，我們將看到更好的測試支持。

Answer 3

所以這就是我最終所做的事情：事實證明，Karma可以處理/監視/提供不在基本目錄中的文件，並且它使它們以“ / absolute / C：/ dir / ”的形式查看瀏覽器folder / blah / file.js “。 只要文件 - >模式以“ ../ ”開頭，就會發生這種情況。

此功能可用於使RequireJS完全查看文件系統上存在的整個目錄結構，從而允許測試以“ ../../Web/App/Module.ts ”的形式導入應用程序模塊。

files = [
  // App files:
  { pattern: '../../Web/App/**/*', watched: true, served: true, included: false },

  // Test files:
  { pattern: '../js/test/**/*.js', watched: true, served: true, included: false }
];

參考（版本0.8）： http ： //karma-runner.github.io/0.8/config/files.html

Answer 4

由於打字稿代碼被編譯為Javascript，您可以使用所有Javascript測試框架。

我正在使用Jasmine： https ： //github.com/pivotal/jasmine/wiki

您可以使用.d.ts文件在Typescript中編寫測試： https ： //github.com/borisyankov/DefinitelyTyped/blob/master/jasmine/jasmine.d.ts

但我的客戶端代碼相當小，並編譯為一個輸出文件，所以我沒有你描述的模塊問題。

Answer 5

可能是我誤解了你的問題 - 還不能發表評論......

瀏覽器的運行時不需要任何打字稿信息。 因此，您的測試腳本應該以與他們需要的任何其他JavaScript文件相同的方式導入已編譯的ts文件。 可能是在運行腳本之前必須將它們復制到測試項目的子文件夾中。

我認為更大的問題是你沒有接口信息。 為什么要導入這些信息而不是引用它們？ 特別是因為導入它們也會在瀏覽器中出現。

引用只會在IDE中進行，因此接口文件所在的文件夾無關緊要。

/// <reference path="../../Web/Scripts/SubComponent/Module/References.ts" />