angularjs - Angular and ES6: Karma Testing with SystemJS -
afternoon all, have mean stack app developing tests for. angular code written using es6 have been trying configure karma , systemjs babel transpiler run tests. currently, when karma start karma.conf.js browser fires up, hangs—as in cannot click debug or else—, , browser closes console error:
uncaught typeerror: cannot set property 'mock' of undefined. the last line before debug [web-server]: serving (cached): ( ... )
my current application structure works this:
i have of module imported 1 file app.js injected app module:
import homecontroller './components/home/home.js'; import homeservice './services/homeservice.js'; import homedirective './directives/homedirective.js'; import differentcontroller './components/different/different.js'; // ### filters import slugifyfilter './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 template + controller // in 'components' folder { path: '/', redirectto: '/home' }, { path: '/home', component: 'home' }, { path: '/different/:id', component: 'different' } ]); } export default modulename; i use manual angular bootstrapping in index.html file so:
import { default appmodule } './app.js'; angular.bootstrap(document, [ appmodule ]); try { $(document.body).attr("ng-app", "app"); } catch(e){}; i have karma , systemjs configured so:
// karma configuration // generated on tue jul 07 2015 19:56:15 gmt-0400 (eastern daylight time) module.exports = function(config) { config.set({ // base path used resolve patterns (eg. files, exclude) basepath: './', files : [], // frameworks 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 browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor preprocessors: { "**/*.html": ['ngbootstrapfix'] }, systemjs : { // path systemjs config file //configfile : 'public/system.conf.js', // file patterns application code, dependencies, , 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 tests, added after config file. // adding test libraries , mock modules config: { baseurl : '/', // set path third-party libraries 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 suffix used test suite file names. defaults .test.js, .spec.js, _test.js, , _spec.js testfilesuffix: '-spec.js' }, // test results reporter 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 output (reporters , 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 , executing tests whenever 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 tests , exits singlerun: true }); }; i have filter here trying test:
let modulename = 'slugifyfilter'; angular.module(modulename, []) .filter('slugify', () => { return (input) => { input = input || ''; return input.replace(/ /g, '-').tolowercase(); }; }); export default modulename; and test file:
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 slug when given string', function() { var slugify = $filter('slugify'); expect(slugify('home component 3')).tocontain('home-component-3'); }); }); yet whenever try run tests error described above. bothers me browser freezes before window says 'browser executing.' appreciated, want write unit tests code!
add these files karma.files array:
'public/bower_components/jquery/dist/jquery.js', 'public/bower_components/angular-mocks/angular-mocks.js', 'public/bower_components/angular/angular.js' 
Comments
Post a Comment