angularjs – 从$http迁移到Restangular,测试失败

2023年9月12日 160次阅读

我有以下控制器：

'use strict';

angular.module('App')
  .controller('LoginCtrl', function ($scope, $state, Login, localStorageService, Message, authService) {

    $scope.submit = function() {
      if (this.username) {
        var credentials = {
          username: this.username,
          password: this.password
        };

        Login.post(credentials).then(function(data) {
            if (data.status === 200) {
                authService.loadCustomer(data.data);
                $state.go(authService.nextPath() || 'curator');
            }
        },
        function(data) {
          if (data.status === 401) {
            $scope.password = '';
            Message.error('Wrong e-mail/password combination');
          }
          else {
            Message.error('An error occured while logging in.');
          }
        });
      }
    }
});

哪个是从使用$http迁移到Restangular服务：

!(function(window, angular){
    'use strict';

    /**
     * @ngdoc service
     * @name App.Login
     * @description
     * # Login
     * Service in the App, rest interface for login
     */
    function Login(Restangular) {
        return Restangular.service('login');
    }

    angular.module('App')
      .service('Login', Login);
}(window, window.angular));

测试也进行了迁移：

 'use strict';

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

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

  var MainCtrl,
    scope,
    $state,
    $api,
    Login,
    mockedResponses,
    $httpBackend,
    localStorageService;

  // Initialize the controller and a mock scope
  //Use double underline suffix and prefix to prevent shadowing the outer scope dependencies
  //with the inner scope ones
  beforeEach(inject(function ($controller, $rootScope, _$api_, _Message_, _Login_,
                                    _$state_, _$httpBackend_, _mockedResponses_, _localStorageService_) {

    $httpBackend = _$httpBackend_;
    mockedResponses = _mockedResponses_;
    $state = _$state_;
    $api = _$api_;
    Login = _Login_;
    localStorageService = _localStorageService_;
    $httpBackend.whenGET(/views\/login.html/).respond(200, '');
    $httpBackend.whenGET(/views\/curator.html/).respond(200, '');
    $httpBackend.whenGET(/views\/navigation.html/).respond(200, '');

    scope = $rootScope.$new();
    MainCtrl = $controller('LoginCtrl', {
      $scope: scope,
      Login: Login,
      Message: _Message_,
      $state: $state,
      $httpBackend: $httpBackend,
      $stateParams: {}
    });
  }));

  afterEach (function () {
      $httpBackend.verifyNoOutstandingExpectation();
      $httpBackend.verifyNoOutstandingRequest();
  });

  it('should pass login credentials on submit', function(){
    $httpBackend.whenPOST(/login/).respond(mockedResponses.getSuccessfulLoginResponse);
    var spy = spyOn(Login, 'post').and.callThrough();
    scope.username = 'pony@rider.com';
    scope.password = 'yiiihaaa';
    scope.submit();
    $httpBackend.flush();
    scope.$digest();
    expect(spy.calls.argsFor(0).username).toEqual(scope.username);
    expect(spy.calls.argsFor(0).password).toEqual(scope.password);
  });

  it('should remove password if authentication failed', function(){
    $httpBackend.whenPOST(/login/).respond(mockedResponses.getFailedLoginResponse);
    $httpBackend.flush();
    scope.username = 'failedpony@rider.com';
    scope.password = 'yiiihaaa';
    scope.submit();
    $httpBackend.flush();
    scope.$digest();
    expect(scope.password).toEqual('');
  });

  it('should alert user if authentication failed', function(){
    $httpBackend.whenPOST(/login/).respond(mockedResponses.getFailedLoginResponse);
    scope.username = 'failedpony@rider.com';
    scope.password = 'yiiihaaa';
    scope.submit();
    $httpBackend.flush();
  $rootScope.$apply();
    expect(scope.error).toBeDefined();
  });
});

但由于某些我无法理解的原因,由于Restangular代码中的异常,测试失败了：

TypeError: Cannot read property 'replace' of undefined
    at /home/oleg/dev/dashboard/app/components/restangular/dist/restangular.js:680:32
    at Function.reduce (/home/oleg/dev/dashboard/app/components/lodash/dist/lodash.js:3734:25)
    at Path.base (/home/oleg/dev/dashboard/app/components/restangular/dist/restangular.js:649:27)
    at Path.fetchUrl (/home/oleg/dev/dashboard/app/components/restangular/dist/restangular.js:688:36)
    at Array.elemFunction (/home/oleg/dev/dashboard/app/components/restangular/dist/restangular.js:1120:45)
    at bound (/home/oleg/dev/dashboard/app/components/lodash/dist/lodash.js:729:21)
    at Array.postFunction (/home/oleg/dev/dashboard/app/components/restangular/dist/restangular.js:1201:52)
    at Object.bound (/home/oleg/dev/dashboard/app/components/lodash/dist/lodash.js:729:21)
Error: Unflushed requests: 2
    at Function.$httpBackend.verifyNoOutstandingRequest (/home/oleg/dev/dashboard/app/components/angular-mocks/angular-mocks.js:1494:13)
    at Object.<anonymous> (/home/oleg/dev/dashboard/test/spec/controllers/login.js:46:20)

最佳答案 看起来Restangular的baseUrl有问题,请尝试明确设置一个.

这样的事情可能会有所帮助：

   angular.module('App').config(function(RestangularProvider) {
       RestangularProvider.setBaseUrl('http://www.yourdomain.com');
   });

问候

点赞