使用 Jasmine 和 AngularJs 返回 json 数据时测试 $http.get 时出现问题

Question

我已经苦苦挣扎了一整天，已经弄清楚如何测试从 .json 文件返回数据的 $http.GET 请求的结果。我希望你们中的任何人都能在这里提供任何帮助。实用的应用程序是运行完美并且返回正确的 json 我期望的。

我有一个名为 'ProgramController' 的控制器和一个服务； 'DataService'.

控制器:

function ProgramController(DataService) {
    var vm = this;
    vm.timeline = {};

    activate();

    ////////////////
    function activate() {
        DataService.getTimelineData().then(function (data) {
            console.log(data);
        });
    }
}

服务:

function DataService($http) {
    var service = {
        getTimelineData: getTimelineData
    };

    return service;

    ///////////////
    function getTimelineData() {
        return $http.get('data/program.json').then(function (httpResult) {
            return httpResult.data;
        });
    }
}

测试用于测试控制器和服务响应；

describe('Program', function () {

var controller, scope, dataserviceMock, httpBackend;

beforeEach(module('mymodule'));

beforeEach(inject(function ($rootScope, $controller, $injector, $q, $httpBackend, $http) {
    scope = $rootScope.$new();
    httpBackend = $httpBackend;
    
    dataserviceMock = {
        getTimelineData: function () {
            return $http.get('data/program.json').then(function (httpResult) {
                return httpResult.data;
            });
        }
    };

    controller = $controller('ProgramController', { 'DataService': dataserviceMock });
}));

describe('when initializing the controller', function () {
    it('object timeline should be something', function () {
        httpBackend.whenGET('data/program.json').respond(mockedTimelineData);
        httpBackend.flush();
        expect(controller.timeline).toEqual(mockedTimelineData);
    });
});

});

当我尝试这个时，测试失败了。尽管 'controller.timeline' 属性在控制器中定义为 '{}'。该规范甚至没有达到这一点。它在 httpBackend 的 .flush() 上失败。

浏览器中的结果出现如下错误；

Error: Unexpected request: GET js/app/program/program.template.html

No more request expected

它引用属于 $stateProvider 定义中定义的 ProgramController 的模板。

你们知道我做错了什么吗？我真的不知道。我已经用 $q.defer 做了一些事情并承诺在测试中解决，但我真的无法理解这个...

Answer 1

您为 mockedTimelineData 提供的值是多少？问题是您的 getTimelineData() 调用了实际端点，因此它抛出了请求错误。当它试图调用 'data/program.json' 时，您应该模拟 returned 数据，例如：

dataserviceMock = {
        getTimelineData: function () {
            return $http.get('data/program.json').then(function (httpResult) {
                return [{'id':'1'},{'id':'2'}];
            });
        }
    };

这样，当 DataService.getTimelineData() 被调用时，它实际上是在调用您提供的模拟。

更新：

您可以像我原来的 post 一样提供模拟数据的 return 值，或者给出您的原始代码，我已经提供了工作示例：http://plnkr.co/edit/rrBfJOdq9igy3UeMlK21?p=preview.

我还注意到，在您的控制器中，您从未在响应处理程序中设置 vm.timeline，而是 console.log(data);

Answer 2

@myself..和@Xnake

最终设法修复它！！最后！我偶然发现了这篇文章； http://gonehybrid.com/how-to-write-automated-tests-for-your-ionic-app-part-2/ 在底部，作者也遇到了我收到的同样问题...禁用模板缓存是我的工作解决方案！

// disable template caching
beforeEach(module(function($provide, $urlRouterProvider) {  
    $provide.value('$ionicTemplateCache', function(){} );
    $urlRouterProvider.deferIntercept();
}));

其他解决方案也写在这里； https://github.com/angular-ui/ui-router/issues/212#issuecomment-69974072

使用 Jasmine 和 AngularJs 返回 json 数据时测试 $http.get 时出现问题

Problems testing $http.get when returning json data with Jasmine and AngularJs

testing

unit-testing

jasmine

angularjs

httpbackend