Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
AngularJS - Karma, Jasmine, Browserify, Stringify - ES6 Test Setup

###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

<!-- views/hello-world.html -->
<div>{{ ctrl.greet }} {{ ctrl.name }}</div>
/** 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;
/** 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}`);
});
});
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
});
};
import HelloWorldDirective from './src/HelloWorldDirective';
angular.module('app', [])
.directive('helloWorld', HelloWorldDirective);

nice

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment