AngularJS - Karma, Jasmine, Browserify, Stringify - ES6 Test Setup

README.md

###Quick set up for writing AngularJS tests in ES6 using Karma, Jasmine, Browserify and Stringify.

###Example Structure

src/

test/

views/

karma.conf.js

Module.js

AngularJS-ES6-Test-Skeleton

hello-world.html

<!-- views/hello-world.html -->
<div>{{ ctrl.greet }} {{ ctrl.name }}</div>

HelloWorldDirective.js

/** src/HelloWorldDirective.js **/

import helloWorldTemplate from './../views/hello-world.html';

class HelloWorldController {
    constructor() {
        this.greet = 'Hello';
    }
}

function HelloWorldDirective() {
    return {
        scope: {
            name: '@'
        },
        controller: HelloWorldController,
        controllerAs: 'ctrl',
        bindToController: true,
        replace: true,
        template: helloWorldTemplate
    }
}

export default HelloWorldDirective;

HelloWorldDirective.test.js

/** test/HelloWorldDirective.js **/

describe('The HelloWorldDirective', () => {

    let element, scope;

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

    beforeEach(inject(function(_$rootScope_,_$compile_) {
        let $rootScope = _$rootScope_,
            $compile = _$compile_;

        scope = $rootScope.$new();

        element = angular.element('<hello-world data-name="{{ name }}"></hello-world>');

        $compile(element)(scope);

    }));

    it('should display the defined name', () => {
        let name = 'Some rendered text';

        scope.name = name;
        scope.$digest();

        expect(element.text()).toContain(`Hello ${name}`);
    });
});

karma.conf.js

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

        basePath: '',
        frameworks: ['browserify', 'jasmine'],

        files: [
            'node_modules/angular/angular.min.js',
            'node_modules/angular-mocks/angular-mocks.js',
            'Module.js',
            'views/*',
            'src/**/*.js',
            'test/**/*test.js'
        ],


        exclude: [
        ],

        preprocessors: {
            'Module.js': ['browserify'],
            'views/*' : ['browserify'],
            'src/**/*.js': ['browserify'],
            'test/**/*test.js': ['browserify']
        },

        browserify: {
            debug: true,
            transform: ['babelify', 'stringify']
        },

        reporters: ['progress'],

        port: 9876,

        colors: true,

        logLevel: config.LOG_DEBUG,

        autoWatch: true,

        browsers: ['PhantomJS'],

        singleRun: false
    });
};

Module.js

import HelloWorldDirective from './src/HelloWorldDirective';

angular.module('app', [])
    .directive('helloWorld', HelloWorldDirective);