Wednesday, October 30, 2013

Unit testing state transitions with ui-router and karma/jasmine

Testing ui-router state transitions with karma/jasmine is straightforward. The unit test:
'use strict';
describe('Controller: CourseCtrl', function () {
// load the controller's module
beforeEach(module('myApp'));
// load controller widgets/views/partials
var views = [
'views/course.html',
'views/main.html'
];
views.forEach(function(view) {
beforeEach(module(view));
});
var CourseCtrl,
scope;
// Initialize the controller and a mock scope
beforeEach(inject(function ($controller, $rootScope) {
scope = $rootScope.$new();
CourseCtrl = $controller('CourseCtrl', {
$scope: scope
});
}));
it('should should transition to main.course', inject(function ($state, $rootScope) {
$state.transitionTo('main.course');
$rootScope.$apply();
expect($state.current.name).toBe('main.course');
}));
});
view raw gistfile1.js hosted with ❤ by GitHub
And karma configuration:
module.exports = function(config) {
'use strict';
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
'app/bower_components/angular/angular.js',
'app/bower_components/angular-mocks/angular-mocks.js',
'app/scripts/*.js',
'app/scripts/**/*.js',
'app/views/**/*.html',
'test/spec/**/*.js'
],
exclude: [],
port: 8080,
preprocessors: {
'app/views/**/*.html': 'html2js'
},
ngHtml2JsPreprocessor: {
stripPrefix: 'app/'
},
logLevel: config.LOG_INFO,
autoWatch: false,
// - IE (only Windows)
browsers: ['PhantomJS'],
singleRun: false
});
};
view raw gistfile1.txt hosted with ❤ by GitHub
Note the html preprocessor and inclusion of the views in the "files" array.