角测试$ httpBackend意外的请求和正则表达式未定义 [英] Angular test $httpBackend Unexpected request and regex undefined

查看：284
本文介绍了角测试$ httpBackend意外的请求和正则表达式未定义的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有一个初始化函数一个简单的控制器：

 的init（）{
    this.PositionService.getPagePosition（此$ state.params.name）。然后（（RES）=＆GT; {
      this.position = res.data.position;
    }）
  }

和我的位置服务：

  getPagePosition（名称）{
    返回此$ http.get（this.appConfig.api.positions +/+姓名）。
  }

我的测试：

 描述（位置列表页'，函数（）{  VAR范围，
      $ httpBackend，
      控制器;  beforeEach（模块（'模块'））;
  beforeEach（注（函数（$控制器，$ rootScope，_ $ httpBackend_，_PositionService_）{
    范围= $ rootScope $新的（）。
    $ httpBackend = _ $ httpBackend_;
    控制器= $控制器（'PositionsController'，{
      $适用范围：适用范围，
      PositionService：_PositionService_，
    }）;
  }））;  afterEach（函数（）{
    $ httpBackend.verifyNoOutstandingExpectation（）;
    $ httpBackend.verifyNoOutstandingRequest（）;
  }）;  描述（PositionsController'，函数（）{    它（'应该'的位置，功能（）{      $ httpBackend.whenGET（/ HTTP：\\ / \\ /本地主机：3000 \\ /位置\\ / [A-Z] + /）响应（200，{。
        数据：{
          ID：2
        }
      }）;      controller.init（）;
      $ httpBackend.flush（）;
      期待（controller.position.id）.to.equal（1）;    }）;  }）;}）;

我的问题是，我得到这个错误：

 错误：意外的请求：GET HTTP：//本地主机：3000 / API /位置/未定义
    没有更多的要求预期

为什么paramater是undefiend，为什么我得到这个错误？


解决方案

随着茉莉花和ES5测试将是这样的：

\r
\r

angular.module（模块，[]）\r
  .controller（'PositionsController'，函数（PositionService，$州）{\r
    this.init =功能（）{\r
      PositionService.getPagePosition（$ state.params.name）\r
        。然后（功能（RES）{\r
          this.position = res.data.position;\r
        } .bind（本））\r
    }\r
  }）服务（PositionService'，函数（$ HTTP，AppConfig的）{\r
    this.getPagePosition =功能（名称）{\r
      返回$ http.get（appConfig.api.positions +/+姓名）;\r
    }\r
  }）;\r
\r
\r
描述（位置列表页'，函数（）{\r
\r
  VAR范围，\r
    $ httpBackend，\r
    控制器;\r
\r
  beforeEach（模块（'模块'））;\r
\r
  beforeEach（函数（）{\r
    angular.module（模块）值（'AppConfig的'，{\r
      API：{\r
        位置：HTTP：//本地主机：3000 /位置\r
      }\r
    }）\r
  }）\r
\r
  beforeEach（注（函数（$控制器，$ rootScope，_ $ httpBackend_，_PositionService_）{\r
    范围= $ rootScope $新的（）。\r
    $ httpBackend = _ $ httpBackend_;\r
    控制器= $控制器（'PositionsController'，{\r
      $适用范围：适用范围，\r
      PositionService：_PositionService_，\r
      $状态：{\r
        params：一个{\r
          名称：'someParamValue\r
        }\r
      }\r
    }）;\r
  }））;\r
\r
  afterEach（函数（）{\r
    $ httpBackend.verifyNoOutstandingExpectation（）;\r
    $ httpBackend.verifyNoOutstandingRequest（）;\r
  }）;\r
