Question

我有一个消耗angularjs服务承诺的控制器。我已经针对控制器编写了茉莉花单元测试，因此控制器功能如下：

this.getTodos = function () {
    TodoService.getTodos().then(function (todos) {
        $scope.Todos = todos;
      },
        function (error) {
            // TODO: display the error pop up
            console.log(error);
        });
};

似乎这对视图不起作用？如果我将功能更改为：

 TodoService.getTodos().then(function (todos) {
        $scope.Todos = todos;
      },
        function (error) {
            // TODO: display the error pop up
            console.log(error);
        });

然后它工作但我无法测试我的控制器功能。我首选的方法是将它用作this.getTodos，this.saveTodo，this.DeleteTodo等....

有什么建议吗？

非常感谢

====＆GT;＆GT;更新

如上所述，测试都在运行，但视图没有显示数据;看起来像控制器this.getTodos根本没有被调用。 ....我不知道如何强制角度视图使用控制器getTodos ...测试如下：

以下茉莉花测试工作正常：

    it("Reading todos...", inject(function ($q) {

        var deferredRead = $q.defer();
        spyOn(todoServiceMock, "getTodos").and.returnValue(deferredRead.promise);
        deferredRead.resolve([{ TodoId: 10, Description: "Test", Completed: false },
        { TodoId: 11, Description: "Test", Completed: false }]);
        todoController.getTodos();
        scope.$apply();

        expect(scope.Todos.length).toBe(2);
    }));

    it("Reading todos, error...", inject(function ($q) {

        var deferredRead = $q.defer();
        spyOn(todoServiceMock, "getTodos").and.returnValue(deferredRead.promise);
        deferredRead.reject("There are no todos available!");
        todoController.getTodos();
        scope.$apply();

        expect(scope.Todos.length).toBe([]);
    }));

但是，视图不会填充行...

视图的代码如下：

<tr class="animate" ng-repeat="Todo in Todos | orderBy:'TodoId' | filter: filterTodo">
                    <td class="col-sm-1">{{Todo.TodoId}}</td>
                    <td class="col-sm-3">{{Todo.Description}}</td>
                    <td class="col-sm-1">
                        <span class="glyphicon glyphicon-check" ng-show="   {{Todo.Completed}}==true"></span>
                        <span class="glyphicon glyphicon-unchecked" ng-show="{{Todo.Completed}}==false"></span>
                    </td>
                    <td class="col-sm-2">
                        <a href="" ng-click="selectTodo(Todo)"><span class="glyphicon glyphicon-edit"></span></a>
                    </td>
                </tr>

Answer 1

如果您没有告诉它调用它，Angular将不会调用您的作用域中的函数。所以，你基本上有3个选择：

按照第二次尝试的方式行事

在实例化控制器中调用该函数：

this.getTodos = function () { ... }; // define the method
this.getTodos(); // call it

在视图中使用ng-init来调用getTodos()功能。

请注意，使用第一种或第二种技术不应阻止您对控制器进行单元测试。唯一的区别是您的测试应该期望在控制器实例化时（即调用$controller('TodoController')时）进行服务调用，而不是在实例化之后预期它发生，调用getTodos()函数时。

使用angularjs控制器，它在视图中使用服务承诺

1 个答案: