首页 文章

angularjs路线单元测试

提问于
浏览 次
41

正如我们在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'});
}]);

建议使用e2e测试完成路由测试，

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是/ bar时，templateUrl必须是/partials/bar.html，控制器是BarCtrl

它是一个简单的函数IMO，它也应该在一个简单的测试，单元测试中进行测试 .

我用Google搜索并搜索了这个$ routeProvider单元测试，但还没有运气 .

我想我可以从这里借一些代码，但还不能成功，https://github.com/angular/angular.js/blob/master/test/ng/routeSpec.js .

angularjs unit-testing jasmine angularjs-routing

3 回答

  • 63

    结合前面两个答案，如果你想把路由器测试成一个成功路由的黑盒子（不是控制器自己配置），无论路由是什么：

    // 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);
});
    回复于
  • 5

    我认为你应该能够像这样测试$ 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);

  });
});
    回复于
  • 45

    为什么不断言路由对象配置正确？

    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')
  });
});
    回复于

相关问题