1
00:00:00,000 --> 00:00:04,858
[MUSIK]

2
00:00:04,858 --> 00:00:09,967
Der Duft von Jasmin aus all diesen

3
00:00:09,967 --> 00:00:14,218
Blumengirlanden auf der Tempelstraße, die durch die Luft weht.

4
00:00:14,218 --> 00:00:17,684
Was für ein beruhigendes Gefühl.

5
00:00:17,684 --> 00:00:20,510
Muss das gute Karma aus meinem vergangenen Leben sein.

6
00:00:23,749 --> 00:00:25,857
Tut mir leid, wo war ich?

7
00:00:25,857 --> 00:00:29,703
Ich habe mit dir über Winkeltests gesprochen, oder?

8
00:00:29,703 --> 00:00:34,743
Und wir werden Karma-Anpassung verwenden, um unsere Winkeltests durchzuführen.

9
00:00:34,743 --> 00:00:37,769
Also lasst uns damit weitermachen.

10
00:00:37,769 --> 00:00:45,571
Eine gute Sache bei der Verwendung der Angular CLI ist, dass es alle Gerüste einrichtet,

11
00:00:45,571 --> 00:00:49,869
damit Sie automatisch die Unterstützung für das

12
00:00:49,869 --> 00:00:53,393
Testen Ihrer Angular-Anwendung einschließen.

13
00:00:53,393 --> 00:00:59,108
Sie werden also feststellen, dass Sie, wenn Sie eine Komponente oder

14
00:00:59,108 --> 00:01:03,454
einen Service zusammen mit den Komponenten ts Dateien generieren,

15
00:01:03,454 --> 00:01:08,942
auch eine Datei namens component.spect.ts bemerken, die

16
00:01:08,942 --> 00:01:13,422
bereits in Ihren Projektordnern enthalten ist.

17
00:01:13,422 --> 00:01:17,423
Und wenn Sie zur Datei package.json gehen,

18
00:01:17,423 --> 00:01:24,434
werden Sie sehen, dass es bereits Unterstützung für den dort enthaltenen Angular-Test gibt.

19
00:01:24,434 --> 00:01:30,640
Wenn Sie also in die Dev-Abhängigkeiten gehen, werden Sie sehen, dass der Jasmin-Kern,

20
00:01:30,640 --> 00:01:34,201
der Jasmin-Spezifikationsreporter, die karma- und

21
00:01:34,201 --> 00:01:39,394
karma-bezogenen npm-Module bereits in Ihrer

22
00:01:39,394 --> 00:01:44,414
eckigen Anwendung installiert sind, die von Angular CLI gerüstet ist.

23
00:01:44,414 --> 00:01:47,716
Also haben wir alle Dinge und Platz für

24
00:01:47,716 --> 00:01:53,538
uns, um einfach mit unseren Tests für unsere Winkelanwendung weiterzumachen.

25
00:01:53,538 --> 00:01:58,617
Wenn Sie sich also umsehen, werden Sie sehen, dass sich

26
00:01:58,617 --> 00:02:03,572
in Ihrem Quellordner eine Datei namens test.ts befindet.

27
00:02:03,572 --> 00:02:07,269
Öffnen Sie also die Datei test.ts.

28
00:02:07,269 --> 00:02:11,518
Sie werden auch sehen, dass es hier einen anderen Ordner namens e2e gibt.

29
00:02:11,518 --> 00:02:16,409
Darauf werden wir in der nächsten Übung zurückkommen.

30
00:02:16,409 --> 00:02:21,232
Aber im Ordner test.ts werden Sie sehen, dass

31
00:02:21,232 --> 00:02:25,084
hier Ihre Karma-Unterstützung konfiguriert wird. Wenn Sie

32
00:02:25,084 --> 00:02:33,907
also in diese test.ts-Datei gehen,

33
00:02:33,907 --> 00:02:38,261
werden standardmäßig, wenn Sie die eckige CLS-Unterstützung für den Test verwenden, die Tests für alle Komponenten und

34
00:02:38,261 --> 00:02:43,750
Dienste ausgeführt, die in Ihrer Winkelanwendung enthalten sind.

35
00:02:43,750 --> 00:02:49,017
Jetzt werde ich Ihnen zeigen, wie Sie für

36
00:02:49,017 --> 00:02:53,516
eine bestimmte Komponente testen, die MenuComponent.

37
00:02:53,516 --> 00:03:00,469
Also möchte ich mich darauf beschränken, nur die Menükomponente.spec-Datei zu

38
00:03:00,469 --> 00:03:04,696
verwenden und nur für die Menükomponente zu testen.

39
00:03:04,696 --> 00:03:07,823
Also, gehen Sie in die test.ts-Datei.

40
00:03:07,823 --> 00:03:16,388
Eine Möglichkeit, wie wir den Angular CLIs Test konfigurieren können, um den Test nur für

41
00:03:16,388 --> 00:03:22,397
eine bestimmte Komponente auszuführen, besteht darin, hier zu dieser Zeile zu gehen,

42
00:03:22,397 --> 00:03:29,308
die const context sagt und dann dies in Menü ändern,

43
00:03:29,308 --> 00:03:36,088
können Sie /menu\ .component und spec.ts Datei sehen.

44
00:03:36,088 --> 00:03:41,615
Früher war es nur/\ .spec.ts Datei, was bedeutete, dass

45
00:03:41,615 --> 00:03:47,992
Sie alle Spezifikationsdateien ausführen, die sich in Ihrem Projektquellordner befinden.

46
00:03:47,992 --> 00:03:51,379
Also, jetzt, indem ich dies hier

47
00:03:51,379 --> 00:03:57,225
spezifiziere, bin ich daran interessiert, den Test nur für die Menükomponenten-Spezifikationsdatei hier auszuführen.

48
00:03:57,225 --> 00:04:02,285
Jetzt finde ich das heraus, indem ich auf dem

49
00:04:02,285 --> 00:04:08,268
Stapelüberlauf herumsuche, wo ich jemanden gefunden habe, der mir die Antwort darauf gibt und auf eine

50
00:04:08,268 --> 00:04:12,985
Ressource auf Angular CLI verweist, und

51
00:04:12,985 --> 00:04:18,393
so habe ich herausgefunden, dass dies der Weg ist,

52
00:04:18,393 --> 00:04:23,019
den Test auf die Testdatei einer bestimmten Komponente zu beschränken.

53
00:04:23,019 --> 00:04:28,465
Nachdem wir also eine Änderung an der Datei test.ts vorgenommen haben, speichern wir die Änderung.

54
00:04:28,465 --> 00:04:32,622
Jetzt werden wir versuchen, unseren Test auf der Menükomponente auszuführen.

55
00:04:32,622 --> 00:04:37,198
Wie Sie sehen, haben wir in der Menükomponente bereits die

56
00:04:37,198 --> 00:04:42,051
Menükomponente .spec.ts Datei, die bereits Code enthält.

57
00:04:42,051 --> 00:04:45,631
Lassen Sie uns versuchen, diesen Test durchzuführen und sehen, was passiert.

58
00:04:45,631 --> 00:04:50,650
Gehen Sie zum Terminal, fügen Sie die Eingabeaufforderung hinzu, geben Sie ng test ein, und dies

59
00:04:50,650 --> 00:04:56,644
führt zu einer Angular CLI, die den Test für die Menükomponente startet.

60
00:04:56,644 --> 00:04:59,875
Wenn Sie dies also eingeben und die Return

61
00:04:59,875 --> 00:05:05,216
drücken, beginnt Angular CLI mit der Kompilierung Ihrer eckigen Anwendung.

62
00:05:05,216 --> 00:05:10,129
Es wird auch ein Browserfenster öffnen, in meinem Fall öffnet es ein

63
00:05:10,129 --> 00:05:13,874
Chrome-Browserfenster und verwendet dann dieses Browserfenster, um den Test auszuführen.

64
00:05:13,874 --> 00:05:20,992
Und Sie sehen, dass auf der Rückseite, Sie haben das Chrome-Browserfenster laufen und

65
00:05:20,992 --> 00:05:25,980
es ist alles voll von rot und eine ganze Reihe von Wörtern gibt.

66
00:05:25,980 --> 00:05:30,937
Die gleichen Informationen werden auch in Ihrem Konsolenfenster ausgedruckt,

67
00:05:30,937 --> 00:05:34,980
und daraus kann ich sehen, dass mein Test nicht korrekt ausgeführt wurde.

68
00:05:34,980 --> 00:05:41,070
In meiner Testdatei ist etwas nicht richtig konfiguriert, daher muss ich

69
00:05:41,070 --> 00:05:47,272
meine Testdatei bearbeiten, um entsprechende Unterstützung für die korrekte Ausführung dieses Tests zu bieten.

70
00:05:47,272 --> 00:05:51,425
Gehen wir also zur Menükomponente spec.ts Datei und

71
00:05:51,425 --> 00:05:54,430
bereiten dann unseren Test entsprechend vor.

72
00:05:54,430 --> 00:06:00,134
Jetzt können wir den ng Test hier laufen lassen.

73
00:06:00,134 --> 00:06:04,337
Jedes Mal, wenn Sie Änderungen an der Datei mini component.ts oder

74
00:06:04,337 --> 00:06:07,169
der Datei mini component.spec.ts vornehmen und

75
00:06:07,169 --> 00:06:12,078
die Änderungen speichern, wird dieser Test automatisch an diesem Punkt ausgeführt.

