Question

当我为浏览器中的TS代码编写测试时，遇到了以下问题。我的“测试”代码文件位于与“应用程序”代码文件不同的文件夹中（我不愿意放弃的安排）。因此，为了导入我的“app”模块，我必须这样做：

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

这个编译得很好。但是当加载到浏览器中时，它显然不起作用，因为从浏览器中运行的RequireJS的角度来看，模块位于“ app / SubComponent / Module ”（通过Web服务器重新映射后） RequireJS config）。

使用TS 0.8.3，我能够取消this clever trick，但在0.9.0中它不再有效，因为现在编译器doesn't let me treat a module as an interface。

问题是： 你如何测试客户端代码？显然，我不能成为唯一一个这样做的人，是吗？： - ）

Answer 1

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

我就是这样做的：

在我的测试项目中，我创建了一个名为“ReferencedScripts”的文件夹引用了正在测试的项目中的脚本（添加现有脚本） item＆gt;添加为链接）。将文件设置为复制到输出文件夹。

来源：Include JavaScript and TypeScript tests in Visual Studio。

使用add-as-link使您的测试项目中的脚本可用。

不使用Visual Studio？我建议创建一个任务/作业/批处理文件，将文件复制到测试文件夹中。您甚至可以使用tsc为您执行此任务。

Answer 2

我正处于一个项目的中间，我必须将大型javascript项目的一部分迁移到typescript，这就是我设法保持测试运行的方式：

使用grunt-typescript task观看并编译我的所有.ts文件，从源文件夹到tmp文件夹（及其源图）。如果您只需要处理打字稿文件，那么您也可以在监视模式下使用tsc来执行此操作。后者会更快，但前者允许我使用livereload同时编辑javascript和typescript文件。

在.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'
];

最后，在test-main.js文件中，我修改了typescript文件的名称，并在.js中将它们声明为具有正确路径（到相应的test-main.js文件）的require模块}：

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调用正确解析，因为我们已明确覆盖了打字稿文件的路径。

我意识到这有点笨拙，但我在尝试用REQUIRE_ADAPTER包含所有测试时不得不跳过类似的箍。所以我认为没有更清洁的方法。

希望如果打字稿变得更加普遍，我们会看到更好的测试支持。

Answer 3

所以这就是我最终完成的事情：事实证明，Karma可以处理/监视/提供不在基本目录中的文件，并且它使它们以“ / absolute”的形式查看浏览器/C:/dir/folder/blah/file.js ”。每当文件 - ＆gt;时就会发生这种情况。模式以“ ../ ”开头。

此功能可用于使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" />

TypeScript：如何测试客户端代码？

5 个答案: