Problèmes de test $ http.get lors du renvoi de données json avec Jasmine et AngularJs

Question

J'ai du mal à trouver comment tester le résultat d'une requête $ http.GET renvoyant des données d'un fichier .json. J'espère que l'un d'entre vous peut être d'une quelconque aide ici. Pratique, l'application fonctionne parfaitement et renvoie le bon JSON que je m'attendais.

J'ai un contrôleur nommé 'ProgramController' et un service; 'DataService'.

Controller:

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

    activate(); 

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

service:

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

    return service; 

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

Tests pour tester le contrôleur et la réponse de service;

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); 
    }); 
}); 

});

Le test échoue lorsque je l'essaie. Bien que la propriété 'controller.timeline' soit définie comme '{}' dans le contrôleur. La spécification ne parvient même pas à ce point. Elle échoue sur le .flush() du httpBackend.

Le résultat dans le navigateur affiche l'erreur suivante;

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

No more request expected

Quelles références au modèle qui appartient au ProgramController défini dans la définition $ stateProvider.

Est-ce que l'un d'entre vous a une idée de ce que je fais de mal ici? Je n'ai vraiment aucune idée. J'ai déjà fait quelques trucs avec $ q.defer et promis de résoudre des tests, mais je ne peux vraiment pas comprendre ce que je fais ...

Answer 1

@myself .. et @Xnake

Managed pour le fixer finalement !! Finalement! Je suis tombé sur cet article; http://gonehybrid.com/how-to-write-automated-tests-for-your-ionic-app-part-2/ où dans le bas l'écrivain a également le même genre de problèmes que j'ai reçu ... Désactiver la mise en cache de modèle était ma solution de travail!

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

D'autres solutions sont également écrites ici; https://github.com/angular-ui/ui-router/issues/212#issuecomment-69974072

Answer 2

Quelle est la valeur que vous avez fournie pour mockedTimelineData? Le problème est que votre getTimelineData() appelle le point de terminaison réel, d'où l'erreur de requête. Vous devez railler les données renvoyées quand il essaie d'appeler « les données/program.json », par exemple:

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

De cette façon, quand DataService.getTimelineData() est appelée, elle vous appelle en fait la maquette que vous avez fourni.

Mise à jour:

Vous pouvez fournir la valeur de retour des données moqués comme dans mon message d'origine ou donné votre code original que j'ai donné l'exemple de travail: http://plnkr.co/edit/rrBfJOdq9igy3UeMlK21?p=preview.

Je remarque aussi que dans votre contrôleur, vous ne définissez l'vm.timeline dans le gestionnaire de réponse, mais il ne console.log(data);