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 dbabaioff · Accepted Answer · 2015-07-05T08:17:22

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.

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

1 Answers