1
00:00:02,939 --> 00:00:07,179
Lassen Sie mich kurz mit Ihnen über Winkeltests sprechen.

2
00:00:07,179 --> 00:00:11,125
Wie entwerfen Sie Ihre Winkelanwendungen so, dass sie testbar sind?

3
00:00:11,125 --> 00:00:14,032
Wie entwerfen Sie die Tests für Ihre Winkelapplikation?

4
00:00:14,032 --> 00:00:16,359
Wie führen Sie die Tests aus und stellen sicher, dass

5
00:00:16,359 --> 00:00:20,607
Ihre Winkelanwendung alle Tests erfüllt, die Sie

6
00:00:20,607 --> 00:00:25,210
geschrieben haben, selbst während Sie Ihre Winkelanwendung entwickeln?

7
00:00:25,210 --> 00:00:27,394
Nun würde ich hier auch kurz über die

8
00:00:27,394 --> 00:00:31,209
testgetriebene Entwicklung von Winkelapplikationen sprechen.

9
00:00:31,209 --> 00:00:37,225
Interessanterweise wurde angular selbst von Grund auf gebaut, um Tests zu ermöglichen,

10
00:00:37,225 --> 00:00:40,820
um Teil Ihrer Winkelapplikationsentwicklung zu sein.

11
00:00:40,820 --> 00:00:51,850
Die Hauptkraft hinter eckigen Misko Hevery war selbst ein Google-Testingenieur und daher

12
00:00:51,850 --> 00:00:56,479
kann sein Einfluss auf die Gestaltung von Winkeln, um von Grund auf testbar zu sein, leicht über das gesamte Framework gesehen werden.

13
00:00:56,479 --> 00:01:04,435
Also, eckig selbst, wie Sie aus den vorherigen Vorträgen und Übungen verstanden haben,

14
00:01:04,435 --> 00:01:07,224
ist modular in der Natur.

15
00:01:07,224 --> 00:01:11,155
Die Module von eckig zusammen mit den Komponenten und

16
00:01:11,155 --> 00:01:17,409
ihren Vorlagen und dann die Dienste und die Rohre und die Direktiven,

17
00:01:17,409 --> 00:01:23,559
bedeuten, dass eckig sich leicht zum Testen eignet.

18
00:01:23,559 --> 00:01:29,049
Da nun die Winkelanwendung selbst aus diesen verschiedenen Teilen besteht,

19
00:01:29,049 --> 00:01:32,319
können Sie jedes dieser Teile zunächst isoliert testen,

20
00:01:32,319 --> 00:01:36,719
noch bevor sie Teil der gesamten Winkelanwendung werden.

21
00:01:36,719 --> 00:01:40,820
Der zweite Aspekt ist der Abhängigkeitsinjektionsmechanismus,

22
00:01:40,820 --> 00:01:45,969
den winkelförmig nutzt, um die Kombination der verschiedenen Teile

23
00:01:45,969 --> 00:01:52,120
Ihrer Winkelanwendung selbst zu unterstützen, bedeutet, dass Sie

24
00:01:52,120 --> 00:01:54,340
diese Abhängigkeiten innerhalb

25
00:01:54,340 --> 00:01:59,165
Ihrer verschiedenen Teile der Winkelanwendung und Durchführung von Tests.

26
00:01:59,165 --> 00:02:01,135
Ich habe das Wort Mock in verwendet,

27
00:02:01,135 --> 00:02:05,409
im vorherigen Satz wird kommen, um zu verstehen

28
00:02:05,409 --> 00:02:10,194
, dass in ein bisschen mehr Detail und mehr, dass, später Folien.

29
00:02:10,194 --> 00:02:14,439
Hier müssen wir uns

30
00:02:14,439 --> 00:02:19,724
eines Ansatzes für die Anwendungsentwicklung bewusst sein, der als testgesteuerte Entwicklung bezeichnet wird.

31
00:02:19,724 --> 00:02:26,155
In der testgesteuerten Entwicklung, wie Sie an dem Namen selbst verstehen können,

32
00:02:26,155 --> 00:02:29,229
bedeutet, dass Sie zuerst automatisierte Tests für

