TypeScript:如何测试客户端代码

TypeScript: How do you test your client-side code?

本文关键字：测试 客户端 代码 何测试 TypeScript      更新时间：2023-09-26

当我为浏览器内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中，它不再有效，因为现在编译器不允许我将模块视为接口。

所以问题是：如何测试客户端代码？很明显，我不可能是唯一一个这样做的人，是吗？：-）

我不知道你是否在使用Visual Studio-下一部分是Visual Studio特定的。。。

我就是这样做的：

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

来源：包括Visual Studio中的JavaScript和TypeScript测试。

使用"添加为"链接可以使脚本在测试项目中可用。

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

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

  1. 使用grunt typescript任务来监视并编译我所有的.ts文件，从源文件到tmp文件夹（以及它们的源映射）。如果您只需要处理typescript文件，那么您也可以在监视模式下使用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文件中，我篡改了typescript文件的名称，并在test-main.js:中将它们声明为具有正确路径（到相应的.js文件）的required模块

    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文件时，它们被编译并作为javascript文件放在tmp文件夹中。这些触发了karma的自动监视并重新运行测试。在测试中，require调用解析正确，因为我们已经显式覆盖了typescript文件的路径。

我意识到这有点棘手，但在尝试将REQUIRE_ADAPTER的所有测试包括在内时，我不得不跳过类似的障碍。所以我认为没有更干净的方法可以做到这一点

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

所以我最终做了什么：Karma可以处理/监视/服务不在基本目录中的文件，并使它们在浏览器中以"/absolute/C:/dir/folder/blah/file.js"的形式出现。每当files->pattern以"../开始时，就会发生这种情况。

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

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

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

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

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

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

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

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

引用将只在IDE中进行，因此接口文件位于哪个文件夹中并不重要。

/// <reference path="../../Web/Scripts/SubComponent/Module/References.ts" />
相关文章：