1

我有一个使用 angularjs 服务承诺的控制器。我已经针对控制器编写了 jasmine 单元测试，因此控制器功能如下所示：

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

请问有什么建议吗？

非常感谢

====>> 更新

如前所述，测试都在工作，但视图不显示数据；似乎控制器 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>
4

1 回答 1

1

如果你不告诉它调用它，Angular 就不会从你的作用域调用它。所以，你基本上有3个选择：

  1. 像第二次尝试那样做

  2. 实例化时调用控制器中的函数：

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

  3. ng-init在视图中使用来调用getTodos()函数。

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

于 2014-06-21T09:42:30.737 回答