[英]Angular 1.x, ES5/ES6 and testing with Karma
I have an angular app (with a mix of files ES5 and ES6) that i am developing tests for. 我有一个我正在为其开发测试的有角度的应用程序(混合了文件ES5和ES6)。 The ES6 files I'm transpiling using babel CLI with these options --modules system --module-ids.
我正在使用babel CLI通过这些选项--modules system --module-ids来转译ES6文件。 Let's say I have samething like this:
假设我有这样的事情:
ES5 file: ES5文件:
angular.module('app').controller('A', function($scope) {
...
});
ES6 file: ES6文件:
export class B {
constructor($scope) {
this.$scope = $scope
}
...
}
And I have a file called boot.js: 我有一个名为boot.js的文件:
import {B} from 'controllers/B';
angular.module('app').controller('B', B);
and on my page I import the boot file (using es6-module-loader) and bootstrap the angular app: 在我的页面上,我导入启动文件(使用es6-module-loader)并引导角度应用程序:
System.import('boot').then(function() {
angular.bootstrap(document, ['app']);
});
Now, I assume I need to do something similar to the karma tests - I need to load my boot.js before running my tests. 现在,我假设我需要做一些与业力测试类似的事情-在运行测试之前,我需要加载boot.js。 The way I solve the problem is to call System.impot('boot') in my test files - but doesn't seems to be right:
解决问题的方法是在测试文件中调用System.impot('boot')-但似乎不正确:
'use strict';
System.import('boot');
describe('Controller: B', function() {
beforeEach(module('app'));
var $scope;
beforeEach(inject(function(_$rootScope_, $controller) {
scope = _$rootScope_.$new();
$controller('B', {$scope: $scope);
}));
it('...', function() {
});
});
Is there a better way to do this? 有一个更好的方法吗?
The solution I ended up finding involved using karma-systemjs . 我最终找到的解决方案涉及使用karma-systemjs 。
Include all your tests files on the systemjs/files section: 在systemjs / files部分中包括所有测试文件:
systemjs: {
files: [
// TEST FILES
],
configFile: 'system.config.js',
config: {
paths: {
'angular-mocks': 'node_modules/angular-mocks/angular-mocks.js'
}
}
}
And on the tests instead of using: 并在测试中代替使用:
System.import('boot');
Use: 采用:
'use strict';
import 'angular-mocks';
import 'angular/boot.js';
describe('Controller: B', function() {
beforeEach(module('app'));
var $scope;
beforeEach(inject(function(_$rootScope_, $controller) {
scope = _$rootScope_.$new();
$controller('B', {$scope: $scope);
}));
it('...', function() {
});
});
Hopefully this will help someone else in the future. 希望这会在将来对其他人有所帮助。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.