AngularJS问题模拟http GET请求

IT小君   2023-05-12T01:57:02

我是angularjs及其mocking library的新手。我尝试测试一个特定的GET请求是否被执行,但我总是在第二个断言中得到以下错误,而且无法弄清楚原因:

错误:未满足的请求:GET /1.json

我在下面的代码中弄错了什么吗?

App.js

var App = angular.module('App', []).config(['$routeProvider', function($routeProvider) {
  $routeProvider.when('/', {
    templateUrl: 'views/main.html',
    controller: 'MainCtrl'
  }).when('/Items', {
    templateUrl: 'views/items.html',
    controller: 'Ctrl'
  }).otherwise({
    redirectTo: '/'
  });
}]);

Ctrl.js

function Ctrl($scope, $http, $filter) {
  $scope.items = [];

  $http.get('/1.json').success(function(data) {$scope.items = data.items;});
}

Ctrl.$inject = ["$scope","$http", "$filter"];

Spec/Ctrl.js

describe('Controller: Ctrl', function() {
  var $httpBackend;
  // load the controller's module
  beforeEach(module('App'));
  beforeEach(inject(function($injector) {
    $httpBackend = $injector.get('$httpBackend');

    // backend definition common for all tests
    $httpBackend.whenGET('/1.json').respond('Response!');
  }));

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

  var Ctrl, scope;

  // Initialize the controller and a mock scope
  beforeEach(inject(function($rootScope, $controller) {

    scope = $rootScope.$new();
    Ctrl = $controller('Ctrl', {
      $scope: scope
    });
  }));

  it('应初始化为0个items', function() {
    expect(scope.items.length).toBe(0);
    $httpBackend.flush();
  });

  it('应发出store请求', function(){
    var controller = scope.$new(Ctrl);
    $httpBackend.expectGET('/1.json');
    $httpBackend.flush();
  });
});

编辑:添加了app和controller代码。

点击广告,支持我们为你提供更好的服务
评论(1)
IT小君

我终于让我的单元测试工作了!主要是因为我重构了我的应用程序,让它更有意义和更模块化。

我会尽力提供信息,以帮助下一个遇到这个问题的人:

首先,我改用了$resource而不是$http。

我注入了$httpBackend,而不是$injector,就像这样:

beforeEach(inject(function(_$httpBackend_, $rootScope, $route,  $controller){

  $httpBackend = _$httpBackend_;
  $httpBackend.expectGET('/path/to/api').respond([{id:1}]);

我没有将'Ctrl'作为字符串引用,而是传递了实际的类

Ctrl = $controller('Ctrl', { $scope: scope });

变成了

var ProductsCtrl = ['$scope', function($scope){ ... }];

Ctrl = $controller(ProductsCtrl, {
  $scope: scope
});`

如果您使用$resources,请确保引用了angular-resources.js文件

我真的很喜欢Angularjs;我认为需要一些时间来理解如何进行测试。祝你好运!

2023-05-12T01:57:35   回复