如何在方法间谍未绑定

我试图测试在以下组件的方法“removePlayer”被称为与移除播放器时范围：spyOn（范围，“removePlayer”）和。通过呼叫（）;并期望（scope.removePlayer）.toHaveBeenCalled（）;但得到了以下错误：“错误：removePlayer（）方法不存在用法：spyOn（，）”我怎么能做到这一点吗？如何在方法间谍未绑定

.component("playerList", { 
      templateUrl: "src/js/player/player.html", 
      bindings: { 
       list: '<' 
      }, 
      controller: function() { 
       this.removePlayer = function(index) { 
        console.log('Remove player with index : ', index); 
        if (index > -1) { 
         this.list.splice(index, 1); 
        } 
       }; 
      } 
     });

具有以下测试：

beforeEach(inject(function($rootScope, $compile) { 
    scope = $rootScope.$new(); 
    scope.list = angular.copy(playersList); 
    element = angular.element('<player-list list="list"></player-list>'); 
    element = $compile(element)(scope); 

    scope.$apply(); 
})); 

it('should render the text', function() { 
    // spyOn(scope, 'removePlayer').and.callThrough(); 
    var title = element.find('h1'); 
    var deleteBtn = element[0].querySelector('button'); 
    expect(title.text()).toBe('This table contains ' + playersList.length + ' player.'); 
    deleteBtn.click(); 
    // expect(scope.removePlayer).toHaveBeenCalled(); 
    expect(title.text()).toBe('This table contains ' + (playersList.length - 1) + ' player.'); 
});

这里是模板：

<div class="container"> 
    <h1 class- "player-table-title">This table contains {{ $ctrl.list.length }} players[![enter image description here][1]][1].</h1> 
    <table class="table table-striped"> 
     <thead> 
      <tr> 
       <th>Name</th> 
       <th>Position</th> 
       <th>Team</th> 
       <th>Actions</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr ng-repeat="player in $ctrl.list"> 
       <td>{{ player.name }}</td> 
       <td>{{ player.position }}</td> 
       <td>{{ player.team }}</td> 
       <td> 
        <button type="button" class="btn btn-danger btn-sm" ng-click="$ctrl.removePlayer($index)"> 
         <span class="glyphicon glyphicon-trash"></span> 
        </button> 
       </td> 
      </tr> 
     </tbody> 
    </table> 
</div>

这是应用程序如何看起来像在浏览器中：

来源

2017-08-19 Youness Houdass

此方法是控制器方法，不是范围。顺便说一下，组件没有范围。

试图让你的组件这样的控制器（不要忘记注入$componentController）

controller = $componentController('playerList', {$scope: scope});

，然后更换scope到controller在spyOn功能

spyOn(controller, 'removePlayer').and.callThrough(); 
.... 
expect(controller.removePlayer).toHaveBeenCalled();

来源

2017-08-19 19:42:51 NechiK

对不起，请不要在第一次的答案替换范围控制器。我编辑它。 – NechiK

感谢您的回复，我知道有关$ componentController，但它不会为我工作，我的目的是刺探removePlayer方法，当我点击删除BTN，$ componentController不会处理这种情况对我来说:) –

我试图做这样的事情： 1 - spyOn（范围， 'removePlayer'）and.callThrough（）。 2- deleteBtn.click（）; （这个调用removePlayer函数） 3- expect（scope.removePlayer）.toHaveBeenCalled（）; –

我能通过这样做来解决这个问题：element.controller（'playerList'）;

it('should render the text', function() { 
    var component = element.controller('playerList'); 
    spyOn(component, 'removePlayer').and.callThrough(); 
    var title = element.find('h1'); 
    var deleteBtn = element[0].querySelector('button'); 
    expect(title.text()).toBe('Ce tableau contient ' + playersList.length + ' joueurs.'); 
    deleteBtn.click(); 
    expect(title.text()).toBe('Ce tableau contient ' + (playersList.length - 1) + ' joueurs.'); 
    expect(component.removePlayer).toHaveBeenCalled(); 
});

来源

2017-08-19 20:37:02

如何在方法间谍未绑定

回答

相关问题