javascript - 如何使用 Jasmine 对 $scope.broadcast、$scope.$on 进行单元测试

Question

我是 AngularJs/NodeJs 世界的新手，所以如果这对某些人来说是一个基本问题，请原谅。

简而言之，我有两个 Controller ，第一个 Controller $broadcast 是一个“Id”，第二个 Controller 使用 $on 获取该 Id，然后将该 Id 传递给中间 service，后者进行 $http ajax 调用并返回单个 Book 对象。

如何使用 Jasmine 对 $scope.broadcast、$scope.$on 进行单元测试

第一个Ctrl

.controller('firstCtrl', function($scope, ...){
    $scope.selectGridRow = function() {
        if($scope.selectedRows[0].total !=0)
            $scope.$broadcast('id', $scope.selectedRows[0].id);//Just single plain ID
    };
});

第二个Ctrl

.controller('secondCtrl',
    function($scope, bookService) {
        $scope.$on('id', function(event, id) {
            bookService.getBookDetail(id).then(function(d) {
                $scope.book = d.book;
            });
        });
    });

预期 Json obj

var arr = "book" : [ {
            "id" : "1",
            "name" : "Tomcat",
            "edition" : "9.1"
           }
          ]

如果有人希望我发布第二个 Controller 使用的 $http 服务，请告诉我。

预期行为

因此，从我的想法来看，理想情况下，我想测试所有可能的场景，但如下所示，然后可以花费:

expect(scope.book).toEqual(arr);
expect(scope.book).not.toEqual(undefined);

谢谢大家!

Answer 1

首先你应该在 $rootScope 上进行广播然后您就可以收到$scope 。现在进行测试。我假设您想通过 bookService 包含对 API 的真实请求和$http 。这可以被 mock ，但我将专注于真正的调用。如果您需要被 mock 的，请告诉我。

在实际测试之前，您需要进行一些注入(inject)/实例化:

• 初始化您的应用
• 注入(inject)$controller , $rootScope , $httpBackend和bookService
• 为firstController和SecondController创建范围并将其存储在变量中
• 商店 bookService和$httpBackend在变量中
• 实例化 Controller 并存储它们

那么在实际测试中你必须告诉$httpBackend当它缓存对书籍的请求时该怎么做。构建$httpBackend.whenGET("/api/books/1").passThrough();将通过 url "/api/books/1" 传递请求到服务器。接下来您必须设置属性 selectedRows上firstScope所以它满足函数 selectGridRow 中的条件在你的firstCtrl .

现在你可以调用函数 selectGridRow触发广播和 API 调用。但你必须将它包裹在 runs 中函数，因此 Jasmine 会将其识别为异步调用并等待它完成。 “等待”在 waitsFor 中定义。称呼。它将等到它收到一本书并且等待最多 5000 毫秒，然后测试将被标记为失败。

最后一步是检查预期结果。我们不必检查undefined无论如何，测试都不会到达这里。支票必须重新包装runs调用，以便在成功“waitsFor”后执行。

完整代码如下:

describe("Broadcast between controllers", function () {

    beforeEach(module('app')); //app initialization

    var firstScope;
    var secondScope;

    var bookService;
    var $httpBackend;

    var firstController;
    var secondController;

    beforeEach(inject(function ($controller, $rootScope, _bookService_, _$httpBackend_) {
        firstScope = $rootScope.$new();
        secondScope = $rootScope.$new();

        bookService = _bookService_;
        $httpBackend = _$httpBackend_;

        firstController = $controller('firstCtrl', { $scope: firstScope });
        secondController = $controller('secondCtrl', { $scope: firstScope, bookService: bookService });
    }));


    it("should work", function () {

        $httpBackend.whenGET("/api/books/1").passThrough();

        firstScope.selectedRows = [{ id: 1, total: 1000 }];
        secondScope.book = null;

        runs(function () {
            firstScope.selectGridRow();
        });

        waitsFor(function () {
            return secondScope.book != null;
        }, "Data not received in expected time", 5000);

        runs(function () {
            expect(secondScope.book[0].id).toEqual(1);
        });
    });

});