如何使用Jasmine测试AngularJS控制器在Promise中返回的值？

Question

我有一个控制器，它暴露了一个在休息调用后返回一些文本的函数。 它工作正常，但我无法使用Jasmine进行测试。 测试中的promise处理程序内的代码永远不会执行 。

控制器：

/* global Q */
'use strict';
angular.module('myModule', ['some.service'])
    .controller('MyCtrl', ['$scope', 'SomeSvc', function ($scope, SomeSvc) {

        $scope.getTheData = function (id) {
            var deferred = Q.defer();
            var processedResult = '';
            SomeSvc.getData(id)
                .then(function (result) {
                    //process data
                    processedResult = 'some stuff';
                    deferred.resolve(processedResult);
                })
                .fail(function (err) {
                    deferred.reject(err);
                });
            return deferred.promise;
        }
    }]);

考试：

describe('some tests', function() {
    var $scope;
    var $controller;
    var $httpBackend;
    beforeEach(function() {
        module('myModule');
        inject(function(_$rootScope_, _$controller_, _$httpBackend_) {
            $scope = _$rootScope_.$new();
            $controller = _$controller_;
            $httpBackend = _$httpBackend_;
            //mock the call that the SomeSvc call from the controller will make
            $httpBackend.expect('GET', 'the/url/to/my/data');
            $httpBackend.whenGET('the/url/to/my/data')
                .respond({data:'lots of data'});
            $controller ('MyCtrl', {
                $scope: $scope
            });
        });
    });

    describe('test the returned value from the promise', function() {
        var prom = $scope.getTheData(someId);
        prom.then(function(result) {
            expect(result).toBe('something expected');  //this code never runs
        })
    });
});

Answer 1

里面什么then将无法运行，除非承诺回调被称为-这是一个假阳性风险就像你经历在这里。 由于期望从未运行，测试将通过此处。

有很多方法可以确保你不会像这样得到误报。 例子：

A）回报承诺

Jasmine将等待在超时内解决的承诺。

• 如果没有及时解决，测试将失败。
• 如果承诺被拒绝，测试也将失败。

当心如果您忘记了回报，您的测试将给出误报！

describe('test the returned value from the promise', function() {
    return $scope.getTheData(someId)
    .then(function(result) {
        expect(result).toBe('something expected');
    });
});

B）使用Jasmine提供的done回调测试方法

• 如果在超时内未调用done则测试将失败。
• 如果使用参数调用done则测试将失败。
  这里的catch会将错误传递给jasmine，你会在输出中看到错误。

注意如果您忘记了捕获，则会吞下您的错误并且您的测试将因通用超时错误而失败。

describe('test the returned value from the promise', function(done) {
    $scope.getTheData(someId)
    .then(function(result) {
        expect(result).toBe('something expected');
        done();
    })
    .catch(done);
});

C）使用间谍和手摇（同步测试）

如果你不完美，这可能是最安全的编写测试方法。

it('test the returned value from the promise', function() {
    var
      data = { data: 'lots of data' },
      successSpy = jasmine.createSpy('success'),
      failureSpy = jasmine.createSpy('failure');

    $scope.getTheData(someId).then(successSpy, failureSpy);

    $httpBackend.expect('GET', 'the/url/to/my/data').respond(200, data);
    $httpBackend.flush();

    expect(successSpy).toHaveBeenCalledWith(data);
    expect(failureSpy).not.toHaveBeenCalled();
});

同步测试技巧
您可以在需要时手动启动httpBackend，超时和更改范围，以使控制器/服务更进一步 。 $httpBackend.flush() ， $timeout.flush() ， scope.$apply() 。

Answer 2

如果某个地方有$q创建的承诺（因为你似乎使用$ httpBackend，那么情况可能就是这样），那么我的建议是在调用getTheData之后触发一个摘要周期，并确保对expect的调用不在then回调中（因此，如果某些内容被破坏，则测试失败，而不是仅仅运行）。

var prom = $scope.getTheData(someId);
$scope.$apply();
expect(result).toBe('something expected');

这可能有助于Angular承诺与摘要周期相关联，并且只有在摘要周期运行时才会调用它们的回调。

Answer 3

您遇到的问题是您正在使用同步代码测试异步代码（基于承诺）。 这不起作用，因为测试在测试代码中的Thenable开始运行包含测试的回调之前已经完成。 Jasmine文档专门展示了如何测试异步代码 （与Mocha相同），并且修复非常小：

describe('test the returned value from the promise', function(done) {
    var prom = $scope.getTheData(someId);
    prom.then(function(result) {
        expect(result).toBe('something expected');  //this code never runs
        done(); // the signifies the test was successful
    }).catch(done); // catches any errors
});