33
00:02:29,229 --> 00:02:33,389
alle Funktionen schreiben, die Sie innerhalb Ihrer Anwendung implementieren möchten.

34
00:02:33,389 --> 00:02:35,004
Also zuerst kommt der Test,

35
00:02:35,004 --> 00:02:39,180
danach schreiben Sie Ihren Anwendungscode, um den Test zu bestehen.

36
00:02:39,180 --> 00:02:44,634
Der Test selbst gibt also an, welche Funktionalität Sie implementieren möchten.

37
00:02:44,634 --> 00:02:47,840
Danach schreiben Sie den Code, um diese Funktionalität zu implementieren.

38
00:02:47,840 --> 00:02:50,165
Da der Test bereits vorhanden ist,

39
00:02:50,165 --> 00:02:58,150
können Sie testen, ob die Implementierung, die Sie durchführen, den Test erfüllt oder nicht.

40
00:02:58,150 --> 00:03:04,735
Sobald Ihre Realisierung Ihrer Funktionalität den Test erfüllt,

41
00:03:04,735 --> 00:03:10,919
können Sie den Code natürlich jederzeit umgestalten, um den Software-Engineering-Standards zu entsprechen.

42
00:03:10,919 --> 00:03:12,939
Aber auch danach

43
00:03:12,939 --> 00:03:16,900
können Sie den Code erneut testen, um sicherzustellen, dass er immer noch die

44
00:03:16,900 --> 00:03:20,844
Anforderungen erfüllt, die in

45
00:03:20,844 --> 00:03:25,914
diesem spezifischen Test angegeben sind, den Sie in Ihrer testgesteuerten Entwicklung verwenden.

46
00:03:25,914 --> 00:03:28,659
In der Tat ist die testgesteuerte Entwicklung

47
00:03:28,659 --> 00:03:32,199
ein sehr praktikabler Ansatz, um eine

48
00:03:32,199 --> 00:03:36,522
gute Anwendung von Grund auf zu entwickeln, um vollständig getestet zu werden.

49
00:03:36,522 --> 00:03:38,340
Jetzt, wenn wir über Testen sprechen,

50
00:03:38,340 --> 00:03:42,009
können Sie Tests aus verschiedenen Aspekten nähern.

51
00:03:42,009 --> 00:03:44,889
Die erste und vor allem ist, dass, wenn Ihre Anwendung

52
00:03:44,889 --> 00:03:48,534
selbst als verschiedene Teile implementiert wird,

53
00:03:48,534 --> 00:03:52,620
wie Komponenten, wie Dienste, wie Direktiven,

54
00:03:52,620 --> 00:03:57,760
wie die Pipes, die Sie innerhalb Ihrer Anwendung implementieren.

55
00:03:57,760 --> 00:04:03,120
Das bedeutet, dass Sie jede dieser einzelnen Einheiten ganz einfach isoliert testen können.

56
00:04:03,120 --> 00:04:06,435
Das ist also, wo Komponententests in den Vordergrund rücken.

57
00:04:06,435 --> 00:04:10,675
Komponententest bedeutet, dass Sie die einzelnen Codeeinheiten testen und

58
00:04:10,675 --> 00:04:13,750
sicherstellen, dass diese bestimmte einzelne Einheit

59
00:04:13,750 --> 00:04:18,759
die Funktionalität erfüllt, die sie unterstützen soll,

60
00:04:18,759 --> 00:04:25,855
und dass Funktionalität und die Logik innerhalb dieses Codeabschnitts korrekt implementiert werden.

61
00:04:25,855 --> 00:04:28,870
Jetzt die Einheit zu isolieren und zu testen, ist

62
00:04:28,870 --> 00:04:35,401
sehr nützlich, um die meisten anfänglichen Probleme

63
00:04:35,401 --> 00:04:41,079
in Ihrem Code herauszufinden und sie dann zu beheben, noch bevor Sie diesen Patch in den Code integrieren.

64
00:04:41,079 --> 00:04:44,259
Sobald Sie nun beginnen, diese Teile in das Ganze

