测试使用$位置服务的面包屑指令

我正在尝试为面包屑指令/服务编写一个简单的单元测试。基本上，我想要做的就是更改location.path（或任何正确的方法），然后能够运行期望的指令的HTML，以查看breadcrumb列表已更新。

痕迹导航服务（从AngularJS Breadcrumbs Service借来的）看起来是这样的：

var commonModule = angular.module('app.common'); 

commonModule.factory('common.service.breadcrumbs', ['$rootScope', '$location', function($rootScope, $location){ 

    var breadcrumbs = []; 
    var breadcrumbsService = {}; 

    function setBreadcrumbs() { 
     var pathElements = $location.path().split('/'), result = [], i; 
     var breadcrumbPath = function (index) { 
      return '/' + (pathElements.slice(0, index + 1)).join('/'); 
     }; 

     pathElements.shift(); 
     for (i=0; i<pathElements.length; i++) { 
      result.push({name: pathElements[i], path: breadcrumbPath(i)}); 
     } 

     breadcrumbs = result; 
    } 

    setBreadcrumbs(); 

    // We want to update breadcrumbs only when a route is actually changed 
    // $location.path() will get updated immediately (even if route change fails!) 
    $rootScope.$on('$routeChangeSuccess', function(event, current){ 
     setBreadcrumbs(); 
    }); 

    breadcrumbsService.getAll = function() { 
     return breadcrumbs; 
    }; 

    breadcrumbsService.getFirst = function() { 
     return breadcrumbs[0] || {}; 
    }; 

    return breadcrumbsService; 
}]);

而我目前的测试看起来像这样：

describe("Directive:", function() { 

    beforeEach(angular.mock.module("app")); 

    var $compile, 
     $scope, 
     $location; 

    // Angular strips the underscores when injecting 
    beforeEach(inject(function(_$compile_, _$rootScope_, _$location_) { 
     $compile = _$compile_; 
     $scope = _$rootScope_.$new(); 
     $location = _$location_; 
    })); 

    describe("breadcrumbs", function() { 

     it("correctly display the path as breadcrumbs.", 
      inject(['common.service.breadcrumbs', function(breadcrumbs) { 

       //console.log($location.path()); 
       //$scope.$apply(); 
       $location.path('/analyze/reports'); 
       $scope.$apply(); 
       //console.log($location.path()); 
       //console.log(breadcrumbs.getAll()); 

       $scope.$broadcast('$routeChangeSuccess', {}); 

       // Build the directive 
       var element = $compile('<div class="cf-breadcrumbs" cf-breadcrumbs></div>')($scope); 
       $scope.$apply(); 

       console.log(element.html()); 
      }])); 

    }); 

});

目前

，我没有看到过面包屑服务更新面包屑的数组。我试过console.log（breadcrumbs.getAll（）），它总是返回没有两个新路径元素的同一个数组。我担心它可能与时间有关，但并不完全确定在执行检查/应用之前，我会如何等待$ routeChangeSuccess事件影响服务。

长话短说，我将如何测试以查看面包屑是否适当更新？

来源

2014-12-04 SamHuckaby

$在您的测试中从$ rootScope广播。 $ scope是$ rootScope的一个子范围，因此从那个播放的事件不会向上追加$ on处理程序。 – user2943490 2014-12-05 12:24:52

@ user2943490我无法相信，在我尝试过的一切后，我都没有想到这一点。奇迹般有效。如果你把它写成答案，我会接受它。 – SamHuckaby 2014-12-05 14:51:42

$在您的测试中从$ rootScope广播。 $ scope是$ rootScope的子范围，因为它是使用$rootScope.$new()创建的，所以从此播放的事件不会向上追加$ on处理程序。

$广播向下传播到子范围，而$向上传播。

来源

2014-12-05 22:34:25 user2943490

测试使用$位置服务的面包屑指令

回答

相关问题