Jasmine teste les directives AngularJS avec templateUrl

Question

J'écris des tests de directive pour AngularJS avec Jasmine, et j'utilise templateUrl avec eux : https://gist.github.com/tanepiper/62bd10125e8408def5cc

Cependant, lorsque j'exécute le test, j'obtiens l'erreur incluse dans le gist :

Error: Unexpected request: GET views/currency-select.html

D'après ce que j'ai lu dans la documentation, je pensais que je faisais cela correctement, mais il semble que ce ne soit pas le cas - qu'est-ce que j'ai manqué ?

Merci

Answer 1

Lorsque vous utilisez ngMockE2E ou ngMock, tous Les requêtes HTTP sont traitées localement en utilisant les règles que vous spécifiez et aucun sont transmises au serveur. Comme les modèles sont demandés via HTTP, ils sont également traités localement. Puisque vous n'avez rien spécifié à faire lorsque votre application essaie de se connecter à views/currency-select.html il vous dit qu'il ne sait pas comment le gérer. Vous pouvez facilement dire à ngMockE2E de transmettre votre demande de modèle :

$httpBackend.whenGET('views/currency-select.html').passThrough();

N'oubliez pas que vous pouvez également utiliser des expressions régulières dans vos chemins de routage pour passer par tous les modèles si vous le souhaitez.

La documentation en parle plus en détail : http://docs.angularjs.org/api/ngMockE2E.$httpBackend

Mise à jour

Pour votre information, vous devrez utiliser la fonction $injector pour accéder au nouveau backend. A partir des documents liés :

var $httpBackend;
beforeEach(inject(function($injector) {
  $httpBackend = $injector.get('$httpBackend');
  $httpBackend.whenGET('views/currency-select.html').respond(200, '');
}));

Answer 2

La méthode Karma consiste à charger le modèle html de façon dynamique dans $templateCache. Vous pourriez simplement utiliser le pré-processeur html2js karma, comme expliqué aquí

cela revient à ajouter des modèles ' .html' à vos fichiers dans le fichier conf.js ainsi que préprocesseurs = { ' .html " : " html2js ". } ;

et utiliser

beforeEach(module('..'));

beforeEach(module('...html', '...html'));

dans votre fichier de test js

Answer 3

Vous pourriez peut-être obtenir le $templatecache de l'injecteur et ensuite faire quelque chose comme

$templateCache.put("views/currency-select.html","<div.....>");

où à la place de <div.....> vous mettriez votre modèle.

Après cela, vous configurez votre directive et cela devrait fonctionner parfaitement !

Answer 4

Si cela ne fonctionne toujours pas, utilisez fiddler pour voir le contenu du fichier js généré dynamiquement par le processeur htmltojs et vérifiez le chemin du fichier modèle.

Cela devrait être quelque chose comme ceci

angular.module('app/templates/yourtemplate.html', []).run(function($templateCache) {
  $templateCache.put('app/templates/yourtemplate.html', 

Dans mon cas, ce n'était pas la même chose que ce que j'avais dans ma directive actuelle qui causait le problème.

Le fait d'avoir le templateURL exactement le même à tous les endroits m'a permis de m'en sortir.

Answer 5

Comme demandé, conversion d'un commentaire en demande

---

Pour les personnes qui veulent utiliser la réponse de @Lior en Yeoman des applications :

Parfois, la manière dont les modèles sont référencés dans karma config et, par conséquent, les noms des modules produits par ng-html2js ne correspondent pas aux valeurs spécifiées en tant que templateUrl dans les définitions de directives.
Vous devrez ajuster les noms de modules générés pour qu'ils correspondent à templateUrl s.
Ceux-ci pourraient être utiles :

• https://github.com/karma-runner/karma-ng-html2js-preprocessor#configuration
• gist : https://gist.github.com/vucalur/7238489