AngularJS - 单元测试HTTP GET以JSON文件 [英] AngularJS - Unit test for http get to JSON file

问题描述

我想写一个单元测试来测试一个简单的工厂一个执行 http.get 检索一个JSON文件。

工厂被称为我的控制器内。

下面是呈现出plunker我http.get： http://plnkr.co/编辑/ xg9T5H1Kreo4lwxzRQem？p = preVIEW

Ctrl键：

  app.controller（'MainCtrl'，函数（$范围，$ HTTP，factoryGetJSONFile）{  factoryGetJSONFile.getMyData（功能（数据）{
    $ scope.Addresses = data.Addresses.AddressList;
    $ scope.People = data.Names.People;
  }）;}）;
 

厂址：

  app.factory（'factoryGetJSONFile'，函数（$ HTTP）{
  返回{
    getMyData：功能（完成）{
      $ http.get（'data.json'）
      .success（功能（数据）{
        DONE（数据）;
      }）
      .error（功能（错误）{
        警报（发生错误，而试图检索数据'）;
      }）;
    }
  }
}）;
 

测试：

  // --- SPECS -------------------------描述（与httpBackend'，函数（）{
    VAR应用;
    beforeEach（函数（）{
        应用= angular.mock.module（'plunker'）
    }）;    描述（MyCtrl'，函数（）{
        VAR范围，CTRL theService，httpMock;        beforeEach（注（函数（$控制器，$ rootScope，factoryGetJSONFile，$ httpBackend）{
            范围= $ rootScope。$新的（）
            CTRL = $控制器（'MyCtrl'，{
                $适用范围：适用范围，
                factoryGetJSONFile：theService，
                $ httpBackend：httpMock
            }）;
        }））;        它（应该做一个GET调用data.json功能（）{
                的console.log（********** SERVICE ***********）;
                  。httpMock.expectGET（data.json），响应（回应找到了！）;
                //expect(factoryGetJSONFile.getMyData（））toBeDefined（）;
                httpMock.flush（）;
            }）;    }）
}）;
 

错误：

 类型错误：未定义是不是（评估'httpMock.expectGET'）一个对象
 

解决方案

您应该指定 $ httpBackend 到 httpMock 在 beforeEach 是这样的：

  beforeEach（注（函数（$控制器，$ rootScope，factoryGetJSONFile，$ httpBackend）{
        httpMock = $ httpBackend;
        范围= $ rootScope $新的（）。
        CTRL = $控制器（'MyCtrl'，{
            $适用范围：适用范围，
            factoryGetJSONFile：factoryGetJSONFile，
            $ httpBackend：httpMock
        }）;
    }））;
 

I am trying to write a unit test to test a simple factory that performs a http.get to retrieve a JSON file.

The factory is called within my controller.

Here's a plunker showing my http.get: http://plnkr.co/edit/xg9T5H1Kreo4lwxzRQem?p=preview

Ctrl:

app.controller('MainCtrl', function($scope, $http, factoryGetJSONFile) { 

  factoryGetJSONFile.getMyData(function(data) {
    $scope.Addresses = data.Addresses.AddressList;
    $scope.People = data.Names.People;
  });

});

Factory:

app.factory('factoryGetJSONFile', function($http) {
  return {
    getMyData: function(done) {
      $http.get('data.json')
      .success(function(data) {
        done(data);
      })
      .error(function(error) {
        alert('An error occured whilst trying to retrieve your data');
      });
    }
  }
});

Test:

// ---SPECS-------------------------

describe('with httpBackend', function () {
    var app;
    beforeEach(function () {
        app = angular.mock.module('plunker')
    });

    describe('MyCtrl', function () {
        var scope, ctrl, theService, httpMock;

        beforeEach(inject(function ($controller, $rootScope, factoryGetJSONFile, $httpBackend) {
            scope = $rootScope.$new(),
            ctrl = $controller('MyCtrl', {
                $scope: scope,
                factoryGetJSONFile: theService,
                $httpBackend: httpMock
            });
        }));

        it("should make a GET call to data.json", function () {
                console.log("********** SERVICE ***********");
                  httpMock.expectGET("data.json").respond("Response found!");
                //expect(factoryGetJSONFile.getMyData()).toBeDefined();
                httpMock.flush();
            });

    })
});

Error:

TypeError: 'undefined' is not an object (evaluating 'httpMock.expectGET')

解决方案

You should assign $httpBackend to httpMock in beforeEach like this:

   beforeEach(inject(function ($controller, $rootScope, factoryGetJSONFile, $httpBackend) {
        httpMock = $httpBackend;
        scope = $rootScope.$new();
        ctrl = $controller('MyCtrl', {
            $scope: scope,
            factoryGetJSONFile: factoryGetJSONFile,
            $httpBackend: httpMock
        });
    }));

这篇关于AngularJS - 单元测试HTTP GET以JSON文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！