How to spy on method in the scope that is not binded - angularjs

Question

I'm trying to test that the method "removePlayer" in the following component is called when removing a player with : spyOn(scope, 'removePlayer').and.callThrough(); and expect(scope.removePlayer).toHaveBeenCalled(); but got the following error : "Error: : removePlayer() method does not exist
Usage: spyOn(, )" how can I achieve that please?
.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);
}
};
}
});
With the following test:
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.');
});
here is the template :
<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>
This is how the app look like in browser:

Answer 1

This method is controller method, not a scope. By the way, components don't have a scope.
Try to get controller of your component like this (don't forget to inject $componentController)
controller = $componentController('playerList', {$scope: scope});
And then replace scope to controller in spyOn function
spyOn(controller, 'removePlayer').and.callThrough();
....
expect(controller.removePlayer).toHaveBeenCalled();

Answer 2

I was able to resolve that by doing : 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();
});