[MUSIK]
Der Duft von Jasmin aus all diesen
Blumengirlanden auf der Tempelstraße, die durch die Luft weht.
Was für ein beruhigendes Gefühl.
Muss das gute Karma aus meinem vergangenen Leben sein.
Tut mir leid, wo war ich?
Ich habe mit dir über Winkeltests gesprochen, oder?
Und wir werden Karma-Anpassung verwenden, um unsere Winkeltests durchzuführen.
Also lasst uns damit weitermachen.
Eine gute Sache bei der Verwendung der Angular CLI ist, dass es alle Gerüste einrichtet,
damit Sie automatisch die Unterstützung für das
Testen Ihrer Angular-Anwendung einschließen.
Sie werden also feststellen, dass Sie, wenn Sie eine Komponente oder
einen Service zusammen mit den Komponenten ts Dateien generieren,
auch eine Datei namens component.spect.ts bemerken, die
bereits in Ihren Projektordnern enthalten ist.
Und wenn Sie zur Datei package.json gehen,
werden Sie sehen, dass es bereits Unterstützung für den dort enthaltenen Angular-Test gibt.
Wenn Sie also in die Dev-Abhängigkeiten gehen, werden Sie sehen, dass der Jasmin-Kern,
der Jasmin-Spezifikationsreporter, die karma- und
karma-bezogenen npm-Module bereits in Ihrer
eckigen Anwendung installiert sind, die von Angular CLI gerüstet ist.
Also haben wir alle Dinge und Platz für
uns, um einfach mit unseren Tests für unsere Winkelanwendung weiterzumachen.
Wenn Sie sich also umsehen, werden Sie sehen, dass sich
in Ihrem Quellordner eine Datei namens test.ts befindet.
Öffnen Sie also die Datei test.ts.
Sie werden auch sehen, dass es hier einen anderen Ordner namens e2e gibt.
Darauf werden wir in der nächsten Übung zurückkommen.
Aber im Ordner test.ts werden Sie sehen, dass
hier Ihre Karma-Unterstützung konfiguriert wird. Wenn Sie
also in diese test.ts-Datei gehen,
werden standardmäßig, wenn Sie die eckige CLS-Unterstützung für den Test verwenden, die Tests für alle Komponenten und
Dienste ausgeführt, die in Ihrer Winkelanwendung enthalten sind.
Jetzt werde ich Ihnen zeigen, wie Sie für
eine bestimmte Komponente testen, die MenuComponent.
Also möchte ich mich darauf beschränken, nur die Menükomponente.spec-Datei zu
verwenden und nur für die Menükomponente zu testen.
Also, gehen Sie in die test.ts-Datei.
Eine Möglichkeit, wie wir den Angular CLIs Test konfigurieren können, um den Test nur für
eine bestimmte Komponente auszuführen, besteht darin, hier zu dieser Zeile zu gehen,
die const context sagt und dann dies in Menü ändern,
können Sie /menu\ .component und spec.ts Datei sehen.
Früher war es nur/\ .spec.ts Datei, was bedeutete, dass
Sie alle Spezifikationsdateien ausführen, die sich in Ihrem Projektquellordner befinden.
Also, jetzt, indem ich dies hier
spezifiziere, bin ich daran interessiert, den Test nur für die Menükomponenten-Spezifikationsdatei hier auszuführen.
Jetzt finde ich das heraus, indem ich auf dem
Stapelüberlauf herumsuche, wo ich jemanden gefunden habe, der mir die Antwort darauf gibt und auf eine
Ressource auf Angular CLI verweist, und
so habe ich herausgefunden, dass dies der Weg ist,
den Test auf die Testdatei einer bestimmten Komponente zu beschränken.
Nachdem wir also eine Änderung an der Datei test.ts vorgenommen haben, speichern wir die Änderung.
Jetzt werden wir versuchen, unseren Test auf der Menükomponente auszuführen.
Wie Sie sehen, haben wir in der Menükomponente bereits die
Menükomponente .spec.ts Datei, die bereits Code enthält.
Lassen Sie uns versuchen, diesen Test durchzuführen und sehen, was passiert.
Gehen Sie zum Terminal, fügen Sie die Eingabeaufforderung hinzu, geben Sie ng test ein, und dies
führt zu einer Angular CLI, die den Test für die Menükomponente startet.
Wenn Sie dies also eingeben und die Return
drücken, beginnt Angular CLI mit der Kompilierung Ihrer eckigen Anwendung.
Es wird auch ein Browserfenster öffnen, in meinem Fall öffnet es ein
Chrome-Browserfenster und verwendet dann dieses Browserfenster, um den Test auszuführen.
Und Sie sehen, dass auf der Rückseite, Sie haben das Chrome-Browserfenster laufen und
es ist alles voll von rot und eine ganze Reihe von Wörtern gibt.
Die gleichen Informationen werden auch in Ihrem Konsolenfenster ausgedruckt,
und daraus kann ich sehen, dass mein Test nicht korrekt ausgeführt wurde.
In meiner Testdatei ist etwas nicht richtig konfiguriert, daher muss ich
meine Testdatei bearbeiten, um entsprechende Unterstützung für die korrekte Ausführung dieses Tests zu bieten.
Gehen wir also zur Menükomponente spec.ts Datei und
bereiten dann unseren Test entsprechend vor.
Jetzt können wir den ng Test hier laufen lassen.
Jedes Mal, wenn Sie Änderungen an der Datei mini component.ts oder
der Datei mini component.spec.ts vornehmen und
die Änderungen speichern, wird dieser Test automatisch an diesem Punkt ausgeführt.
Lassen Sie uns also auf die Datei MenuComponent.spect.ts gehen. Wenn wir
zur Datei MenuComponent.spect.ts gehen,
verstehen wir, dass die spect-Datei die Jasmine-Syntax verwendet, um den Test zu beschreiben.
So haben Sie bereits bemerkt, dass es hier etwas gibt
, das mit beschreiben beginnt und dann eine Funktion darin definiert ist.
Das ist es, worauf ich mich bezog, als ich früher über die Jasmine-Syntax sprach.
Und auch wenn Sie nach unten scrollen, sehen Sie ein es oder so drin.
Außerdem sehen Sie hier etwas namens BeforeEach.
Lassen Sie uns diese Datei ein wenig genauer untersuchen, um zu verstehen
, wie diese Datei konfiguriert ist und wie dieser Test in dieser speziellen Datei eingerichtet wird.
In dieser Testdatei werden Sie feststellen, dass
wir hier eine Reihe von Klassen von Angular-Kerntests importieren.
Mit diesem Modul können Sie die Testunterstützung für
Ihre Winkelanwendung bereitstellen und den Test für Ihre Komponente entwerfen.
Sie sehen also, dass ich async und
ComponentFixture und TestBed aus dieser Testbibliothek importiere.
Ich werde es Testbibliothek nennen.
Außerdem sehen Sie, dass die MenuComponent auch hier importiert wird.
Jetzt, wenn wir diese beiden verstehen,
lassen Sie uns den Code runtergehen, um zu verstehen, was wir hier tun wollen.
Also, hier, wie Sie erwarten, wird diese Beschreibung hier
spezifiziert, dass diese spezielle Funktion beschreibt,
Ein Jasmin-basierter Test, den wir für unsere Angular-Anwendung angeben.
Wenn Sie sich also die Beschreibung hier ansehen,
werden Sie sehen, dass dies all diesen Code hier enthält.
Dies ist also Teil eines einzigen Satzes von Tests, die wir ausführen, sind unsere
Menükomponente.
Also in der Beschreibung, werden Sie sehen, dass es hier eine Zeichenfolge gibt.
Dies gibt diesen speziellen Satz von Tests an, die Sie hier ausführen.
Also, es sagt auf der Menükomponente.
Hier können Sie also angeben, welche Zeichenfolge Sie wollen.
Sie können dies als eine Beschreibung verwenden, um
anzugeben, was dieser bestimmte Satz von Tests tut.
Also hier, ich bleibe bei einem Vor-Ding.
Wir versuchen, die Menükomponente zu testen.
Und danach sehen Sie, dass wir hier eine Addo-Funktion angeben.
Innerhalb dieser Addo-Funktion werden wir den Test konstruieren.
Für unsere MenuComponent hier.
Danach werden Sie sehen, dass wir eine Variable namens Komponente deklarieren,
die vom Typ MenuComponent ist.
Ab und zu deklarieren wir auch eine Fixture-Variable,
die vom Typ ComponentFixture ist.
Welches ist vom Typ MenuComponent.
Warum ist das interessant?
Jetzt
haben wir innerhalb unserer Angular Anwendung die MenuComponent, die wir bereits entwickelt haben.
Also in dieser Testdatei
werden wir diese MenuComponent mit dem eckigen TestBed erstellen,
und dann werden wir die Tests auf der MenuComponent durchführen.
Also werden wir die MenuComponent isolieren und
dann Komponententests für diese spezifische Komponente durchführen.
Nun, dies ist, wo die Winkel-Test-Dienstprogramme
, die mit Unterstützung mit TestBed kommen.
Das TestBed ermöglicht es mir, die Umgebung einzurichten, in der
ich meine Winkelkomponente testen kann.
Hier sehen Sie, dass wir TestBed sagen und
dann die Konfigurations-Test-Modul-Methode der TestBed Klasse hier aufrufen.
Und in diesem Konfigurations-Testmodul
können Sie eine Reihe von Dingen deklarieren, und Sie werden sehen, wie ich hier mehr hinzufüge.
Dies funktioniert genau wie die NG-Modulkonfiguration
, die Sie für unser at Modul dort tun.
Hier werden also alle Informationen deklariert, die Sie zum Einrichten der MenuComponent benötigen.
So kann der NG-Modellteil, den Sie im App-Modul gesehen haben,
eine ähnliche Art von Syntax hier verwendet werden, um die Unterstützung für das
Testen der MenuComponent hier zu deklarieren.
Und auch danach sehen Sie diese Funktion, die auf CompileComponents aufgerufen wird.
Diese Methode kompiliert also die MenuComponent und
macht sie bereit für das Testen.
Beachten Sie auch, dass diese ganze Sache, diese Funktion hier,
in etwas eingeschlossen ist, das hier asynchron genannt wird.
Warum brauchen wir diesen Asynchron?
Nun, weil die Vorbereitung der Komponenten mit dieser
CompileComponents Methode einige Zeit in Anspruch nimmt.
Und bis dies abgeschlossen ist, können wir nicht mit den Tests fortfahren. Wenn wir
also das asynchrone Modul verwenden, geben wir im Wesentlichen an, dass
ich darauf warten werde, dass diese ganze Sache abgeschlossen ist, bevor ich fortfahre.
Das Asynche-Modul, wie Sie sehen,
umschließt eine Testfunktion in eine asynchrone Testzone.
Das bedeutet also, dass dieser Test automatisch abgeschlossen wird,
wenn alle asynchronen Aufrufe innerhalb dieser Zone ausgeführt werden.
Das ist also, was die Verwendung des Asynchron, den wir hier haben, tut.
Was das bedeutet, ist, dass Sie diese Sync-Funktion verwenden können,
entweder in der vor jedem oder in der es auch, also innerhalb der es, unsere Deklaration.
Also, wenn Sie innerhalb der es auch sehen, werden Sie sehen, dass Sie die asynchrone verwenden können.
Für den Fall, dass Sie hier Operationen haben, die asynchron ausgeführt werden.
Dann müssen Sie warten, bis diese Vorgänge abgeschlossen sind, bis dieser Test abgeschlossen ist.
Wenn Sie beispielsweise einen Dienst aufrufen und warten,
bis der Dienst den Wert zurückgibt.
Alles, was abgeschlossen werden muss, bevor Sie fortfahren können.
Diese werden also aktiviert, indem diese asynchrone verwendet wird, um diese Funktion hier zu umgeben.
Nun, zusätzlich, die zweite BeforeEach, jetzt haben wir
dies in zwei separate vor Each hier getrennt, weil wir wollen, dass dies abgeschlossen ist.
Und diese CompileComponents wird eine gewisse Zeit in Anspruch nehmen,
besonders wenn Ihre Komponente eine externe Vorlage verwendet,
wie wir es in unserer MenuComponent tun.
Es erfordert also einige Zeit, bis sich die externe Vorlage bereit macht, damit
meine Tests vorwärts gehen.
Also, wir müssen warten, bis diese ganze Sache abgeschlossen ist.
Deshalb, nachdem dies abgeschlossen ist,
dann werden wir zum zweiten Teil kommen, wo wir einige
Referenzen auf einige Werte aus dem Testbett bekommen werden.
Nun, was ist diese BeforeEach-Funktion, die Sie hier tun?
Was die BeforeEach bedeutet, ist,
dass, was auch immer Sie hier deklarieren,
diese Funktion vor jedem Test ausgeführt wird, den Sie später mit dem es angeben werden.
Mit diesem BeforeEach können Sie also die anfängliche
Konfiguration für Ihren Test einrichten, um fortzufahren.
Das bedeutet, dass wir hier unser TestBed einrichten,
unsere Menükomponente vorbereiten und dann ein paar Dinge für
unsere Menükomponente einrichten, bevor wir den Test durchführen.
Also für jeden Test, den Sie mit einem es hier angeben werden, werden
diese vor jedem, was Sie in diesem vor jedem angeben,
ausgeführt, bevor der Test durchgeführt wird.
Also hier, wie Sie sehen können, bereite ich das TestBed vor.
Danach bekomme ich Zugang zur Vorrichtung.
Also verwende ich das TestBed, ich sage CreateComponent und MenuComponent.
Dies wird mir also einen Verweis auf die MenuComponent zurückgeben, die
ich hier in meinem Testskript erstelle, und
dann einen Verweis darauf erhalten, weil ich einen Verweis
darauf brauche, um dort einige Manipulationen an dieser Komponente durchzuführen.
Darüber hinaus erhalte ich von der Fixture einen Zugriff auf die
Komponenteninstanz, die hier von meiner Komponenten-Fixture erstellt wird.
Wie Sie sehen können,
gibt mir die Komponente Fixture des Typs MenuComponent und dann den Aufruf der ComponentInstance Zugriff auf diese spezifische
Menükomponente, die ich innerhalb des TestBed für die Durchführung der Komponententests erstellt habe.
Nun, danach nennen wir dies „detectChanges“.
Dies bedeutet nun, dass dies erst nach Abschluss aller Änderungen vorangeht
und dann erkannt wird, dass die Änderungen abgeschlossen sind.
Dies löst also einen Änderungserkennungszyklus für diese Komponente aus.
Das bedeutet also, dass Sie
zuvor Änderungen vorgenommen haben, alle Änderungen erkannt und
alles stabilisiert wird, bevor Sie mit Ihrem Test fortfahren können.
Nun, danach werden wir unsere es verwenden, um unseren ersten Test hier zu konfigurieren.
Was ist der erste Test, den wir hier machen?
Der erste Test,
was wir testen werden, ist sicherzustellen, dass die Komponente erstellt wurde.
Also, in diesem hier verwende ich die Jasmin-Syntax und ich sage es.
Und dann können Sie hier eine Beschreibung in Form einer Zeichenfolge geben,
um anzugeben, worüber dieser Test tatsächlich getestet wird.
Also, was wir sagen, ist, dass
wir testen, um zu sehen, ob die Komponente erstellt wurde oder nicht.
Um das zu tun, sage ich, es sollte bedeuten, dass
dieses Setup hier die Komponente korrekt erstellt haben sollte.
Deshalb verwende ich hier drin diese Methode namens erwarten.
Also nimmt die erwartete Methode hier einen Wert ein, und
dann können Sie testen, ob dieser Wert etwas befriedigt.
Also hier sagen wir toBetruthy, was bedeutet, dass dieser besondere Wert wahr sein sollte.
Das ist, was durch diese Methode, die hier genannt tobeTruthy angegeben wird.
Sie können auch toBefalsy sagen, was bedeutet, dass sollte falsch zu bewerten.
Aber in diesem Fall
testen wir, um sicherzustellen, dass die Komponente korrekt erstellt wurde.
Deshalb sagen wir, dass wir hier Betruthy erwarten.
Dies ist also ein einfacher Test, den wir tun, um sicherzustellen, dass unsere
Komponente korrekt erstellt wird.
Aber wie wir erkennen, wenn ich diesen Test durchführe, läuft er nicht richtig.
Lassen Sie uns schnell sehen und sehen, was das Problem bei
unserer Komponentenerstellung im Konsolenfenster dort ist.
Gehen Sie zurück zum Konsolenfenster, lassen Sie mich einfach zurückblättern und
sehen, wo das Problem ist.
Und ich fange an zu bemerken, dass dies angibt, dass es
einige der Dinge, die meine Komponente verwendet, nicht zu erkennen scheint.
Insbesondere sagt es, dass der MDSpinach
etwas ist, das er nicht erkennt,
die mdGetGridList und ein paar andere Dinge.
Das deutet sofort darauf hin, dass ich ein paar weitere
Konfigurationen in meiner Testdatei durchführen muss, bevor mein Test korrekt ausgeführt werden kann.
Gehen wir also zurück zu unserer Spezifikationsdatei und nehmen einige Änderungen daran vor.
Zurück zu unserer Spezifikationsdatei,
aus unserer Erinnerung daran, wie wir die Vorlage erstellt haben.
Wir wissen, dass wir innerhalb der Vorlage einen Router-Link in der
Vorlage MenuComponent hatten.
Daher brauche ich Unterstützung für das Routing, um diesen
Routerlink zu erkennen, den wir in der Datei MenuComponent.html verwendet haben.
Also hier werde ich
eine weitere Testunterstützung importieren,
die als RouterTestingModule bezeichnet
wird, die von Angular/Router/Test-Bibliothek hier verfügbar ist.
Dieses Router-Testmodul ermöglicht es mir,
einige Aspekte über meinen Router zu konfigurieren.
Wir werden sehen, dass die Art und Weise, wie wir dies verwenden, ein wenig anders ist als das Router-Modul
, das wir in unserer Anwendung verwendet haben.
Also werden wir das Routing-Testmodul importieren, auch Sie beachten,
dass wir einige Animationen verwenden, und
auch die Angular Materialkomponente in unserer Vorlage verwenden.
Also muss ich
das BrowserAnimationsModule in meine Testdatei importieren.
Dies kommt also vom Winkel/Plattform/Browser.
Jetzt werden Sie feststellen, dass wir dies explizit hier tun müssen, einfach weil
in der eigentlichen Angular-Anwendung all dies im App-Modul war,
und so war das für die Komponenten verfügbar.
Im Moment testen wir diese Komponente, die MenuComponent isoliert,
deshalb weiß es nicht über all diese Dinge, also
müssen wir alle diese Dinge hier explizit angeben.
Also werde ich das von der IM-Plattform-Browser-Animation hier importieren.
Also angular.platform.browser-Animationen, die
hier das Browser-Animationsmodul importieren.
Lassen Sie mich das Flex-Layer-Modul
einschließen, also werde ich Angular FlexLayout einschließen.
Also diese werden benötigt, weil ich sie in der Vorlage brauche,
ich werde auch dieses Gericht importieren aus,
Shared/Dish, weil wie Sie später sehen werden,
ich muss konfigurieren, A,
DishService weil mein MenuComponent
vom DishService abhängt, also
brauche ich das auch an Ort und Stelle.
Obwohl Sie sehen werden, dass ich das aufhalten werde.
Ich werde das in kurzer Zeit erklären, und ich muss auch noch ein paar Dinge importieren.
Ich werde DISCHES importieren,
Sie erinnern sich, dass wir diese Konstante namens
DISCHES verwenden, die wir aus der shared/dishes.ts Datei exportiert haben.
Ich werde das brauchen, um noch ein paar Dinge zu konfigurieren.
Ich werde auch die BaseURL importieren.
Was ich in der,
Shared/Base-URL-Datei deklariert habe.
Und auch muss ich
das Observable von,
rxjs, slash importieren, weil ich
Observable ein wenig später verwenden werde, wenn ich ein paar Dinge konfiguriere.
Also, jetzt habe ich all diese Dinge importiert. Wenn Sie
in die TestBed Konfiguration einsteigen, sehen Sie, dass dieser
Teil genau wie der Engine-Modul-Dekorator ist, den wir im App-Modul haben.
Hier kann ich also auch die Importe verwenden,
wie ich es mit dem Motormodul getan habe.
Und innerhalb der Importe werde ich das
BrowserAnimation-Modul importieren, weil das etwas ist, das ich brauche, und
dann auch das FlexLayout-Modul importieren.
Und auch das RouterTestingModule, weil
ich das RouterTestingModule benötigen würde, um ein paar Dinge zu konfigurieren.
Wenn Sie nun das RouterTestingModule verwenden, müssen Sie diese Methode
namens WithRoutes verwenden, anstatt ForRoot zu verwenden, wie wir hier mit dem Router-Modul verwendet haben.
In diesem WithRoutes können Sie
hier einige Standardrouten angeben, die Sie für Ihre spezifische Anwendung benötigen.
Ich werde nur einen einzigen Pfad hier konfigurieren,
und das ist gut genug für mich, um dieses Modul hier zu testen.
Also werde ich nur Pfad sagen: 'Menü'
und Komponente: MenuComponent.
Da die MenuComponent-Vorlagen bestimmte Materialkomponenten verwenden,
lassen Sie uns diese importieren.
Also importieren wir das MatGridListModule
aus @angular /material/grid-list und
auch das MatProgressSpinnerModule aus
@angular /material/progress-spinner.
Und wenn wir sie importiert haben, dann gehen wir weiter
und nehmen sie in die Importe unten auf.
Lassen Sie uns also das MatGridListModule und das MatProgressSpinnerModule hinzufügen.
Und das ist alles, was ich brauche, um
diese speziellen Importe hier zu konfigurieren.
Zusammen mit den Importen haben wir also die Deklarationen, in denen ich
die MenuComponent hier verwendet habe, ich kann auch die Anbieter hier konfigurieren.
Also muss ich die Anbieter hier konfigurieren.
Jetzt hier werden wir
ein paar Stubs hier erstellen, also
werde ich sagen, bieten: DishService.
Nun, der DishService, den wir hier nutzen werden, wird nicht der echte
DishService sein.
Wenn Sie eine Komponente testen, möchten Sie keinen echten Dienst verwenden.
Stattdessen riskieren Sie, den Service auszustocken, und
verwenden Sie dann einen Stub DishService, den ich als DishServiceHub nennen werde.
Also werde ich sagen, UseValue: DishServiceHub.
Dies wäre also eine Stubfunktion, die ich verwenden werde,
um den DishService hier zu markieren.
Das ist also eine, von der ich Gebrauch machen werde.
Und auch die zweite, die ich
verwenden werde, ist BaseURL,
die ich den Wert als BaseURL verwenden werde
, die wir bereits früher importiert haben.
Also, jetzt, mit diesem habe ich tatsächlich mein Testmodul konfiguriert,
also beachten Sie, dass die Art und Weise, wie wir dies angeben, genau so ist, wie
wir den NG-Modul-Dekorator für unser App-Modul spezifizieren.
Und hier konfigurieren wir nur diejenigen, die von der MenuComponent benötigt werden, also
habe ich nicht die anderen, die wir im App-Modul selbst verwenden.
So konfigurieren wir das Testmodul.
Das eine, was fehlt, ist dieser DishServiceHub.
Was ich also tun werde, ist
hier eine Funktion zu implementieren und
aufzurufen, die DishServiceHub
hier ein einfaches JavaScript-Objekt sein
lassen, das ich es
anstelle des echten Dienstes handeln lasse.
Wir können Dienstleistungen wie diese aussteppen, wie hier zu sehen.
Also hier drinnen werde ich nur
eine einfache Funktion bereitstellen,
die GetDishs-Funktion hier,
die Observable of Dish Array-Typ zurückgibt.
Genau so wurde dort der Rückgabewert konfiguriert.
Und ich werde
eine Beobachtbarkeit von DISCHES hier zurückgeben.
Also, mit dieser
Stubfunktion hier, was ich tue, ist, dass ich den DishService herausstube und
ihn dann mit dieser einen Methode konfiguriere, die ich für
meinen Cache brauche, getDishes sage, und wenn diese Methode aufgerufen wird,
werde ich nur diesen Wert zurückgeben.
Die Konstante DISLS, hier.
So können Sie jetzt sehen, dass, wie ich steuere, was
der Komponente von einem Stub DishService geliefert wird, den ich gerade hier erstellt habe.
So erstellen Sie Stubs für Ihren DishService.
Der andere Ansatz, den wir für
Fälle verwenden können, in denen wir Dienste verwenden, wird als den Spion verwendet.
Jasmine unterstützt etwas namens Spy, mit dem wir Funktionsaufrufe ausspionieren
und dann die Funktionsaufrufe erfassen und dann auf diesen Funktionsaufruf antworten können.
Das ist also eine andere Möglichkeit, einen gefälschten Dienst anstelle des echten Dienstes zu verwenden.
So können wir jetzt steuern, was an unsere Menükomponente geliefert wird.
Also nach diesen Modifikationen, dann
werden wir in unsere vor jeder Methode gehen hier.
Nach dem asynchronen, was ich tun werde,
ist, dass ich den DishService bekommen werde.
Sie sehen also, dass ich das Testbett benutze und dann die
get-Methode des Testbetts benutze, um den DishService, der hier erstellt wurde,
von diesem speziellen Stub, den wir hier in den Anbietern deklariert haben, zu erreichen.
Dies gibt mir also einen Verweis auf den DishService
, damit ich die Methoden des DishService überall aufrufen kann, wo ich hier brauche.
Nachdem wir diese Änderungen vorgenommen haben, speichern wir die Änderungen und
sehen dann, wie unsere Angular CLI diesen Test nach diesen Änderungen ausführen
wird und ob unser Test zu diesem Zeitpunkt erfolgreich sein wird oder nicht.
Also lassen Sie uns die Änderungen speichern.
Sobald Sie die Änderungen speichern, werden Sie feststellen, dass Ihr
NG-Test den Test erneut starten wird.
Es wird also die Anwendung kompilieren und dann den Test erneut ausführen.
Und voila, unser Test wurde erfolgreich bestanden, nachdem
die Änderungen an unserer component.spec.ts Datei vorgenommen wurden.
Also unser erster Test, was bedeutet, dass wir jetzt in der Lage sind, eine Menükomponente
aus unserem Menü, component.spec.ts Datei dort zu erstellen.
So funktioniert unser Test-Setup richtig.
Jetzt kann ich in meine Testkomponente einsteigen und intensivere Tests durchführen.
Gehen Sie zurück zu dieser Menükomponente.spec-Datei, lassen Sie mich einen anderen Test hinzufügen.
Jetzt sehen Sie, dass ich, weil ich jetzt einen etablierten Service hier
habe, der diesen DISH-Wert zurückgibt, jetzt meinen DishService nutzen kann
, auf den ich hier den Verweis habe.
Innerhalb war vor jedem, und rufen Sie dann die GetDishs-Methode auf und
dann werde ich in der Lage sein, den Wert zu erhalten.
Und das wird in meiner Menükomponente verfügbar sein, die ich gerade erstellt habe.
Also sollte mein MenuComponent nun Zugriff auf die Geschirr Konstante bekommen, die
ihm durch diesen Geschirrstopp zurückgeliefert wurde.
So kann ich jetzt testen, ob die Gerichte Variable in meinem
MenuComponent tatsächlich die Werte richtig empfängt oder nicht.
Also, wenn ich reingehe, lass mich hier einen weiteren Test erstellen.
Also werde ich hier einen Test erstellen, mit dem es,
wie Sie zuvor gesehen haben, so genau wie der vorherige.
Dieser zweite Test werde ich nennen, dass wie es und
Geschirr, Items sollte 4 sein,
weil die Gerichte Konstante, die wir in
der shared.dishs-Datei erklärt haben vier Gerichte in der Konstante gibt.
Also, wenn meine Gerichte Variable in meiner MenuComponent oder
ts Datei durch Aufruf des dishservice initialisiert wird.
Es hätte diese vier Gerichte erhalten und
wurde mit diesen vier Gerichten initialisiert.
Also werde ich ein paar Tests auf diesem Geschirr Variable dort durchführen.
Also, wie bekomme ich Zugang zu den Gerichten Variable hier?
Also würde ich sagen, es Geschirr Artikel sollte 4 sein, und
dann werde ich hier eine Pfeilfunktion deklarieren.
Und in dieser Pfeilfunktion werde ich
die verschiedenen Tests angeben, die ich durchführen werde.
Also hier werde ich jetzt sagen, erwarten (Komponente. ,
und beachten Sie, dass es mir automatisch
Zugriff auf diese Gerichte Eigenschaft aus der MenuComponent gibt.
Also kann ich sagen, dass component.dish, und dann kann ich testen,
um zu sehen, dass die Länge dieses Geschirr JavaScript-Objekt-Array sein sollte.
Hier verwende ich hier die ToBe-Methode von Jasmine.
Und dann kann ich den Wert 4 angeben,
weil ich 4 Gerichte in meinem Geschirr Konstante geliefert
habe, die ich in der shared.dishs-Datei dort deklariert habe.
Das ist also der erste Test, den ich durchführen werde,
das sollte sich als wahr erweisen.
Ansonsten funktionierte das Setup nicht richtig, daher
weiß ich, dass mein Code nicht korrekt funktioniert.
Aber ich weiß sicher, dass dieser Test richtig funktionieren sollte.
Wenn Sie sicher sein wollen,
lassen Sie uns die Änderungen speichern und dann gehen und sehen Sie unseren Test läuft. Wenn Sie
zu diesem Terminal gehen,
sehen Sie, dass jetzt meine App neu kompiliert wird und der Test läuft.
Und beachte alle Grüns im Terminal-Fenster.
Es sagt ausgeführt 1 von 2 Erfolg, ausgeführt 2 von 2 Erfolg.
Was bedeutet, dass meine beiden Tests erfolgreich ausgeführt wurden.
Wenn ich auf meinen Browser schaue, so dass Sie sehen, dass die MenuComponent,
beide Tests sind erfolgreich.
Lassen Sie mich ein paar weitere erstellen und
sie zu dieser zweiten Gruppe von Tests hinzufügen, die ich dort erstelle.
Wenn ich zur Datei menu_component_spec.ts gehe, werde ich eine weitere hinzufügen.
Ich werde sagen, Komponente erwarten. ,
und ich werde Gerichte sagen [1].
Daran erinnern, dass der Name des ersten Gerichts war,
Also das ist, was ich werde testen, die Gerichte [1] .name.
So kann ich testen, ob es die Werte korrekt empfängt.
Was sind alle Möglichkeiten, die ich testen kann?
Wenn ich einen Punkt dort setze, gibt es mir einen Vorschlag für alle Möglichkeiten hier.
Also werde ich sagen, ich werde hier auch wieder die ToBe-Methode verwenden.
Und dann ist der zweite Name des Gerichts,
nur das da, also das ist der zweite Caster, den ich ausführen werde.
Also, wenn mein Code korrekt lief, sollte dies auch passieren.
In ähnlicher Weise lassen Sie mich hier noch einen eintragen.
Also werde ich sagen, erwarten,
Komponente.Gerichte und ich werde sagen 3.
Und hier drin
sollte das vorgestellte Anwesen Falsy sein.
Dass Sie falsch sein sollten, ist es in diesem Fall nicht wahr, also lassen Sie mich in einem weiteren hinzufügen.
Sie können anfangen, mehr hinzuzufügen, wenn Sie wollen,
spielen Sie mit ihm herum, bis Sie zufrieden sind.
Tun Sie diese Ergänzungen auch. Lassen Sie mich die Änderungen speichern, die ich
hier vorgenommen habe, lassen Sie uns sehen, ob dieser Test korrekt läuft.
Und wenn du zurück zu meinem Terminal gehst, siehst du, dass mein Test wieder läuft.
Siehst du, dass beide Tests erfolgreich waren,
jetzt werde ich eines dieser Dinge scheitern lassen.
Also werde ich reingehen und das in „Truthy“ ändern.
Sehen Sie, das ist der Spaß, mit Code herumzuspielen.
Ich werde das in Truthy ändern und ich weiß, dass dieser Test scheitern wird.
Also lassen Sie uns die Änderungen speichern.
Wenn Sie sich das Terminal ansehen, sehen Sie, dass der Test fehlgeschlagen ist.
Sie sehen all das Rot hier, was bedeutet, dass der zweite Test nicht korrekt bestanden hat.
Und wenn Sie rückwärts scrollen, würden Sie sehen, dass dieser spezielle Test fehlgeschlagen ist,
denn irgendwo dort unten wird es sagen, dass er es nicht getan hat.
Okay, sieh dir diese Aussage hier an, dass es falsch ist, um wahr zu sein,
also ist es gescheitert.
Also sollte es nicht wahr sein, aber ich sagte, es sollte wahr sein, und
offensichtlich ist der Test falsch, also ist der Test fehlgeschlagen.
So können Sie sogar testen, ob der Test fehlschlägt,
wenn Sie auch nach den falschen Dingen gefragt haben.
Aber wieder, lassen Sie mich zurückgehen und das noch einmal korrigieren.
Also gehe ich zurück zu meinem, Datei Ich werde sie
zurück zu falsy ändern, weil ich möchte, dass dieser Test korrekt ausgeführt wird.
Jetzt sind wir noch nicht zufrieden.
Jetzt in diesem speziellen Test teste ich nur die Gerichte
Variable, die sich in meinem MenuComponent befindet.
Wie gehe ich mit der Vorlage selbst herumspielen?
Hier brauchen wir noch mehr Hilfe von Angular.
Um einige Tests an der Vorlage durchzuführen, werde ich eingehen und
ein paar weitere Importe hier einziehen.
Also gehe ich zu meinem Anfang dieser Datei, menu_component_spec.tsfile.
Ich werde importieren, eine
weitere genannt By, was eine Methode ist.
Du wirst sehen, wie ich das in kurzer Zeit benutze.
Dies sollte aus, Angular,
/platform-browser importiert werden.
Und auch werde ich noch einen importieren, der ein Debug-Element ist.
Das Debug-Element ermöglicht es mir, Zugriff auf das DOM zu erhalten
, so dass ich Tests an den DOM-Elementen direkt durchführen kann.
Das ist also, wo ich das importieren werde, den Angular-Code hier, also diese beiden.
Fügen Sie also die By und das DebugElement zu den Importen
hinzu, und sobald Sie das tun, werden wir hier in den Code gehen.
Und dann werden wir einen weiteren Test hinzufügen, wo wir in das DOM gehen und
eines der Elemente aus dem Dokument holen werden.
Also würde ich es sagen, also noch ein Test hier,
was wird dieser Test tun?
Für diesen Test werde ich
den Test angeben, wie Geschirr in der Vorlage verwenden sollte.
Ich sage hier nur zufällig etwas,
weil ich nur überprüfen möchte, dass die Variable Gerichte,
was auch immer sie zur Verfügung stellt, in der Vorlage korrekt verwendet wird.
Das ist also der Teil, den ich einrichte, und
dann ist der zweite Teil die Pfeilfunktion, und
innerhalb dieser Pfeilfunktion werde ich den Code für den nächsten Test bereitstellen.
Also in dieser Pfeilfunktion, was ich
tun werde, ist, dass ich zuerst Fixture aufrufen und
dann Änderungen erkennen werde.
Und dann danach werde ich sagen, let de:,
Ist ein DebugElement.
Dadurch werde ich Zugriff auf das DOM erhalten und
dann wäre das Element HTMLElement.
Also möchte ich Zugriff auf eines der HTMLElements von meinem DOM erhalten.
Welches Element möchte ich also?
Um das zu tun, bekomme ich Zugriff auf das,
DebugElement, indem ich fixture und debugElement sage.
So kann ich hier Zugriff auf Elemente von meinem DOM erhalten, also DebugElement.
Und dann kann ich abfragen und dann nur diejenigen auswählen, die für mich von Interesse sein werden.
Also werde ich abfragen und dann werde ich fragen, indem ich die By verwende.
Beachten Sie also, wo ich das By verwende, das ich hinzugefügt habe, indem ich es importiere.
Also By unterstützt das By eine Reihe von Metriken, mit denen ich
fragen kann, auf bestimmte Elemente im DOM zuzugreifen.
Wie Sie sehen können, wird es mir sagen, was ich importieren kann und
dann erlaubt mir das .css Zugriff auf
übereinstimmende Elemente durch den gegebenen CSS-Selektor zu erhalten.
Also, was ist der CSS-Selektor, den ich verwenden werde?
Ich weiß, dass es ein h1-Element, HTML-Element im DOM gibt und
dass ich Zugriff auf das erste h1-Element vom DOM erhalten werde.
Und eines der h1-Elemente darin ist diejenige, die
den Namen jedes Gerichts dort anzeigen wird.
Schauen Sie zurück und Sie sehen, dass in der Raster-Timeline mit einem h1 und
dass h1 den Namen des Gerichts enthält dort.
Also werde ich das bekommen und
dann werde ich ein Element bekommen und dann würde ich de sagen,
vom Debug-Element, und dann würde ich NativeElement sagen.
Und das gibt mir Zugriff auf das Element speziell im DOM
, auf das ich mich beziehe, und ich habe mit dieser Anweisung früher ausgewählt.
Also, wenn ich das DOM abfrage und dann sage, geben Sie mir
alle zurück, die das Tag h1 für das HTML-Element verwenden.
Und ich bekomme Zugriff darauf, und ich kann abfragen und
sagen, erwarten (el.TextContent).
Also suche ich nach dem Inhalt in diesem h1 in meiner
Vorlage festen Inhalt und dann werde ich toContain sagen.
Dies ist also eine andere Methode, ToContain, dies ist eine Jasmin-Methode namens ToContain.
Dies überprüft, ob das einen bestimmten Wert enthält,
und dann werde ich nach DISCHES (0) .name überprüfen.
Also wurde das erste Gericht im DOM erstellt und in das DOM hinzugefügt?
Wenn meine Vorlage korrekt funktioniert, muss dies im DOM vorhanden sein.
Also, das werde ich überprüfen, ob die Gitterkachel, die
dem ersten DISH entspricht, erstellt und in das DOM hinzugefügt wurde oder nicht.
Also sage ich DISCHES (0) .name, und sage zu Großbuchstaben.
Erinnern Sie sich, dass ich die Großbuchstabe verwendet habe, um den Namen
des DISH anzuzeigen, indem ich den Namen der Schale in
Großbuchstaben in der Rasterkachel in der Menükomponente konvertiert habe.
Das ist es, worauf ich prüfen werde, okay, also suche ich
nur nach einem von ihnen.
Sie können viele dieser Tests durchführen, Sie können für DISCHES überprüfen
(1) .name und dann DISCHES (2) .name und mehr, wenn Sie möchten.
Ich illustriere nur ein Beispiel dafür, wie Sie auf Elemente des DOM zugreifen würden und
dann überprüfen, was sie darin enthalten.
Dies ist also ein Test, den ich hier durchführen werde, also lassen Sie mich die Änderungen speichern
und dann sehen, ob der Test korrekt ausgeführt wird.
Gehen Sie in dieses Terminal und wenn der Test läuft,
sehen Sie, dass mein erster Test erfolgreich war, der zweite Test war erfolgreich,
und der dritte Test war auch erfolgreich, wunderbar.
Lassen Sie mich den dritten Test scheitern.
Wenn ich zur Datei menucomponentspec.ts
gehe, werde ich dies in Großbuchstaben entfernen und dann den gleichen Test durchführen.
Sie werden sehen, dass dieser Test fehlschlägt, speichern Sie die Änderungen.
Und wenn der Test ausgeführt wird, werden Sie sehen, dass der dritte Test fehlschlägt.
Weil ich es scheitern lasse, indem ich dort nach dem falschen Ding prüfe und
da du gehst, ist der dritte Test hier fehlgeschlagen.
So können Sie überprüfen, ob bestimmte Dinge, die
dort sein sollen, richtig vorhanden sind oder nicht.
Warum ist dieser Fall, so können Sie hier sehen, der Grund, warum dieser Test fehlgeschlagen ist.
Es erwartet, dass dies im DOM ist,
aber stattdessen ist dies das, was im DOM im h1-Element im DOM ist.
Das ist der Grund, warum der Test hier fehlgeschlagen ist.
Also wieder zurück gehen lassen Sie mich den Fehler korrigieren und
dann, wenn ich den Test erneut ausführe, sollten Sie jetzt sehen, dass der Test erfolgreich bestanden hat.
Wenn Sie zum Terminal zurückkehren, werden Sie sehen, dass dieser Test jetzt
korrekt ausgeführt wird.
Und da gehst du, alle drei Tests werden von meiner Bewerbung bestanden.
Wenn Sie sich den Browser ansehen, können Sie auch sehen, dass die drei Tests
erfolgreich auf der Menükomponenten-Vorlagendatei und
auch der Menükomponente selbst ausgeführt wurden.
Nun, offensichtlich ist dies nicht unbedingt der umfassendste Test, aber
ich wollte Ihnen nur einen Vorgeschmack
darauf geben, wie Sie Tests innerhalb Ihrer Angular-Anwendung erstellen würden.
Wenn Sie sich mitreißen lassen, können Sie in alle spec.ts-Dateien gehen, die Sie haben, und
dann Ihren eigenen Test für jede einzelne
dieser Komponenten schreiben, indem Sie das Wissen verwenden, das Sie hier gewonnen haben.
Außerdem können Sie mehr über das Testen in der Angular-Dokumentation lesen und
dann weitere Möglichkeiten zur Durchführung von Tests für Ihre Angular-Anwendung erfahren.
Testing ist ein Feld für sich selbst, also wenn ich Ihnen alles über
das Testen beibringen muss, wird ein ganzer Kurs an sich für Angular kommen.
Und in diesem Kurs wollte ich Ihnen nur einen Geschmack geben, wie
Sie Tests in Ihrer Angular-Anwendung durchführen werden.
Und dies ist ein Beispiel dafür, wie wir
einen Komponententest für eine der Komponenten in unserer Angular-Anwendung konfigurieren und durchführen können.
Dies ist ein guter Zeitpunkt für Sie, einen guten Kommentar mit dem Message-Komponentententest zu machen.
( MUSIK)