Karma + jasmine + angular + ui 路由器 - 使用 state.go 和参数测试解析
Karma + jasmine + angular + ui router - testing for resolve with state.go with params
我在 angular 模块 "moduleB" 中定义了如下状态
$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'
}
}
})
我想为 "resolve" 编写单元测试,这是我的 jasmine 单元测试。
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', Object{params: Object{}, current: Object{name: '', .......}
2) expect(state.current.name).toBe('stateB.details') ==> 失败并出现错误
预期 '' 为 'stateB.details'.
3) 期望解决 ==> 失败并出现错误
类型错误:'undefined' 不是一个对象(正在评估 'state.current.resolve.value3')
任何人都可以帮助指出我遗漏了什么吗?
更新:
我修改了我的测试以在 promise 的成功块中包含断言。
即使断言为假,它也能通过测试。
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');
});;
});
此测试通过并且 "console.log('state', state);" 没有显示任何内容。
而且,我对 "resolved-data2" 的断言应该失败,因为预期值为 "resolved-data".
终于,我解决了这个问题。这是任何感兴趣的人的解决方案。
1) 导入模块
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) 单元测试:
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');
});
我在 angular 模块 "moduleB" 中定义了如下状态
$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'
}
}
})
我想为 "resolve" 编写单元测试,这是我的 jasmine 单元测试。
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', Object{params: Object{}, current: Object{name: '', .......}
2) expect(state.current.name).toBe('stateB.details') ==> 失败并出现错误 预期 '' 为 'stateB.details'.
3) 期望解决 ==> 失败并出现错误 类型错误:'undefined' 不是一个对象(正在评估 'state.current.resolve.value3')
任何人都可以帮助指出我遗漏了什么吗?
更新:
我修改了我的测试以在 promise 的成功块中包含断言。 即使断言为假,它也能通过测试。
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');
});;
});
此测试通过并且 "console.log('state', state);" 没有显示任何内容。 而且,我对 "resolved-data2" 的断言应该失败,因为预期值为 "resolved-data".
终于,我解决了这个问题。这是任何感兴趣的人的解决方案。
1) 导入模块
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) 单元测试:
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');
});