Angular 和 ES6：使用 SystemJS 进行 Karma 测试

Question

大家下午好，我有一个正在为其开发测试的 MEAN 堆栈应用程序。 Angular 代码是使用 ES6 编写的，因此我一直在尝试使用 Babel 配置 Karma 和 SystemJS 作为运行我测试的转译器。目前，当我 karma start karma.conf.js 浏览器启动时挂起——因为我无法单击调试或其他任何东西——然后浏览器关闭并显示控制台错误：

Uncaught TypeError: Cannot set property 'mock' of undefined.

这之前的最后一行是DEBUG [web-server]: serving (cached): ( ... )

我当前的应用程序结构是这样的：

我将我的所有模块导入到一个文件中 app.js，然后将它们注入到我的应用程序模块中：

import HomeController from './components/home/home.js';
import HomeService from './services/homeservice.js';
import HomeDirective from './directives/homedirective.js';
import DifferentController from './components/different/different.js';

// ### Filters
import slugifyFilter from './filters/slugify.js';

var moduleName = 'app';

angular.module(moduleName, ['ngNewRouter', 'ngMock', 'ngAnimate', 'ui.bootstrap', 'slugifyFilter'])

  .config(['$componentLoaderProvider', SetTemplatesPath])
  .controller('AppController', ['$router', AppController]);



function SetTemplatesPath ($componentLoaderProvider){

  $componentLoaderProvider.setTemplateMapping(name => `components/${name}/${name}.html`);
}

function AppController ($router) {

  $router.config([

    // Component is just a template + controller
    // in 'components' folder
    { path: '/', redirectTo: '/home' },
    { path: '/home', component: 'home' },
    { path: '/different/:id', component: 'different' }
  ]);
}

export default moduleName;

我在 index.html 文件中使用手动 Angular 引导程序，如下所示：

import { default as AppModule } from './app.js';

angular.bootstrap(document, [ AppModule ]);

try {

   $(document.body).attr("ng-app", "app");

} catch(e){};

我将 Karma 和 SystemJS 配置为：

// Karma configuration
// Generated on Tue Jul 07 2015 19:56:15 GMT-0400 (Eastern Daylight Time)

module.exports = function(config) {
  config.set({

    // base path that will be used to resolve all patterns (eg. files, exclude)
    basePath: './',


    files : [],


    // frameworks to use
    // available frameworks: https://npmjs.org/browse/keyword/karma-adapter
    frameworks: ['systemjs', 'jasmine'],


    plugins : ['karma-systemjs', 'karma-jasmine', 'karma-chrome-launcher', 
                'karma-firefox-launcher', 'karma-ie-launcher' ],

    // preprocess matching files before serving them to the browser
    // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
    preprocessors: { "**/*.html": ['ngbootstrapfix'] },

    systemjs : {

        // Path to SystemJS config file
        //configFile : 'public/system.conf.js',

        // File patterns for application code, dependencies, and test suites
        files : [

            'public/bower_components/jquery/dist/jquery.js',
            'public/bower_components/angular/angular.js',
            'public/bower_components/angular-mocks/angular-mocks.js',
            'public/bower_components/angular-animate/angular-animate.js',
            'public/bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
            'public/bower_components/angular-new-router/dist/router.es5.js',
            'public/bower_components/angular-messages/angular-messages.js',
            'public/**/*.js'
        ],

        // SystemJS configuration specifically for tests, added after your config file. 
        // Good for adding test libraries and mock modules 
        config: {

            baseURL : '/',

            // Set path for third-party libraries as modules
            paths : {

                'jquery': 'public/bower_components/jquery/dist/jquery.js',
                'angular-mocks': 'public/bower_components/angular-mocks/angular-mocks.js',
                'angular' : 'public/bower_components/angular/angular.js',
                'angular-animate' : 'public/bower_components/angular-animate/angular-animate.js',
                'ui-bootstrap' : 'public/bower_components/angular-bootstrap/ui-bootstrap-tpls.js',
                'router' : 'public/bower_components/angular-new-router/dist/router.es5.js',
                'angular-messages' : 'public/bower_components/angular-messages/angular-messages.js',
                'babel': 'node_modules/babel-core/browser.js',
                'es6-module-loader': 'node_modules/es6-module-loader/dist/es6-module-loader.js',
                'systemjs': 'node_modules/systemjs/dist/system.js',
                'system-polyfills': 'node_modules/systemjs/dist/system-polyfills.js'
            },

            transpiler: 'babel'
        },

        // Specify the suffix used for test suite file names.  Defaults to .test.js, .spec.js, _test.js, and _spec.js 
        testFileSuffix: '-spec.js'
    },


    // test results reporter to use
    // possible values: 'dots', 'progress'
    // available reporters: https://npmjs.org/browse/keyword/karma-reporter
    reporters: ['progress'],


    // web server port
    port: 9876,


    // enable / disable colors in the output (reporters and logs)
    colors: true,


    // level of logging
    // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG
    logLevel: config.LOG_DEBUG,


    // enable / disable watching file and executing tests whenever any file changes
    autoWatch: true,


    // start these browsers
    // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher
    browsers: ['Chrome'],


    // Continuous Integration mode
    // if true, Karma captures browsers, runs the tests and exits
    singleRun: true
  });
};

我正在尝试测试这里的过滤器：

let moduleName = 'slugifyFilter';

angular.module(moduleName, [])
    .filter('slugify', () => {

    return (input) => {

        input = input || '';

        return input.replace(/ /g, '-').toLowerCase();
    };
});

export default moduleName;

我的测试文件：

import 'angular-mocks';
import '../bootstrap.js';

describe('slugify filter', function() {

    beforeEach(function() {

        angular.mock.module('app');
    });

    beforeEach(angular.mock.inject(function(_$filter_) {

        var $filter = _$filter_;
    }));

    it('returns a slug when given a string', function() {

        var slugify = $filter('slugify');

        expect(slugify('Home Component 3')).toContain('home-component-3');
    });
});

然而，每当我尝试运行测试时，我都会收到上述错误。真正困扰我的是，浏览器在 window 说 'browser executing.' 之前冻结，非常感谢任何帮助，我真的很想为我的代码编写一些单元测试！

Answer 1

将这些文件添加到 karma.files 数组：

'public/bower_components/jquery/dist/jquery.js',
'public/bower_components/angular-mocks/angular-mocks.js',
'public/bower_components/angular/angular.js'

Angular 和 ES6：使用 SystemJS 进行 Karma 测试

Angular and ES6: Karma Testing with SystemJS

jasmine

angularjs

karma-runner

systemjs

babeljs