使用茉莉花开始使用Ionic / Angular单元测试控制器

时间:2016-04-27 08:03:19

标签: angularjs unit-testing ionic-framework jasmine controllers

我一直在尝试用茉莉花和业力在Ionic框架中为角度控制器编写单元测试。这是我的控制器。

angular.module('starter').controller('LoginCtrl', ['$scope', 'AuthService', '$ionicPopup', '$state', function LoginCtrl($scope, AuthService, $ionicPopup, $state) {
  $scope.user = {
    name: '',
    password: ''
  };

  $scope.login = function() {
    AuthService.login($scope.user).then(function(msg) {
      $state.go('inside');
    }, function(errMsg) {
      var alertPopup = $ionicPopup.alert({
        title: 'Login failed!',
        template: errMsg
      });
    });
  };
}]);


angular.module('starter').controller('RegisterCtrl', ['$scope', 'AuthService', '$ionicPopup', '$state', function RegisterCtrl($scope, AuthService, $ionicPopup, $state) {
  $scope.user = {
    name: '',
    password: ''
  };

  $scope.signup = function() {
    AuthService.register($scope.user).then(function(msg) {
      $state.go('outside.login');
      var alertPopup = $ionicPopup.alert({
        title: 'Register success!',
        template: msg
      });
    }, function(errMsg) {
      var alertPopup = $ionicPopup.alert({
        title: 'Register failed!',
        template: errMsg
      });
    });
  };
}]);

angular.module('starter').controller('InsideCtrl', ['$scope', 'AuthService', 'API_ENDPOINT', '$http', '$state', function InsideCtrl($scope, AuthService, API_ENDPOINT, $http, $state) {
  $scope.destroySession = function() {
    AuthService.logout();
  };

  $scope.getInfo = function() {
    $http.get(API_ENDPOINT.url + '/memberinfo').then(function(result) {
      $scope.memberinfo = result.data.msg;
    });
  };

  $scope.logout = function() {
    AuthService.logout();
    $state.go('outside.login');
  };
}]);

angular.module('starter').controller('AppCtrl', ['$scope', '$state', '$ionicPopup', 'AuthService', 'AUTH_EVENTS', function AppCtrl($scope, $state, $ionicPopup, AuthService, AUTH_EVENTS) {
  $scope.$on(AUTH_EVENTS.notAuthenticated, function(event) {
    AuthService.logout();
    $state.go('outside.login');
    var alertPopup = $ionicPopup.alert({
      title: 'Session Lost!',
      template: 'Sorry, You have to login again.'
    });
  });
}]);

})(reader || (reader = {}));

我想要这3件套装:

  1. 应该在$ AuthService服务上调用登录
  2. 如果登录成功,应将状态更改为内部
  3. 如果登录失败,则应显示弹出错误消息
  4. 我尝试编写som测试,但我认为我没有正确注入控制器。这是我的测试代码:

    describe('LoginCtrl', function() {
    
        var $controller,
            LoginCtrl,
            controller,
            deferredLogin,
            $scope,
            AuthServiceMock,
            stateMock,
            ionicPopupMock;
    
        // load the module for our app
        beforeEach(angular.mock.module('starter'));
    
        // disable template caching
        beforeEach(angular.mock.module(function($provide, $urlRouterProvider) {
            $provide.value('$ionicTemplateCache', function(){} );
            $urlRouterProvider.deferIntercept();
        }));
    
        // instantiate the controller and mocks for every test
        beforeEach(angular.mock.inject(function(_$controller_, $q, $rootScope) {
            deferredLogin = $q.authToken();
    
        $scope = $rootScope.$new();
    
            // mock dinnerService
            AuthServiceMock = {
                login: jasmine.createSpy('login spy')
                              .and.returnValue(deferredLogin.promise)
            };
    
            // mock $state
            stateMock = jasmine.createSpyObj('$state spy', ['go']);
    
            // mock $ionicPopup
            ionicPopupMock = jasmine.createSpyObj('$ionicPopup spy', ['alert']);
    
            // instantiate LoginController
            $controller = _$controller_;
    
        }));
    
    
    
        describe('login function', function() {
    
            // call doLogin on the controller for every test
            beforeEach(inject(function(_$rootScope_) {
    
                $rootScope = _$rootScope_;
    
                var user = {
                    name: 'Boris',
                    password: 'Boris'
                };
    
                $scope.login(user);
    
    
            }));
    
            it('should call login on $AuthService Service', function() {
              LoginCtrl = $controller('LoginCtrl', {
                '$scope': $scope,
                '$state': stateMock,
                '$ionicPopup': ionicPopupMock,
                '$AuthService': AuthServiceMock
              });
                console.log(LoginCtrl);
                expect(LoginCtrl).toBeDefined();
            });
    
            describe('when the login is executed,', function() {
                xit('if successful, should change state to inside', function() {
    
                    deferredLogin.resolve();
                    $rootScope.$digest();
    
                    expect(stateMock.go).toHaveBeenCalledWith('inside');
                });
    
                xit('if unsuccessful, should show a popup', function() {
    
                    deferredLogin.reject();
                    $rootScope.$digest();
    
                    expect(ionicPopupMock.alert).toHaveBeenCalled();
                });
            });
        });
    });
    

    这是我的Karma文件设置

       files: [
      'www/lib/ionic/js/ionic.bundle.js',
      'www/js/*.js',
      'www/lib/angular-mocks/angular-mocks.js',
      'www/spec/*.js'
    ],
    

0 个答案:

没有答案