有用的ui路由器unit testing（状态到url）

我有一些麻烦的unit testing我的应用程序，这是build立在Angular UI路由器的路由器。 我想testing的是状态转换是否适当地改变URL（稍后会有更复杂的testing，但这是我开始的地方）。

以下是我的应用程序代码的相关部分：

angular.module('scrapbooks') .config( function($stateProvider){ $stateProvider.state('splash', { url: "/splash/", templateUrl: "/app/splash/splash.tpl.html", controller: "SplashCtrl" }) }) 

和testing代码：

 it("should change to the splash state", function(){ inject(function($state, $rootScope){ $rootScope.$apply(function(){ $state.go("splash"); }); expect($state.current.name).to.equal("splash"); }) }) 

在Stackoverflow（和官方的UI路由器testing代码）类似的问题build议包装在$应用$ state.go调用应该是足够的。 但是我做到了，国家还没有更新。 $ state.current.name保持为空。

Answer 1

一直有这个问题，最后想出了如何做到这一点。

这是一个示例状态：

 angular.module('myApp', ['ui.router']) .config(['$stateProvider', function($stateProvider) { $stateProvider.state('myState', { url: '/state/:id', templateUrl: 'template.html', controller: 'MyCtrl', resolve: { data: ['myService', function(service) { return service.findAll(); }] } }); }]); 

下面的unit testing将包括testingURL w / params，并执行注入自己的依赖的parsing：

 describe('myApp/myState', function() { var $rootScope, $state, $injector, myServiceMock, state = 'myState'; beforeEach(function() { module('myApp', function($provide) { $provide.value('myService', myServiceMock = {}); }); inject(function(_$rootScope_, _$state_, _$injector_, $templateCache) { $rootScope = _$rootScope_; $state = _$state_; $injector = _$injector_; // We need add the template entry into the templateCache if we ever // specify a templateUrl $templateCache.put('template.html', ''); }) }); it('should respond to URL', function() { expect($state.href(state, { id: 1 })).toEqual('#/state/1'); }); it('should resolve data', function() { myServiceMock.findAll = jasmine.createSpy('findAll').and.returnValue('findAll'); // earlier than jasmine 2.0, replace "and.returnValue" with "andReturn" $state.go(state); $rootScope.$digest(); expect($state.current.name).toBe(state); // Call invoke to inject dependencies and run function expect($injector.invoke($state.current.resolve.data)).toBe('findAll'); }); }); 

Answer 2

如果你只想检查当前状态的名字，那么使用$state.transitionTo('splash')更容易

 it('should transition to splash', inject(function($state,$rootScope){ $state.transitionTo('splash'); $rootScope.$apply(); expect($state.current.name).toBe('splash'); })); 

Answer 3

我意识到这有点偏离主题，但是我从Google来到这里寻找一种testing路由模板，控制器和URL的简单方法。

 $state.get('stateName') 

会给你

 { url: '...', templateUrl: '...', controller: '...', name: 'stateName', resolve: { foo: function () {} } } 

在你的testing中。

所以你的testing可能看起来像这样：

 var state; beforeEach(inject(function ($state) { state = $state.get('otherwise'); })); it('matches a wild card', function () { expect(state.url).toEqual('/path/to/page'); }); it('renders the 404 page', function () { expect(state.templateUrl).toEqual('views/errors/404.html'); }); it('uses the right controller', function () { expect(state.controller).toEqual(...); }); it('resolves the right thing', function () { expect(state.resolve.foo()).toEqual(...); }); // etc 

Answer 4

对于一个没有resolve的state ：

 // TEST DESCRIPTION describe('UI ROUTER', function () { // TEST SPECIFICATION it('should go to the state', function () { module('app'); inject(function ($rootScope, $state, $templateCache) { // When you transition to the state with $state, UI-ROUTER // will look for the 'templateUrl' mentioned in the state's // configuration, so supply those templateUrls with templateCache $templateCache.put('app/templates/someTemplate.html'); // Now GO to the state. $state.go('someState'); // Run a digest cycle to update the $state object // you can also run it with $state.$digest(); $state.$apply(); // TEST EXPECTATION expect($state.current.name) .toBe('someState'); }); }); }); 

注意：-

对于嵌套状态，我们可能需要提供多个模板。 例如。 如果我们有一个嵌套的状态core.public.home和每个state ，即core ， core.public和core.public.home有一个templateUrl定义，我们将不得不为每个状态的templateUrl键添加$templateCache.put() ： –

$templateCache.put('app/templates/template1.html'); $templateCache.put('app/templates/template2.html'); $templateCache.put('app/templates/template3.html');

希望这可以帮助。 祝你好运。

Answer 5

您可以使用$state.$current.locals.globals来访问所有已parsing的值（请参阅代码片段）。

 // Given $httpBackend .expectGET('/api/users/123') .respond(200, { id: 1, email: '[e-mail]'); // When $state.go('users.show', { id: 123 }); $httpBackend.flush(); // Then var user = $state.$current.locals.globals['user'] expact(user).to.have.property('id', 123); expact(user).to.have.property('email', '[e-mail]'); 

Answer 6

如果你对模板的内容不感兴趣，你可以模拟$ templateCache：

 beforeEach(inject(function($templateCache) { spyOn($templateCache,'get').and.returnValue('<div></div>'); }