如何使用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