65
00:04:44,259 --> 00:04:50,860
zu integrieren, wird es noch umständlicher, detaillierte Tests Ihres Codes durchführen zu können.

66
00:04:50,860 --> 00:04:55,839
Daher bilden isolierte Komponententests die erste

67
00:04:55,839 --> 00:05:01,029
Verteidigungslinie gegen Fehler, wenn Sie Ihre Anwendung entwickeln,

68
00:05:01,029 --> 00:05:03,904
insbesondere Ihre Winkelanwendung.

69
00:05:03,904 --> 00:05:06,189
Jetzt, wie wir mit einem Winkel sehen,

70
00:05:06,189 --> 00:05:10,540
haben wir eine klare Trennung zwischen den Winkelkomponenten und dem DOM selbst.

71
00:05:10,540 --> 00:05:13,339
So

72
00:05:13,339 --> 00:05:16,930
wird in einer Komponente beispielsweise dort die Logik Ihrer Komponente vollständig in den

73
00:05:16,930 --> 00:05:22,101
Typoskriptcode implementiert, den Sie innerhalb einer Komponente implementiert haben, die Typoskriptdateien enthält.

74
00:05:22,101 --> 00:05:25,675
Und dann wird das DOM selbst über

75
00:05:25,675 --> 00:05:29,660
die Vorlage gesteuert, die Sie für Ihre Winkelkomponente entworfen haben.

76
00:05:29,660 --> 00:05:33,475
Also Beta selbst, Sie sehen die klare Trennung zwischen den beiden.

77
00:05:33,475 --> 00:05:36,139
So könnten Sie einfach nur die Logik

78
00:05:36,139 --> 00:05:41,615
Ihres Komponentencodes selbst testen, ohne eine vertikale Vorlage zu schreiben.

79
00:05:41,615 --> 00:05:47,350
Aber dann könnten Sie auch die beiden zusammen betrachten und dann diese Aspekte bewerten.

80
00:05:47,350 --> 00:05:50,731
Wie wir in der Übung sehen werden, die diesem Vortrag folgt,

81
00:05:50,731 --> 00:05:53,879
werden wir beide Ansätze tatsächlich tun.

82
00:05:53,879 --> 00:05:56,685
Nicht nur das, die Tatsache, dass angular

83
00:05:56,685 --> 00:06:01,910
Abhängigkeitsinjektion verwendet, bedeutet, dass Sie Mock-Abhängigkeiten in Ihrer Anwendung injizieren können.

84
00:06:01,910 --> 00:06:04,279
Wenn ich Mock sage, meine ich zum Beispiel,

85
00:06:04,279 --> 00:06:08,500
wenn Ihre Komponente von einem bestimmten Dienst abhängig ist, können Sie immer

86
00:06:08,500 --> 00:06:13,220
einen Mock-Service implementieren, der das Verhalten des Dienstes nachahmt

87
00:06:13,220 --> 00:06:17,689
und dann beim Testen der Komponente ersetzt, so dass Sie

88
00:06:17,689 --> 00:06:22,550
Ihre Komponente unabhängig halten können , wie der Dienst tatsächlich implementiert wird.

89
00:06:22,550 --> 00:06:27,110
Solange die Schnittstelle zwischen Ihrer Komponente und dem Service richtig gestaltet ist,

90
00:06:27,110 --> 00:06:32,045
können Sie einen Mock-Service ersetzen und trotzdem Ihre Komponente testen.

91
00:06:32,045 --> 00:06:33,784
Dort

92
00:06:33,784 --> 00:06:39,470
können Sie aus dem Mock leicht steuern, was der Komponente vom Service geliefert wird.

93
00:06:39,470 --> 00:06:43,220
Dieser Ansatz ermöglicht es Ihnen, Komponententests

94
00:06:43,220 --> 00:06:47,990
in Ihrer Winkelanwendung sehr detailliert durchzuführen.

95
00:06:47,990 --> 00:06:53,375
Dies ist, wo die Verfügbarkeit von Test-Frameworks wie „Jasmine“.

96
00:06:53,375 --> 00:06:55,459
Was Jasmine bietet, ist

