javascript - 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 中它不再起作用，因为现在编译器不允许我将模块视为接口。

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

score 2 · Accepted Answer

我不知道您是否正在使用 Visual Studio - 下一位是 Visual Studio 特定的......

我就是这样做的：

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

来源：在 Visual Studio 中包含 JavaScript 和 TypeScript 测试。

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

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

score 1 · Accepted Answer

所以这就是我最终所做的：事实证明，Karma 可以处理/监视/服务不在基本目录中的文件，并且它使它们以“ /absolute/C:/dir/ ”的形式在浏览器中查找文件夹/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

score 1 · Accepted Answer

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

使用grunt-typescript 任务来监视我的所有.ts文件并将其从源代码编译到一个tmp文件夹（及其源映射）。如果您只需要处理 typescript 文件，那么您也可以使用tscin watch 模式来处理。后者会更快，但前者允许我使用 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文件中，我修改了打字稿文件的名称，并将它们声明为具有正确路径（到相应.js文件）的require 模块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();
  }
});

tmp然后当我编辑打字稿文件时，它们被编译并作为 javascript 文件放入文件夹中。这些触发器karma的自动监视并重新运行测试。在测试中，require调用正确解析，因为我们已经明确覆盖了打字稿文件的路径。

我意识到这有点 hacky，但是在尝试将我的所有测试都包含在REQUIRE_ADAPTER. 所以我认为没有更清洁的方法可以做到这一点。

希望如果 typescript 变得更加流行，我们将看到对测试的更好支持。

score 0 · Accepted Answer

可能是我误解了你的问题 - 还不能评论......

浏览器的运行时不需要任何打字稿信息。因此，您的测试脚本应该以与他们需要的任何其他 javascript 文件相同的方式导入已编译的 ts 文件。可能是您必须在运行脚本之前将它们复制到测试项目的子文件夹中。

我认为更大的问题是您没有接口信息。为什么要导入这些信息而不是引用它们？特别是因为导入它们也将发生在浏览器中。

参考只会发生在 IDE 中，因此接口文件位于哪个文件夹中并不重要。

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

score 0 · Accepted Answer

由于 typescript 代码被编译为 Javascript，因此您可以使用所有 Javascript 测试框架。

我正在使用茉莉花：https ://github.com/pivotal/jasmine/wiki

您可以使用 .d.ts 文件在 Typescript 中编写测试：https ://github.com/borisyankov/DefinitelyTyped/blob/master/jasmine/jasmine.d.ts

但是我的客户端代码很小并且编译为一个输出文件，所以我没有你描述的模块问题。

javascript - TypeScript：你如何测试你的客户端代码？

5 回答 5

Related

Reference