javascript - Karma + Jasmine 测试异步方法

Question

我有以下 Controller :

export default function($scope, $state, $http) {
    $scope.login = () => {
        $scope.loginFailed = false;

        const postReq: object = {
            method: 'POST',
            url: `/login`,
            data: {},
        }

        try {
            console.log('$scope.login');

            const response = await $http(postReq);

            console.log('login done');

            console.log('$state.go');

            $state.go('dashboard');

            return true;
        } catch(err) {
            console.error(err);
            $scope.loginFailed = true;

            return false;
        }
    };
}

我正在尝试用 Jasmine 测试这个方法

it('change state to dashboard', async (done) => {
    $httpBackend.expectPOST('/login', undefined).respond(201, { rmId: 123123 });

    await $scope.login();
    expect($state.current.name).toBe('dashboard');
});

我的测试结果如下:

LOG: '$scope.login' PhantomJS 2.1.1 (Mac OS X 0.0.0) $scope.login change state to dashboard FAILED

现在看来，Jasmine 并没有等待 $http 调用完成。 (当我在浏览器中手动测试它时，效果很好)

是否有更好的方法来正确测试异步方法？

Answer 1

你不需要等待。你只需要在等待测试之前刷新后端模拟 您的登录功能必须更改如下:

$scope.login = () => {
       return new Promise((resolve, reject) => {
          $scope.loginFailed = false;

        const postReq = {
            method: 'POST',
            url: `/login`,
            data: {},
        }

        const response = $http(postReq).then(
          (success) => {
              $state.go('dashboard');
              resolve(true);
            },
            (error) => {
               $scope.loginFailed = true;

            reject(false);
            });
       });
    };

你的测试如下:

it('change state to dashboard', async (done) => {
    const  backendMock = $httpBackend;
    backendMock.expectPOST('/login').respond(201, { rmId: 123123 });
    $scope.login().then((response) => {
      expect($state.current.name).toBe('dashboard');
      done();
    });
    backendMock.flush();

});