web-dev-qa-db-fra.com

tests unitaires de route angularjs

Comme nous le voyons ici dans 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'});
}]);

il est suggéré de faire le test de routage avec le test e2e,

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

Cependant, je pense que la configuration '$ routeProvider' se fait avec une seule fonction, fonction ($ routeProvider), et nous devrions être en mesure de tester les unités sans implication du navigateur car je pense que la fonction de routage ne nécessite pas de DOM navigateur.

Par exemple,
lorsque l'url est/foo, templateUrl doit être /partials/foo.html et le contrôleur est FooCtrl
lorsque l'url est/bar, templateUrl doit être /partials/bar.html et le contrôleur est BarCtrl

Il s'agit d'une fonction IMO simple, et elle devrait également être testée dans un test simple, un test unitaire.

J'ai recherché sur Google ce test unitaire $ routeProvider, mais pas encore de chance.

Je pense que je peux emprunter du code ici mais je n'ai pas pu le faire encore, https://github.com/angular/angular.js/blob/master/test/ng/routeSpec.js .

angularjsunit-testingjasmineangularjs-routing
41
allenhwkim

Pourquoi ne pas simplement affirmer que l’objet route est configuré correctement?

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')
  });
});
63
zhon

Je pense que vous devriez pouvoir tester le $ routeProvider comme ceci:

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
Juho Salmio

En combinant les deux réponses précédentes, si vous souhaitez tester le routeur comme une boîte noire qui réussit à router où il devrait (pas le contrôleur ets se configure en lui-même), quels que soient les itinéraires:

// 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
pansay