\r
  描述（'PositionsController：'，函数（）{\r
\r
    它（'获取的位置 - 的init（）'，函数（）{\r
      \r
      VAR stubId = 2\r
\r
      $ httpBackend.whenGET（/ HTTP：\\ / \\ /本地主机：3000 \\ /位置\\ / [A-Z] + /）响应（200，{。\r
          位置：{\r
            ID：stubId\r
          }\r
      }）;\r
\r
      controller.init（）;\r
      \r
      期待（controller.position）.not.toBeDefined（）;\r
      \r
      $ httpBackend.flush（）;\r
      \r
      期待（controller.position）.toBeDefined（）;\r
      期待（controller.position.id）.toEqual（stubId）;\r
    }）;\r
\r
  }）;\r
\r
}）;

\r

＆LT;链接HREF =// safjanowski.github.io/jasmine-jsfiddle -pack /包/ jasmine.css的rel =stylesheet属性/＆GT;\r
＆LT;脚本src=\"//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js\"></script>\r
＆LT;脚本的src =// ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT;脚本src=\"//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-mocks.js\"></script>\r
\r
\r

I have a simple controller with init function:

 init() {
    this.PositionService.getPagePosition(this.$state.params.name).then(( res ) => {
      this.position = res.data.position;
    })
  }

And my positions service:

  getPagePosition( name ) {
    return this.$http.get(this.appConfig.api.positions + '/' + name);
  }

My test:

describe('position list page', function() {

  var scope,
      $httpBackend,
      controller;

  beforeEach(module('module'));
  beforeEach(inject(function( $controller, $rootScope, _$httpBackend_, _PositionService_ ) {
    scope = $rootScope.$new();
    $httpBackend = _$httpBackend_;
    controller = $controller('PositionsController', {
      $scope          : scope,
      PositionService : _PositionService_,
    });
  }));

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

  describe('PositionsController', function() {

    it('should get the position', function() {

      $httpBackend.whenGET(/http:\/\/localhost:3000\/positions\/[a-z]+/).respond(200, {
        data: {
          id: 2
        }
      });

      controller.init();
      $httpBackend.flush();
      expect(controller.position.id).to.equal(1);

    });

  });

});

My problem is that i get this error:

 Error: Unexpected request: GET http://localhost:3000/api/positions/undefined
    No more request expected

Why the paramater is undefiend and why i get this error?

解决方案

With Jasmine and ES5 the test will look like:

angular.module('module', [])
  .controller('PositionsController', function(PositionService, $state) {
    this.init = function() {
      PositionService.getPagePosition($state.params.name)
        .then(function(res) {
          this.position = res.data.position;
        }.bind(this))
    }
  }).service('PositionService', function($http, appConfig) {
    this.getPagePosition = function(name) {
      return $http.get(appConfig.api.positions + '/' + name);
    }
  });


describe('Position list page', function() {

  var scope,
    $httpBackend,
    controller;

  beforeEach(module('module'));

  beforeEach(function() {
    angular.module('module').value('appConfig', {
      api: {
        positions: 'http://localhost:3000/positions'
      }
    })
  })

  beforeEach(inject(function($controller, $rootScope, _$httpBackend_, _PositionService_) {
    scope = $rootScope.$new();
    $httpBackend = _$httpBackend_;
    controller = $controller('PositionsController', {
      $scope: scope,
      PositionService: _PositionService_,
      $state: {
        params: {
          name: 'someParamValue'
        }
      }
    });
  }));

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

  describe('PositionsController:', function() {

    it('Gets the position - init()', function() {
      
      var stubId = 2

      $httpBackend.whenGET(/http:\/\/localhost:3000\/positions\/[a-z]+/).respond(200, {
          position: {
            id: stubId
          }
      });

      controller.init();
      
      expect(controller.position).not.toBeDefined();
      
      $httpBackend.flush();
      
      expect(controller.position).toBeDefined();
      expect(controller.position.id).toEqual(stubId);
    });

  });

});

<link href="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine.css" rel="stylesheet" />
<script src="//safjanowski.github.io/jasmine-jsfiddle-pack/pack/jasmine-2.0.3-concated.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular-mocks.js"></script>

这篇关于角测试$ httpBackend意外的请求和正则表达式未定义的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