Question

我试图测试方法＆＃34; removePlayer＆＃34;使用以下命令删除播放器时调用以下组件：spyOn（范围，＆＃39; removePlayer＆＃39;）。and.callThrough（）;和expect（scope.removePlayer）.toHaveBeenCalled（）;但得到以下错误：＆＃34;错误:: removePlayer（）方法不存在用法：spyOn（，）＆＃34;我怎么能达到这个目的呢？

.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>

这就是应用在浏览器中的样子：

Answer 1

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

尝试像这样获取组件的控制器（不要忘记注入$componentController）

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

然后将scope替换为controller函数

中的spyOn

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

Answer 2

我能够通过执行以下操作来解决这个问题：element.controller（＆＃39; playerList＆＃39;）;

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

如何监视未绑定范围内的方法

2 个答案: