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" />