Angular Jasmine 测试因缩小源而失败

Question

我将尝试用一点抽象来解决这个问题，因为进入代码细节是没有用的。

我有一个 angular 模块，分为 2 个源文件，比如 source1.js 和 source2.js。然后我有 3 个单元测试文件，旨在测试 3 angular service/factory/provider.

项目布局如下：

root
|
-dist
   |
   -source.min.js
-src
   |
   -source1.js
   -source2.js
-tests
   |
   -unit
      |
      -service1.js
      -service2.js
      -service3.js

所有测试，运行与 karma 和 jasmine，通过并按预期工作。查看这一点业力配置以了解要点：

files: [

  'bower_components/angular/angular.min.js',
  'bower_components/angular-mocks/angular-mocks.js',

  'src/*.js',
  'tests/unit/*.js'
],

接下来我将带有 gulpjs 的 source1 和 source2 缩小为 source.min.js 并尝试使用缩小后的文件运行进行测试，因此我更改了 karma 配置如下：

files: [

  'bower_components/angular/angular.min.js',
  'bower_components/angular-mocks/angular-mocks.js',

  'dist/*.js', // <--- see here.
  'tests/unit/*.js'
],

使用此配置，由于 angular 依赖项注入，所有测试都失败了 - 看起来提供程序未被解析。

这可能是什么原因造成的？我的意思是，源代码应该是一样的。

Answer 1

这是 angular、依赖注入和缩小的已知问题。此外，问题恰恰在于代码的细节。

案例一：

如果没有显式注入，angular 在将声明的函数用作控制器时会尝试从服务名称推断服务。

angular.module('app').controller('MyController', MyController);

function MyController(service1, service2, ...){ ... service1.doSomething ...}

案例二：

通过显式注入，angular 按照注入的顺序使用控制器函数参数。

angular.module('app').controller('MyController', MyController);

MyController.$inject = ['service1', 'service2', ...]

function MyController(a, b, ...){ ... a.doSomething ... }

情况 1 每次缩小时都将无法工作，因为服务名称会更改，并且 angular 无法仅通过查看来推断 a、b 或 c 引用的服务他们的名字。

但是，案例 2 每次都有效，因为 angular 不必猜测 $inject 告诉它服务 1 是 a，服务 2 是 b 等等。

如果您使用的是像 Gulp 这样的构建实用程序，您可以使用 ng-annotate，它会在案例 1 中自动为您注入依赖项，您的代码应该仍然有效。

在我看来，作为一种风格，你应该使用案例 2。我倾向于遵循接近 John Papa's Angular Style Guide

的东西

Angular Jasmine 测试因缩小源而失败

Angular Jasmine tests fail with minified source

javascript

angularjs

karma-jasmine

gulp