97
00:06:55,459 --> 00:07:03,110
ein verhaltensgesteuertes Test-Framework, das vollständig in JavaScript entwickelt wurde.

98
00:07:03,110 --> 00:07:06,170
Nun ist dieses Jasmine-Framework ein allgemeines Framework, das

99
00:07:06,170 --> 00:07:09,505
zum Testen von JavaScript-Anwendungen zur Verfügung steht.

100
00:07:09,505 --> 00:07:18,565
Angular verwendet Jasmine als Ansatz für die Spezifikation unserer Tests für andere Winkelteile,

101
00:07:18,565 --> 00:07:23,657
deren Komponenten, die Dienstleistungen und verschiedene Aspekte unserer Winkelanwendung.

102
00:07:23,657 --> 00:07:30,730
Nun, in Jasmine, nutzt Jasmine zwei Dinge, die Ihnen zu Hilfe kommen.

103
00:07:30,730 --> 00:07:33,722
Eine ist die Verwendung einer „beschreiben“ -Funktion.

104
00:07:33,722 --> 00:07:38,779
Die Funktion „beschreiben“ ermöglicht es Ihnen, eine Reihe von Tests zu gruppieren und

105
00:07:38,779 --> 00:07:45,110
diese Tests dann zusammen als eine einzelne Gruppe von Tests auszuführen.

106
00:07:45,110 --> 00:07:47,884
Wenn wir den Code in der Übung schreiben, werden Sie sehen, wie ich

107
00:07:47,884 --> 00:07:52,225
eine Reihe von Tests in eine beschreibende Funktion einschließt.

108
00:07:52,225 --> 00:07:55,389
Dann schreiben wir unseren Code für unseren,

109
00:07:55,389 --> 00:08:00,214
den Jasmin-Code, für unsere Winkeltests.

110
00:08:00,214 --> 00:08:05,171
Jetzt werden Sie innerhalb dieser „beschreiben“ -Funktionen auch die sogenannten „it“ -Funktionen verwenden.

111
00:08:05,171 --> 00:08:07,550
Mit den „it“ -Funktionen können Sie

112
00:08:07,550 --> 00:08:11,949
individuelle Tests festlegen, die Sie für Ihre Winkelapplikation durchführen möchten.

113
00:08:11,949 --> 00:08:17,509
Also, hier werden Sie sehen, wie ich „es“ angibt und dann angeben, dass

114
00:08:17,509 --> 00:08:21,185
die Art des bestimmten Tests und dann

115
00:08:21,185 --> 00:08:25,259
den Code für diesen bestimmten Test mit einer Funktion in „it“ entwerfen.

116
00:08:25,259 --> 00:08:29,240
Wenn wir also den Code in der Übung entwerfen, achten Sie auf das „beschreiben“ und

117
00:08:29,240 --> 00:08:33,575
das „es“ in Ihren Winkeltestanwendungen.

118
00:08:33,575 --> 00:08:37,559
Sobald Sie den Test mit dem Jasmine-Framework entworfen haben,

119
00:08:37,559 --> 00:08:41,600
ist Karma ein JavaScript-basiertes Befehlszeilentool

120
00:08:41,600 --> 00:08:46,174
, mit dem Sie diese Tests automatisch durchführen können.

121
00:08:46,174 --> 00:08:48,440
Jetzt, Karma zusammen mit Jasmine,

122
00:08:48,440 --> 00:08:53,500
ermöglicht es Ihnen, Tests für Ihre Winkelapplikation durchzuführen.

123
00:08:53,500 --> 00:08:56,375
Jetzt mit Karma, was Karma unterstützt,

124
00:08:56,375 --> 00:08:59,065
ist, dass es Ihnen ermöglicht,

125
00:08:59,065 --> 00:09:04,409
einen Webserver zu erzeugen, in dem Sie Ihren Anwendungsquellcode laden und

126
00:09:04,409 --> 00:09:13,370
dann Karma dann einen Browser verwendet, um die tatsächlichen Tests Ihrer verschiedenen Einheiten durchzuführen.

127
00:09:13,370 --> 00:09:17,100
Wenn Sie also Ihre Tests mit Karma ausführen,

