$ 위치 서비스를 사용하는 테스트 breadcrumb 지시문

breadcrumb 지시문/서비스에 대한 간단한 단위 테스트를 작성하려고합니다. 기본적으로, 내가하고 싶은 것은 location.path (또는 올바른 방법은 무엇이든간에)를 변경 한 다음 지시문의 HTML에서 예상대로 실행하여 탐색 경로 목록이 업데이트되었는지 확인하는 것입니다.

(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())를 시도했으며, 두 개의 새로운 경로 요소없이 항상 동일한 배열을 리턴한다. 타이밍과 관련이 있을지 모르지만, 내 check/apply를하기 전에 $ routeChangeSuccess 이벤트가 서비스에 영향을 줄 때까지 기다리는 방법을 정확히 알지 못했습니다.

간단히 말해, 빵 부스러기가 적절하게 업데이트되었는지 테스트하려면 어떻게해야합니까?

출처

2014-12-04 SamHuckaby

테스트에서 $ rootScope의 $ broadcast. $ scope는 $ rootScope의 자식 범위이므로, $ on 핸들러를 첨부 한 곳에서 브로드 캐스팅 된 이벤트는 위쪽으로 올라가지 않습니다. – user2943490

@ user2943490 나는 내가 시도한 모든 것이 끝난 후에 그것을 생각하지 않았다는 것을 믿을 수 없다. 매력처럼 작동합니다. 당신이 대답으로 그것을 쓰면 나는 그것을 받아 들일 것입니다. – SamHuckaby

$ 브로드 캐스트로부터 $ broadcastScope. $ scope는 $rootScope.$new()으로 생성 된 $ rootScope의 하위 범위이므로 $ from 핸들러를 첨부 한 위치에서 위쪽으로 이동하지 않습니다.

$ 브로드 캐스트는 하위 범위로 이동하고 $ 방출은 위쪽으로 이동합니다.

출처

2014-12-05 22:34:25 user2943490

$ 위치 서비스를 사용하는 테스트 breadcrumb 지시문

답변

관련 문제