我将尝试用一点抽象来解决这个问题,因为进入代码细节是没有用的。
我有一个分为 2 个源文件的 Angular 模块,比如 source1.js
和 source2.js
。然后我有 3 个单元测试文件,旨在测试 3 个 Angular 服务/工厂/提供商。
项目布局如下:
root
|
-dist
|
-source.min.js
-src
|
-source1.js
-source2.js
-tests
|
-unit
|
-service1.js
-service2.js
-service3.js
所有测试,使用 karma 和 jasmine 运行,通过并按预期工作。查看这一点 karma 配置以了解要点:
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 依赖项注入(inject),所有测试都失败了 - 看起来提供程序未被解析。
什么会导致这种情况?我的意思是,源代码应该是一样的。
最佳答案
这是 Angular 、依赖注入(inject)和缩小的已知问题。此外,问题恰恰在于代码的细节。
案例 1:
在没有显式注入(inject)的情况下,当将声明的函数用作 Controller 时,angular 会尝试从服务名称推断服务。
angular.module('app').controller('MyController', MyController);
function MyController(service1, service2, ...){ ... service1.doSomething ...}
案例 2:
通过显式注入(inject),angular 按照注入(inject)的顺序使用 Controller 函数参数。
angular.module('app').controller('MyController', MyController);
MyController.$inject = ['service1', 'service2', ...]
function MyController(a, b, ...){ ... a.doSomething ... }
情况 1 每次都无法进行缩小,因为服务的名称会发生变化,并且 Angular 无法仅通过查看它们的名称来推断 a、b 或 c 所指的服务。
但是,情况 2 每次都会起作用,因为 $inject 告诉它 service1 是 a 而 service 2 是 b 等等,angular 不必猜测。
如果您使用的是像 Gulp 这样的构建工具,您可以使用 ng-annotate这将在案例 1 中自动为您注入(inject)依赖项,您的代码应该仍然有效。
在我看来,作为一种风格,你应该使用案例 2。我倾向于遵循接近 John Papa's Angular Style Guide 的东西。
关于javascript - Angular Jasmine 测试因缩小源而失败,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36307030/