angularjs - 我应该为这个带有 $http 服务的 Angularjs 登录 Controller 测试什么？

Question

我正在做一个简单的应用程序 (yo angular-generator)，它使用 $http.get() 通过 Auth 工厂进行登录。如果成功，“sessionId”值将在本地使用 $localStorage 设置。一切正常，但我在单元测试方面遇到严重问题。我无法在脑海中定义我应该测试什么!这是我的情况。

controllers/logincontrollers.js

angular.module('myApp')
.controller('LoginCtrl',['$rootScope', '$scope', '$location', '$localStorage', 'Auth', function ($rootScope, $scope, $location, $localStorage, Auth) {

  Auth.Logout();
  $rootScope.loginSucceeded = false;
  $scope.currentUser = {};

  $scope.login = function () {
    var formData = {
      username: $scope.username,
      password: $scope.password
    };

    Auth.Login(formData).then(function (response) {
      if (response.data.loginSucceeded === true && response.data.sessionId !== null) {
        $scope.currentUser = {username: $scope.username, sessionId: response.data.sessionId};
        $localStorage.currentUser = $scope.currentUser;
        $rootScope.loginSucceeded = true;
        window.location = '/';
      } else {
        $scope.error = 'Invalid credentials';
      }
    }, function (response) {
      $scope.error = 'Connection error';
      console.log(response);
    });
  };

}]);

服务/auth.js

angular.module('myApp')
.constant('baseURL', 'http://localhost:8080')
.factory('Auth',['$http', '$localStorage', 'baseURL', function ($http, $localStorage, baseURL) {

  return {
    Login: function (data) {
      return $http.get(baseURL + '/login', {
        params: data
      });
    },
    Logout: function () {
      delete $localStorage.currentUser;
    }
  };

}]);

服务器只接受带有查询参数的登录请求

http://localhost:8080/login?username=Test&password=Test

现在是关键点。这是我在测试中所做的，没有错误。

测试/规范/logincontroller.js

describe('Controller: LoginCtrl', function () {

  // load the controller's module
  beforeEach(module('myApp'));

  var scope, $httpBackend, LoginCtrl;

  // Initialize the controller and a mock scope
  beforeEach(inject(function ($rootScope, _$httpBackend_, $controller, Auth) {
    $httpBackend = _$httpBackend_;
    scope = $rootScope.$new();
    LoginCtrl = $controller('LoginCtrl', {
      $scope: scope, Auth: Auth
      // place here mocked dependencies
    });
  }));
  afterEach(function() {
    $httpBackend.verifyNoOutstandingExpectation();
    $httpBackend.verifyNoOutstandingRequest();
  });


  it('should fetch sessionId', function() {
    $httpBackend.when('GET', 'http://localhost:8080/login', {params: {username: "Test", password: "Test"}})
    .respond({"sessionId":"c4b0b46a04b54247ac27f3bd4db289a0","loginSucceeded":true});
    scope.login();
    $httpBackend.flush();
  });

});

我尝试做的所有其他事情都会返回一个错误。你能帮我了解这个测试是否好，我应该测试什么？也许是表单，或者 $localStorage 什么的？你有认真的单元测试手册/资源/最佳实践来建议我吗？

谢谢你的建议。

---更新---

You can explain why if i do this test:

it('should fetch sessionId', function() {
    $httpBackend.when('GET', 'http://localhost:8080/login', {params: {username: "Test", password: "Test"}})
    .respond({sessionId:"c4b0b46a04b54247ac27f3bd4db289a0",loginSucceeded:true});
    scope.login();
    expect(scope.sessionId).toEqual('c4b0b46a04b54247ac27f3bd4db289a0');
    $httpBackend.flush();
  });

我遇到了这个错误:

PhantomJS 2.1.1 (Mac OS X 0.0.0) Controller: LoginCtrl should fetch sessionId FAILED
        Expected undefined to equal 'c4b0b46a04b54247ac27f3bd4db289a0'.
        test/spec/controllers/logincontroller.js:44:36
        loaded@http://localhost:8081/context.js:151:17
PhantomJS 2.1.1 (Mac OS X 0.0.0): Executed 5 of 5 (1 FAILED) (0.008 secs / 0.063 secs)

Answer 1

我关于测试的一般经验法则是这样

• 只测试您正在测试的内容。如果您正在测试您的 Controller ，请仅测试此
• 为此模拟其他一切，在您的情况下，这将是身份验证服务。

单独测试 auth 服务并遵循类似的模式，模拟 $http 服务等。

所以我想说你不是在一百万英里之外，只是将它分成两个不同的测试套件(文件)。

---

在模拟方面，我倾向于使用$provide 创建一个空对象，然后监视 我需要的函数并模拟数据的返回。这样您就可以确切地知道正在调用什么以及应该返回什么数据。

这方面的一个例子是:

module(function($provide) {
  $provide.service('Auth', function() {
    this.logIn = jasmine.createSpy('logIn').andCallFake(function(params) {
      //a fake implementation
    });
    this.logOut = jasmine.createSpy('logOut').andCallFake(function(params) {
      //a fake implementation
    });
  });
});

这样做的好处是你可以断言/期望函数已经像这样被调用了

expect(Auth.LogIn).toHaveBeenCalled();

您还可以执行更高级的操作，例如检查它是否使用特定参数调用。有很多关于此的易于访问的内容，现在您可以通过 google 搜索，您知道要查找的内容了。

请注意，上面的代码是手写的，因此可能存在一些小错误。这是 good website展示 Jasmine v2 可以做什么。