如何使用Webpack和Karma对缩小的应用程序运行AngularJS单元测试

Question

我正在使用AngularJS应用程序。我们有一个庞大的现有代码库，我们准备将其移至Webpack 2以进行ng-upgrade。但是，我们无法弄清楚如何针对缩小的应用程序运行我们的Jasmine单元测试。

我们已经在this预引导存储库之后对应用程序进行了建模。

我们在webpack.config.js中使用它丑化了该应用程序：

config.plugins.push(
    new webpack.optimize.UglifyJsPlugin({sourceMap: false})
);

karma.conf.js基本上看起来像这样：

module.exports = function karmaConfig (config) {
  config.set({
    frameworks: ['jasmine'],
    files: ['src/tests.webpack.js'],
    preprocessors: {
       'src/tests.webpack.js': ['webpack', 'sourcemap']
    },
    webpack: require('./webpack.config'),
    ...
  });
};

src/tests.webpack.js看起来像这样：

import 'angular';
import 'angular-mocks/angular-mocks';

const context = require.context('..', true, /\.spec.js$/);
context.keys().forEach(context);

每个.spec.js文件使用import加载实际的Angular应用程序，然后进行如下注入：

beforeEach(inject(function($rootScope){
    ...
}));

这是我们遇到的问题。我们的单元测试正在缩小。 $rootScope最小化为e，喷射器无法找到。我们只想缩小应用程序而不是测试文件。我们该怎么做？

Answer 1

只要您在测试中有此代码：

beforeEach(inject(function($rootScope){
    ...
}));

最小化更改了变量名，因此它们看起来可能类似于：

beforeEach(inject(function($a){
    ...
}));

问题是angular在运行时检查角度参数，不知道a是什么！

解决方案：

beforeEach(inject(['$rootScope', function($rootScope){
    ...
}]));

这样，即使参数名称混乱，字符串$rootScope也会为角度提示每个参数所指的内容