I encountered some difficulties while writing jasmine tests for an AngularJS application that utilizes angular ui-router. Despite proper initialization of my services and app in the test, I found that the controllers were not starting up correctly. In an effort to troubleshoot, I removed the specific application from the equation and simplified the problem down to a single controller example which displayed the same issue. Below is the code snippet of the actual test:
describe('Test', function() {
var async = new AsyncSpec(this);
var scope = {};
beforeEach(angular.mock.module('TestApp'));
beforeEach(angular.mock.inject(function($rootScope, $state, $templateCache) {
scope.$rootScope = $rootScope;
scope.$state = $state;
$templateCache.put('start.html', '<div class="start"></div>');
}));
async.it('Check if TestCtrl is properly initialized', function(done) {
scope.$rootScope.status = { done: false };
scope.$rootScope.$on('$stateChangeSuccess', function(event, state, params) {
expect(scope.$rootScope.status.done).toBe(true);
done();
});
scope.$state.transitionTo('start', {}, { notify: true });
scope.$rootScope.$apply();
});
});
For the complete runnable test, click here.
The application is being initialized correctly, and the ui router can successfully transition the application to the appropriate state. However, the problem lies in the fact that the controller fails to initialize. It is crucial for the router to initialize the controllers as they receive crucial configuration from it. I am trying to avoid duplicating this configuration in my tests.
I believe there must be something missing in my approach, but I'm unable to pinpoint it. Any suggestions or insights would be greatly appreciated. Thank you!