128
00:09:17,100 --> 00:09:19,774
werden Sie sehen, wie Karma einen Browser stapelt,

129
00:09:19,774 --> 00:09:26,120
ob es sich um ein Browserfenster eines vorhandenen Browsers handelt oder

130
00:09:26,120 --> 00:09:29,174
ob Sie etwas namens PhantomJS verwenden würden, das

131
00:09:29,174 --> 00:09:32,715
einen Phantom-Browser hinter den Kulissen startet, um den Test durchzuführen.

132
00:09:32,715 --> 00:09:35,855
Es spielt keine Rolle, aber Karma verwendet

133
00:09:35,855 --> 00:09:40,554
den Browser in einem Moment, um den Test für Ihre Winkelanwendung durchzuführen.

134
00:09:40,554 --> 00:09:43,356
Wie Sie in der folgenden Übung sehen werden,

135
00:09:43,356 --> 00:09:50,649
ist dies, wo, wenn einer Ihrer Kollegen weiterhin darauf besteht, dass seine Implementierung

136
00:09:50,649 --> 00:09:55,070
eines bestimmten Teils Ihrer Winkelanwendung

137
00:09:55,070 --> 00:09:59,659
korrekt ist und den Punkt betont,

138
00:09:59,659 --> 00:10:03,110
können Sie immer ein paar Tests mit Jasmine und

139
00:10:03,110 --> 00:10:07,081
Karma und dann die Tests durchführen und sollten die Tests scheitern,

140
00:10:07,081 --> 00:10:11,095
können Sie immer ihre Argumente widerlegen.

141
00:10:11,095 --> 00:10:12,615
Dann kannst du dich umdrehen, dich

142
00:10:12,615 --> 00:10:14,465
zu deinem Kollegen umdrehen und sagen,

143
00:10:14,465 --> 00:10:17,240
mein Karma hat dein Dogma überwunden.

144
00:10:17,240 --> 00:10:21,664
Nun, natürlich, Ihre Winkelanwendungen sind nicht vollständig frei

145
00:10:21,664 --> 00:10:26,419
von der Beteiligung des Winkelrahmens selbst.

146
00:10:26,419 --> 00:10:29,210
Ihre Komponente kann nicht selbst entworfen werden, ohne

147
00:10:29,210 --> 00:10:33,850
viele der Bibliotheksfunktionen zu verwenden, die angular für Sie bereitstellt,

148
00:10:33,850 --> 00:10:39,215
obwohl einige der grundlegenden Logik unabhängig von eckig getestet werden können.

149
00:10:39,215 --> 00:10:42,125
Was wir als isolierte Tests nennen.

150
00:10:42,125 --> 00:10:44,450
Aber, mehr und mehr,

151
00:10:44,450 --> 00:10:46,659
Sie werden feststellen, dass, wenn Sie in,

152
00:10:46,659 --> 00:10:49,490
wollen die Winkelrahmenstütze selbst

153
00:10:49,490 --> 00:10:52,565
werden Sie nicht in der Lage sein, einen Großteil der Prüfung

154
00:10:52,565 --> 00:11:00,639
Ihrer Winkelteile durchzuführen, ob es Komponenten oder Dienstleistungen oder Rohre oder Richtlinien.

155
00:11:00,639 --> 00:11:05,524
Hier stellen die Winkel-Test-Dienstprogramme

156
00:11:05,524 --> 00:11:08,690
eine Testumgebung bereit, mit der Sie

157
00:11:08,690 --> 00:11:12,384
die Komponententests innerhalb Ihrer Winkelanwendung durchführen können.

158
00:11:12,384 --> 00:11:18,139
Die Winkel-Test-Dienstprogramme, wie Sie mich in den Übungen

159
00:11:18,139 --> 00:11:20,480
in der nächsten Übung verwenden,

160
00:11:20,480 --> 00:11:27,034
werden uns bestimmte Implementierungen von Winkelfunktionen bereitstellen, die Sie

161
00:11:27,034 --> 00:11:33,950
innerhalb Ihrer Tests verwenden, um die Umgebung einzurichten, in der Sie ihre Tests durchführen können.

