如何使用 jasmine 对 angular-toastr 进行单元测试

Question

这是我的控制器中的一个函数，它使用 Toastr 进行通知。我将如何在我的 Jasmine 单元测试中测试 Toastr 以获取此功能。

$scope.login = function(user) {
    $scope.user = user;
    MyAuthService.login($scope.user)
    .then(function(response) {
        MyConfig.setUser(response.data.data);
        toastr.success('Welcome', 'Login!',{closeButton: true});
    });
}

Answer 1

当您使用 Promise 时，您应该使用 $q 来模拟 myAuthService.login 以返回已解决的 Promise。您还想监视toastr.success 和MyConfig.setUser。调用$scope.login() 后，您需要解决已解决的promise，然后调用$rootScope.$digest();：

describe('MyCtrl', function() {
  var createController, $scope, $rootScope, myAuthService, myConfig, toastr, deferred;

  beforeEach(module('app'));

  beforeEach(inject(function($controller, _$rootScope_, $q) {
    $rootScope = _$rootScope_;
    deferred = $q.defer();

    myConfig = {
      setUser: function (data) {

      }
    };

    spyOn(myConfig, 'setUser');

    myAuthService = {
      login: function () {

      }
    };

    spyOn(myAuthService, 'login').and.returnValue(deferred.promise);

    toastr = {
      success: function (message, title, options) {

      }
    };

    spyOn(toastr, 'success');

    $scope = $rootScope.$new(); 

    createController = function() {
      return $controller('MyCtrl', 
        { 
           $scope: $scope, 
           MyAuthService: myAuthService,
           MyConfig: myConfig,
           toastr: toastr
        });
    };
  }));

  it('login sets user in config and shows success toastr', function() {
    //Arrange
    createController();

    var response = {
      data: {
        data: {
          username: 'test'
        }
      }
    };

    $scope.user = {
      username: 'test'
    };

    //Act
    $scope.login();
    deferred.resolve(response);
    $rootScope.$digest();

    //Assert
    expect(myAuthService.login).toHaveBeenCalledWith($scope.user);
    expect(myConfig.setUser).toHaveBeenCalledWith(response.data.data);
    expect(toastr.success).toHaveBeenCalledWith('Welcome', 'Login!', {closeButton: true});
  });
});

Plunkr