Question

指令：

angular.module('uiApp')
  .directive('restMenu', () ->
    templateUrl: 'views/dir_rest_menu.html'
    transclude: true
    restrict: 'E'
    link: (scope, element, attrs) ->
)

视图：

<div class="rest-nav">
  <button>1</button>
  <button>2</button>
  <button>3</button>
</div>

试验：

'use strict'

describe 'Directive: restMenu', () ->

  # load the directive's module
  beforeEach module 'uiApp'

  scope = {}

  beforeEach inject ($controller, $rootScope) ->
    scope = $rootScope.$new()
    element = angular.element '<rest-menu></rest-menu>'

  it 'should have three buttons', inject ($compile) ->
    element = angular.element '<rest-menu></rest-menu>'
    element = $compile(element) scope
    nav = element.find('.rest-nav')
    expect(nav.children().length).toEqual(3)

我也试过在编译元素上寻找孩子。两人都说：

Chrome 31.0.1650 (Linux) Directive: restMenu should have buttons if options are added FAILED
        Expected 0 to be 3.
        Error: Expected 0 to be 3.
            at null.<anonymous> (/home/zeus/Projects/hmc/working/UI/test/spec/directives/rest_menu.js:21:46)
            at Object.invoke (/home/zeus/Projects/hmc/working/UI/app/bower_components/angular/angular.js:3697:17)
            at workFn (/home/zeus/Projects/hmc/working/UI/app/bower_components/angular-mocks/angular-mocks.js:2102:20)
Chrome 31.0.1650 (Linux): Executed 29 of 29 (1 FAILED) (0.762 secs / 0.228 secs)

Answer 1

您可以删除转码选项吗？如果没有解决问题，请在编译元素后尝试设置断点，并检查element变量！

Answer 2

虽然测试指令使用了jquery，但它可以很容易地执行和模拟来自jasmine的指令事件。请按照以下代码段进行操作。

describe('Directive: restMenu',function(){
  var rootScope;
  var scope;
  var $body;
  var restMenuHTML= '<rest-menu></rest-menu>';
  var restMenuDirective;
  var restMenuElement;
  var $compile;
beforeEach(module('uiApp')));

 beforeEach(function(){
 inject(function($injector){
     rootScope=$injector.get('$rootScope');
     scope=rootScope.$new();
     $compile=$injector.get('$compile');
     restMenuDirective=$compile(angular.element(restMenuHTML))(scope);
 });
   scope.$digest();
   describe('Test cases for directive:',function(){
       beforeEach(function(){
           $body.append(restMenuDirective); 
         restMenuElement=$('.rest-nav');
       });
       it('Expect directive to be exist in dom',function(){
           expect(restMenuElement.length).toBe(1);
           expect(restMenuElement.children().length).toBe(3);
       });
   });
 });
});

为什么这个指令在单元测试中没有找到它的孩子

2 个答案: