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

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();
});