Ich teste eine Komponente, die zum Bearbeiten eines Objekts verwendet wird. Das Objekt verfügt über eine eindeutige id
Eigenschaft, die verwendet wird, um das bestimmte Objekt aus einem Array von Objekten abzurufen, die in einem Dienst gehostet werden. Das Spezifische id
wird über einen Parameter beschafft, der über das Routing übergeben wird, insbesondere über die ActivatedRoute
Klasse.
Der Konstruktor ist wie folgt:
constructor(private _router:Router, private _curRoute:ActivatedRoute, private _session:Session) {
}
ngOnInit() {
this._curRoute.params.subscribe(params => {
this.userId = params['id'];
this.userObj = this._session.allUsers.filter(user => user.id.toString() === this.userId.toString())[0];
Ich möchte grundlegende Komponententests für diese Komponente durchführen. Ich bin mir jedoch nicht sicher, wie ich den id
Parameter einfügen kann, und die Komponente benötigt diesen Parameter.
Übrigens: Ich habe schon ein Mock für den Session
Service, also keine Sorge.
Uncaught NetworkError: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'ng:///DynamicTestModule/HomeContentComponent.ngfactory.js'. at http://localhost:9876/_karma_webpack_/polyfills.bundle.js:2605
of
sollte alleine verwendet werden. Außerdem würden Sie wahrscheinlichRouterTestingModule
anstelle des Codes dieser Antwort verwenden.Ich habe herausgefunden, wie das geht!
Da
ActivatedRoute
es sich um einen Dienst handelt, kann ein Scheindienst dafür eingerichtet werden. Nennen wir diesen Mock-ServiceMockActivatedRoute
. Wir erweiternActivatedRoute
inMockActivatedRoute
, wie folgt:Die Zeile
super(null, ....)
initialisiert die Superklasse, die vier obligatorische Parameter hat. In diesem Fall benötigen wir jedoch nichts von diesen Parametern, daher initialisieren wir sie mitnull
Werten. Alles was wir brauchen ist der Wert, derparams
ein istObservable<>
. Daherthis.params
überschreiben wir mit den Wert vonparams
und initialisieren ihn so, dass erObservable<>
der Parameter ist, auf den sich die Testperson verlässt.Initialisieren Sie ihn dann wie jeden anderen Mock-Service einfach und überschreiben Sie den Anbieter für die Komponente.
Viel Glück!
quelle
super
oder zu verwendenObservable
. Woher kommen diese?super()
ist eingebaut.Observable
ist vonrxjs/Observable
oder nurrxjs
abhängig von Ihrer Version. Sie würden es mit bekommenimport {Observable} from 'rxjs'
.Hier ist, wie ich es in Angular 2.0 getestet habe ...
und im Abschnitt Anbieter
quelle
In Winkel 8+ gibt es das RouterTestingModule, mit dem Sie auf die ActivatedRoute oder den Router der Komponente zugreifen können. Sie können auch Routen an das RouterTestingModule übergeben und Spione für die angeforderten Routenmethoden erstellen.
Zum Beispiel habe ich in meiner Komponente:
Und in meinem Test habe ich:
und später im Abschnitt 'es':
In ähnlicher Weise können Sie die paramMap direkt über die spyOnProperty-Methode von Jasmin testen, indem Sie ein Observable zurückgeben oder rxjs-Murmeln verwenden. Dies kann einige Zeit sparen und erfordert auch keine zusätzliche Scheinklasse. Hoffe, dass es nützlich und sinnvoll ist.
quelle
Fügen Sie einfach einen Mock der ActivatedRoute hinzu:
...
quelle
Für einige Leute, die an Angular> 5 arbeiten, wenn Observable.of (); funktioniert nicht, dann können sie nur von () verwenden, indem sie import {of} aus 'rxjs' importieren;
quelle
Beim Erstellen von Testsuiten für einen Routing-Pfad ist dasselbe Problem aufgetreten wie:
In der Komponente habe ich die übergebene Eigenschaft wie folgt initialisiert:
Wenn Sie beim Ausführen der Tests keinen Eigenschaftswert in Ihrer aktivierten ActivatedRoute "useValue" übergeben, werden Sie undefiniert, wenn Sie Änderungen mit "fixture.detectChanges ()" erkennen. Dies liegt daran, dass die Scheinwerte für ActivatedRoute nicht die Eigenschaft params.property enthalten. Dann muss der Mock useValue über diese Parameter verfügen, damit das Fixture die Eigenschaft 'this.property' in der Komponente initialisieren kann. Sie können es hinzufügen als:
Sie können mit dem Testen beginnen, wie zum Beispiel:
Angenommen, Sie möchten einen anderen Eigenschaftswert testen, dann können Sie Ihre nachgebildete ActivatedRoute wie folgt aktualisieren:
Hoffe das hilft!
quelle
Anbieter in der Testklasse hinzugefügt als:
quelle