I'm new to angular-ui-router and I've been trying to do some unit testing for a basic authentication, its working fine until I hit a maximum call stack error.
I've narrowed the error down to the $state.go call in the app.run section.
I remove this and the test works. However it breaks my app
What can I do to resolve this? so I can test this section and make it work as well?
Why does this work normally but causes a test error?
Error:
RangeError: Maximum call stack size exceeded
at Scope.$broadcast (/Users/paulrobinson/Workspace/contactCachePOC/dev/bower_components/angular/angular.js:12876:15)
at Object.transitionTo (/Users/paulrobinson/Workspace/contactCachePOC/dev/bower_components/angular-ui-router/release/angular-ui-router.js:2584:24)
at Object.go (/Users/paulrobinson/Workspace/contactCachePOC/dev/bower_components/angular-ui-router/release/angular-ui-router.js:2454:21)
at /Users/paulrobinson/Workspace/contactCachePOC/dev/js/core.js:9:5889
at Scope.$broadcast (/Users/paulrobinson/Workspace/contactCachePOC/dev/bower_components/angular/angular.js:12874:28)
at Object.transitionTo (/Users/paulrobinson/Workspace/contactCachePOC/dev/bower_components/angular-ui-router/release/angular-ui-router.js:2584:24)
at Object.go (/Users/paulrobinson/Workspace/contactCachePOC/dev/bower_components/angular-ui-router/release/angular-ui-router.js:2454:21)
at /Users/paulrobinson/Workspace/contactCachePOC/dev/js/core.js:9:5889
at Scope.$broadcast (/Users/paulrobinson/Workspace/contactCachePOC/dev/bower_components/angular/angular.js:12874:28)
at Object.transitionTo (/Users/paulrobinson/Workspace/contactCachePOC/dev/bower_components/angular-ui-router/release/angular-ui-router.js:2584:24)
Code:
app.config(['$stateProvider', '$urlRouterProvider',
function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/');
var access = routingConfig.roles;
$stateProvider
.state('start', {
url : '/',
templateUrl : 'partials/decide.html',
controller : 'decideController',
data: {
access: access.anon
}
});
}]);
app.run(['$rootScope', '$state', 'AuthService', '$log', '$location',
function ($rootScope, $state, AuthService, $log, $location) {
$rootScope.$on("$stateChangeStart",
function (event, toState, toParams, fromState, fromParams) {
if (!AuthService.isAuthorized(toState.data.access)) {
event.preventDefault();
$rootScope.error = null;
//STATE.GO is causing the error
$state.go('start');
//$location.path('/#/');
return;
}
});
}]);
describe('Test as an anonymous user', function () {
var $templateCache, $state, $stateParams, $rootScope, $httpBackend,
AuthService,, $location;
var roles = {
anon: { id: 0, value: 'Public'},
user: { id: 1, value: 'User'}
};
beforeEach(module('app'));
beforeEach(inject(function(_$templateCache_, _$state_, _$stateParams_, _$rootScope_, _$httpBackend_,
_AuthService_, _sessionService_, _$location_) {
$templateCache = _$templateCache_;
$state = _$state_;
$stateParams = _$stateParams_;
$rootScope = _$rootScope_;
$httpBackend = _$httpBackend_;
AuthService = _AuthService_;
$location = _$location_;
//Fake it and say we're not authorized.
spyOn(AuthService, "isAuthorized").andCallFake(function (state){
return false;
});
}));
describe('View page.', function () {
beforeEach(function () {
$state.go('start', { });
$rootScope.$apply();
});
it('Should view page.', function () {
expect($state.current.name).toEqual('start');
});
});
});
Maximum call stack exceeded suggests that something is happening recursively. I'd guess that the state that you are going to "start" is also not authorised, so you get redirected to "start" again, and so on.
You need to make your AuthService.IsAuthorized return true at some point
Ok so it appears to be a bug with ui-router.
Here is a solution
https://github.com/angular-ui/ui-router/issues/178#issuecomment-49156829
$state.go(toState.name, toParams, {notify: false}).then(function() {
$rootScope.$broadcast('$stateChangeSuccess', toState, toParams, fromState, fromParams);
});
The above code will deal with the problem without breaking the browser or unit tests.
Just beware of https://github.com/angular-ui/ui-router/issues/1348 when using this fix.
Use $state.go("main", {}, {notify:false}); for notify to $stateChangeStart event.
$state.go("main", {}, {notify:false});
Related
I am trying to write a unit test for my ui-router with uses resolve.
Router.js
define(['module', 'require'], function(module, require) {
'use strict';
var Router = function ($stateProvider, $urlRouterProvider) {
$urlRouterProvider.otherwise('/shopping');
$stateProvider
.state('shopping', {
url: '/shopping',
templateUrl: 'app/shopping.html',
resolve:{
userFactory : 'UserFactory',
checkAccess:function(userFactory){
return userFactory.checkUser();
}
}
})
.state('products', {
url: '/products',
templateUrl: 'app/products.html',
resolve:{
userFactory : 'UserFactory',
checkAccess:function(userFactory){
return userFactory.checkUser();
}
}
})
.state('notAuth', {
url: '/notAuth',
templateUrl: 'app/unauthorised.html'
});
};
module.exports = ['$stateProvider', '$urlRouterProvider', Router];
});
Within userFactory.checkUser(); i essentially check the users' rights, and redirect either to the templateUrl, or perform a:
$state.go('notAuth');
My currect .spec.js:
define(['require', 'angular-mocks', 'angular-ui-router', 'app/router'], function (require) {
'use strict';
describe('myApp/myState', function() {
var $rootScope, $state, $injector, myServiceMock, $httpBackend, state = 'shopping';
var mockResponse = {
"access": true
}
var angular = require('angular');
var myRouter = require('app/router');
beforeEach(module('ui.router'));
beforeEach(function() {
module(myRouter, function($provide) {
$provide.value('userFactory', myServiceMock = {});
});
inject(function(_$rootScope_, _$state_, _$injector_, $templateCache, _$httpBackend_) {
$rootScope = _$rootScope_.$new();
$state = _$state_;
$injector = _$injector_;
$httpBackend = _$httpBackend_;
$rootScope.$digest();
})
});
it('should transition to shopping', inject(function($state,$rootScope){
$state.transitionTo('shopping');
$rootScope.$apply();
expect($state.current.name).toBe('shopping');
}));
it('should resolve data', function() {
myServiceMock.checkUser = jasmine.createSpy('checkUser').and.returnValue(mockResponse);
// earlier than jasmine 2.0, replace "and.returnValue" with "andReturn"
$state.go(state);
$rootScope.$digest();
expect($state.current.name).toBe(state);
});
});
});
With the above test, i get the following errors:
Information: myApp/myState
Information: should transition to shopping Error: [$rootScope:infdig] 10 $digest() iterations reached. Aborting!
Information: Watchers fired in the last 5 iterations: []
Information: http://errors.angularjs.org/1.4.0/$rootScope/infdig?p0=10&p1=%5B%5D
Information: should resolve data Expected '' to be 'shopping'.
It looks like there are a few things happening here. First, you're digesting too many times. That's the "10 $digest() iterations reached" message. To fix that one, you should remove the $rootScope.$digest() from the end of your inject function.
I think the actual failing test part is because you're not resolving your checkAccess resolve that you've configured in your route. Try adding $provide.value('checkAccess', function() {return true;}); to your $provide.value setup. That should allow checkAccess to resolve in your route, which will then allow the route to complete the state transition.
I found my answer to a similar question here: Angular Jasmine UI router inject resolve value into test
Is there a way to redirect a user to a specific state based on data from cookies when using ui-router?
I tried to do it from the .config() but since I'm not able to inject other dependencies it wasnt working.
I also tried to do it on the .run() block, but it just gives a loop (of course).
This is what I first tried on the .config()
function ConfigRouter($locationProvider, $stateProvider, $urlRouterProvider, Constant, localStorageService) {
$locationProvider.html5Mode(true);
$urlRouterProvider.when('/', function($injector) {
var $state = $injector.get('$state');
checkState($state);
});
$urlRouterProvider.when('', function($injector) {
var $state = $injector.get('$state');
checkState($state);
});
$urlRouterProvider.otherwise(function($injector) {
var $state = $injector.get('$state');
$state.go('error');
});
function checkState($state) {
var userCookie = localStorageService.cookie.get(Constant.cookieName);
if(userCookie.type == 1) {
$state.go('home-app');
} else if (userCookie.type == 2) {
$state.go('home-client');
} //and so on
}
}
Is there a way to do it? Or other way to achieve the same result? Basically I need to send the user to a different portion of the app based on the users role. If he is an admin, client, moderator, etc.. Each one has an specific app and need to retrieve specific data from server, this is why i want to do it, so i can request the data on the resolve of each state.
If you are using angular ui router, you can use resolve on the top state, there you can inject services which helps you to verify the cookie
you can also intercept and do it during
.run(["$rootScope", "$location", "$state", "services.userService", function ($rootScope, $location, $state) {
$rootScope.$on('$stateChangeStart', function (e, toState, toParams
, fromState, fromParams) {
// validation
});
more info https://github.com/angular-ui/ui-router/wiki#resolve
and examples here
angular ui-router login authentication
Defer Angular UI Router $stateChangeStart until server authorization response receieved
ej:
.state('main', {
templateUrl: 'app/modules/home/view.html',
abstract: true,
resolve: {
authorize: ['userService', "$state", "$q",
function (userService, $state, $q) {
return checkAuthorization(userService, $state, $q)
.then(function (user) {
return {user: user}
});
}]
},
controller: 'RootController'
})
// more states
var checkAuthorization = function(userService, $state){
//do all the necessary checks and return the user if he is already logged in
//redirecct to other page if the check failed
}
I did user check in the .run section:
.run(['$rootScope', '$state', '$cookies',
function ($rootScope, $state, $cookies) {
if ($cookies.get('token'))
$state.go('main');
else
$state.go('guest)
}]);
Of course than you should install 'token' in cookie. And now you don't need $urlRouterProvider in .config
I'm newbie in Angular.
// This is my main controller
app.controller('AppCtrl', ['$rootScope', '$scope', 'cfpLoadingBar', '$http',
function ($rootScope, $scope, cfpLoadingBar, $http) {
cfpLoadingBar.start();
$rootScope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
//stop loading bar on stateChangeSuccess
event.targetScope.$watch("$viewContentLoaded", function () {
// HERE I want to send request to API and on complete do
// 1. Complete loadbar
// 2. Write response to global var and use it from other controller
$http.get(
'/api/',
{}
).then(function (response) {
// Completing loadbar
cfpLoadingBar.complete();
$SOME_GLOBAL_VAR.api = response;
});
});
});
}]);
// Controller 1
app.controller('Ctrl_1', ["$scope", "$http" function ($scope, $http) {
$scope.param = 'get_data_1';
When $SOME_GLOBAL_VAR.api
console.log($SOME_GLOBAL_VAR.api);
}]);
I want to use one api request for different controllers.
So I want to load API, and when it finish - each controller will render his part.
Now I can't understand how to listen to API loading is completed?
You can achieve this in following way
$http.get(
'/api/',
{}
).then(function (response) {
// Completing loadbar
cfpLoadingBar.complete();
$rootScope.$emit("receivedApiUpdate", response);
});
angular.module("my_module")('controller1', ['$rootScope', function($rootScope) {
$rootScope.$on('receivedApiUpdate',function(event, response){
// Do your work
});
}]);
angular.module("my_module")('controller2', ['$rootScope', function($rootScope) {
$rootScope.$on('receivedApiUpdate',function(event, response){
// Do your work
});
}]);
angular.module("my_module")('controller3', ['$rootScope', function($rootScope) {
$rootScope.$on('receivedApiUpdate',function(event, response){
// Do your work
});
}]);
you can try to make a service and use your service across your controllers.
https://docs.angularjs.org/guide/services
I have a question: When I'm in a page I want return to previous page. I use the $routeProvider. How can I read the previous url?
I try to use this code in my controller but doesn't work...
angular.module.controller('myController',
function($scope, $routeParams, $http, $location, $rootScope) {
$rootScope.$on("$routeChangeSuccess",
function (event, current, previous, rejection) {
console.log(previous);
$location.path('PREVIOUS PATH');
});
});
How can I read the previous path? Thanks!
I am not fully sure, what you want to achieve. So I would suggest, check this before you go your own way:
How to implement history.back() in angular.js
But, in case, you want to know how to keep the last state with angular and UI-Router, we can do it with a service. There is some naive implementation tracking just last state (not challenging the history.back())
Check the working example
Service definition:
.factory('PreviousState', ['$rootScope', '$state',
function ($rootScope, $state) {
var lastHref = "/home",
lastStateName = "home",
lastParams = {};
$rootScope.$on("$stateChangeSuccess", function (event, toState, toParams
, fromState, fromParams) {
lastStateName = fromState.name;
lastParams = fromParams;
lastHref = $state.href(lastStateName, lastParams)
})
return {
getLastHref: function (){ return lastHref ; },
goToLastState: function (){ return $state.go(lastStateName, lastParams); },
}
}])
So we just do listen the $stateChangeSuccess and keep the track of last state name and its $stateParams.
We can inject our service to all scopes:
.run(['$rootScope', 'PreviousState',
function ($rootScope, PreviousState) {
$rootScope.PreviousState = PreviousState;
}])
And we can use it as a click or href:
<button ng-click="PreviousState.goToLastState()">go back</button>
<a ng-href="#{{PreviousState.getLastHref()}}" > go to last href</a>
Check that in action here
within a controller i have a function which uses $state.transitionTo to "redirect" to another state.
now i am stuck in testing this function, i get always the error Error: No such state 'state-two'. how can i test this? it its totally clear to me that the controller does not know anything about the other states, but how can i mock this state?
some code:
angular.module( 'mymodule.state-one', [
'ui.state'
])
.config(function config($stateProvider) {
$stateProvider.state('state-one', {
url: '/state-one',
views: {
'main': {
controller: 'MyCtrl',
templateUrl: 'mytemplate.tpl.html'
}
}
});
})
.controller('MyCtrl',
function ($scope, $state) {
$scope.testVar = false;
$scope.myFunc = function () {
$scope.testVar = true;
$state.transitionTo('state-two');
};
}
);
describe('- mymodule.state-one', function () {
var MyCtrl, scope
beforeEach(module('mymodule.state-one'));
beforeEach(inject(function ($rootScope, $controller) {
scope = $rootScope.$new();
MyCtrl = $controller('MyCtrl', {
$scope: scope
});
}));
describe('- myFunc function', function () {
it('- should be a function', function () {
expect(typeof scope.myFunc).toBe('function');
});
it('- should test scope.testVar to true', function () {
scope.myFunc();
expect(scope.testVar).toBe(true);
expect(scope.testVar).not.toBe(false);
});
});
});
Disclaimer: I haven't done this myself, so I totally don't know if it will work and is what your are after.
From the top of my head, two solutions come to my mind.
1.) In your tests pre configure the $stateProvider to return a mocked state for the state-two That's also what the ui-router project itself does to test state transitions.
See: https://github.com/angular-ui/ui-router/blob/04d02d087b31091868c7fd64a33e3dfc1422d485/test/stateSpec.js#L29-L42
2.) catch and parse the exception and interpret it as fulfilled test if tries to get to state-two
The second approach seems very hackish, so I would vote for the first.
However, chances are that I totally got you wrong and should probably get some rest.
Solution code:
beforeEach(module(function ($stateProvider) {
$stateProvider.state('state-two', { url: '/' });
}));
I recently asked this question as a github issue and it was answered very helpfully.
https://github.com/angular-ui/ui-router/issues/537
You should do a $rootScope.$apply() and then be able to test. Note that by default if you use templateUrl you will get an "unexpected GET request" for the view, but you can resolve this by including your templates into your 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');
}));
});
Also if you want to expect on that the transition was made like so
expect(state.current.name).toEqual('state-two')
then you need to scope.$apply before the expect() for it to work