Ich habe eine einfache, aber komplizierte (vorerst) Komponente: Es ist nur ein Login-Formular , also werde ich nicht den HTML-Code einfügen. Sieht wie folgt aus:Angular2: Testen Komponente mit Abhängigkeits-Injektion
login.component.ts
@Component({
selector: 'login',
providers: [ModuleLoaderService, LoginService],
templateUrl: 'login.component.html',
directives: [CORE_DIRECTIVES, RouterLink],
pipes: [TranslationPipe]
})
export class LoginComponent {
//... some stuff
constructor(public router: Router, public http: Http, private _translation: TranslationService,
private _loginService: LoginService, private _moduleLoaderService: ModuleLoaderService) {
// do stuff using translation, etc
}
....
ngOnInit() {
`....bla bla
}
Hier ist der Test, den ich versuche zu starten, was ich denke, ist völlig aus:
describe('Login form',() => {
beforeEachProviders(() => [
provide(Http, {useFactory: (backend: ConnectionBackend, defaultOptions: BaseRequestOptions) => {
return new Http(backend, defaultOptions);
}, deps: [MockBackend, BaseRequestOptions]}),
TranslationService,
LoginService
]);
it('should check translated labels', injectAsync([TestComponentBuilder], (tcb) => {
return tcb.createAsync(MockLoginComponent).then((fixture) => {
fixture.detectChanges();
let compiled = fixture.debugElement.nativeElement;
expect(true).toBe(true);
});
}));
});
und meine translation:
import { Injectable } from 'angular2/core';
import { TranslateService } from 'ng2-translate';
@Injectable()
export class TranslationService {
constructor(private _translate: TranslateService) {
//
}
Fehler:
fehlgeschlagen Ressource laden: Der Server antwortet mit dem Status 404 (Not Found): http://localhost:9876/ng2-translate
Ich möchte beginnen, Tests für diese Komponente zu schreiben. Der erste Test, den ich dachte, wäre ein guter Anfang: Testen der übersetzten Etiketten ist korrekt (oder alles andere einfach genug). Ich habe keine Ahnung, wie man all diese Konstruktorargumente injizieren oder verspotten kann. Jeder Hinweis wirklich geschätzt.
Update: Also irgendwie ich Abhängigkeits jetzt ignoriert, und ich war in der Lage, tatsächlich die Komponente für den Test zu erhalten:
describe('Login form',() => {
beforeEachProviders(() => [
HTTP_PROVIDERS,
provide(XHRBackend, { useClass: MockBackend }),
provide(Router, { useClass: MockRouter }),
TranslateService,
TranslationService,
LoginService,
provide(TranslateLoader, {
useFactory: (http: Http) => new TranslateStaticLoader(http, 'assets/i18n', '.json'),
deps: [Http]
}),
TranslateService,
ModuleLoaderService
]);
it('should pre-populate username and pass from localStorage', injectAsync([TestComponentBuilder], (tcb) => {
return tcb.createAsync(LoginComponent).then((fixture) => {
fixture.detectChanges();
let compiled = fixture.debugElement.nativeElement;
localStorage.setItem('username', 'storedUsername');
expect(compiled.querySelector('input .ng-untouched')).toHaveText('storedUsername');
});
}));
Der CSS-Selektor scheint nicht zu funktionieren und die übersetzten Etiketten nicht zeigen in Karma Browser entweder ...
Was ist ein konkretes Beispiel über das, was Sie testen möchten. Was hast du probiert? Wo ist das Problem? –
Vielen Dank für Ihre Suche. Also fügte ich meinen Versuch der Beschreibung hinzu: Wie ich bereits erwähnt habe, muss ich mit dem Testen dieser Komponente beginnen, denn jetzt muss ich nur noch testen, ob die übersetzten Etiketten für dieses Login-Formular vorhanden und korrekt sind. Dazu dachte ich mir, ich müsste den TranslationService einspielen (siehe meinen Übersetzungsdienst, der auf ng2-translate basiert). Offensichtlich funktioniert es nicht, weil ich keine Ahnung habe, wie das geht. Vielen Dank ! –
Ich bin einen Schritt weiter: Ich habe den Fehler behoben, einige der benötigten Bibliotheken nicht zu haben, indem ich sie zu der karma.conf.js hinzufügte. Jetzt kann ich mich mit dem eigentlichen Test befassen. Nächstes: repariere die Anbieter! –