Erreur angulaire 2: Aucun fournisseur pour Http dans le test Karma-Jasmin
Je reçois l'erreur suivante dans mon karma test même si mon appli fonctionne parfaitement sans erreur. C'est dire qu'il n'y a pas de fournisseur pour Http. Je suis en utilisant import { HttpModule } from '@angular/http';
dans mon application.le module.ts fichier et l'ajouter aux importations de tableau. Le karma d'erreur semblable à la suivante:
Chrome 52.0.2743 (Mac OS X 10.12.0) App: TrackBudget should create the app FAILED
Failed: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: No provider for Http!
Error: No provider for Http!
at NoProviderError.Error (native)
at NoProviderError.BaseError [as constructor] (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/facade/errors.js:24:0 <- src/test.ts:2559:34)
at NoProviderError.AbstractProviderError [as constructor] (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/di/reflective_errors.js:42:0 <- src/test.ts:15415:16)
at new NoProviderError (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/di/reflective_errors.js:73:0 <- src/test.ts:15446:16)
at ReflectiveInjector_._throwOrNull (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/di/reflective_injector.js:761:0 <- src/test.ts:26066:19)
at ReflectiveInjector_._getByKeyDefault (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/di/reflective_injector.js:789:0 <- src/test.ts:26094:25)
at ReflectiveInjector_._getByKey (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/di/reflective_injector.js:752:0 <- src/test.ts:26057:25)
at ReflectiveInjector_.get (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/src/di/reflective_injector.js:561:0 <- src/test.ts:25866:21)
at TestBed.get (webpack:/Users/ChrisGaona%201/budget-tracking/~/@angular/core/bundles/core-testing.umd.js:1115:0 <- src/test.ts:5626:67)
Chrome 52.0.2743 (Mac OS X 10.12.0): Executed 1 of 1 (1 FAILED) ERROR (0.229 secs /0.174 secs)
Ici est l'une de mes applications.composante.ts fichier:
import {Component} from '@angular/core';
import {Budget} from "./budget";
import {BudgetService} from "./budget.service";
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
providers: [BudgetService]
})
export class AppComponent {
title = 'Budget Tracker';
budgets: Budget[];
selectedBudget: Budget;
constructor(private budgetService: BudgetService) { }
ngOnInit(): void {
this.budgetService.getBudgets()
.subscribe(data => {
this.budgets = data;
console.log(data);
this.selectedBudget = data[0];
console.log(data[0]);
});
}
}
Voici mon simple spec:
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('App: TrackBudget', () => {
beforeEach(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
]
});
});
it('should create the app', async(() => {
let fixture = TestBed.createComponent(AppComponent);
let app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
}));
});
L'erreur semble être causé par mon service, qui peut être vu ici:
import { Injectable } from '@angular/core';
import { Http } from '@angular/http';
import 'rxjs/add/operator/map';
import {Budget} from "./budget";
@Injectable()
export class BudgetService {
constructor(public http: Http) { }
getBudgets() {
return this.http.get('budget.json')
.map(response => <Budget[]>response.json().budgetData);
}
}
Si je supprime le constructor(public http: Http) { }
déclaration du service, le test passe bien, mais alors l'application ne parvient pas dans le navigateur. J'ai fait beaucoup de recherche sur ce sujet et n'ont pas été en mesure de trouver la solution. Toute aide serait grandement appréciée!!
source d'informationauteur Chris
Vous devez vous connecter pour publier un commentaire.
Le but de la
TestBed
est de configurer un@NgModule
à partir de zéro pour l'environnement de test. Donc, actuellement tout ce que vous avez configuré est leAppComponent
et rien le reste (à part le service qui est déjà déclarée dans le@Component.providers
.Ce que je vous suggère fortement de le faire si, au lieu d'essayer de tout configurer comme vous le feriez dans un environnement réel, est de simplement se moquer de l'
BudgetService
. Essaie de configurer leHttp
et se moquer c'est pas la meilleure idée, vous voulez garder les dépendances externes comme la lumière que possible lors de tests unitaires.Voici ce que vous devez faire
Créer une maquette pour le
BudgetService
. Je voudrais vérifier ce post. Vous pouvez simplement étendre cette classe abstraite, de l'ajout de votregetBudgets
méthodeVous devez remplacer la
@Component.providers
comme mentionné dans ce postSi vous voulez vraiment vous suffit d'utiliser le service réel et le
Http
alors vous devez être prêt à se moquer de connexions sur leMockBackend
. Vous ne pouvez pas utiliser le véritable arrière-plan, car il dépend de la plate-forme de navigateur. Pour un exemple, consultez ce post. Personnellement, je ne pense pas que c'est une bonne idée, bien que lors de l'essai de composants. Lors du test de votre service, c'est quand vous devrait le faire.Attention: Cette solution ne fonctionne que si vous voulez tester la structure statique. Il ne fonctionnera pas si votre test en fait, fait des appels de service (et de mieux vous aussi avez certains de ces tests).
Votre test utilise une définition de module, un module de test, et non pas votre AppModule. Si vous devez importer HttpModule là aussi:
Vous pouvez également importer vos AppModule:
Ceci a l'avantage que vous n'avez pas à ajouter de nouveaux composants et de modules à de nombreux endroits. C'est plus pratique. D'un autre côté c'est moins souple. Vous pouvez importer plus que vous ne le souhaitez dans votre test.
De plus, vous avez une dépendance à partir de votre bas du composant au niveau de l'ensemble de la AppModule. En fait, c'est une sorte de dépendance circulaire qui est normalement une mauvaise idée. Donc, à mes yeux, vous ne devez le faire pour des composants de haut niveau qui sont très centrale, à votre demande, de toute façon. Pour de plus bas niveau des composants, qui peut même être réutilisable, il vaut mieux la liste de toutes les dépendances de manière explicite dans le test spec.
Importation HttpModule dans l'app.le module.ts et il permettra de résoudre votre problème.
Sur Angulaire 4+
RC2C la réponse de a fonctionné pour moi 🙂 Merci!
Attention: Cela ne fonctionne que si vous êtes pas vraiment appeler votre service. Il ne fonctionne que si vous voulez tester la structure statique.
Voulais juste ajouter que pour Angulaire de la version 4 et supérieure, probablement), vous devez importer
HttpClientModule
à votre banc d'essai, de sorte qu'il ressemble à ceci:Attention: Voir en haut Attention
Une alternative à se moquer du service tel que décrit dans peeskillet réponseest à l'aide de la Maquette Backend fournis par angulaire.
La doc API contient l'exemple suivant: