Angular 1.x, ES5/ES6 and testing with Karma

Question

I have an angular app (with a mix of files ES5 and ES6) that i am developing tests for. The ES6 files I'm transpiling using babel CLI with these options --modules system --module-ids. Let's say I have samething like this:

ES5 file:

angular.module('app').controller('A', function($scope) {
    ...
});

ES6 file:

export class B {
    constructor($scope) {
        this.$scope = $scope 
    }

   ...
}

And I have a file called 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:

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. The way I solve the problem is to call System.impot('boot') in my test files - but doesn't seems to be right:

'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?

dbabaioff · Accepted Answer · 2015-07-05T18:58:20.687

0

The solution I ended up finding involved using karma-systemjs.

Include all your tests files on the systemjs/files section:

 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.

edited Jul 05 '15 at 18:58

answered Jul 05 '15 at 08:17

dbabaioff

267
2
13

I'm working on a similar setup, but Karma seems not to load the files in the files array, no matter, whether I use `minimatch patterns` or not. Apart from this, my karma.config.js looks very similar to yours. – BairDev Jan 06 '16 at 15:25
`systemjs: { // Path to your SystemJS configuration file configFile: 'test/unit/system-test.config.js', files: [ 'test/unit/modules/security/security.spec.js' ], // includeFiles: [ // 'dist/js/libs.js', // 'dist/js/app.js', // 'dist/js/app.typescript.js', // 'test/unit/old_js/**/*.spec.js' // ], config: { paths: { 'angular-mocks': 'bower_components/angular-mocks/angular-mocks.js' } } }` – BairDev Jan 06 '16 at 15:26

Angular 1.x, ES5/ES6 and testing with Karma

1 Answers1