I have state defined in my angular module "moduleB" as follows
$stateProvider
.state('stateB', {
parent: 'stateA',
abstract: true,
templateUrl : baseUrl+'/templates/stateB.html'
})
.state('stateB.details', {
url: '/stateB/details/:param1/:param2',
resolve : {
value3 : ['$localStorage', '$stateParams', function($localStorage, $stateParams){
return $localStorage.value3[$stateParams.param1];
}]
},
views : {
'view1' : {
templateUrl : baseUrl+'/templates/view1.html',
controller: 'View1Ctrl'
},
'view2' : {
templateUrl : baseUrl+'/templates/view2.html',
controller : 'View2Ctrl'
}
}
})
I would like to write unit test for the "resolve" and here is my jasmine unit test.
var rootScope, state, injector, mockLocalStorage, httpBackend;
beforeEach(module('moduleB'));
beforeEach(inject(function($rootScope, $state, $injector, $localStorage, $httpBackend) {
rootScope = $rootScope;
state = $state;
injector = $injector;
httpBackend = $httpBackend;
mockLocalStorage = $localStorage;
}));
it('should should resolve the data', function() {
mockLocalStorage.value3 = {};
mockLocalStorage.value3["1234567890"] = 'resolved-data';
state.go('stateB.details', {
"param1" : "1234567890",
"param2" : true
});
rootScope.$digest();
console.log('state', state);
expect(state.current.name).toBe('stateB.details');
expect(injector.invoke(state.current.resolve.value3)).toBe('resolved-data');
});
1) console.log('state', state) ==> prints 'state', Object{params: Object{}, current: Object{name: '', ........}
2) expect(state.current.name).toBe('stateB.details') ==> fails with error Expected '' to be 'stateB.details'.
3) expect for resolve ==> fails with error TypeError: 'undefined' is not an object (evaluating 'state.current.resolve.value3')
Can anyone help in pointing what am I missing?
UPDATE:
I modified my test to have assertions in the success block of the promise. It passes the test even when the assertions are false.
it('should resolve the data', function() {
mockLocalStorage.value3 = {};
mockLocalStorage.value3["1234567890"] = 'resolved-data';
state.go('stateB.details', {
"param1" : "1234567890",
"param2" : true
}).then(function() {
console.log('state', state);
expect(state.current.name).toBe('stateB.details'); expect(injector.invoke(state.current.resolve.value3)).toBe('resolved-data2');
});;
});
This test passes and nothing is displayed for "console.log('state', state);" . And, my assertion for "resolved-data2" should fail as the expected value is "resolved-data".
Finally, I fixed the problem. Here is the solution for any one who is interested in.
1) Import modules
beforeEach(module('stateA'));
beforeEach(module('stateB'));
beforeEach(module('ui.router'));
2)
beforeEach(module(
function($provide) {
$provide.value('$localStorage', mockStorage = { value3: []});
$provide.value('$stateParams', stateParams = { param1: 1234, param2: "true"});
}));
3) unit test:
it('should go to stateB.details state and resolve the data', function() {
mockStorage.assetInfo[stateParams.value3] = 'resolved-data';
var s = state.get('stateB.details');
expect(injector.invoke(s.resolve.value3)).toEqual('resolved-data');
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With