Angular、Karma、tsify、麻烦答案

【问题标题】：Angular, Karma, tsify, woesAngular、Karma、tsify、麻烦
【发布时间】：2017-01-20 11:54:29
【问题描述】：

我正在尝试设置测试，我们使用 Angular 1.5、TSify 和 Karma。我非常接近，但我遇到了一个我不太正确的问题：

我遵循此处描述的设置：https://github.com/cmlenz/tsify-test（此示例不包括角度）

我从 angular-mocks 得到一个错误：“无法设置未定义的属性 'mock'”

这必须是时间问题或范围问题——要么 angular-mocks 加载得太快，要么 browserify 正在包装 angular 变量的范围，而 mock 看不到它。不知道。

以下是我的 karma.conf.js 文件的相关部分：

    frameworks: ['browserify', 'jasmine'],

    files: [
        'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',
        './node_modules/angular-mocks/angular-mocks.js',
        './modules/**/*.spec.ts'
    ],

    exclude: [],

    preprocessors: {
        '**/*.ts': 'browserify'
    },

    browserify: {
        debug: true,
        plugin: [
            ['tsify']
        ]
    },

这一定与我加载模拟的方式有关——我的 Angular 应用程序不使用它，只是测试，所以这一定与它有关。

有什么提示吗？

【问题讨论】：

您的files 数组应包含所有测试所需的文件。 angular.js 以及您的应用程序文件在哪里？
从您的配置中，很明显angular-mocks 是随 NPM 一起安装的。如果 angular 也与 NPM 一起安装，并且通过 .ts 文件中的 require 包含在捆绑包中，则可能是问题所在，因为 angular-mocks 需要在 angular 之后加载。
@Phil Browserify 将所有文件（包括供应商文件）连接到一个包中。在我正在使用的示例中，他们只是在预处理器部分注册了 */.ts glob。如果这不正确，我可以改变它。应该是什么？（我假设我不必专门指向每个供应商文件，因为 browserify 正在将它们打包到包中）。
@cartant 你是对的——我们使用 NPM 作为供应商脚本，在我们的 typscript 中，我们正在导入模块并使用 CommonJS 编译器标志。然后，我们使用带有 tsify 插件的 browserify 来编译我们的 typscript，并为浏览器捆绑导入的供应商脚本。我认为我们要解决的问题是我没有在主应用程序的任何地方导入角度模拟。有没有办法为我的测试导入 angular-mocks，但不能在 prod 构建中导入它？
我会添加一个答案 - 主要是因为评论中的空间不足 - 但是，是的，有很多方法可以做到这一点。

标签： angularjs karma-runner browserify tsify

【解决方案1】：

angular-mocks 需要在 angular 之后加载，并且使用您当前的 Karma 配置，这不会发生 - 直到您的 @987654327 之一在其中一个 .ts 文件中需要它时才会加载 angular @files 是依赖的。

一种解决方案是添加一个需要angular 和angular-mocks 的附加文件，并确保该文件位于Karma 的files 配置中的.spec.ts 文件之前。

例如，可以创建一个名为 require-angular-mocks.js 的文件：

require('angular');
require('angular-mocks');

并且可以添加到 Karma 配置中（替换 node_modules 下的 angular-mocks）：

files: [
    'https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js',
    './require-angular-mocks.js',
    './modules/**/*.spec.ts'
],

preprocessors: {
    '**/*.js': 'browserify',
    '**/*.ts': 'browserify'
},

这应该确保angular 和angular-mocks 以正确的顺序加载，并且在您的规范之前加载。请注意，如果它是 .js 文件，则需要在 Karma 的 preprocessors 配置中添加另一个条目。

【讨论】：

任务结束了，只是过来试试这个。有效！那很棒！谢谢您的帮助。我想更多地了解业力管道是如何工作的。你知道这方面的文章吗？
很遗憾，不，我不知道有任何对 Karma 有用的文章。我想通过阅读configuration documenation来解决手头的问题，我的理解逐渐增加了。 files 设置是它的关键。 Karma 使用它来构建它所提供的 HTML 文件。 Browserify 必须通过将 files 中的 .js 条目减少到作为 <script> 包含的单个包来工作。
我想我必须以同样的方式构建。我遇到了一件让我吃惊的事情：我们使用的是 typescript，我原本以为 .ts 文件将被送入预处理器，并将 .js 文件放入 files 块中。相反，我发现我需要在预处理器和文件块中指定 .ts 文件，所以我猜测管道从文件到预处理器再到 karma 的服务器——或者至少是源流的创建from files 发生在预处理之前。