76
00:06:12,078 --> 00:06:17,011
Lassen Sie uns also auf die Datei MenuComponent.spect.ts gehen. Wenn wir

77
00:06:17,011 --> 00:06:21,882
zur Datei MenuComponent.spect.ts gehen,

78
00:06:21,882 --> 00:06:30,417
verstehen wir, dass die spect-Datei die Jasmine-Syntax verwendet, um den Test zu beschreiben.

79
00:06:30,417 --> 00:06:33,478
So haben Sie bereits bemerkt, dass es hier etwas gibt

80
00:06:33,478 --> 00:06:38,118
, das mit beschreiben beginnt und dann eine Funktion darin definiert ist.

81
00:06:38,118 --> 00:06:43,174
Das ist es, worauf ich mich bezog, als ich früher über die Jasmine-Syntax sprach.

82
00:06:43,174 --> 00:06:47,961
Und auch wenn Sie nach unten scrollen, sehen Sie ein es oder so drin.

83
00:06:47,961 --> 00:06:53,922
Außerdem sehen Sie hier etwas namens BeforeEach.

84
00:06:53,922 --> 00:06:59,594
Lassen Sie uns diese Datei ein wenig genauer untersuchen, um zu verstehen

85
00:06:59,594 --> 00:07:05,794
, wie diese Datei konfiguriert ist und wie dieser Test in dieser speziellen Datei eingerichtet wird.

86
00:07:05,794 --> 00:07:10,843
In dieser Testdatei werden Sie feststellen, dass

87
00:07:10,843 --> 00:07:17,979
wir hier eine Reihe von Klassen von Angular-Kerntests importieren.

88
00:07:17,979 --> 00:07:22,874
Mit diesem Modul können Sie die Testunterstützung für

89
00:07:22,874 --> 00:07:29,603
Ihre Winkelanwendung bereitstellen und den Test für Ihre Komponente entwerfen.

90
00:07:29,603 --> 00:07:33,304
Sie sehen also, dass ich async und

91
00:07:33,304 --> 00:07:39,105
ComponentFixture und TestBed aus dieser Testbibliothek importiere.

92
00:07:39,105 --> 00:07:40,955
Ich werde es Testbibliothek nennen.

93
00:07:40,955 --> 00:07:44,783
Außerdem sehen Sie, dass die MenuComponent auch hier importiert wird.

94
00:07:44,783 --> 00:07:47,220
Jetzt, wenn wir diese beiden verstehen,

95
00:07:47,220 --> 00:07:51,788
lassen Sie uns den Code runtergehen, um zu verstehen, was wir hier tun wollen.

96
00:07:51,788 --> 00:07:56,358
Also, hier, wie Sie erwarten, wird diese Beschreibung hier

97
00:07:56,358 --> 00:08:02,330
spezifiziert, dass diese spezielle Funktion beschreibt,

98
00:08:02,330 --> 00:08:08,129
Ein Jasmin-basierter Test, den wir für unsere Angular-Anwendung angeben.

99
00:08:08,129 --> 00:08:11,056
Wenn Sie sich also die Beschreibung hier ansehen,

100
00:08:11,056 --> 00:08:15,181
werden Sie sehen, dass dies all diesen Code hier enthält.

101
00:08:15,181 --> 00:08:19,950
Dies ist also Teil eines einzigen Satzes von Tests, die wir ausführen, sind unsere

102
00:08:19,950 --> 00:08:21,670
Menükomponente.

103
00:08:21,670 --> 00:08:26,670
Also in der Beschreibung, werden Sie sehen, dass es hier eine Zeichenfolge gibt.

104
00:08:26,670 --> 00:08:32,120
Dies gibt diesen speziellen Satz von Tests an, die Sie hier ausführen.

105
00:08:32,120 --> 00:08:34,130
Also, es sagt auf der Menükomponente.

106
00:08:34,130 --> 00:08:36,770
Hier können Sie also angeben, welche Zeichenfolge Sie wollen.

107
00:08:36,770 --> 00:08:39,930
Sie können dies als eine Beschreibung verwenden, um

108
00:08:39,930 --> 00:08:43,610
anzugeben, was dieser bestimmte Satz von Tests tut.

109
00:08:43,610 --> 00:08:46,930
Also hier, ich bleibe bei einem Vor-Ding.

110
00:08:46,930 --> 00:08:49,380
Wir versuchen, die Menükomponente zu testen.

111
00:08:49,380 --> 00:08:53,320
Und danach sehen Sie, dass wir hier eine Addo-Funktion angeben.

112
00:08:53,320 --> 00:08:57,036
Innerhalb dieser Addo-Funktion werden wir den Test konstruieren.

113
00:08:57,036 --> 00:09:00,700
Für unsere MenuComponent hier.

114
00:09:00,700 --> 00:09:05,670
Danach werden Sie sehen, dass wir eine Variable namens Komponente deklarieren,

115
00:09:05,670 --> 00:09:08,080
die vom Typ MenuComponent ist.

116
00:09:08,080 --> 00:09:11,950
Ab und zu deklarieren wir auch eine Fixture-Variable,

117
00:09:11,950 --> 00:09:14,140
die vom Typ ComponentFixture ist.

118
00:09:15,390 --> 00:09:19,060
Welches ist vom Typ MenuComponent.

119
00:09:19,060 --> 00:09:21,180
Warum ist das interessant?

120
00:09:21,180 --> 00:09:24,450
Jetzt

121
00:09:24,450 --> 00:09:27,130
haben wir innerhalb unserer Angular Anwendung die MenuComponent, die wir bereits entwickelt haben.

122
00:09:27,130 --> 00:09:29,990
Also in dieser Testdatei

123
00:09:29,990 --> 00:09:35,310
werden wir diese MenuComponent mit dem eckigen TestBed erstellen,

124
00:09:35,310 --> 00:09:38,110
und dann werden wir die Tests auf der MenuComponent durchführen.

125
00:09:38,110 --> 00:09:40,580
Also werden wir die MenuComponent isolieren und

126
00:09:40,580 --> 00:09:45,760
dann Komponententests für diese spezifische Komponente durchführen.

127
00:09:45,760 --> 00:09:50,470
Nun, dies ist, wo die Winkel-Test-Dienstprogramme

128
00:09:50,470 --> 00:09:54,900
, die mit Unterstützung mit TestBed kommen.

129
00:09:54,900 --> 00:09:58,890
Das TestBed ermöglicht es mir, die Umgebung einzurichten, in der

130
00:09:58,890 --> 00:10:01,280
ich meine Winkelkomponente testen kann.

131
00:10:01,280 --> 00:10:04,935
Hier sehen Sie, dass wir TestBed sagen und

132
00:10:04,935 --> 00:10:11,049
dann die Konfigurations-Test-Modul-Methode der TestBed Klasse hier aufrufen.

133
00:10:11,049 --> 00:10:14,233
Und in diesem Konfigurations-Testmodul

134
00:10:14,233 --> 00:10:19,406
können Sie eine Reihe von Dingen deklarieren, und Sie werden sehen, wie ich hier mehr hinzufüge.

135
00:10:19,406 --> 00:10:24,296
Dies funktioniert genau wie die NG-Modulkonfiguration

136
00:10:24,296 --> 00:10:30,950
, die Sie für unser at Modul dort tun.

137
00:10:30,950 --> 00:10:35,375
Hier werden also alle Informationen deklariert, die Sie zum Einrichten der MenuComponent benötigen.

138
00:10:35,375 --> 00:10:40,022
So kann der NG-Modellteil, den Sie im App-Modul gesehen haben,

139
00:10:40,022 --> 00:10:45,999
eine ähnliche Art von Syntax hier verwendet werden, um die Unterstützung für das

140
00:10:45,999 --> 00:10:49,690
Testen der MenuComponent hier zu deklarieren.

141
00:10:49,690 --> 00:10:55,849
Und auch danach sehen Sie diese Funktion, die auf CompileComponents aufgerufen wird.

142
00:10:55,849 --> 00:11:00,205
Diese Methode kompiliert also die MenuComponent und

143
00:11:00,205 --> 00:11:03,427
macht sie bereit für das Testen.

144
00:11:03,427 --> 00:11:08,852
Beachten Sie auch, dass diese ganze Sache, diese Funktion hier,

145
00:11:08,852 --> 00:11:14,250
in etwas eingeschlossen ist, das hier asynchron genannt wird.

146
00:11:14,250 --> 00:11:16,548
Warum brauchen wir diesen Asynchron?

147
00:11:16,548 --> 00:11:21,315
Nun, weil die Vorbereitung der Komponenten mit dieser

148
00:11:21,315 --> 00:11:25,711
CompileComponents Methode einige Zeit in Anspruch nimmt.

149
00:11:25,711 --> 00:11:30,643
Und bis dies abgeschlossen ist, können wir nicht mit den Tests fortfahren. Wenn wir

150
00:11:30,643 --> 00:11:34,583
also das asynchrone Modul verwenden, geben wir im Wesentlichen an, dass

151
00:11:34,583 --> 00:11:39,432
ich darauf warten werde, dass diese ganze Sache abgeschlossen ist, bevor ich fortfahre.

152
00:11:39,432 --> 00:11:42,107
Das Asynche-Modul, wie Sie sehen,

153
00:11:42,107 --> 00:11:47,690
umschließt eine Testfunktion in eine asynchrone Testzone.

