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也会为角度提示每个参数所指的内容

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

1 个答案: