angularjs - 如何使用 Angular js 构建简单的 $http post 测试脚本

Question

我刚刚开始了解 Angularjs 并计划构建一个应用程序。我确实是一名 PHP 程序员，对 javascript 几乎没有背景。 Angularjs 是一位 friend 向我介绍的。有人警告我，在应用程序的功能变得更大之前，我还必须学习它的 Jasmine/karma 测试。现在，我有一个 $http 帖子，它提交电子邮件和密码，如果成功则返回一个 token 。基本上，如果成功会将用户重定向到用户/个人资料页面

Controller 代码:

function MainCtrl($scope, $location, Api, localStorageService, Security) {
 $scope.loginUser = function () {
    Api.authenticatePlayer({
        email    : $scope.main.email,
        password : $scope.main.password
    }).then(function (result){
        //success
        $location.path('/user/profile');
    }, function(result) {
        //error also this will catch error 400, 401, and 500
        console.log(result.data);
    });
 };
}

这是我的测试脚本:

beforeEach(function() {
    module('myApp.services'),
    module("myApp.controllers")
});

beforeEach(inject(function($controller, $rootScope, $location, Api, localStorageService, $httpBackend, Security) {
    this.$location = $location;
    this.$httpBackend = $httpBackend;
    this.scope = $rootScope.$new();
    this.redirect = spyOn($location, 'path');

    $controller("MainCtrl", {
        $scope : this.scope,
        $location : $location,
        localStorageService : localStorageService,
        Security : Security
    });

}));

describe("successfully logging in", function () {
    it("should redirect you to /user/profile", function() {
        //arrange
        var postData = {
            email : this.scope.main.email,
            password : this.scope.main.password
        }
        this.$httpBackend.expectPOST('login', postData).respond(200);
        //act
        this.scope.loginUser();
        this.$httpBackend.flush();
        //assert
        expect(this.redirect).toHaveBeenCalledWith('/user/profile');
    });
});

这是我的 service.js 代码:

return {

  /**
   * Authenticate player
   * @param   object postData      Email and password of the user
   * @return object
   */
  authenticatePlayer: function(postData) {
    return $http({
      method  : 'POST',
      url     : api + 'auth/player',
      data    : postData,
      headers : {'Content-Type' : 'application/json'}
    });
  }
 }

测试脚本失败:(。这是错误:

Chrome 24.0 (Linux) controller: MainCtrl successfully logging in should redirect you to /user/profile FAILED
Error: Unexpected request: POST http://domain.com/auth/player
Expected POST login

任何人都可以帮忙吗？不过很抱歉给您带来麻烦。

Answer 1

所以，这是因为 Api.authenticatePlayer 调用的路径与您期望的路径不同。

你的测试应该有这个:

this.$httpBackend.expectPOST('http://domain.com/auth/player', postData).respond(200);

基本上，在您的测试中，$httpBackend 是调用您的 API 的代码的模拟。您可以说“当我的代码调用此 URL 时，请使用 _ 进行响应”。在此代码中，您表示您希望帖子发生并返回 200 的空响应。您可以将“200”替换为您想要假装服务器响应的 json 负载。