154
00:11:47,690 --> 00:11:52,510
Das bedeutet also, dass dieser Test automatisch abgeschlossen wird,

155
00:11:52,510 --> 00:11:56,830
wenn alle asynchronen Aufrufe innerhalb dieser Zone ausgeführt werden.

156
00:11:56,830 --> 00:12:03,755
Das ist also, was die Verwendung des Asynchron, den wir hier haben, tut.

157
00:12:03,755 --> 00:12:08,206
Was das bedeutet, ist, dass Sie diese Sync-Funktion verwenden können,

158
00:12:08,206 --> 00:12:14,442
entweder in der vor jedem oder in der es auch, also innerhalb der es, unsere Deklaration.

159
00:12:14,442 --> 00:12:20,032
Also, wenn Sie innerhalb der es auch sehen, werden Sie sehen, dass Sie die asynchrone verwenden können.

160
00:12:20,032 --> 00:12:24,160
Für den Fall, dass Sie hier Operationen haben, die asynchron ausgeführt werden.

161
00:12:24,160 --> 00:12:29,500
Dann müssen Sie warten, bis diese Vorgänge abgeschlossen sind, bis dieser Test abgeschlossen ist.

162
00:12:29,500 --> 00:12:33,996
Wenn Sie beispielsweise einen Dienst aufrufen und warten,

163
00:12:33,996 --> 00:12:37,070
bis der Dienst den Wert zurückgibt.

164
00:12:37,070 --> 00:12:41,997
Alles, was abgeschlossen werden muss, bevor Sie fortfahren können.

165
00:12:41,997 --> 00:12:48,603
Diese werden also aktiviert, indem diese asynchrone verwendet wird, um diese Funktion hier zu umgeben.

166
00:12:48,603 --> 00:12:53,726
Nun, zusätzlich, die zweite BeforeEach, jetzt haben wir

167
00:12:53,726 --> 00:12:59,592
dies in zwei separate vor Each hier getrennt, weil wir wollen, dass dies abgeschlossen ist.

168
00:12:59,592 --> 00:13:04,592
Und diese CompileComponents wird eine gewisse Zeit in Anspruch nehmen,

169
00:13:04,592 --> 00:13:09,000
besonders wenn Ihre Komponente eine externe Vorlage verwendet,

170
00:13:09,000 --> 00:13:11,570
wie wir es in unserer MenuComponent tun.

171
00:13:11,570 --> 00:13:16,850
Es erfordert also einige Zeit, bis sich die externe Vorlage bereit macht, damit

172
00:13:16,850 --> 00:13:19,430
meine Tests vorwärts gehen.

173
00:13:19,430 --> 00:13:22,210
Also, wir müssen warten, bis diese ganze Sache abgeschlossen ist.

174
00:13:22,210 --> 00:13:25,634
Deshalb, nachdem dies abgeschlossen ist,

175
00:13:25,634 --> 00:13:30,449
dann werden wir zum zweiten Teil kommen, wo wir einige

176
00:13:30,449 --> 00:13:35,710
Referenzen auf einige Werte aus dem Testbett bekommen werden.

177
00:13:35,710 --> 00:13:40,752
Nun, was ist diese BeforeEach-Funktion, die Sie hier tun?

178
00:13:40,752 --> 00:13:45,718
Was die BeforeEach bedeutet, ist,

179
00:13:45,718 --> 00:13:49,313
dass, was auch immer Sie hier deklarieren,

180
00:13:49,313 --> 00:13:53,012
diese Funktion vor jedem Test ausgeführt wird, den Sie später mit dem es angeben werden.

181
00:13:53,012 --> 00:13:57,734
Mit diesem BeforeEach können Sie also die anfängliche

182
00:13:57,734 --> 00:14:02,253
Konfiguration für Ihren Test einrichten, um fortzufahren.

183
00:14:02,253 --> 00:14:05,923
Das bedeutet, dass wir hier unser TestBed einrichten,

184
00:14:05,923 --> 00:14:10,330
unsere Menükomponente vorbereiten und dann ein paar Dinge für

185
00:14:10,330 --> 00:14:14,752
unsere Menükomponente einrichten, bevor wir den Test durchführen.

186
00:14:14,752 --> 00:14:19,292
Also für jeden Test, den Sie mit einem es hier angeben werden, werden

187
00:14:19,292 --> 00:14:23,428
diese vor jedem, was Sie in diesem vor jedem angeben,

188
00:14:23,428 --> 00:14:26,692
ausgeführt, bevor der Test durchgeführt wird.

189
00:14:26,692 --> 00:14:30,008
Also hier, wie Sie sehen können, bereite ich das TestBed vor.

190
00:14:30,008 --> 00:14:34,980
Danach bekomme ich Zugang zur Vorrichtung.

191
00:14:34,980 --> 00:14:39,143
Also verwende ich das TestBed, ich sage CreateComponent und MenuComponent.

192
00:14:39,143 --> 00:14:43,782
Dies wird mir also einen Verweis auf die MenuComponent zurückgeben, die

193
00:14:43,782 --> 00:14:47,215
ich hier in meinem Testskript erstelle, und

194
00:14:47,215 --> 00:14:52,130
dann einen Verweis darauf erhalten, weil ich einen Verweis

195
00:14:52,130 --> 00:14:57,178
darauf brauche, um dort einige Manipulationen an dieser Komponente durchzuführen.

196
00:14:57,178 --> 00:15:02,608
Darüber hinaus erhalte ich von der Fixture einen Zugriff auf die

197
00:15:02,608 --> 00:15:07,324
Komponenteninstanz, die hier von meiner Komponenten-Fixture erstellt wird.

198
00:15:07,324 --> 00:15:12,828
Wie Sie sehen können,

199
00:15:12,828 --> 00:15:18,799
gibt mir die Komponente Fixture des Typs MenuComponent und dann den Aufruf der ComponentInstance Zugriff auf diese spezifische

200
00:15:18,799 --> 00:15:25,259
Menükomponente, die ich innerhalb des TestBed für die Durchführung der Komponententests erstellt habe.

201
00:15:25,259 --> 00:15:30,004
Nun, danach nennen wir dies „detectChanges“.

202
00:15:30,004 --> 00:15:35,482
Dies bedeutet nun, dass dies erst nach Abschluss aller Änderungen vorangeht

203
00:15:35,482 --> 00:15:40,254
und dann erkannt wird, dass die Änderungen abgeschlossen sind.

204
00:15:40,254 --> 00:15:45,686
Dies löst also einen Änderungserkennungszyklus für diese Komponente aus.

205
00:15:45,686 --> 00:15:50,323
Das bedeutet also, dass Sie

206
00:15:50,323 --> 00:15:54,086
zuvor Änderungen vorgenommen haben, alle Änderungen erkannt und

207
00:15:54,086 --> 00:16:00,170
alles stabilisiert wird, bevor Sie mit Ihrem Test fortfahren können.

208
00:16:00,170 --> 00:16:07,500
Nun, danach werden wir unsere es verwenden, um unseren ersten Test hier zu konfigurieren.

209
00:16:07,500 --> 00:16:10,500
Was ist der erste Test, den wir hier machen?

210
00:16:10,500 --> 00:16:11,520
Der erste Test,

211
00:16:11,520 --> 00:16:15,670
was wir testen werden, ist sicherzustellen, dass die Komponente erstellt wurde.

212
00:16:15,670 --> 00:16:21,848
Also, in diesem hier verwende ich die Jasmin-Syntax und ich sage es.

213
00:16:21,848 --> 00:16:27,035
Und dann können Sie hier eine Beschreibung in Form einer Zeichenfolge geben,

214
00:16:27,035 --> 00:16:31,760
um anzugeben, worüber dieser Test tatsächlich getestet wird.

215
00:16:31,760 --> 00:16:33,640
Also, was wir sagen, ist, dass

216
00:16:33,640 --> 00:16:37,540
wir testen, um zu sehen, ob die Komponente erstellt wurde oder nicht.

217
00:16:37,540 --> 00:16:40,810
Um das zu tun, sage ich, es sollte bedeuten, dass

218
00:16:40,810 --> 00:16:44,610
dieses Setup hier die Komponente korrekt erstellt haben sollte.

219
00:16:44,610 --> 00:16:49,350
Deshalb verwende ich hier drin diese Methode namens erwarten.

220
00:16:49,350 --> 00:16:53,760
Also nimmt die erwartete Methode hier einen Wert ein, und

221
00:16:53,760 --> 00:16:57,840
dann können Sie testen, ob dieser Wert etwas befriedigt.

222
00:16:57,840 --> 00:17:04,640
Also hier sagen wir toBetruthy, was bedeutet, dass dieser besondere Wert wahr sein sollte.

223
00:17:04,640 --> 00:17:09,950
Das ist, was durch diese Methode, die hier genannt tobeTruthy angegeben wird.

224
00:17:09,950 --> 00:17:15,010
Sie können auch toBefalsy sagen, was bedeutet, dass sollte falsch zu bewerten.

225
00:17:15,010 --> 00:17:15,873
Aber in diesem Fall

226
00:17:15,873 --> 00:17:19,510
testen wir, um sicherzustellen, dass die Komponente korrekt erstellt wurde.

227
00:17:19,510 --> 00:17:24,000
Deshalb sagen wir, dass wir hier Betruthy erwarten.

228
00:17:24,000 --> 00:17:28,877
Dies ist also ein einfacher Test, den wir tun, um sicherzustellen, dass unsere

229
00:17:28,877 --> 00:17:32,404
Komponente korrekt erstellt wird.

230
00:17:32,404 --> 00:17:37,713
Aber wie wir erkennen, wenn ich diesen Test durchführe, läuft er nicht richtig.

231
00:17:37,713 --> 00:17:42,638
Lassen Sie uns schnell sehen und sehen, was das Problem bei

232
00:17:42,638 --> 00:17:47,770
unserer Komponentenerstellung im Konsolenfenster dort ist.

233
00:17:47,770 --> 00:17:51,390
Gehen Sie zurück zum Konsolenfenster, lassen Sie mich einfach zurückblättern und

234
00:17:51,390 --> 00:17:54,840
sehen, wo das Problem ist.

235
00:17:54,840 --> 00:17:59,820
Und ich fange an zu bemerken, dass dies angibt, dass es

236
00:17:59,820 --> 00:18:04,480
einige der Dinge, die meine Komponente verwendet, nicht zu erkennen scheint.

237
00:18:04,480 --> 00:18:09,065
Insbesondere sagt es, dass der MDSpinach

238
00:18:09,065 --> 00:18:13,191
etwas ist, das er nicht erkennt,

239
00:18:13,191 --> 00:18:17,330
die mdGetGridList und ein paar andere Dinge.

240
00:18:17,330 --> 00:18:21,289
Das deutet sofort darauf hin, dass ich ein paar weitere

241
00:18:21,289 --> 00:18:26,170
Konfigurationen in meiner Testdatei durchführen muss, bevor mein Test korrekt ausgeführt werden kann.

242
00:18:26,170 --> 00:18:30,994
Gehen wir also zurück zu unserer Spezifikationsdatei und nehmen einige Änderungen daran vor.

243
00:18:30,994 --> 00:18:34,142
Zurück zu unserer Spezifikationsdatei,

244
00:18:34,142 --> 00:18:40,182
aus unserer Erinnerung daran, wie wir die Vorlage erstellt haben.

245
00:18:40,182 --> 00:18:44,865
Wir wissen, dass wir innerhalb der Vorlage einen Router-Link in der

246
00:18:44,865 --> 00:18:45,605
Vorlage MenuComponent hatten.

247
00:18:45,605 --> 00:18:50,325
Daher brauche ich Unterstützung für das Routing, um diesen

248
00:18:50,325 --> 00:18:54,698
Routerlink zu erkennen, den wir in der Datei MenuComponent.html verwendet haben.

249
00:18:54,698 --> 00:18:59,640
Also hier werde ich

250
00:18:59,640 --> 00:19:03,926
eine weitere Testunterstützung importieren,

251
00:19:03,926 --> 00:19:09,199
die als RouterTestingModule bezeichnet

252
00:19:09,199 --> 00:19:18,615
wird, die von Angular/Router/Test-Bibliothek hier verfügbar ist.

253
00:19:18,615 --> 00:19:21,625
Dieses Router-Testmodul ermöglicht es mir,

254
00:19:21,625 --> 00:19:24,135
einige Aspekte über meinen Router zu konfigurieren.

255
00:19:24,135 --> 00:19:28,235
Wir werden sehen, dass die Art und Weise, wie wir dies verwenden, ein wenig anders ist als das Router-Modul

256
00:19:28,235 --> 00:19:30,195
, das wir in unserer Anwendung verwendet haben.

257
00:19:30,195 --> 00:19:34,835
Also werden wir das Routing-Testmodul importieren, auch Sie beachten,

258
00:19:34,835 --> 00:19:39,640
dass wir einige Animationen verwenden, und

259
00:19:39,640 --> 00:19:45,660
auch die Angular Materialkomponente in unserer Vorlage verwenden.

260
00:19:45,660 --> 00:19:49,410
Also muss ich

261
00:19:49,410 --> 00:19:57,079
das BrowserAnimationsModule in meine Testdatei importieren.

262
00:19:58,490 --> 00:20:05,070
Dies kommt also vom Winkel/Plattform/Browser.

263
00:20:05,070 --> 00:20:09,619
Jetzt werden Sie feststellen, dass wir dies explizit hier tun müssen, einfach weil

264
00:20:10,700 --> 00:20:16,960
in der eigentlichen Angular-Anwendung all dies im App-Modul war,

265
00:20:16,960 --> 00:20:20,310
und so war das für die Komponenten verfügbar.

266
00:20:20,310 --> 00:20:24,340
Im Moment testen wir diese Komponente, die MenuComponent isoliert,

267
00:20:24,340 --> 00:20:27,500
deshalb weiß es nicht über all diese Dinge, also

268
00:20:27,500 --> 00:20:31,190
müssen wir alle diese Dinge hier explizit angeben.

269
00:20:31,190 --> 00:20:38,569
Also werde ich das von der IM-Plattform-Browser-Animation hier importieren.

270
00:20:38,569 --> 00:20:43,358
Also angular.platform.browser-Animationen, die

271
00:20:43,358 --> 00:20:44,220
hier das Browser-Animationsmodul importieren.

272
00:20:44,220 --> 00:20:47,300
Lassen Sie mich das Flex-Layer-Modul

273
00:20:47,300 --> 00:20:53,060
einschließen, also werde ich Angular FlexLayout einschließen.

274
00:20:53,060 --> 00:20:58,525
Also diese werden benötigt, weil ich sie in der Vorlage brauche,

275
00:20:58,525 --> 00:21:02,605
ich werde auch dieses Gericht importieren aus,

276
00:21:06,495 --> 00:21:09,348
Shared/Dish, weil wie Sie später sehen werden,

277
00:21:09,348 --> 00:21:14,125
ich muss konfigurieren, A,

278
00:21:20,002 --> 00:21:26,070
DishService weil mein MenuComponent

279
00:21:26,070 --> 00:21:31,033
vom DishService abhängt, also

280
00:21:31,033 --> 00:21:35,170
brauche ich das auch an Ort und Stelle.

281
00:21:35,170 --> 00:21:39,170
Obwohl Sie sehen werden, dass ich das aufhalten werde.

282
00:21:39,170 --> 00:21:44,860
Ich werde das in kurzer Zeit erklären, und ich muss auch noch ein paar Dinge importieren.

283
00:21:44,860 --> 00:21:47,410
Ich werde DISCHES importieren,

284
00:21:48,530 --> 00:21:53,260
Sie erinnern sich, dass wir diese Konstante namens

285
00:21:56,870 --> 00:22:01,640
DISCHES verwenden, die wir aus der shared/dishes.ts Datei exportiert haben.

286
00:22:01,640 --> 00:22:05,650
Ich werde das brauchen, um noch ein paar Dinge zu konfigurieren.

287
00:22:05,650 --> 00:22:09,702
Ich werde auch die BaseURL importieren.

288
00:22:11,343 --> 00:22:19,105
Was ich in der,

289
00:22:21,057 --> 00:22:23,368
Shared/Base-URL-Datei deklariert habe.

290
00:22:23,368 --> 00:22:28,692
Und auch muss ich

291
00:22:28,692 --> 00:22:33,294
das Observable von,

292
00:22:35,992 --> 00:22:41,319
rxjs, slash importieren, weil ich

293
00:22:41,319 --> 00:22:47,220
Observable ein wenig später verwenden werde, wenn ich ein paar Dinge konfiguriere.

294
00:22:47,220 --> 00:22:50,806
Also, jetzt habe ich all diese Dinge importiert. Wenn Sie

295
00:22:50,806 --> 00:22:56,157
in die TestBed Konfiguration einsteigen, sehen Sie, dass dieser

296
00:22:56,157 --> 00:23:02,813
Teil genau wie der Engine-Modul-Dekorator ist, den wir im App-Modul haben.

297
00:23:02,813 --> 00:23:07,450
Hier kann ich also auch die Importe verwenden,

298
00:23:07,450 --> 00:23:11,000
wie ich es mit dem Motormodul getan habe.

299
00:23:11,000 --> 00:23:16,900
Und innerhalb der Importe werde ich das

300
00:23:16,900 --> 00:23:21,765
BrowserAnimation-Modul importieren, weil das etwas ist, das ich brauche, und

301
00:23:21,765 --> 00:23:25,090
dann auch das FlexLayout-Modul importieren.

302
00:23:26,660 --> 00:23:32,690
Und auch das RouterTestingModule, weil

303
00:23:32,690 --> 00:23:36,540
ich das RouterTestingModule benötigen würde, um ein paar Dinge zu konfigurieren.

304
00:23:36,540 --> 00:23:40,705
Wenn Sie nun das RouterTestingModule verwenden, müssen Sie diese Methode

305
00:23:40,705 --> 00:23:46,950
namens WithRoutes verwenden, anstatt ForRoot zu verwenden, wie wir hier mit dem Router-Modul verwendet haben.

306
00:23:46,950 --> 00:23:52,400
In diesem WithRoutes können Sie

307
00:23:52,400 --> 00:23:58,460
hier einige Standardrouten angeben, die Sie für Ihre spezifische Anwendung benötigen.

308
00:23:58,460 --> 00:24:03,737
Ich werde nur einen einzigen Pfad hier konfigurieren,

309
00:24:03,737 --> 00:24:09,359
und das ist gut genug für mich, um dieses Modul hier zu testen.

310
00:24:09,359 --> 00:24:14,497
Also werde ich nur Pfad sagen: 'Menü'

311
00:24:14,497 --> 00:24:19,021
und Komponente: MenuComponent.

312
00:24:19,021 --> 00:24:24,235
Da die MenuComponent-Vorlagen bestimmte Materialkomponenten verwenden,

313
00:24:24,235 --> 00:24:26,523
lassen Sie uns diese importieren.

314
00:24:26,523 --> 00:24:35,263
Also importieren wir das MatGridListModule

315
00:24:35,263 --> 00:24:45,034
aus @angular /material/grid-list und

316
00:24:45,034 --> 00:24:54,033
auch das MatProgressSpinnerModule aus

317
00:24:54,033 --> 00:25:03,747
@angular /material/progress-spinner.

318
00:25:04,327 --> 00:25:09,123
Und wenn wir sie importiert haben, dann gehen wir weiter

319
00:25:09,123 --> 00:25:13,322
und nehmen sie in die Importe unten auf.

320
00:25:13,322 --> 00:25:19,568
Lassen Sie uns also das MatGridListModule und das MatProgressSpinnerModule hinzufügen.

321
00:25:19,568 --> 00:25:23,047
Und das ist alles, was ich brauche, um

322
00:25:23,047 --> 00:25:28,997
diese speziellen Importe hier zu konfigurieren.

323
00:25:28,997 --> 00:25:34,422
Zusammen mit den Importen haben wir also die Deklarationen, in denen ich

324
00:25:34,422 --> 00:25:41,067
die MenuComponent hier verwendet habe, ich kann auch die Anbieter hier konfigurieren.

325
00:25:41,067 --> 00:25:43,295
Also muss ich die Anbieter hier konfigurieren.

326
00:25:43,295 --> 00:25:47,998
Jetzt hier werden wir

327
00:25:47,998 --> 00:25:52,898
ein paar Stubs hier erstellen, also

328
00:25:52,898 --> 00:25:58,779
werde ich sagen, bieten: DishService.

329
00:25:58,779 --> 00:26:02,825
Nun, der DishService, den wir hier nutzen werden, wird nicht der echte

330
00:26:02,825 --> 00:26:03,713
DishService sein.

331
00:26:03,713 --> 00:26:08,422
Wenn Sie eine Komponente testen, möchten Sie keinen echten Dienst verwenden.

332
00:26:08,422 --> 00:26:12,750
Stattdessen riskieren Sie, den Service auszustocken, und

333
00:26:12,750 --> 00:26:19,262
verwenden Sie dann einen Stub DishService, den ich als DishServiceHub nennen werde.

334
00:26:19,262 --> 00:26:27,040
Also werde ich sagen, UseValue: DishServiceHub.

335
00:26:27,040 --> 00:26:32,018
Dies wäre also eine Stubfunktion, die ich verwenden werde,

336
00:26:32,018 --> 00:26:34,904
um den DishService hier zu markieren.

337
00:26:34,904 --> 00:26:38,272
Das ist also eine, von der ich Gebrauch machen werde.

338
00:26:38,272 --> 00:26:42,776
Und auch die zweite, die ich

339
00:26:42,776 --> 00:26:47,455
verwenden werde, ist BaseURL,

340
00:26:47,455 --> 00:26:54,040
die ich den Wert als BaseURL verwenden werde

341
00:26:54,040 --> 00:26:59,951
, die wir bereits früher importiert haben.

342
00:26:59,951 --> 00:27:06,280
Also, jetzt, mit diesem habe ich tatsächlich mein Testmodul konfiguriert,

343
00:27:06,280 --> 00:27:11,644
also beachten Sie, dass die Art und Weise, wie wir dies angeben, genau so ist, wie

344
00:27:11,644 --> 00:27:17,160
wir den NG-Modul-Dekorator für unser App-Modul spezifizieren.

345
00:27:17,160 --> 00:27:22,250
Und hier konfigurieren wir nur diejenigen, die von der MenuComponent benötigt werden, also

346
00:27:22,250 --> 00:27:27,890
habe ich nicht die anderen, die wir im App-Modul selbst verwenden.

347
00:27:27,890 --> 00:27:32,220
So konfigurieren wir das Testmodul.

348
00:27:32,220 --> 00:27:36,600
Das eine, was fehlt, ist dieser DishServiceHub.

349
00:27:36,600 --> 00:27:41,718
Was ich also tun werde, ist

350
00:27:41,718 --> 00:27:47,283
hier eine Funktion zu implementieren und

351
00:27:47,283 --> 00:27:53,072
aufzurufen, die DishServiceHub

352
00:27:53,072 --> 00:27:59,973
hier ein einfaches JavaScript-Objekt sein

353
00:27:59,973 --> 00:28:05,537
lassen, das ich es

354
00:28:05,537 --> 00:28:10,679
anstelle des echten Dienstes handeln lasse.

355
00:28:10,679 --> 00:28:13,067
Wir können Dienstleistungen wie diese aussteppen, wie hier zu sehen.

356
00:28:13,067 --> 00:28:17,807
Also hier drinnen werde ich nur

357
00:28:17,807 --> 00:28:21,846
eine einfache Funktion bereitstellen,

358
00:28:21,846 --> 00:28:26,412
die GetDishs-Funktion hier,

359
00:28:26,412 --> 00:28:33,803
die Observable of Dish Array-Typ zurückgibt.

360
00:28:33,803 --> 00:28:38,133
Genau so wurde dort der Rückgabewert konfiguriert.

361
00:28:38,133 --> 00:28:42,776
Und ich werde

362
00:28:42,776 --> 00:28:48,819
eine Beobachtbarkeit von DISCHES hier zurückgeben.

363
00:28:48,819 --> 00:28:51,692
Also, mit dieser

364
00:28:51,692 --> 00:28:56,349
Stubfunktion hier, was ich tue, ist, dass ich den DishService herausstube und

365
00:28:56,349 --> 00:29:00,906
ihn dann mit dieser einen Methode konfiguriere, die ich für

366
00:29:00,906 --> 00:29:06,158
meinen Cache brauche, getDishes sage, und wenn diese Methode aufgerufen wird,

367
00:29:06,158 --> 00:29:09,355
werde ich nur diesen Wert zurückgeben.

368
00:29:09,355 --> 00:29:11,334
Die Konstante DISLS, hier.

369
00:29:11,334 --> 00:29:16,740
So können Sie jetzt sehen, dass, wie ich steuere, was

370
00:29:16,740 --> 00:29:23,449
der Komponente von einem Stub DishService geliefert wird, den ich gerade hier erstellt habe.

371
00:29:23,449 --> 00:29:27,333
So erstellen Sie Stubs für Ihren DishService.

372
00:29:27,333 --> 00:29:30,570
Der andere Ansatz, den wir für

373
00:29:30,570 --> 00:29:35,910
Fälle verwenden können, in denen wir Dienste verwenden, wird als den Spion verwendet.

374
00:29:37,300 --> 00:29:42,840
Jasmine unterstützt etwas namens Spy, mit dem wir Funktionsaufrufe ausspionieren

375
00:29:42,840 --> 00:29:47,040
und dann die Funktionsaufrufe erfassen und dann auf diesen Funktionsaufruf antworten können.

376
00:29:47,040 --> 00:29:52,981
Das ist also eine andere Möglichkeit, einen gefälschten Dienst anstelle des echten Dienstes zu verwenden.

377
00:29:52,981 --> 00:29:59,778
So können wir jetzt steuern, was an unsere Menükomponente geliefert wird.

378
00:29:59,778 --> 00:30:04,410
Also nach diesen Modifikationen, dann

379
00:30:04,410 --> 00:30:09,424
werden wir in unsere vor jeder Methode gehen hier.

380
00:30:09,424 --> 00:30:14,172
Nach dem asynchronen, was ich tun werde,

381
00:30:14,172 --> 00:30:19,085
ist, dass ich den DishService bekommen werde.

382
00:30:19,085 --> 00:30:24,187
Sie sehen also, dass ich das Testbett benutze und dann die

383
00:30:24,187 --> 00:30:31,415
get-Methode des Testbetts benutze, um den DishService, der hier erstellt wurde,

384
00:30:31,415 --> 00:30:37,819
von diesem speziellen Stub, den wir hier in den Anbietern deklariert haben, zu erreichen.

385
00:30:39,520 --> 00:30:43,140
Dies gibt mir also einen Verweis auf den DishService

386
00:30:43,140 --> 00:30:47,870
, damit ich die Methoden des DishService überall aufrufen kann, wo ich hier brauche.

387
00:30:47,870 --> 00:30:52,453
Nachdem wir diese Änderungen vorgenommen haben, speichern wir die Änderungen und

388
00:30:52,453 --> 00:30:57,679
sehen dann, wie unsere Angular CLI diesen Test nach diesen Änderungen ausführen

389
00:30:57,679 --> 00:31:02,369
wird und ob unser Test zu diesem Zeitpunkt erfolgreich sein wird oder nicht.

390
00:31:02,369 --> 00:31:04,462
Also lassen Sie uns die Änderungen speichern.

391
00:31:04,462 --> 00:31:09,412
Sobald Sie die Änderungen speichern, werden Sie feststellen, dass Ihr

392
00:31:09,412 --> 00:31:13,060
NG-Test den Test erneut starten wird.

393
00:31:13,060 --> 00:31:16,310
Es wird also die Anwendung kompilieren und dann den Test erneut ausführen.

394
00:31:16,310 --> 00:31:21,450
Und voila, unser Test wurde erfolgreich bestanden, nachdem

