我们可以为 AngularJS routeProvider 编写单元测试吗？答案

【问题标题】：Can we write unit test for AngularJS routeProvider?我们可以为 AngularJS routeProvider 编写单元测试吗？
【发布时间】：2013-07-31 14:02:45
【问题描述】：

您好，我正在使用 AngularJS 构建应用程序，但我被困在单元测试部分。我知道如何为控制器编写单元测试，但我不知道如何为 routeProvider 编写单元测试。我正在使用 Jasmine 编写单元测试。

我的路线提供者将如下所示；

    var app = angular.module('MyApp', ['ngResource'])

     app.config(function ($routeProvider) {
        $routeProvider
          .when('/', {
            templateUrl: 'app/views/main.html',
            controller: 'MainCtrl'
          })
          .when('/home/:PartyID', {
            templateUrl: 'app/views/home.html',
            controller: 'HomeCtrl'
          })
           .when('/edit/:PartyID', {
            templateUrl: 'app/views/update_profile.html',
            controller: 'EditCtrl'
          })
          .when('/route', {
            templateUrl: 'app/views/route.html',
            controller: 'RouteCtrl'
          })
          .when('/signup', {
            templateUrl: 'app/views/signup.html',
            controller: 'SignupCtrl'
          })
          .when('/login', {
            templateUrl: 'app/views/login.html',
            controller: 'LoginCtrl'
          })
          .otherwise({
            redirectTo: '/'
          });  
 });

如何使用 Jasmine 为这个 routeProvider 编写单元测试？

【问题讨论】：

我猜你不想为 routeProvider 编写测试，而是检查你的 url。这是在教程docs.angularjs.org/tutorial/step_07
所以你说我不需要为 routeProvider 编写单元测试，而是编写 end2end 测试来检查 url。对吗？
是的，routeprovider 是一个已经被有角的家伙测试过的服务。您只需使用一个实例来修改存储您的 url 的对象。
单元测试路线是完全合理的。目的不是测试（即将弃用）$routeProvider，而是测试 url、模板和控制器之间的映射。 Here 就是一个例子。
单元测试意味着测试你的代码单元的一些内部逻辑。您要做的是测试配置。这超出了您的所有“单元”，只能在端到端测试中进行测试。

标签： unit-testing angularjs jasmine

【解决方案1】：

是的，您可以，这是快速回答，下面是一小段代码，可用于测试路线是否将您带到您期望的地方。

describe('Testing routes', function() {
    beforeEach(module('windscreens'));

    var location, route, rootScope;

    beforeEach(inject(
        function( _$location_, _$route_, _$rootScope_ ) {
            location = _$location_;
            route = _$route_;
            rootScope = _$rootScope_;
    }));

     describe('Login route', function() {
        beforeEach(inject(
            function($httpBackend) {
                $httpBackend.expectGET('login')
                .respond(200);
            }));

        it('should load the login page on successful load of /login', function() {
            location.path('/login');
            rootScope.$digest();
            expect(route.current.controller).toBe('LoginCtrl')
        });
    });    
});

【讨论】：

您好，尼克，感谢您提供这个直截了当的示例。对我来说，这看起来更像是行为测试而不是单元测试。
嗯@GregWang 你说得有道理。 Jasmine 更像是一种 BDD 语言，而不是 TDD。

【解决方案2】：

保持简单

describe('Testing Routes', function () {

// load the controller's module
beforeEach(module('MyApp'));

it('should test routes',
inject(function ($route) {

  expect($route.routes['/'].controller).toBe('MainCtrl');
  expect($route.routes['/'].templateUrl).toEqual('app/views/main.html');

  expect($route.routes['/home/:PartyID'].controller).toBe('HomeCtrl');
  expect($route.routes['/home/:PartyID'].templateUrl).toEqual('app/views/home.html');

  expect($route.routes['/edit/:PartyID'].controller).toBe('EditCtrl');
  expect($route.routes['/edit/:PartyID'].templateUrl).toEqual('app/views/update_profile.html');

  expect($route.routes['/route'].controller).toBe('RouteCtrl');
  expect($route.routes['/route'].templateUrl).toEqual('app/views/route.html');

  expect($route.routes['/signup'].controller).toBe('SignupCtrl');
  expect($route.routes['/signup'].templateUrl).toEqual('app/views/signup.html');

  expect($route.routes['/streamconfigs/:id'].controller).toBe('LoginCtrl');
  expect($route.routes['/streamconfigs/:id'].templateUrl).toEqual('app/views/login.html');

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

});

【讨论】：