測試用指令$上

Question

我已經寫了一對夫婦使用控制器的$上已經能夠成功地測試他們，看到plunker：http://plnkr.co/edit/8cwcdPc26PVAURmVFR8t?p=preview

但是，我現在使用有一個指令$上。在鏈接功能：

app.directive('myDirective', function($rootScope, $timeout) { 
    return { 
     restrict: 'A', 
     replace: true, 
     scope: {}, 
     link: function(scope,element,attrs){ 

      scope.$on("step1", function(event) { 
       $rootScope.$broadcast('step3'); 
       scope.hidden = false; 
       scope.shown = false; 
      }); 
      scope.$on("step2", function(event) { 
       scope.msg = ''; 
       scope.errorCase = false; 
       scope.infoCase = false; 
      }); 
      scope.$on("step3", function(event) { 
       scope.hidden = true; 
      }); 
     }, 
     template: 
         '<div class="wrapper">' + 
          '<p>{{ msg }}</p>' + 
         '</div>' 
    }; 
}); 

我寫了下面的測試：

describe('myDirective', function() { 
    var $scope, compile, element; 

    beforeEach(module('myApp')); 

    beforeEach(inject(function ($rootScope, $compile) { 
     $scope = $rootScope.$new(); 
     element = angular.element("<section my-directive></section>"); 
     $compile(element)($scope); 
     $scope.$digest(); 
    })); 

    it('should initialise step1', function(){ 
     var sub_scope = $scope.$new(); 
     sub_scope.$emit('step1'); 
     expect($scope.hidden).toBeFalsy(); 
     expect($scope.shown).toBeFalsy(); 
    }); 
}); 

但測試沒有運行在所有所以沒有錯誤顯示。我遵循同樣的方法，但是我認爲這對於指令是不正確的。有什麼建議麼？

Answer 1

您正在創建基於您定義的指令，一個新的範圍：

app.directive('myDirective', function($rootScope, $timeout) { 
    return { 
// ... Your code ... 
     scope: {}, // This is a new isolated scope for the directive 
// ... Your code ... 
    }; 
}); 

在現有的測試，你$scope變量是父創建指令的範圍。您需要通過調用'isolateScope'來獲得測試中的指令範圍。見分叉plunker

it('should initialise step1', function(){ 
    var directiveScope = element.isolateScope(); 
    var sub_scope = directiveScope.$new(); 
    sub_scope.$emit('step1'); 
    expect(directiveScope.hidden).toBeFalsy(); 
    expect(directiveScope.shown).toBeFalsy(); 
});