395
00:31:22,540 --> 00:31:27,574
die Änderungen an unserer component.spec.ts Datei vorgenommen wurden.

396
00:31:27,574 --> 00:31:33,270
Also unser erster Test, was bedeutet, dass wir jetzt in der Lage sind, eine Menükomponente

397
00:31:33,270 --> 00:31:37,950
aus unserem Menü, component.spec.ts Datei dort zu erstellen.

398
00:31:37,950 --> 00:31:40,990
So funktioniert unser Test-Setup richtig.

399
00:31:40,990 --> 00:31:48,460
Jetzt kann ich in meine Testkomponente einsteigen und intensivere Tests durchführen.

400
00:31:48,460 --> 00:31:53,790
Gehen Sie zurück zu dieser Menükomponente.spec-Datei, lassen Sie mich einen anderen Test hinzufügen.

401
00:31:53,790 --> 00:32:00,420
Jetzt sehen Sie, dass ich, weil ich jetzt einen etablierten Service hier

402
00:32:00,420 --> 00:32:07,292
habe, der diesen DISH-Wert zurückgibt, jetzt meinen DishService nutzen kann

403
00:32:07,292 --> 00:32:11,290
, auf den ich hier den Verweis habe.

404
00:32:11,290 --> 00:32:15,934
Innerhalb war vor jedem, und rufen Sie dann die GetDishs-Methode auf und

405
00:32:15,934 --> 00:32:18,830
dann werde ich in der Lage sein, den Wert zu erhalten.

406
00:32:18,830 --> 00:32:23,800
Und das wird in meiner Menükomponente verfügbar sein, die ich gerade erstellt habe.

407
00:32:23,800 --> 00:32:28,615
Also sollte mein MenuComponent nun Zugriff auf die Geschirr Konstante bekommen, die

408
00:32:28,615 --> 00:32:32,856
ihm durch diesen Geschirrstopp zurückgeliefert wurde.

409
00:32:32,856 --> 00:32:37,608
So kann ich jetzt testen, ob die Gerichte Variable in meinem

410
00:32:37,608 --> 00:32:43,642
MenuComponent tatsächlich die Werte richtig empfängt oder nicht.

411
00:32:43,642 --> 00:32:46,982
Also, wenn ich reingehe, lass mich hier einen weiteren Test erstellen.

412
00:32:46,982 --> 00:32:52,413
Also werde ich hier einen Test erstellen, mit dem es,

413
00:32:52,413 --> 00:32:57,228
wie Sie zuvor gesehen haben, so genau wie der vorherige.

414
00:32:57,228 --> 00:33:03,447
Dieser zweite Test werde ich nennen, dass wie es und

415
00:33:03,447 --> 00:33:09,460
Geschirr, Items sollte 4 sein,

416
00:33:09,460 --> 00:33:14,605
weil die Gerichte Konstante, die wir in

417
00:33:14,605 --> 00:33:21,562
der shared.dishs-Datei erklärt haben vier Gerichte in der Konstante gibt.

418
00:33:21,562 --> 00:33:26,232
Also, wenn meine Gerichte Variable in meiner MenuComponent oder

419
00:33:26,232 --> 00:33:31,018
ts Datei durch Aufruf des dishservice initialisiert wird.

420
00:33:31,018 --> 00:33:34,632
Es hätte diese vier Gerichte erhalten und

421
00:33:34,632 --> 00:33:37,970
wurde mit diesen vier Gerichten initialisiert.

422
00:33:37,970 --> 00:33:43,182
Also werde ich ein paar Tests auf diesem Geschirr Variable dort durchführen.

423
00:33:43,182 --> 00:33:46,492
Also, wie bekomme ich Zugang zu den Gerichten Variable hier?

424
00:33:46,492 --> 00:33:50,431
Also würde ich sagen, es Geschirr Artikel sollte 4 sein, und

425
00:33:50,431 --> 00:33:54,171
dann werde ich hier eine Pfeilfunktion deklarieren.

426
00:33:54,171 --> 00:33:59,453
Und in dieser Pfeilfunktion werde ich

427
00:33:59,453 --> 00:34:04,024
die verschiedenen Tests angeben, die ich durchführen werde.

