带有templateUrl和隔离范围的角度测试指令

在angular.js上的新增功能，无法弄清楚如何使用templateUrl &隔离范围编写指令测试。带有templateUrl和隔离范围的角度测试指令

这里是我的控制器

(function(){ 
angular.module('buttons') 
    .controller('buttonController', ['$scope', function($scope){ 

     //primary button 
     $scope.primaryButton = { name: 'Submit'}; 
})();

这是我的观点的index.html &

<div class="layoutLeft"> 
     <p>Primary Button</p> 
     <primary-button info="primaryButton"></primary-button> 
    </div>

初级button.html

<button class="{{buttonInfo.class}}">{{buttonInfo.name}}</button>

这里是我的指令

(function(){ 
    angular.module('buttons') 
     .directive('primaryButton', function() { 
      return { 
       restrict: 'EA', 
       scope: { 
        buttonInfo: '=info' 
       }, 
       templateUrl: 'scripts/local/views/primary-button.html' 
      } 
     }) 
    })();

这是我的测试

(function(){ 
    beforeEach(angular.mock.module('buttons')); 
describe('Buttons Directive Test', function(){ 

    var $compile, $scope, $httpBackend; 

    beforeEach(module('templates')); 

    beforeEach(inject(function(_$compile_, _$rootScope_) { 
     $compile = _$compile_; 
     $scope = _$rootScope_.$new(); 

     $scope.primaryButton = {name: 'Save'}; 

     elm = angular.element("<primary-button info='buttonInfo'></primary-button>"); 
     e = $compile(elm)($scope); 
     e.digest(); 
    })); 

    it('should do something', function(){ 
     expect(e.html()).toContain($scope.primaryButton); 
    }); 
});

}）（）;

我用的茉莉和业力进行测试，可以有人指导我在做什么错

来源

2014-12-29 Varun Sheth

难道我的解决方案解决你的问题？请告诉我。 –

编辑一些轻：这是一个plunkr证明非常接近你的代码在做什么。有多个问题与你在你的问题，我有固定的代码：

http://plnkr.co/edit/QXprEUof2Ps0Vivg4L34?p=preview

在你测试你打电话e.digest（），因为你不能消化的元素，这将无法正常工作。 ..你应该调用$ scope。$ digest来代替。
e.html（）将不包含该JSON blob。我将其解释为希望它包含名称标签...
info ='buttonInfo'将信息绑定到OUTERScope中的属性buttonInfo，但您将其称为'primaryButton'。重命名$ scope.primaryButton至$ scope.buttonInfo
您使用的一些底线是没有完全必要的，但是这不是什么大不了的事，注射编译时，rootscope
我用的不是加载它只是一个内联模板plunkr，加载它没有问题
因为你的指令是一个元素，我添加了'替换'，它用一个直接的按钮替换元素。考虑让它成为一个属性。

我plunkr有传球茉莉测试和按钮的工作演示。让我知道你是否需要更多的帮助。祝AngularJS好运。

（OLD ANSWER）

==============

您将需要使用像nghtml2js加载您的模板，使其可与模板缓存。

using nghtml2js

这是你的第一个问题。你的第二个问题是在编译后通过在元素上调用isolateScope（）来完成隔离作用域。记录调用elem的结果，你会发现你后面的属性。

e.isolateScope()

来源

2014-12-30 01:54:48

我使用karma配置加载html文件并使用nghtml2js，我会尝试使用isolateScope（） –

它工作吗？这是让你的隔离范围出来的方法。 http://stackoverflow.com/questions/17371836/how-to-unit-test-isolated-scope-directive-in-angularjs –

嗨，彼得没有它没有工作，我仍然在尝试 –

不遵循为什么上述答案被标记为接受。该问题询问如何使用templateUrl完成，而@PeterAshwell的答案提供了一个解决方案，使用内联HTML ，这在使用templateUrl时不起作用。

要使用templateUrl访问隔离范围，必须将isolateScope调用包装在$ timeout中以允许$ http调用（由templateUrl创建）完成。

代码看起来是这样的：

element = $compile("<myHTML />")($scope) 

$timeout(function() { 
    expect(element.isolateScope().myProp).toEqual(12); 

}), 0 , false); 

$timeout.flush();

来源

2015-05-22 21:10:44 user1821052

很好的答案！我也认为增加一个$ apply（）是一个好主意，以确保任何未完成的承诺得到解决。 – TheChrisONeil

带有templateUrl和隔离范围的角度测试指令

回答

相关问题