angularjs路線的單元測試

Question

正如我們在這裏看到的http://docs.angularjs.org/tutorial/step_07，建議

angular.module('phonecat', []). 
    config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
     when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}). 
     when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}). 
     otherwise({redirectTo: '/phones'}); 
}]); 

路由測試與端到端測試完成後，

it('should redirect index.html to index.html#/phones', function() { 
    browser().navigateTo('../../app/index.html'); 
    expect(browser().location().url()).toBe('/phones'); 
    }); 

不過，我認爲「$ routeProvider」配置是完成一個函數，函數（$ routeProvider），並且我們應該能夠在沒有瀏覽器參與的情況下進行單元測試，因爲我認爲路由功能不需要瀏覽器DOM。

例如，
當URL是/ foo，templateUrl必須/partials/foo.html和控制器是FooCtrl
當URL是/巴，templateUrl必須/partials/bar.html和控制器是BarCtrl

這是一個簡單的函數IMO，它也應該在一個簡單的測試，單元測試中測試。

我使用Google搜索和搜索此$ routeProvider單元測試，但沒有運氣。

我想我可以從這裏借一些代碼，但是還沒有成功，https://github.com/angular/angular.js/blob/master/test/ng/routeSpec.js。

Answer 1

爲什麼不乾脆斷言路由對象的配置是否正確？

it('should map routes to controllers', function() { 
    module('phonecat'); 

    inject(function($route) { 

    expect($route.routes['/phones'].controller).toBe('PhoneListCtrl'); 
    expect($route.routes['/phones'].templateUrl). 
     toEqual('partials/phone-list.html'); 

    expect($route.routes['/phones/:phoneId'].templateUrl). 
     toEqual('partials/phone-detail.html'); 
    expect($route.routes['/phones/:phoneId'].controller). 
     toEqual('PhoneDetailCtrl'); 

    // otherwise redirect to 
    expect($route.routes[null].redirectTo).toEqual('/phones') 
    }); 
}); 

Answer 2

我認爲你應該能夠測試$ routeProvider這樣的：

angular.module('phonecat', []). 
    config(['$routeProvider', function($routeProvider) { 
    $routeProvider. 
     when('/phones', {templateUrl: 'partials/phone-list.html', controller: PhoneListCtrl}). 
     when('/phones/:phoneId', {templateUrl: 'partials/phone-detail.html', controller: PhoneDetailCtrl}). 
     otherwise({redirectTo: '/phones'}); 
}]); 


it('should test routeProvider', function() { 
    module('phonecat'); 

    inject(function($route, $location, $rootScope) { 

    expect($route.current).toBeUndefined(); 
    $location.path('/phones/1'); 
    $rootScope.$digest(); 

    expect($route.current.templateUrl).toBe('partials/phone-detail.html'); 
    expect($route.current.controller).toBe(PhoneDetailCtrl); 

    $location.path('/otherwise'); 
    $rootScope.$digest(); 

    expect($location.path()).toBe('/phones/'); 
    expect($route.current.templateUrl).toEqual('partials/phone-list.html'); 
    expect($route.current.controller).toBe(PhoneListCtrl); 

    }); 
}); 

Answer 3

結合前兩次的答案，如果你想測試路由器作爲一個黑匣子已成功路由，它應該（而不是在自己的控制器ETS CONFIGS），無論路線可能是：

// assuming the usual inject beforeEach for $route etc. 
var expected = {}; 
it('should call the right controller for /phones route', function() { 
    expected.controller = $route.routes['/phones'].controller; 
    $location.path('/phones'); 
    $rootScope.$digest(); 
    expect($route.current.controller).toBe(expected.controller); 
}); 

it('should redirect to redirectUrl from any other route', function() { 
    expected.path = $route.routes[null].redirectTo; 
    $location.path('/wherever-wrong'); 
    $rootScope.$digest(); 
    expect($location.path()).toBe(expected.path); 
});