428
00:34:04,024 --> 00:34:10,348
Also hier werde ich jetzt sagen, erwarten (Komponente. ,

429
00:34:10,348 --> 00:34:15,378
und beachten Sie, dass es mir automatisch

430
00:34:15,378 --> 00:34:22,290
Zugriff auf diese Gerichte Eigenschaft aus der MenuComponent gibt.

431
00:34:22,290 --> 00:34:27,400
Also kann ich sagen, dass component.dish, und dann kann ich testen,

432
00:34:27,400 --> 00:34:34,053
um zu sehen, dass die Länge dieses Geschirr JavaScript-Objekt-Array sein sollte.

433
00:34:34,053 --> 00:34:38,367
Hier verwende ich hier die ToBe-Methode von Jasmine.

434
00:34:38,367 --> 00:34:41,517
Und dann kann ich den Wert 4 angeben,

435
00:34:41,517 --> 00:34:46,347
weil ich 4 Gerichte in meinem Geschirr Konstante geliefert

436
00:34:46,347 --> 00:34:51,284
habe, die ich in der shared.dishs-Datei dort deklariert habe.

437
00:34:51,284 --> 00:34:54,709
Das ist also der erste Test, den ich durchführen werde,

438
00:34:54,709 --> 00:34:56,867
das sollte sich als wahr erweisen.

439
00:34:56,867 --> 00:35:01,096
Ansonsten funktionierte das Setup nicht richtig, daher

440
00:35:01,096 --> 00:35:05,120
weiß ich, dass mein Code nicht korrekt funktioniert.

441
00:35:05,120 --> 00:35:09,891
Aber ich weiß sicher, dass dieser Test richtig funktionieren sollte.

442
00:35:09,891 --> 00:35:11,547
Wenn Sie sicher sein wollen,

443
00:35:11,547 --> 00:35:16,011
lassen Sie uns die Änderungen speichern und dann gehen und sehen Sie unseren Test läuft. Wenn Sie

444
00:35:16,011 --> 00:35:18,084
zu diesem Terminal gehen,

445
00:35:18,084 --> 00:35:23,323
sehen Sie, dass jetzt meine App neu kompiliert wird und der Test läuft.

446
00:35:23,323 --> 00:35:27,941
Und beachte alle Grüns im Terminal-Fenster.

447
00:35:27,941 --> 00:35:32,355
Es sagt ausgeführt 1 von 2 Erfolg, ausgeführt 2 von 2 Erfolg.

448
00:35:32,355 --> 00:35:36,021
Was bedeutet, dass meine beiden Tests erfolgreich ausgeführt wurden.

449
00:35:36,021 --> 00:35:41,221
Wenn ich auf meinen Browser schaue, so dass Sie sehen, dass die MenuComponent,

450
00:35:41,221 --> 00:35:44,031
beide Tests sind erfolgreich.

451
00:35:44,031 --> 00:35:46,189
Lassen Sie mich ein paar weitere erstellen und

452
00:35:46,189 --> 00:35:51,994
sie zu dieser zweiten Gruppe von Tests hinzufügen, die ich dort erstelle.

453
00:35:51,994 --> 00:35:58,106
Wenn ich zur Datei menu_component_spec.ts gehe, werde ich eine weitere hinzufügen.

454
00:35:58,106 --> 00:36:05,535
Ich werde sagen, Komponente erwarten. ,

455
00:36:05,535 --> 00:36:12,420
und ich werde Gerichte sagen [1].

456
00:36:12,420 --> 00:36:16,105
Daran erinnern, dass der Name des ersten Gerichts war,

457
00:36:18,858 --> 00:36:22,552
Also das ist, was ich werde testen, die Gerichte [1] .name.

458
00:36:22,552 --> 00:36:26,774
So kann ich testen, ob es die Werte korrekt empfängt.

459
00:36:26,774 --> 00:36:28,431
Was sind alle Möglichkeiten, die ich testen kann?

460
00:36:28,431 --> 00:36:34,594
Wenn ich einen Punkt dort setze, gibt es mir einen Vorschlag für alle Möglichkeiten hier.

461
00:36:34,594 --> 00:36:42,862
Also werde ich sagen, ich werde hier auch wieder die ToBe-Methode verwenden.

462
00:36:42,862 --> 00:36:45,623
Und dann ist der zweite Name des Gerichts,

463
00:36:51,916 --> 00:36:55,779
nur das da, also das ist der zweite Caster, den ich ausführen werde.

464
00:36:55,779 --> 00:36:59,819
Also, wenn mein Code korrekt lief, sollte dies auch passieren.

465
00:36:59,819 --> 00:37:03,389
In ähnlicher Weise lassen Sie mich hier noch einen eintragen.

466
00:37:03,389 --> 00:37:06,072
Also werde ich sagen, erwarten,

467
00:37:09,579 --> 00:37:16,457
Komponente.Gerichte und ich werde sagen 3.

468
00:37:16,457 --> 00:37:21,520
Und hier drin

469
00:37:21,520 --> 00:37:26,819
sollte das vorgestellte Anwesen Falsy sein.

470
00:37:26,819 --> 00:37:33,572
Dass Sie falsch sein sollten, ist es in diesem Fall nicht wahr, also lassen Sie mich in einem weiteren hinzufügen.

471
00:37:33,572 --> 00:37:35,748
Sie können anfangen, mehr hinzuzufügen, wenn Sie wollen,

472
00:37:35,748 --> 00:37:38,405
spielen Sie mit ihm herum, bis Sie zufrieden sind.

473
00:37:38,405 --> 00:37:40,936
Tun Sie diese Ergänzungen auch. Lassen Sie mich die Änderungen speichern, die ich

474
00:37:40,936 --> 00:37:44,292
hier vorgenommen habe, lassen Sie uns sehen, ob dieser Test korrekt läuft.

475
00:37:44,292 --> 00:37:50,041
Und wenn du zurück zu meinem Terminal gehst, siehst du, dass mein Test wieder läuft.

476
00:37:50,041 --> 00:37:52,720
Siehst du, dass beide Tests erfolgreich waren,

477
00:37:52,720 --> 00:37:55,551
jetzt werde ich eines dieser Dinge scheitern lassen.

478
00:37:55,551 --> 00:37:59,754
Also werde ich reingehen und das in „Truthy“ ändern.

479
00:37:59,754 --> 00:38:03,950
Sehen Sie, das ist der Spaß, mit Code herumzuspielen.

480
00:38:03,950 --> 00:38:08,111
Ich werde das in Truthy ändern und ich weiß, dass dieser Test scheitern wird.

481
00:38:08,111 --> 00:38:10,186
Also lassen Sie uns die Änderungen speichern.

482
00:38:10,186 --> 00:38:15,977
Wenn Sie sich das Terminal ansehen, sehen Sie, dass der Test fehlgeschlagen ist.

483
00:38:15,977 --> 00:38:23,603
Sie sehen all das Rot hier, was bedeutet, dass der zweite Test nicht korrekt bestanden hat.

484
00:38:23,603 --> 00:38:30,750
Und wenn Sie rückwärts scrollen, würden Sie sehen, dass dieser spezielle Test fehlgeschlagen ist,

485
00:38:30,750 --> 00:38:36,295
denn irgendwo dort unten wird es sagen, dass er es nicht getan hat.

486
00:38:36,295 --> 00:38:42,119
Okay, sieh dir diese Aussage hier an, dass es falsch ist, um wahr zu sein,

487
00:38:42,119 --> 00:38:44,378
also ist es gescheitert.

488
00:38:44,378 --> 00:38:47,978
Also sollte es nicht wahr sein, aber ich sagte, es sollte wahr sein, und

489
00:38:47,978 --> 00:38:51,393
offensichtlich ist der Test falsch, also ist der Test fehlgeschlagen.

490
00:38:51,393 --> 00:38:55,865
So können Sie sogar testen, ob der Test fehlschlägt,

491
00:38:55,865 --> 00:38:59,086
wenn Sie auch nach den falschen Dingen gefragt haben.

492
00:38:59,086 --> 00:39:04,107
Aber wieder, lassen Sie mich zurückgehen und das noch einmal korrigieren.

493
00:39:04,107 --> 00:39:09,068
Also gehe ich zurück zu meinem, Datei Ich werde sie

494
00:39:09,068 --> 00:39:13,529
zurück zu falsy ändern, weil ich möchte, dass dieser Test korrekt ausgeführt wird.

495
00:39:13,529 --> 00:39:15,517
Jetzt sind wir noch nicht zufrieden.

496
00:39:15,517 --> 00:39:20,117
Jetzt in diesem speziellen Test teste ich nur die Gerichte

497
00:39:20,117 --> 00:39:23,825
Variable, die sich in meinem MenuComponent befindet.

498
00:39:23,825 --> 00:39:29,777
Wie gehe ich mit der Vorlage selbst herumspielen?

499
00:39:29,777 --> 00:39:35,454
Hier brauchen wir noch mehr Hilfe von Angular.

500
00:39:35,454 --> 00:39:40,216
Um einige Tests an der Vorlage durchzuführen, werde ich eingehen und

501
00:39:40,216 --> 00:39:42,972
ein paar weitere Importe hier einziehen.

502
00:39:42,972 --> 00:39:49,896
Also gehe ich zu meinem Anfang dieser Datei, menu_component_spec.tsfile.

503
00:39:49,896 --> 00:39:55,105
Ich werde importieren, eine

504
00:39:55,105 --> 00:40:00,594
weitere genannt By, was eine Methode ist.

505
00:40:00,594 --> 00:40:03,044
Du wirst sehen, wie ich das in kurzer Zeit benutze.

506
00:40:03,044 --> 00:40:10,855
Dies sollte aus, Angular,

507
00:40:15,209 --> 00:40:18,863
/platform-browser importiert werden.

508
00:40:18,863 --> 00:40:27,301
Und auch werde ich noch einen importieren, der ein Debug-Element ist.

509
00:40:27,301 --> 00:40:32,009
Das Debug-Element ermöglicht es mir, Zugriff auf das DOM zu erhalten

510
00:40:32,009 --> 00:40:37,040
, so dass ich Tests an den DOM-Elementen direkt durchführen kann.

511
00:40:37,040 --> 00:40:44,548
Das ist also, wo ich das importieren werde, den Angular-Code hier, also diese beiden.

512
00:40:44,548 --> 00:40:49,580
Fügen Sie also die By und das DebugElement zu den Importen

513
00:40:49,580 --> 00:40:54,947
hinzu, und sobald Sie das tun, werden wir hier in den Code gehen.

514
00:40:54,947 --> 00:40:59,338
Und dann werden wir einen weiteren Test hinzufügen, wo wir in das DOM gehen und

515
00:40:59,338 --> 00:41:01,690
eines der Elemente aus dem Dokument holen werden.

516
00:41:01,690 --> 00:41:06,404
Also würde ich es sagen, also noch ein Test hier,

517
00:41:06,404 --> 00:41:09,889
was wird dieser Test tun?

518
00:41:09,889 --> 00:41:14,970
Für diesen Test werde ich

519
00:41:14,970 --> 00:41:22,903
den Test angeben, wie Geschirr in der Vorlage verwenden sollte.

520
00:41:22,903 --> 00:41:25,838
Ich sage hier nur zufällig etwas,

521
00:41:25,838 --> 00:41:29,804
weil ich nur überprüfen möchte, dass die Variable Gerichte,

522
00:41:29,804 --> 00:41:34,905
was auch immer sie zur Verfügung stellt, in der Vorlage korrekt verwendet wird.

523
00:41:34,905 --> 00:41:38,412
Das ist also der Teil, den ich einrichte, und

524
00:41:38,412 --> 00:41:42,104
dann ist der zweite Teil die Pfeilfunktion, und

525
00:41:42,104 --> 00:41:47,760
innerhalb dieser Pfeilfunktion werde ich den Code für den nächsten Test bereitstellen.

526
00:41:47,760 --> 00:41:52,734
Also in dieser Pfeilfunktion, was ich

527
00:41:52,734 --> 00:41:58,008
tun werde, ist, dass ich zuerst Fixture aufrufen und

528
00:41:58,008 --> 00:42:00,880
dann Änderungen erkennen werde.

529
00:42:00,880 --> 00:42:05,990
Und dann danach werde ich sagen, let de:,

530
00:42:12,226 --> 00:42:13,908
Ist ein DebugElement.

531
00:42:13,908 --> 00:42:20,748
Dadurch werde ich Zugriff auf das DOM erhalten und

532
00:42:20,748 --> 00:42:26,566
dann wäre das Element HTMLElement.

533
00:42:26,566 --> 00:42:33,243
Also möchte ich Zugriff auf eines der HTMLElements von meinem DOM erhalten.

534
00:42:33,243 --> 00:42:35,369
Welches Element möchte ich also?

535
00:42:35,369 --> 00:42:38,846
Um das zu tun, bekomme ich Zugriff auf das,

536
00:42:41,533 --> 00:42:48,138
DebugElement, indem ich fixture und debugElement sage.

537
00:42:48,138 --> 00:42:54,933
So kann ich hier Zugriff auf Elemente von meinem DOM erhalten, also DebugElement.

538
00:42:54,933 --> 00:43:02,220
Und dann kann ich abfragen und dann nur diejenigen auswählen, die für mich von Interesse sein werden.

539
00:43:02,220 --> 00:43:08,690
Also werde ich abfragen und dann werde ich fragen, indem ich die By verwende.

540
00:43:08,690 --> 00:43:15,908
Beachten Sie also, wo ich das By verwende, das ich hinzugefügt habe, indem ich es importiere.

541
00:43:15,908 --> 00:43:20,780
Also By unterstützt das By eine Reihe von Metriken, mit denen ich

542
00:43:20,780 --> 00:43:25,020
fragen kann, auf bestimmte Elemente im DOM zuzugreifen.

543
00:43:25,020 --> 00:43:31,824
Wie Sie sehen können, wird es mir sagen, was ich importieren kann und

544
00:43:31,824 --> 00:43:36,846
dann erlaubt mir das .css Zugriff auf

545
00:43:36,846 --> 00:43:43,018
übereinstimmende Elemente durch den gegebenen CSS-Selektor zu erhalten.

546
00:43:43,018 --> 00:43:45,789
Also, was ist der CSS-Selektor, den ich verwenden werde?

547
00:43:45,789 --> 00:43:50,503
Ich weiß, dass es ein h1-Element, HTML-Element im DOM gibt und

548
00:43:50,503 --> 00:43:55,750
dass ich Zugriff auf das erste h1-Element vom DOM erhalten werde.

549
00:43:55,750 --> 00:44:00,764
Und eines der h1-Elemente darin ist diejenige, die

550
00:44:00,764 --> 00:44:05,670
den Namen jedes Gerichts dort anzeigen wird.

551
00:44:05,670 --> 00:44:10,459
Schauen Sie zurück und Sie sehen, dass in der Raster-Timeline mit einem h1 und

552
00:44:10,459 --> 00:44:13,839
dass h1 den Namen des Gerichts enthält dort.

553
00:44:13,839 --> 00:44:16,723
Also werde ich das bekommen und

554
00:44:16,723 --> 00:44:21,198
dann werde ich ein Element bekommen und dann würde ich de sagen,

555
00:44:21,198 --> 00:44:26,385
vom Debug-Element, und dann würde ich NativeElement sagen.

556
00:44:26,385 --> 00:44:31,572
Und das gibt mir Zugriff auf das Element speziell im DOM

557
00:44:31,572 --> 00:44:37,873
, auf das ich mich beziehe, und ich habe mit dieser Anweisung früher ausgewählt.

558
00:44:37,873 --> 00:44:43,091
Also, wenn ich das DOM abfrage und dann sage, geben Sie mir

559
00:44:43,091 --> 00:44:48,964
alle zurück, die das Tag h1 für das HTML-Element verwenden.

560
00:44:48,964 --> 00:44:54,077
Und ich bekomme Zugriff darauf, und ich kann abfragen und

561
00:44:54,077 --> 00:44:58,349
sagen, erwarten (el.TextContent).

562
00:44:58,349 --> 00:45:02,869
Also suche ich nach dem Inhalt in diesem h1 in meiner

563
00:45:02,869 --> 00:45:07,718
Vorlage festen Inhalt und dann werde ich toContain sagen.

564
00:45:07,718 --> 00:45:12,596
Dies ist also eine andere Methode, ToContain, dies ist eine Jasmin-Methode namens ToContain.

565
00:45:12,596 --> 00:45:18,352
Dies überprüft, ob das einen bestimmten Wert enthält,

566
00:45:18,352 --> 00:45:23,262
und dann werde ich nach DISCHES (0) .name überprüfen.

567
00:45:23,262 --> 00:45:29,360
Also wurde das erste Gericht im DOM erstellt und in das DOM hinzugefügt?

568
00:45:29,360 --> 00:45:33,981
Wenn meine Vorlage korrekt funktioniert, muss dies im DOM vorhanden sein.

569
00:45:33,981 --> 00:45:38,626
Also, das werde ich überprüfen, ob die Gitterkachel, die

570
00:45:38,626 --> 00:45:42,658
dem ersten DISH entspricht, erstellt und in das DOM hinzugefügt wurde oder nicht.

571
00:45:42,658 --> 00:45:47,521
Also sage ich DISCHES (0) .name, und sage zu Großbuchstaben.

572
00:45:47,521 --> 00:45:52,395
Erinnern Sie sich, dass ich die Großbuchstabe verwendet habe, um den Namen

573
00:45:52,395 --> 00:45:56,647
des DISH anzuzeigen, indem ich den Namen der Schale in

574
00:45:56,647 --> 00:46:01,450
Großbuchstaben in der Rasterkachel in der Menükomponente konvertiert habe.

575
00:46:01,450 --> 00:46:05,830
Das ist es, worauf ich prüfen werde, okay, also suche ich

576
00:46:05,830 --> 00:46:07,200
nur nach einem von ihnen.

577
00:46:07,200 --> 00:46:10,983
Sie können viele dieser Tests durchführen, Sie können für DISCHES überprüfen

578
00:46:10,983 --> 00:46:16,016
(1) .name und dann DISCHES (2) .name und mehr, wenn Sie möchten.

579
00:46:16,016 --> 00:46:21,683
Ich illustriere nur ein Beispiel dafür, wie Sie auf Elemente des DOM zugreifen würden und

580
00:46:21,683 --> 00:46:24,783
dann überprüfen, was sie darin enthalten.

581
00:46:24,783 --> 00:46:29,585
Dies ist also ein Test, den ich hier durchführen werde, also lassen Sie mich die Änderungen speichern

582
00:46:29,585 --> 00:46:32,930
und dann sehen, ob der Test korrekt ausgeführt wird.

583
00:46:32,930 --> 00:46:35,951
Gehen Sie in dieses Terminal und wenn der Test läuft,

584
00:46:35,951 --> 00:46:41,039
sehen Sie, dass mein erster Test erfolgreich war, der zweite Test war erfolgreich,

585
00:46:41,039 --> 00:46:44,635
und der dritte Test war auch erfolgreich, wunderbar.

586
00:46:44,635 --> 00:46:48,374
Lassen Sie mich den dritten Test scheitern.

587
00:46:48,374 --> 00:46:52,273
Wenn ich zur Datei menucomponentspec.ts

588
00:46:52,273 --> 00:46:58,818
gehe, werde ich dies in Großbuchstaben entfernen und dann den gleichen Test durchführen.

589
00:46:58,818 --> 00:47:02,269
Sie werden sehen, dass dieser Test fehlschlägt, speichern Sie die Änderungen.

590
00:47:02,269 --> 00:47:06,941
Und wenn der Test ausgeführt wird, werden Sie sehen, dass der dritte Test fehlschlägt.

591
00:47:06,941 --> 00:47:11,251
Weil ich es scheitern lasse, indem ich dort nach dem falschen Ding prüfe und

592
00:47:11,251 --> 00:47:13,894
da du gehst, ist der dritte Test hier fehlgeschlagen.

593
00:47:13,894 --> 00:47:18,490
So können Sie überprüfen, ob bestimmte Dinge, die

594
00:47:18,490 --> 00:47:22,471
dort sein sollen, richtig vorhanden sind oder nicht.

595
00:47:22,471 --> 00:47:28,360
Warum ist dieser Fall, so können Sie hier sehen, der Grund, warum dieser Test fehlgeschlagen ist.

596
00:47:28,360 --> 00:47:34,750
Es erwartet, dass dies im DOM ist,

597
00:47:34,750 --> 00:47:40,670
aber stattdessen ist dies das, was im DOM im h1-Element im DOM ist.

598
00:47:40,670 --> 00:47:43,929
Das ist der Grund, warum der Test hier fehlgeschlagen ist.

599
00:47:43,929 --> 00:47:47,718
Also wieder zurück gehen lassen Sie mich den Fehler korrigieren und

600
00:47:47,718 --> 00:47:53,922
dann, wenn ich den Test erneut ausführe, sollten Sie jetzt sehen, dass der Test erfolgreich bestanden hat.

601
00:47:53,922 --> 00:47:58,757
Wenn Sie zum Terminal zurückkehren, werden Sie sehen, dass dieser Test jetzt

602
00:47:58,757 --> 00:47:59,875
korrekt ausgeführt wird.

603
00:48:03,610 --> 00:48:08,670
Und da gehst du, alle drei Tests werden von meiner Bewerbung bestanden.

604
00:48:08,670 --> 00:48:13,970
Wenn Sie sich den Browser ansehen, können Sie auch sehen, dass die drei Tests

605
00:48:13,970 --> 00:48:19,770
erfolgreich auf der Menükomponenten-Vorlagendatei und

606
00:48:19,770 --> 00:48:22,571
auch der Menükomponente selbst ausgeführt wurden.

607
00:48:22,571 --> 00:48:28,398
Nun, offensichtlich ist dies nicht unbedingt der umfassendste Test, aber

608
00:48:28,398 --> 00:48:32,407
ich wollte Ihnen nur einen Vorgeschmack

609
00:48:32,407 --> 00:48:37,398
darauf geben, wie Sie Tests innerhalb Ihrer Angular-Anwendung erstellen würden.

610
00:48:37,398 --> 00:48:42,025
Wenn Sie sich mitreißen lassen, können Sie in alle spec.ts-Dateien gehen, die Sie haben, und

611
00:48:42,025 --> 00:48:44,194
dann Ihren eigenen Test für jede einzelne

612
00:48:44,194 --> 00:48:49,580
dieser Komponenten schreiben, indem Sie das Wissen verwenden, das Sie hier gewonnen haben.

613
00:48:49,580 --> 00:48:55,150
Außerdem können Sie mehr über das Testen in der Angular-Dokumentation lesen und

614
00:48:55,150 --> 00:49:00,590
dann weitere Möglichkeiten zur Durchführung von Tests für Ihre Angular-Anwendung erfahren.

615
00:49:00,590 --> 00:49:05,190
Testing ist ein Feld für sich selbst, also wenn ich Ihnen alles über

616
00:49:05,190 --> 00:49:10,410
das Testen beibringen muss, wird ein ganzer Kurs an sich für Angular kommen.

617
00:49:10,410 --> 00:49:14,500
Und in diesem Kurs wollte ich Ihnen nur einen Geschmack geben, wie

618
00:49:14,500 --> 00:49:17,820
Sie Tests in Ihrer Angular-Anwendung durchführen werden.

619
00:49:17,820 --> 00:49:21,585
Und dies ist ein Beispiel dafür, wie wir

620
00:49:21,585 --> 00:49:27,441
einen Komponententest für eine der Komponenten in unserer Angular-Anwendung konfigurieren und durchführen können.

621
00:49:27,441 --> 00:49:33,901
Dies ist ein guter Zeitpunkt für Sie, einen guten Kommentar mit dem Message-Komponentententest zu machen.

622
00:49:33,901 --> 00:49:37,750
( MUSIK)