162
00:11:33,950 --> 00:11:37,319
Dies ist also, wo die Interaktion mit der Winkelumgebung,

163
00:11:37,319 --> 00:11:41,404
anstatt die echten Winkelimplementierungen zu

164
00:11:41,404 --> 00:11:45,740
verwenden, werden Sie diese Testdienstprogramme verwenden, die

165
00:11:45,740 --> 00:11:50,355
ausreichende Funktionalität bieten, damit Sie die Tests durchführen können.

166
00:11:50,355 --> 00:11:53,840
Und hier ist das TestBed, das wir

167
00:11:53,840 --> 00:11:57,825
in unserer Winkelanwendung verwenden werden, sehr nützlich.

168
00:11:57,825 --> 00:12:02,899
Das TestBed erstellt im Wesentlichen eine eckige Prüfung modular.

169
00:12:02,899 --> 00:12:06,205
Wie Sie erkennen, existieren Ihre Komponenten nicht von selbst.

170
00:12:06,205 --> 00:12:09,850
Ihre Komponenten müssen in einem NG-Modul enthalten sein.

171
00:12:09,850 --> 00:12:14,264
Jetzt können Sie nicht einfach ein Standard-NG-Modul für die Durchführung Ihrer Tests verwenden.

172
00:12:14,264 --> 00:12:16,084
Das TestBed,

173
00:12:16,084 --> 00:12:18,560
das vom Winkel-Test-Dienstprogramm unterstützt wird,

174
00:12:18,560 --> 00:12:24,549
stellt Ihnen eine NG-Modulumgebung zur Verfügung, mit der Sie ihre Komponenten testen können.

175
00:12:24,549 --> 00:12:25,850
Also, innerhalb des TestBed,

176
00:12:25,850 --> 00:12:29,929
werden Sie etwas namens TestBed Create Component verwenden, um

177
00:12:29,929 --> 00:12:36,139
eine einzelne Komponente und eine Instanz der Komponente zu erstellen, um die Tests durchzuführen.

178
00:12:36,139 --> 00:12:37,940
Und wenn Sie dies tun,

179
00:12:37,940 --> 00:12:42,454
gibt Ihnen das TestBed Zugriff auf etwas namens ComponentFixture,

180
00:12:42,454 --> 00:12:48,500
die ComponentFixture ist etwas, das Ihnen ein Handle bietet, mit dem Sie

181
00:12:48,500 --> 00:12:56,419
Ihre Komponente mit genügend Funktionalität umgeben können, so dass die Komponente von selbst getestet werden kann.

182
00:12:56,419 --> 00:13:00,950
Die Fixture bietet Zugriff auf die Komponente selbst und

183
00:13:00,950 --> 00:13:05,299
dann auch durch, dass wir etwas namens DebugElement verwenden.

184
00:13:05,299 --> 00:13:08,375
Sie werden sehen, wie ich das in der folgenden Übung verwende.

185
00:13:08,375 --> 00:13:11,424
Das DebugElement gibt Ihnen Zugriff auf das DOM,

186
00:13:11,424 --> 00:13:16,754
das ist die Vorlage, die als Teil Ihrer Komponente unterstützt wird.

187
00:13:16,754 --> 00:13:23,899
So können Sie Manipulationen am DOM wie das Klicken von Elementen im DOM durchführen,

188
00:13:23,899 --> 00:13:29,315
Zugriff auf ein DOM-Element erhalten und dann auslesen, was

189
00:13:29,315 --> 00:13:35,600
in diesen Dom-Elementen eingeschlossen ist und so weiter, was Ihnen ermöglicht, die Tests durchzuführen.

190
00:13:35,600 --> 00:13:37,669
Nun, bevor wir mit der Übung fortfahren,

191
00:13:37,669 --> 00:13:43,250
möchte ich, dass Sie sich dieser Dinge bewusst sind, damit

192
00:13:43,250 --> 00:13:51,139
Sie, wenn wir ihnen in der Übung selbst begegnen, sehen, warum ich jedes dieser verschiedenen Stücke verwende.