1
00:00:04,858 --> 00:00:09,967
عطر الياسمين من كل أكاليل الزهور تلك

2
00:00:09,967 --> 00:00:14,218
في شارع المعبد يهوى في الهواء

3
00:00:14,218 --> 00:00:17,684
ياله من شعور مستقر

4
00:00:17,684 --> 00:00:20,510
لابد أنها العاقبة الجيدة من حياتي السابقة

5
00:00:23,749 --> 00:00:25,857
آسف، أين كنت؟

6
00:00:25,857 --> 00:00:29,703
كنت أتحدث معك عن اختبار الزاوي، أليس كذلك؟

7
00:00:29,703 --> 00:00:34,743
ونحن في طريقنا إلى استخدام تعديل الكارما للقيام الاختبار الزاوي لدينا.

8
00:00:34,743 --> 00:00:37,769
لذلك دعونا الحصول على مع ذلك.

9
00:00:37,769 --> 00:00:45,571
شيء واحد جيد حول استخدام CLI Angular هو أنه يقوم بإعداد جميع السقالات

10
00:00:45,571 --> 00:00:49,869
لك لتضمين الدعم تلقائيًا

11
00:00:49,869 --> 00:00:53,393
لاختبار تطبيق Angular الخاص بك.

12
00:00:53,393 --> 00:00:59,108
لذلك ستلاحظ أنه كلما قمت بإنشاء

13
00:00:59,108 --> 00:01:03,454
مكون أو خدمة جنبا إلى جنب مع ملفات TS المكون،

14
00:01:03,454 --> 00:01:08,942
ستلاحظ أيضًا ملفًا يسمى component.spect.ts

15
00:01:08,942 --> 00:01:13,422
مضمنًا بالفعل في مجلدات مشروعك.

16
00:01:13,422 --> 00:01:17,423
وأيضا، إذا ذهبت إلى ملف package.json،

17
00:01:17,423 --> 00:01:24,434
سترى أن هناك بالفعل دعم للاختبار الزاوي المضمنة هناك.

18
00:01:24,434 --> 00:01:30,640
لذلك إذا ذهبت إلى تبعيات ديف سترى أن جوهر الياسمين،

19
00:01:30,640 --> 00:01:34,201
مراسل مواصفات الياسمين،

20
00:01:34,201 --> 00:01:39,394
وحدات npm ذات الصلة الكرمة والكرمة مثبتة بالفعل داخل

21
00:01:39,394 --> 00:01:44,414
التطبيق الزاوي الخاص بك الذي هو سقالة من قبل كلي الزاوي.

22
00:01:44,414 --> 00:01:47,716
لذلك، لدينا كل الأشياء والمكان بالنسبة

23
00:01:47,716 --> 00:01:53,538
لنا لمجرد الحصول على القيام باختبارنا للتطبيق الزاوي لدينا.

24
00:01:53,538 --> 00:01:58,617
لذلك، إذا نظرت حولك سترى أن هناك

25
00:01:58,617 --> 00:02:03,572
ملف يسمى test.ts في المجلد المصدر الخاص بك،

26
00:02:03,572 --> 00:02:07,269
لذلك دعونا فتح ملف test.ts.

27
00:02:07,269 --> 00:02:11,518
سترى أيضا أن هناك مجلد آخر هنا يسمى e2e.

28
00:02:11,518 --> 00:02:16,409
و سنعود إلى ذلك في التمرين التالي.

29
00:02:16,409 --> 00:02:21,232
ولكن في المجلد test.ts، سترى أن هذا هو المكان الذي يتم فيه

30
00:02:21,232 --> 00:02:25,084
تكوين دعم الكارما الخاص بك هنا.

31
00:02:25,084 --> 00:02:29,551
حتى الذهاب إلى هذا الملف test.ts، افتراضيا،

32
00:02:29,551 --> 00:02:33,907
عند استخدام دعم CLS الزاوي للاختبار،

33
00:02:33,907 --> 00:02:38,261
فإنه سيتم تشغيل الاختبارات لجميع المكونات

34
00:02:38,261 --> 00:02:43,750
والخدمات التي يتم تضمينها في التطبيق الزاوي الخاص بك.

35
00:02:43,750 --> 00:02:49,017
الآن، أنا ذاهب إلى توضيح لكم كيفية القيام اختبار

36
00:02:49,017 --> 00:02:53,516
لعنصر واحد محدد، مينوكومبوننت.

37
00:02:53,516 --> 00:03:00,469
لذلك أريد تقييد نفسي لاستخدام ملف.spec مكون القائمة فقط

38
00:03:00,469 --> 00:03:04,696
وإجراء الاختبار لمكون القائمة فقط.

39
00:03:04,696 --> 00:03:07,823
لذلك، انتقل إلى ملف.ts test.ts.

40
00:03:07,823 --> 00:03:16,388
إحدى الطرق التي يمكننا بها تكوين اختبار CLIs Angular لتشغيل الاختبار فقط

41
00:03:16,388 --> 00:03:22,397
لمكون معين هي الانتقال إلى هذا السطر هنا،

42
00:03:22,397 --> 00:03:29,308
والذي يقول سياق const ثم تغيير هذا إلى القائمة،

43
00:03:29,308 --> 00:03:36,088
يمكنك أن ترا/menu\ .component وملف spec.ts.

44
00:03:36,088 --> 00:03:41,615
في وقت سابق كان ملف/\ .spec.ts فقط، مما يعني أنك

45
00:03:41,615 --> 00:03:47,992
ستقوم بتشغيل كافة ملفات المواصفات الموجودة في مجلد مصدر المشروع الخاص بك.

46
00:03:47,992 --> 00:03:51,379
لذلك، في الوقت الحالي، من خلال تحديد هذا هنا،

47
00:03:51,379 --> 00:03:57,225
أنا مهتم لتشغيل الاختبار فقط لملف مواصفات مكون القائمة هنا.

48
00:03:57,225 --> 00:04:02,285
الآن هذا أنا معرفة من خلال البحث حول

49
00:04:02,285 --> 00:04:08,268
تجاوز المكدس حيث وجدت شخص ما يعطيني الجواب على هذا،

50
00:04:08,268 --> 00:04:12,985
مشيرا إلى بعض الموارد على Angular

51
00:04:12,985 --> 00:04:18,393
CLI، وهكذا اكتشفت أن هذه هي الطريقة لتقييد

52
00:04:18,393 --> 00:04:23,019
الاختبار إلى ملف اختبار مكون معين.

53
00:04:23,019 --> 00:04:28,465
لذلك بعد إجراء تغيير على ملف.ts test.ts، دعونا حفظ التغيير.

54
00:04:28,465 --> 00:04:32,622
الآن، سنحاول تشغيل اختبارنا على مكون القائمة.

55
00:04:32,622 --> 00:04:37,198
لذلك كما ترى، في مكون القائمة، لدينا بالفعل

56
00:04:37,198 --> 00:04:42,051
ملف.spec.ts مكون القائمة، والذي يحتوي على بعض التعليمات البرمجية بالفعل.

57
00:04:42,051 --> 00:04:45,631
دعونا نحاول تشغيل هذا الاختبار ونرى ما يحدث.

58
00:04:45,631 --> 00:04:50,650
الذهاب إلى المحطة الطرفية، إضافة المطالبة، اكتب اختبار ng، وهذا

59
00:04:50,650 --> 00:04:56,644
سيؤدي إلى CLI Angular بدء اختبار مكون القائمة.

60
00:04:56,644 --> 00:04:59,875
لذلك عند كتابة هذا وضرب العودة،

61
00:04:59,875 --> 00:05:05,216
ثم الزاوي كلي سوف تبدأ تجميع التطبيق الزاوي الخاص بك.

62
00:05:05,216 --> 00:05:10,129
سيفتح أيضًا نافذة متصفح، وفي حالتي سيفتح

63
00:05:10,129 --> 00:05:13,874
نافذة متصفح Chrome ثم استخدم نافذة المتصفح هذه لتشغيل الاختبار.

64
00:05:13,874 --> 00:05:20,992
وترى أنه في الجزء الخلفي، لديك نافذة متصفح Chrome قيد التشغيل

65
00:05:20,992 --> 00:05:25,980
وكلها مليئة باللون الأحمر ومجموعة كاملة من الكلمات هناك.

66
00:05:25,980 --> 00:05:30,937
سيتم أيضًا طباعة نفس المعلومات في نافذة وحدة التحكم الخاصة بك،

67
00:05:30,937 --> 00:05:34,980
ومن هذا يمكنني أن أرى أن الاختبار لم يتم تشغيله بشكل صحيح.

68
00:05:34,980 --> 00:05:41,070
هناك شيء لم يتم تكوينه بشكل صحيح في ملف الاختبار الخاص بي، لذلك سأحتاج إلى الذهاب

69
00:05:41,070 --> 00:05:47,272
وتحرير ملف الاختبار الخاص بي لتضمين الدعم المناسب لتشغيل هذا الاختبار بشكل صحيح.

70
00:05:47,272 --> 00:05:51,425
لذلك دعونا نذهب إلى ملف.ts مكون القائمة

71
00:05:51,425 --> 00:05:54,430
ثم إعداد اختبارنا وفقا لذلك.

72
00:05:54,430 --> 00:06:00,134
الآن يمكننا ترك اختبار ng قيد التشغيل هنا.

73
00:06:00,134 --> 00:06:04,337
في أي وقت تقوم بإجراء تغييرات على ملف component.ts

74
00:06:04,337 --> 00:06:07,169
المصغر أو ملف component.spec.ts المصغر

75
00:06:07,169 --> 00:06:12,078
وحفظ التغييرات، سيتم تشغيل هذا الاختبار تلقائيًا في هذه المرحلة.

76
00:06:12,078 --> 00:06:17,011
لذلك، دعونا نذهب إلى ملف MenuComponent.spect.ts.

77
00:06:17,011 --> 00:06:21,882
الذهاب إلى ملف MenuComponent.spect.ts،

78
00:06:21,882 --> 00:06:30,417
ونحن نفهم أن ملف spect يستخدم بناء جملة الياسمين لوصف الاختبار.

79
00:06:30,417 --> 00:06:33,478
لذلك كنت قد لاحظت بالفعل أن هناك شيئا هنا

80
00:06:33,478 --> 00:06:38,118
الذي يبدأ مع وصف ومن ثم هناك وظيفة محددة في هناك.

81
00:06:38,118 --> 00:06:43,174
لذلك هذا ما كنت أشير إليه عندما تحدثت عن بناء جملة الياسمين في وقت سابق.

82
00:06:43,174 --> 00:06:47,961
وأيضا إذا قمت بالتمرير لأسفل سترى ذلك أو نحو ذلك هناك.

83
00:06:47,961 --> 00:06:53,922
وبالإضافة إلى ذلك، سترى شيئا يسمى قبلكل، هنا.

84
00:06:53,922 --> 00:06:59,594
دعونا نفحص هذا الملف بمزيد من التفصيل لفهم كيفية

85
00:06:59,594 --> 00:07:05,794
تكوين هذا الملف، وكيفية إعداد هذا الاختبار في هذا الملف بالذات.

86
00:07:05,794 --> 00:07:10,843
لذلك داخل ملف الاختبار هذا، ستلاحظ

87
00:07:10,843 --> 00:07:17,979
أننا نستورد هنا مجموعة من الفئات من اختبار Angular الأساسي.

88
00:07:17,979 --> 00:07:22,874
لذلك تمكنك هذه الوحدة من توفير دعم الاختبار

89
00:07:22,874 --> 00:07:29,603
للتطبيق الزاوي الخاص بك، وتتيح لك تصميم الاختبار للمكون الخاص بك.

90
00:07:29,603 --> 00:07:33,304
لذلك ترى أنني استيراد المتزامن و

91
00:07:33,304 --> 00:07:39,105
كومبوننتفيكستور و تستبيد من مكتبة الاختبار هذه.

92
00:07:39,105 --> 00:07:40,955
أنا ذاهب إلى استدعاء ذلك مكتبة الاختبار.

93
00:07:40,955 --> 00:07:44,783
كما ترى أن مينوكومبوننت يتم استيرادها أيضا هنا.

94
00:07:44,783 --> 00:07:47,220
الآن، بمجرد أن نفهم هذين الاثنين،

95
00:07:47,220 --> 00:07:51,788
دعونا نسير في التعليمات البرمجية لفهم ما نحاول القيام به هنا.

96
00:07:51,788 --> 00:07:56,358
لذا، هنا، كما تتوقع، هذا الوصف هنا

97
00:07:56,358 --> 00:08:02,330
يحدد أن هذه الوظيفة المعينة تصف،

98
00:08:02,330 --> 00:08:08,129
اختبار يستند إلى الياسمين الذي نحدده لتطبيق Angular الخاص بنا.

99
00:08:08,129 --> 00:08:11,056
لذلك عندما تنظر إلى الوصف هنا،

100
00:08:11,056 --> 00:08:15,181
سترى أن هذا يتضمن كل هذا الرمز هنا.

101
00:08:15,181 --> 00:08:19,950
لذلك هذا هو جزء من مجموعة واحدة من الاختبارات التي نقوم بتشغيلها هي

102
00:08:19,950 --> 00:08:21,670
عنصر القائمة لدينا.

103
00:08:21,670 --> 00:08:26,670
حتى داخل الوصف، سترى أن هناك سلسلة هنا.

104
00:08:26,670 --> 00:08:32,120
يحدد هذا مجموعة معينة من الاختبارات التي تقوم بتشغيلها هنا.

105
00:08:32,120 --> 00:08:34,130
لذلك، فإنه يقول على مكون القائمة.

106
00:08:34,130 --> 00:08:36,770
حتى هنا يمكنك تحديد أي سلسلة تريدها.

107
00:08:36,770 --> 00:08:39,930
يمكنك استخدام هذا كوصف

108
00:08:39,930 --> 00:08:43,610
لتحديد ما تقوم به هذه المجموعة المعينة من الاختبارات.

109
00:08:43,610 --> 00:08:46,930
لذا هنا، أنا ذاهب إلى البقاء مع شيء قبل.

110
00:08:46,930 --> 00:08:49,380
نحن نحاول اختبار مكون القائمة.

111
00:08:49,380 --> 00:08:53,320
وبعد ذلك، ترى أننا نحدد وظيفة addo هنا.

112
00:08:53,320 --> 00:08:57,036
ضمن هذه الوظيفة addo، سنقوم ببناء الاختبار.

113
00:08:57,036 --> 00:09:00,700
لدينا مينوكومبوننت هنا.

114
00:09:00,700 --> 00:09:05,670
حتى بعد هذا، سترى أننا نعلن متغير يسمى المكون،

115
00:09:05,670 --> 00:09:08,080
وهو من نوع MenuComponent.

116
00:09:08,080 --> 00:09:11,950
الآن وبعد ذلك، نحن نعلن أيضا متغير لاعبا اساسيا،

117
00:09:11,950 --> 00:09:14,140
وهو من نوع ComponentFixture.

118
00:09:15,390 --> 00:09:19,060
وهو من النوع MenuComponent.

119
00:09:19,060 --> 00:09:21,180
الآن، لماذا هذا مثير للاهتمام؟

120
00:09:21,180 --> 00:09:24,450
الآن، ضمن التطبيق الزاوي لدينا،

121
00:09:24,450 --> 00:09:27,130
لدينا مينوكومبوننت التي قمنا بتصميمها بالفعل.

122
00:09:27,130 --> 00:09:29,990
لذا في ملف الاختبار هذا،

123
00:09:29,990 --> 00:09:35,310
سنقوم بإنشاء ذلك MenuComponent باستخدام TestBed الزاوي،

124
00:09:35,310 --> 00:09:38,110
ثم سنقوم بإجراء الاختبارات على MenuComponent.

125
00:09:38,110 --> 00:09:40,580
لذلك نحن ذاهبون لعزل مينوكومبوننت، ومن

126
00:09:40,580 --> 00:09:45,760
ثم إجراء اختبارات وحدة على هذا المكون المحدد.

127
00:09:45,760 --> 00:09:50,470
الآن، هذا هو المكان الذي أدوات الاختبار الزاوي

128
00:09:50,470 --> 00:09:54,900
التي تأتي مع الدعم باستخدام TestBed.

129
00:09:54,900 --> 00:09:58,890
يسمح لي TestBed بإعداد البيئة التي

130
00:09:58,890 --> 00:10:01,280
يمكنني من خلالها اختبار المكون الزاوي الخاص بي.

131
00:10:01,280 --> 00:10:04,935
حتى هنا، ترى أننا نقول TestBed

132
00:10:04,935 --> 00:10:11,049
ثم استدعاء طريقة وحدة اختبار التكوين من فئة TestBed هنا.

133
00:10:11,049 --> 00:10:14,233
وداخل وحدة اختبار التكوين هذه،

134
00:10:14,233 --> 00:10:19,406
يمكنك الإعلان عن مجموعة من الأشياء، وسوف تراني إضافة المزيد هنا.

135
00:10:19,406 --> 00:10:24,296
هذا يعمل تماما مثل تكوين وحدة نغ

136
00:10:24,296 --> 00:10:27,714
التي تقوم به لدينا في وحدة هناك.

137
00:10:27,714 --> 00:10:30,950
لذلك

138
00:10:30,950 --> 00:10:35,375
سيتم الإعلان عن جميع المعلومات التي تحتاجها لإعداد مينوكومبوننت هنا.

139
00:10:35,375 --> 00:10:40,022
لذا فإن جزء نموذج NG الذي رأيته في وحدة التطبيق،

140
00:10:40,022 --> 00:10:45,999
يمكن استخدام نوع مماثل من بناء الجملة هنا للإعلان عن دعم

141
00:10:45,999 --> 00:10:49,690
اختبار MenuComponent هنا.

142
00:10:49,690 --> 00:10:55,849
وأيضا بعد ذلك، سترى هذه الوظيفة تسمى إلى كومبيكومبوننتس.

143
00:10:55,849 --> 00:11:00,205
لذلك سوف تقوم هذه الطريقة بتجميع MenuComponent

144
00:11:00,205 --> 00:11:03,427
وجعلها جاهزة لإجراء الاختبار.

145
00:11:03,427 --> 00:11:08,852
لاحظ أيضا، أن هذا الشيء كله، هذه الوظيفة هنا،

146
00:11:08,852 --> 00:11:14,250
محاطة داخل شيء يسمى التزامن هنا.

147
00:11:14,250 --> 00:11:16,548
الآن، لماذا نحتاج إلى هذا المتزامن؟

148
00:11:16,548 --> 00:11:21,315
الآن، لأن إعداد المكونات باستخدام هذه

149
00:11:21,315 --> 00:11:25,711
الطريقة CompileComponents يستغرق بعض الوقت.

150
00:11:25,711 --> 00:11:30,643
وحتى يكتمل هذا، لا يمكننا المضي قدما في الاختبارات.

151
00:11:30,643 --> 00:11:34,583
لذا باستخدام وحدة التزامن، فإننا نحدد بشكل أساسي

152
00:11:34,583 --> 00:11:39,432
أنني سأنتظر حتى يكتمل هذا الأمر برمته قبل المضي قدمًا.

153
00:11:39,432 --> 00:11:42,107
لذا فإن الوحدة النمطية غير المتزامنة كما ترى،

154
00:11:42,107 --> 00:11:47,690
تلتف وظيفة اختبار داخل منطقة اختبار غير متزامنة.

155
00:11:47,690 --> 00:11:52,510
لذا، ما يعنيه هذا هو أن هذا الاختبار سيكتمل تلقائيًا

156
00:11:52,510 --> 00:11:56,830
عند إجراء جميع المكالمات غير المتزامنة داخل هذه المنطقة.

157
00:11:56,830 --> 00:12:03,755
إذن هذا ما يفعله استخدام المتزامن الذي لدينا هنا.

158
00:12:03,755 --> 00:12:08,206
لذلك ما يعنيه هذا هو أنه يمكنك استخدام وظيفة المزامنة هذه،

159
00:12:08,206 --> 00:12:14,442
إما في قبل كل منها أو في ذلك أيضا، وذلك ضمن ذلك، إعلاننا.

160
00:12:14,442 --> 00:12:20,032
لذلك عندما ترى داخله أيضًا، سترى أنه يمكنك استخدام المتزامن.

161
00:12:20,032 --> 00:12:24,160
لذلك في حال كان لديك أي عمليات هنا تتم بشكل غير متزامن.

162
00:12:24,160 --> 00:12:29,500
ثم تحتاج إلى الانتظار حتى تكتمل هذه العمليات حتى يكتمل هذا الاختبار.

163
00:12:29,500 --> 00:12:33,996
على سبيل المثال، إذا كنت تتصل بخدمة وانتظر حتى

164
00:12:33,996 --> 00:12:37,070
تقوم الخدمة بإرجاع القيمة ثم.

165
00:12:37,070 --> 00:12:41,997
كل ما يحتاج إلى إكمال قبل أن تتمكن من المضي قدما.

166
00:12:41,997 --> 00:12:48,603
لذلك يتم تمكين تلك باستخدام هذا المتزامن، لإحاطة هذه الوظيفة هنا.

167
00:12:48,603 --> 00:12:53,726
الآن، بالإضافة إلى ذلك، الثانية قبلكل، الآن قمنا بفصل

168
00:12:53,726 --> 00:12:59,592
هذا إلى قسمين منفصلين قبلكل هنا، لأننا نريد أن يكتمل هذا.

169
00:12:59,592 --> 00:13:04,592
وهذا كومبيكومبوننتس سوف يستغرق قدرا معينا من الوقت،

170
00:13:04,592 --> 00:13:09,000
وخاصة إذا كان المكون الخاص بك يستخدم قالب خارجي،

171
00:13:09,000 --> 00:13:11,570
كما نفعل في مينوكومبوننت لدينا.

172
00:13:11,570 --> 00:13:16,850
لذلك، فإنه يتطلب بعض الوقت للقالب الخارجي للحصول على استعداد

173
00:13:16,850 --> 00:13:19,430
لاختبار بلدي للمضي قدما.

174
00:13:19,430 --> 00:13:22,210
لذلك، نحن بحاجة إلى الانتظار حتى يكتمل هذا الشيء كله.

175
00:13:22,210 --> 00:13:25,634
لذلك هذا هو السبب بعد اكتمال هذا،

176
00:13:25,634 --> 00:13:30,449
ثم سوف نصل إلى الجزء الثاني حيث نحن ذاهبون

177
00:13:30,449 --> 00:13:35,710
للحصول على بعض الإشارات إلى بعض القيم من سرير الاختبار.

178
00:13:35,710 --> 00:13:40,752
الآن، ما هو هذا قبلكل وظيفة التي تقوم بها هنا؟

179
00:13:40,752 --> 00:13:45,718
ما يعنيه قبلEach هو أنه مهما كنت تعلن داخل هنا،

180
00:13:45,718 --> 00:13:49,313
سيتم تنفيذ هذه الوظيفة قبل اختبار كل،

181
00:13:49,313 --> 00:13:53,012
والتي ستقوم بتحديدها لاحقًا عند استخدامه.

182
00:13:53,012 --> 00:13:57,734
لذلك باستخدام هذا قبلEach، يمكنك إعداد

183
00:13:57,734 --> 00:14:02,253
التكوين الأولي للاختبار الخاص بك للمضي قدما.

184
00:14:02,253 --> 00:14:05,923
وهذا يعني أنه هنا، ونحن إعداد TestBed

185
00:14:05,923 --> 00:14:10,330
لدينا، وإعداد مكون القائمة لدينا ومن ثم إعداد بعض الأشياء

186
00:14:10,330 --> 00:14:14,752
لمكون القائمة لدينا، قبل المضي قدما في تنفيذ الاختبار.

187
00:14:14,752 --> 00:14:23,428
لذلك بالنسبة لكل اختبار ستقوم بتحديده باستخدام هذا الاختبار هنا،

188
00:14:23,428 --> 00:14:26,692
سيتم تنفيذ هذه قبل كل شيء تحدده في هذا قبل كل منهما، قبل إجراء الاختبار.

189
00:14:26,692 --> 00:14:30,008
حتى هنا كما ترون أنا إعداد تستبيد.

190
00:14:30,008 --> 00:14:34,980
ثم بعد ذلك، أنا الحصول على الوصول إلى لاعبا اساسيا.

191
00:14:34,980 --> 00:14:39,143
لذلك أنا باستخدام تستبيد، وأنا أقول كريتكومبوننت و مينوكومبوننت.

192
00:14:39,143 --> 00:14:43,782
لذلك هذا سوف يعود لي إشارة إلى مينوكومبوننت الذي

193
00:14:43,782 --> 00:14:47,215
أنا خلق داخل بلدي اختبار البرنامج النصي هنا ومن

194
00:14:47,215 --> 00:14:52,130
ثم الحصول على إشارة إلى ذلك، لأنني سوف تحتاج إلى إشارة إلى

195
00:14:52,130 --> 00:14:57,178
ذلك من أجل القيام ببعض التلاعب على هذا المكون هناك.

196
00:14:57,178 --> 00:15:02,608
بالإضافة إلى ذلك، من لاعبا اساسيا، وأنا الحصول على الوصول إلى

197
00:15:02,608 --> 00:15:07,324
مثيل المكون الذي يتم إنشاؤه من قبل لاعبي المكون هنا.

198
00:15:07,324 --> 00:15:12,828
حتى كما ترون، لاعبا اساسيا مكون من نوع مينوكومبوننتينستانس

199
00:15:12,828 --> 00:15:18,799
ثم استدعاء كومبوننتينستانس، يعطيني الوصول إلى

200
00:15:18,799 --> 00:15:25,259
هذا المكون القائمة المحددة التي قمت بإنشائها داخل تيستبيد لتنفيذ اختبارات الوحدة.

201
00:15:25,259 --> 00:15:30,004
الآن، بعد هذا نسمي هذا detectChanges.

202
00:15:30,004 --> 00:15:35,482
الآن، ما يعنيه هذا هو أن هذا لن يستمر إلا بعد

203
00:15:35,482 --> 00:15:40,254
اكتمال جميع التغييرات، ومن ثم التعرف على أن التغييرات قد اكتملت.

204
00:15:40,254 --> 00:15:45,686
لذلك سيؤدي هذا إلى تشغيل دورة اكتشاف التغيير لهذا المكون.

205
00:15:45,686 --> 00:15:50,323
لذلك ما يعنيه هذا هو أن هذا سيضمن أنك قمت

206
00:15:50,323 --> 00:15:54,086
بإجراء أي تغييرات في وقت سابق، ويتم اكتشاف جميع التغييرات

207
00:15:54,086 --> 00:16:00,170
واستقرار كل شيء قبل أن تتمكن من المضي قدما في الاختبار الخاص بك.

208
00:16:00,170 --> 00:16:07,500
الآن، بعد هذا، سنستخدمه لتكوين أول اختبار لدينا هنا.

209
00:16:07,500 --> 00:16:10,500
ما هو الاختبار الأول الذي نقوم به هنا؟

210
00:16:10,500 --> 00:16:11,520
الاختبار الأول،

211
00:16:11,520 --> 00:16:15,670
ما سنقوم باختباره هو التأكد من أن المكون قد تم إنشاؤه.

212
00:16:15,670 --> 00:16:21,848
لذلك، داخل هذا هنا، أنا باستخدام بناء جملة ياسمين وأنا أقول ذلك.

213
00:16:21,848 --> 00:16:27,035
ثم هنا يمكنك إعطاء وصف في شكل سلسلة

214
00:16:27,035 --> 00:16:31,760
لتحديد ما هو اختبار هذا الاختبار في الواقع حول.

215
00:16:31,760 --> 00:16:33,640
لذلك، ما نقوله هو،

216
00:16:33,640 --> 00:16:37,540
نحن نختبر لمعرفة ما إذا كان المكون قد تم إنشاؤه أم لا.

217
00:16:37,540 --> 00:16:40,810
لذلك للقيام بذلك، أقول أنه يجب أن يخلق معنى أن

218
00:16:40,810 --> 00:16:44,610
هذا الإعداد هنا يجب أن يكون قد خلق المكون بشكل صحيح.

219
00:16:44,610 --> 00:16:49,350
لذلك هذا هو السبب في الداخل هنا، وأنا باستخدام هذه الطريقة تسمى توقع.

220
00:16:49,350 --> 00:16:53,760
لذا فإن طريقة التوقع داخل هنا تأخذ قيمة هنا،

221
00:16:53,760 --> 00:16:57,840
وبعد ذلك يمكنك اختبار لمعرفة ما إذا كانت هذه القيمة تلبي شيئًا ما.

222
00:16:57,840 --> 00:17:04,640
لذلك نحن هنا نقول لبتروثي، وهذا يعني أن هذه القيمة الخاصة يجب أن تكون صحيحة.

223
00:17:04,640 --> 00:17:09,950
هذا هو ما تحدده هذه الطريقة تسمى هنا tobetRuthy.

224
00:17:09,950 --> 00:17:15,010
يمكنك أيضا أن تقول TobeFalsy، وهذا يعني أنه يجب تقييم إلى false.

225
00:17:15,010 --> 00:17:15,873
ولكن في هذه الحالة،

226
00:17:15,873 --> 00:17:19,510
نحن اختبار للتأكد من أن المكون قد تم إنشاؤه بشكل صحيح.

227
00:17:19,510 --> 00:17:24,000
لهذا السبب نحن نقول أن نتوقع أن يكون تروثي هنا.

228
00:17:24,000 --> 00:17:28,877
لذلك هذا اختبار بسيط نقوم به للتأكد من أن

229
00:17:28,877 --> 00:17:32,404
المكون الخاص بنا يتم إنشاؤه بشكل صحيح.

230
00:17:32,404 --> 00:17:37,713
ولكن كما ندرك عندما أقوم بتشغيل هذا الاختبار، فإنه لا يعمل بشكل صحيح.

231
00:17:37,713 --> 00:17:42,638
دعونا ننظر بسرعة ونرى ما هي المشكلة داخل

232
00:17:42,638 --> 00:17:47,770
إنشاء المكون لدينا في نافذة وحدة التحكم هناك.

233
00:17:47,770 --> 00:17:51,390
العودة إلى نافذة وحدة التحكم، اسمحوا لي فقط استعراض مرة أخرى

234
00:17:51,390 --> 00:17:54,840
ونرى أين المشكلة.

235
00:17:54,840 --> 00:17:59,820
وبدأت ألاحظ أن هذا يحدد أنه لا يبدو أنه

236
00:17:59,820 --> 00:18:04,480
يتعرف على بعض الأشياء التي يستخدمها المكون الخاص بي. على

237
00:18:04,480 --> 00:18:09,065
وجه الخصوص، فإنه يقول أن مدسبانخ

238
00:18:09,065 --> 00:18:13,191
هو شيء أنه لا تعترف،

239
00:18:13,191 --> 00:18:17,330
و مدجيتغريدليست وعدد قليل من الأشياء الأخرى.

240
00:18:17,330 --> 00:18:21,289
هذا يوحي لي على الفور أنني بحاجة إلى القيام ببعض

241
00:18:21,289 --> 00:18:26,170
التكوينات داخل ملف الاختبار الخاص بي قبل أن يتم تشغيل الاختبار بشكل صحيح.

242
00:18:26,170 --> 00:18:30,994
لذلك، دعونا نعود إلى ملف المواصفات لدينا وإجراء بعض التغييرات عليه.

243
00:18:30,994 --> 00:18:34,142
العودة إلى ملف المواصفات

244
00:18:34,142 --> 00:18:40,182
لدينا، من تذكرنا كيف أنشأنا القالب.

245
00:18:40,182 --> 00:18:44,865
ونحن نعلم أنه داخل القالب كان لدينا رابط جهاز توجيه في

246
00:18:44,865 --> 00:18:45,605
قالب مينوكومبوننت.

247
00:18:45,605 --> 00:18:50,325
لذلك أحتاج إلى دعم للتوجيه من أجل التعرف على

248
00:18:50,325 --> 00:18:54,698
ارتباط جهاز التوجيه هذا الذي استخدمناه داخل ملف MenuComponent.html.

249
00:18:54,698 --> 00:18:59,640
لذلك هذا هو المكان الذي سأقوم باستيراد

250
00:18:59,640 --> 00:19:03,926
دعم اختبار آخر

251
00:19:03,926 --> 00:19:09,199
يسمى RoutertestingModule،

252
00:19:09,199 --> 00:19:18,615
والذي يتوفر من مكتبة الزاوية/الموجه/الاختبار هنا.

253
00:19:18,615 --> 00:19:21,625
لذا ستمكنني وحدة اختبار جهاز التوجيه هذه من

254
00:19:21,625 --> 00:19:24,135
تكوين بعض الجوانب حول جهاز التوجيه الخاص بي.

255
00:19:24,135 --> 00:19:28,235
سنرى أن الطريقة التي نستخدم بها هذا تختلف قليلاً عن وحدة جهاز التوجيه

256
00:19:28,235 --> 00:19:30,195
التي استخدمناها في تطبيقنا.

257
00:19:30,195 --> 00:19:34,835
لذلك سنقوم باستيراد وحدة اختبار التوجيه، كما لاحظت

258
00:19:34,835 --> 00:19:39,640
أننا نستخدم بعض الرسوم المتحركة،

259
00:19:39,640 --> 00:19:45,660
وأيضا باستخدام مكون المادة الزاوي داخل القالب الخاص بنا.

260
00:19:45,660 --> 00:19:49,410
لذلك أنا بحاجة إلى استيراد

261
00:19:49,410 --> 00:19:57,079
بروسيرانيماتيونسومودول في ملف الاختبار الخاص بي.

262
00:19:58,490 --> 00:20:05,070
لذلك يأتي هذا من الزاوي/المنصة/المتصفح.

263
00:20:05,070 --> 00:20:09,619
الآن ستلاحظ أننا بحاجة إلى القيام بذلك بشكل صريح هنا ببساطة لأنه،

264
00:20:10,700 --> 00:20:16,960
في تطبيق Angular الفعلي كل هذا كان في وحدة التطبيق،

265
00:20:16,960 --> 00:20:20,310
وهكذا كان متاحًا للمكونات.

266
00:20:20,310 --> 00:20:24,340
الآن نحن اختبار هذا المكون، مينوكومبوننت في عزلة، لذلك

267
00:20:24,340 --> 00:20:27,500
هذا هو السبب في أنها لا تعرف عن كل هذه الأشياء لذلك

268
00:20:27,500 --> 00:20:31,190
نحن بحاجة إلى تحديد صراحة كل هذه الأشياء هنا.

269
00:20:31,190 --> 00:20:38,569
لذلك سوف استيراد ذلك من الرسوم المتحركة متصفح منصة IM هنا.

270
00:20:38,569 --> 00:20:43,358
حتى angular.platform.browser الرسوم المتحركة استيراد

271
00:20:43,358 --> 00:20:44,220
وحدة الرسوم المتحركة المتصفح هنا.

272
00:20:44,220 --> 00:20:47,300
اسمحوا لي أن تشمل وحدة الطبقة المرنة، لذلك

273
00:20:47,300 --> 00:20:53,060
سوف تشمل الزاوي فليكسلايوت.

274
00:20:53,060 --> 00:20:58,525
لذلك هناك حاجة إلى هذه لأنني في حاجة إليها في القالب،

275
00:20:58,525 --> 00:21:02,605
وأنا ذاهب أيضا لاستيراد هذا الطبق من،

276
00:21:06,495 --> 00:21:09,348
مشتركة/طبق لأنه كما سترى في وقت لاحق،

277
00:21:09,348 --> 00:21:14,125
وأنا بحاجة إلى تكوين، A،

278
00:21:20,002 --> 00:21:26,070
ديشسرفيس لأن بلدي مينوكومبوننت

279
00:21:26,070 --> 00:21:31,033
يعتمد على ديشسرفيس لذلك

280
00:21:31,033 --> 00:21:35,170
أنا بحاجة إلى ذلك أيضا في مكان.

281
00:21:35,170 --> 00:21:39,170
على الرغم من أنك سترين أنني سأتوقف عن ذلك

282
00:21:39,170 --> 00:21:44,860
سأشرح ذلك في فترة قصيرة، وأيضا أحتاج إلى استيراد بعض الأشياء الأخرى.

283
00:21:44,860 --> 00:21:47,410
سأقوم باستيراد DUSES من،

284
00:21:48,530 --> 00:21:53,260
تتذكر أننا نستخدم هذا الثابت المسمى DUSES

285
00:21:56,870 --> 00:22:01,640
الذي قمنا بتصديره من الملف المشاركة/disches.ts.

286
00:22:01,640 --> 00:22:05,650
سأحتاج إلى ذلك من أجل تكوين عدد قليل من الأشياء الأخرى.

287
00:22:05,650 --> 00:22:09,702
أنا أيضا ذاهب لاستيراد baseurl.

288
00:22:11,343 --> 00:22:19,105
الذي أعلنته في

289
00:22:21,057 --> 00:22:23,368
ملف url المشاركة/الأساسي.

290
00:22:23,368 --> 00:22:28,692
وأيضا، أنا بحاجة إلى استيراد

291
00:22:28,692 --> 00:22:33,294
ملحوظ من،

292
00:22:35,992 --> 00:22:41,319
rxjs، شرطة مائلة، لأنني

293
00:22:41,319 --> 00:22:47,220
سوف تستخدم أيضا رصد قليلا في وقت لاحق، عندما أقوم بتكوين بعض الأشياء.

294
00:22:47,220 --> 00:22:50,806
حتى الآن، لقد استوردت كل هذه الأشياء.

295
00:22:50,806 --> 00:22:56,157
النزول في تكوين TestBed، ترى أن هذا

296
00:22:56,157 --> 00:23:02,813
الجزء هو بالضبط مثل ديكور وحدة المحرك الذي لدينا في وحدة التطبيق.

297
00:23:02,813 --> 00:23:07,450
لذلك هذا هو المكان الذي يمكنني أيضا استخدام الواردات تماما

298
00:23:07,450 --> 00:23:11,000
كما فعلت مع وحدة المحرك.

299
00:23:11,000 --> 00:23:16,900
وضمن الواردات، سأقوم باستيراد

300
00:23:16,900 --> 00:23:21,765
وحدة BrowserAnimation لأن هذا شيء ما يتطلب،

301
00:23:21,765 --> 00:23:25,090
ثم استيراد وحدة FlexLayout.

302
00:23:26,660 --> 00:23:32,690
وأيضا روترتستينغمودول

303
00:23:32,690 --> 00:23:36,540
لأنني سوف تحتاج إلى روترتستينغمودول لتكوين عدد قليل من الأشياء.

304
00:23:36,540 --> 00:23:40,705
الآن، عند استخدام RoutertestingModule، تحتاج إلى استخدام هذه الطريقة

305
00:23:40,705 --> 00:23:46,950
CalledWithRouts بدلاً من استخدام ForRoot كما استخدمنا مع وحدة جهاز التوجيه هنا.

306
00:23:46,950 --> 00:23:52,400
حتى ضمن هذا ويثروتس يمكنك تحديد بعض

307
00:23:52,400 --> 00:23:58,460
المسارات الافتراضية التي تحتاج إليها لتطبيق معين الخاص بك هنا.

308
00:23:58,460 --> 00:24:03,737
أنا فقط ذاهب لتكوين مسار واحد فقط هنا،

309
00:24:03,737 --> 00:24:09,359
وهذا أمر جيد بما فيه الكفاية بالنسبة لي لاختبار هذه الوحدة هنا.

310
00:24:09,359 --> 00:24:14,497
لذلك أنا فقط ذاهب إلى القول المسار: «القائمة»،

311
00:24:14,497 --> 00:24:19,021
والمكون: مينوكومبوننت.

312
00:24:19,021 --> 00:24:24,235
بما أن قوالب MenuComponent تستخدم مكونات مادية معينة،

313
00:24:24,235 --> 00:24:26,523
دعنا نمضي قدما واستيرادها.

314
00:24:26,523 --> 00:24:35,263
لذلك سنقوم باستيراد ماغريدليستمودول

315
00:24:35,263 --> 00:24:45,034
من @angular /مادي/قائمة الشبكة

316
00:24:45,034 --> 00:24:54,033
وأيضا مابروغريسسبينيرمودول من

317
00:24:54,033 --> 00:25:03,747
@angular /مادي/تقدم الغزل.

318
00:25:04,327 --> 00:25:09,123
وبمجرد استيرادنا لهم، ثم دعونا المضي قدما

319
00:25:09,123 --> 00:25:13,322
وإدراجها في الواردات أسفل هناك.

320
00:25:13,322 --> 00:25:19,568
لذلك دعونا إضافة في ماغريدليستمودول و ماتبريسسبينيرمودول.

321
00:25:19,568 --> 00:25:23,047
وهذا هو كل ما أحتاجه

322
00:25:23,047 --> 00:25:28,997
لهذه الواردات معينة ليتم تكوينها هنا.

323
00:25:28,997 --> 00:25:34,422
لذلك جنبا إلى جنب مع الواردات، لدينا الإعلانات حيث لدي

324
00:25:34,422 --> 00:25:41,067
مينوكومبوننت المستخدمة هنا، ويمكنني أيضا تكوين مقدمي الخدمات هنا.

325
00:25:41,067 --> 00:25:43,295
لذلك أنا بحاجة إلى تكوين مقدمي الخدمات هنا.

326
00:25:43,295 --> 00:25:47,998
الآن هذا هو المكان الذي سنقوم

327
00:25:47,998 --> 00:25:52,898
بإنشاء عدد قليل من بذرة هنا، لذلك

328
00:25:52,898 --> 00:25:58,779
سأقول تقديم: DishService.

329
00:25:58,779 --> 00:26:02,825
الآن، DishService التي سنستخدمها هنا لن تكون

330
00:26:02,825 --> 00:26:03,713
DishService الحقيقية.

331
00:26:03,713 --> 00:26:08,422
عندما تقوم باختبار مكون، لا تريد استخدام خدمة حقيقية.

332
00:26:08,422 --> 00:26:12,750
بدلاً من ذلك، فإنك تخاطر بإخراج الخدمة،

333
00:26:12,750 --> 00:26:19,262
ثم استخدم dishService كعب، والذي سأسميه باسم DishServiceStub.

334
00:26:19,262 --> 00:26:27,040
لذلك سأقول، أوسيفالو: ديشسيرفيسيستوب.

335
00:26:27,040 --> 00:26:32,018
لذلك سيكون هذا وظيفة كعب التي سوف تستخدم من

336
00:26:32,018 --> 00:26:34,904
أجل وضع علامة ديشسرفيس هنا.

337
00:26:34,904 --> 00:26:38,272
لذلك هذا هو واحد أن أنا ذاهب للاستفادة من.

338
00:26:38,272 --> 00:26:42,776
وأيضا الثاني الذي

339
00:26:42,776 --> 00:26:47,455
سأستخدمه هو BaseUrl،

340
00:26:47,455 --> 00:26:54,040
والذي سأستخدم القيمة مثل BaseUrl

341
00:26:54,040 --> 00:26:59,951
التي قمنا باستيرادها بالفعل في وقت سابق.

342
00:26:59,951 --> 00:27:06,280
لذلك، الآن، مع هذا، لقد قمت بالفعل بتكوين وحدة الاختبار الخاصة بي،

343
00:27:06,280 --> 00:27:11,644
لذلك لاحظ أن الطريقة التي نحدد بها هذا هو بالضبط مثل الطريقة التي

344
00:27:11,644 --> 00:27:17,160
نحدد بها مصمم وحدة NG لوحدة التطبيق الخاصة بنا.

345
00:27:17,160 --> 00:27:22,250
وهنا، نحن فقط تكوين تلك التي هي مطلوبة من قبل مينوكومبوننت، لذلك

346
00:27:22,250 --> 00:27:27,890
ليس لدي غيرها من تلك التي نستخدمها في وحدة التطبيق نفسها.

347
00:27:27,890 --> 00:27:32,220
إذن هذه هي الطريقة التي سنقوم بها بتكوين وحدة الاختبار.

348
00:27:32,220 --> 00:27:36,600
الآن الشيء الوحيد المفقود هو هذا ديشسيرفيسيستوب.

349
00:27:36,600 --> 00:27:41,718
لذا ما سأقوم به هو

350
00:27:41,718 --> 00:27:47,283
تنفيذ وظيفة هنا

351
00:27:47,283 --> 00:27:53,072
والدعوة التي تسمح لـ DishServiceStub

352
00:27:53,072 --> 00:27:59,973
يكون كائن جافا سكريبت بسيط هنا،

353
00:27:59,973 --> 00:28:05,537
والذي سأدعه يعمل

354
00:28:05,537 --> 00:28:10,679
بدلاً من الخدمة الحقيقية.

355
00:28:10,679 --> 00:28:13,067
يمكننا أن نخرج خدمات كهذه كما رأينا هنا

356
00:28:13,067 --> 00:28:17,807
حتى داخل هنا، أنا مجرد الذهاب

357
00:28:17,807 --> 00:28:21,846
لتوفير وظيفة بسيطة، وظيفة

358
00:28:21,846 --> 00:28:26,412
جيتدايوسيس هنا،

359
00:28:26,412 --> 00:28:33,803
والتي سوف تعود ملحوظ من نوع صحن صفيف.

360
00:28:33,803 --> 00:28:38,133
لذلك هذا هو بالضبط كيف تم تكوين قيمة الإرجاع هناك.

361
00:28:38,133 --> 00:28:42,776
وأنا ذاهب

362
00:28:42,776 --> 00:28:48,819
لإرجاع ملاحظتها من DUSES هنا.

363
00:28:48,819 --> 00:28:51,692
لذلك باستخدام هذه الوظيفة كعب هنا،

364
00:28:51,692 --> 00:28:56,349
ما أقوم به هو أنني سأقذف ديشسرفيس،

365
00:28:56,349 --> 00:29:00,906
ومن ثم تكوينه مع هذه الطريقة التي أحتاجها

366
00:29:00,906 --> 00:29:06,158
لذاكرة التخزين المؤقت الخاصة بي، قائلا جيتدايز، وعندما يتم استدعاء هذه الطريقة،

367
00:29:06,158 --> 00:29:09,355
أنا فقط ذاهب لإرجاع هذه القيمة.

368
00:29:09,355 --> 00:29:11,334
الأطباق ثابتة، هنا.

369
00:29:11,334 --> 00:29:16,740
لذا بهذه الطريقة، يمكنك الآن أن ترى كيف أتحكم في ما يتم

370
00:29:16,740 --> 00:29:23,449
توفيره للمكون من dishService كعب التي قمت بإنشائها هنا للتو.

371
00:29:23,449 --> 00:29:27,333
إذن هذه هي الطريقة التي ستقوم بها بإنشاء بذرة لـ DishService الخاص بك.

372
00:29:27,333 --> 00:29:30,570
النهج الآخر الذي يمكننا استخدامه في

373
00:29:30,570 --> 00:29:35,910
الحالات التي نستخدم فيها الخدمات يسمى باستخدام الجاسوس.

374
00:29:37,300 --> 00:29:42,840
الياسمين يدعم شيئا يسمى الجاسوس، والذي يسمح لنا للتجسس على المكالمات وظيفة،

375
00:29:42,840 --> 00:29:47,040
ومن ثم التقاط المكالمات وظيفة، ومن ثم الرد على تلك الدعوة وظيفة.

376
00:29:47,040 --> 00:29:52,981
لذلك هذا هو وسيلة أخرى لاستخدام خدمة وهمية بدلا من الخدمة الحقيقية.

377
00:29:52,981 --> 00:29:59,778
حتى الآن نحن قادرون على التحكم في ما يتم توفيره لمكون القائمة لدينا.

378
00:29:59,778 --> 00:30:04,410
حتى بعد هذه التعديلات، ثم نحن في

379
00:30:04,410 --> 00:30:09,424
طريقنا إلى أسفل إلى لدينا قبل كل طريقة هنا.

380
00:30:09,424 --> 00:30:14,172
بعد التزامن، ما سأقوم به

381
00:30:14,172 --> 00:30:19,085
هو أنني سوف أحصل على عقد من ديشسرفيس.

382
00:30:19,085 --> 00:30:24,187
لذلك ترى أنني أستخدم سرير الاختبار ثم أستخدم

383
00:30:24,187 --> 00:30:31,415
طريقة الحصول على سرير الاختبار للحصول على adhold من DishService التي تم إنشاؤها هنا،

384
00:30:31,415 --> 00:30:37,819
من هذا كعب معين أعلنا هنا في مقدمي الخدمات.

385
00:30:39,520 --> 00:30:43,140
لذلك هذا يعطيني إشارة إلى ديشسرفيس

386
00:30:43,140 --> 00:30:47,870
بحيث يمكنني استدعاء أساليب ديشسرفيس أينما أحتاج هنا.

387
00:30:47,870 --> 00:30:52,453
لذلك بعد إجراء هذه التغييرات، دعونا حفظ التغييرات

388
00:30:52,453 --> 00:30:57,679
ثم نرى كيف سيتم تشغيل CLI Angular هذا الاختبار بعد هذه التغييرات،

389
00:30:57,679 --> 00:31:02,369
وما إذا كان اختبارنا سيكون ناجحا في هذه المرحلة أم لا.

390
00:31:02,369 --> 00:31:04,462
لذلك دعونا حفظ التغييرات.

391
00:31:04,462 --> 00:31:09,412
في اللحظة التي تقوم فيها بحفظ التغييرات ستلاحظ أن

392
00:31:09,412 --> 00:31:13,060
اختبار NG الخاص بك سيبدأ في إعادة تشغيل الاختبار مرة أخرى.

393
00:31:13,060 --> 00:31:16,310
لذلك سيتم تجميع التطبيق ثم إعادة تشغيل الاختبار.

394
00:31:16,310 --> 00:31:21,450
وفويلا، اجتاز اختبارنا بنجاح بعد

395
00:31:22,540 --> 00:31:27,574
إجراء التغييرات على ملف.spec.ts المكون لدينا.

396
00:31:27,574 --> 00:31:33,270
لذلك لدينا أول اختبار، وهذا يعني أننا الآن قادرون على إنشاء مكون القائمة

397
00:31:33,270 --> 00:31:37,950
من القائمة لدينا، ملف component.spec.ts هناك.

398
00:31:37,950 --> 00:31:40,990
لذلك إعداد الاختبار لدينا يعمل بشكل صحيح.

399
00:31:40,990 --> 00:31:48,460
الآن يمكنني الدخول وإجراء اختبارات أكثر كثافة داخل مكون الاختبار الخاص بي.

400
00:31:48,460 --> 00:31:53,790
بالعودة إلى ملف component.spec القائمة، اسمحوا لي أن أضيف في اختبار آخر.

401
00:31:53,790 --> 00:32:00,420
الآن ترى ذلك لأن لدي الآن خدمة راسخة هنا

402
00:32:00,420 --> 00:32:07,292
والتي تعيد قيمة DUSES هذه يمكنني الآن الاستفادة من DishService الخاصة بي،

403
00:32:07,292 --> 00:32:11,290
والتي حصلت على المرجع هنا.

404
00:32:11,290 --> 00:32:15,934
كان داخل قبل كل منهما، ثم استدعاء طريقة getDubishes

405
00:32:15,934 --> 00:32:18,830
وبعد ذلك سأكون قادرا على الحصول على القيمة.

406
00:32:18,830 --> 00:32:23,800
والتي سوف تكون متاحة داخل بلدي عنصر القائمة التي أنا قد خلقت للتو.

407
00:32:23,800 --> 00:32:28,615
لذا يجب على MenuComponent الآن الوصول إلى الأطباق الثابتة التي

408
00:32:28,615 --> 00:32:32,856
تم توفيرها مرة أخرى إليها من خلال هذا التوقف خدمة الأطباق.

409
00:32:32,856 --> 00:32:37,608
لذلك يمكنني الآن اختبار لمعرفة ما إذا كان متغير الأطباق داخل

410
00:32:37,608 --> 00:32:43,642
MenuComponent الخاص بي يتلقى بالفعل القيم بشكل صحيح أم لا.

411
00:32:43,642 --> 00:32:46,982
لذا أدخل، دعني أخلق إختبار آخر هنا.

412
00:32:46,982 --> 00:32:52,413
لذلك سوف إنشاء اختبار هنا، مع ذلك،

413
00:32:52,413 --> 00:32:57,228
كما رأيت في وقت سابق، وذلك تماما مثل سابقتها.

414
00:32:57,228 --> 00:33:03,447
هذا الاختبار الثاني أنا ذاهب إلى استدعاء ذلك كما هو

415
00:33:03,447 --> 00:33:09,460
والأطباق, يجب أن تكون العناصر 4,

416
00:33:09,460 --> 00:33:14,605
لأن الأطباق الثابتة التي أعلناها في

417
00:33:14,605 --> 00:33:21,562
ملف.duses المشتركة لديها أربعة أطباق في ثابت هناك.

418
00:33:21,562 --> 00:33:26,232
لذلك عندما يتم

419
00:33:26,232 --> 00:33:31,018
تهيئة الأطباق الخاصة بي داخل ملف MenuComponent أو TS الخاص بي عن طريق استدعاء خدمة الصحون.

420
00:33:31,018 --> 00:33:34,632
كان يجب أن تستلم تلك الأطباق الأربعة

421
00:33:34,632 --> 00:33:37,970
وتمت تهيئتها مع تلك الأطباق الأربعة

422
00:33:37,970 --> 00:33:43,182
لذلك أنا ذاهب لإجراء بعض الاختبارات على أن الأطباق المتغيرة هناك.

423
00:33:43,182 --> 00:33:46,492
فكيف يمكنني الوصول إلى متغير الأطباق هنا؟

424
00:33:46,492 --> 00:33:50,431
لذلك أود أن أقول أنه يجب أن تكون عناصر الأطباق 4،

425
00:33:50,431 --> 00:33:54,171
وبعد ذلك سوف أعلن وظيفة السهم هنا.

426
00:33:54,171 --> 00:33:59,453
وداخل وظيفة السهم هذه سأقوم

427
00:33:59,453 --> 00:34:04,024
بتحديد الاختبارات المختلفة التي سأقوم بتنفيذها.

428
00:34:04,024 --> 00:34:10,348
حتى هنا أنا ذاهب إلى القول الآن نتوقع (مكون.

429
00:34:10,348 --> 00:34:15,378
، ولاحظ أنه يعطيني تلقائيًا

430
00:34:15,378 --> 00:34:22,290
الوصول إلى خاصية الأطباق هذه من MenuComponent.

431
00:34:22,290 --> 00:34:27,400
لذلك أستطيع أن أقول أن component.dises، ومن ثم يمكنني اختبار

432
00:34:27,400 --> 00:34:34,053
أن نرى أن طول تلك الأطباق جافا سكريبت مجموعة كائن يجب أن يكون.

433
00:34:34,053 --> 00:34:38,367
لذلك هذا هو المكان الذي أستخدم فيه طريقة ToBe للياسمين هنا.

434
00:34:38,367 --> 00:34:41,517
وبعد ذلك يمكنني تحديد القيمة 4،

435
00:34:41,517 --> 00:34:46,347
لأنني كنت توريد 4 أطباق في أطباقي الثابتة

436
00:34:46,347 --> 00:34:51,284
التي أعلنتها في ملف.duses المشتركة هناك.

437
00:34:51,284 --> 00:34:54,709
لذلك هذا هو الاختبار الأول الذي سأقوم به،

438
00:34:54,709 --> 00:34:56,867
وهذا يجب أن يكون صحيحا.

439
00:34:56,867 --> 00:35:01,096
وإلا فإن الإعداد لم يعمل بشكل صحيح، لذلك

440
00:35:01,096 --> 00:35:05,120
أعرف أن التعليمات البرمجية الخاصة بي لا تعمل بشكل صحيح.

441
00:35:05,120 --> 00:35:09,891
لكنني أعلم على وجه اليقين أن هذا الاختبار يجب أن يعمل بشكل صحيح.

442
00:35:09,891 --> 00:35:11,547
إذا كنت ترغب في التأكد،

443
00:35:11,547 --> 00:35:16,011
دعنا نحفظ التغييرات ثم نذهب ونرى الاختبار الخاص بنا قيد التشغيل.

444
00:35:16,011 --> 00:35:18,084
الذهاب إلى هذا الجهاز،

445
00:35:18,084 --> 00:35:23,323
ترى أنه الآن يتم إعادة تجميع تطبيقي، ويتم تشغيل الاختبار.

446
00:35:23,323 --> 00:35:27,941
ولاحظ جميع الخضر في نافذة المحطة الطرفية.

447
00:35:27,941 --> 00:35:32,355
وتقول تنفيذ 1 من 2 النجاح، نفذت 2 من 2 النجاح.

448
00:35:32,355 --> 00:35:36,021
مما يعني أن كلا اختباراتي ركضتا بنجاح.

449
00:35:36,021 --> 00:35:41,221
إذا نظرت إلى المتصفح الخاص بي، لذلك ترى أن مينوكومبوننت،

450
00:35:41,221 --> 00:35:44,031
كل من الاختبارات ناجحة.

451
00:35:44,031 --> 00:35:46,189
اسمحوا لي أن إنشاء عدد قليل أكثر

452
00:35:46,189 --> 00:35:51,994
وإضافتها إلى تلك المجموعة من المجموعة الثانية من الاختبارات التي أقوم بإنشائها هناك.

453
00:35:51,994 --> 00:35:58,106
الذهاب إلى ملف menu_component_spec.ts، وسوف أضيف في واحد أكثر.

454
00:35:58,106 --> 00:36:05,535
سأقول نتوقع مكون. ,

455
00:36:05,535 --> 00:36:12,420
وسوف أقول أطباق [1].

456
00:36:12,420 --> 00:36:16,105
أذكر أن اسم الطبق الأول كان,

457
00:36:18,858 --> 00:36:22,552
لذلك هذا هو ما أنا ذاهب لاختبار, الأطباق [1] .name.

458
00:36:22,552 --> 00:36:26,774
لذلك هذه هي الطريقة التي يمكنني اختبار لمعرفة ما إذا كان يتلقى القيم بشكل صحيح.

459
00:36:26,774 --> 00:36:28,431
ما هي كل الطرق التي يمكنني اختبارها؟

460
00:36:28,431 --> 00:36:34,594
إذا وضعت نقطة هناك، وسوف تعطيني اقتراح من كل الاحتمالات هنا.

461
00:36:34,594 --> 00:36:42,862
لذلك سأقول، وسوف أيضا مرة أخرى استخدام طريقة توبي هنا.

462
00:36:42,862 --> 00:36:45,623
ثم اسم الطبق الثاني هو،

463
00:36:51,916 --> 00:36:55,779
فقط أن هناك، بحيث هو العجلات الثانية أنا ذاهب لتنفيذ.

464
00:36:55,779 --> 00:36:59,819
لذلك إذا تم تشغيل التعليمات البرمجية الخاصة بي بشكل صحيح، فيجب أن يمر هذا أيضًا.

465
00:36:59,819 --> 00:37:03,389
وبالمثل، اسمحوا لي أن أضع واحدة أخرى هنا.

466
00:37:03,389 --> 00:37:06,072
لذلك سأقول نتوقع،

467
00:37:09,579 --> 00:37:16,457
مكون. الأطباق وسوف أقول 3.

468
00:37:16,457 --> 00:37:21,520
وهنا،

469
00:37:21,520 --> 00:37:26,819
يجب أن تكون الخاصية المميزة Falsy.

470
00:37:26,819 --> 00:37:33,572
أنك يجب أن تكون خاطئة، وهذا ليس صحيحا في هذه الحالة، لذلك اسمحوا لي أن أضيف في واحدة أخرى.

471
00:37:33,572 --> 00:37:35,748
يمكنك البدء في إضافة المزيد إذا كنت تريد،

472
00:37:35,748 --> 00:37:38,405
واللعب حولها حتى كنت راضيا.

473
00:37:38,405 --> 00:37:40,936
وكذلك تفعل تلك الإضافات. اسمحوا لي أن حفظ التغييرات التي قمت بها

474
00:37:40,936 --> 00:37:44,292
هنا، دعونا نذهب ونرى ما إذا كان هذا الاختبار يعمل بشكل صحيح.

475
00:37:44,292 --> 00:37:50,041
وبالعودة إلى محطتي، ترى أن اختباري يعمل مرة أخرى.

476
00:37:50,041 --> 00:37:52,720
ترى أن كلا الإختبارين كانا ناجحين،

477
00:37:52,720 --> 00:37:55,551
والآن سأجعل إحدى تلك الأشياء تفشل.

478
00:37:55,551 --> 00:37:59,754
لذلك أنا ذاهب للذهاب في وتغيير هذا إلى حقيقة.

479
00:37:59,754 --> 00:38:03,950
انظر، هذا هو متعة اللعب مع التعليمات البرمجية.

480
00:38:03,950 --> 00:38:08,111
أنا ذاهب لتغيير هذا إلى حقيقة وأنا أعلم أن هذا الاختبار سوف يفشل.

481
00:38:08,111 --> 00:38:10,186
لذلك دعونا حفظ التغييرات.

482
00:38:10,186 --> 00:38:15,977
إلقاء نظرة على المحطة، هناك ترى أن الاختبار قد فشل.

483
00:38:15,977 --> 00:38:23,603
ترى كل هذا الأحمر هنا، وهذا يعني أن الاختبار الثاني لم يمر بشكل صحيح.

484
00:38:23,603 --> 00:38:30,750
وإذا قمت بالتمرير إلى الوراء، سترى فشل هذا الاختبار بالذات،

485
00:38:30,750 --> 00:38:36,295
لأنه في مكان ما هناك سوف يقول أنه لم يفعل ذلك.

486
00:38:36,295 --> 00:38:42,119
حسنا، انظر هذا البيان هنا يقول أنه من المتوقع أن تكون خاطئة

487
00:38:42,119 --> 00:38:44,378
أن تكون صحيحة، لذلك السبب فشلت.

488
00:38:44,378 --> 00:38:47,978
لذلك لم يكن من المفترض أن يكون صحيحًا، لكنني قلت أنه يجب أن يكون صحيحًا، ومن

489
00:38:47,978 --> 00:38:51,393
الواضح أن الاختبار خاطئ، ولهذا السبب فشل الاختبار.

490
00:38:51,393 --> 00:38:55,865
لذلك هذه هي الطريقة التي يمكنك حتى اختبار لمعرفة ما إذا كان الاختبار فشل،

491
00:38:55,865 --> 00:38:59,086
إذا سألت عن الأشياء الخاطئة أيضا.

492
00:38:59,086 --> 00:39:04,107
ولكن مرة أخرى، اسمحوا لي أن أعود وأصحح ذلك مرة أخرى.

493
00:39:04,107 --> 00:39:09,068
حتى العودة إلى بلدي، ملف أنا سوف تغييرها

494
00:39:09,068 --> 00:39:13,529
مرة أخرى إلى كاذبة، لأنني أريد هذا الاختبار لتشغيل بشكل صحيح.

495
00:39:13,529 --> 00:39:15,517
الآن نحن لسنا راضين بعد

496
00:39:15,517 --> 00:39:20,117
الآن في هذا الاختبار بالذات أنا اختبار فقط

497
00:39:20,117 --> 00:39:23,825
متغير الأطباق الذي هو داخل بلدي مينوكومبوننت.

498
00:39:23,825 --> 00:39:29,777
كيف أذهب حول اللعب مع القالب نفسه؟

499
00:39:29,777 --> 00:39:35,454
لذلك هذا هو المكان الذي نحتاج فيه إلى مزيد من المساعدة من Angular.

500
00:39:35,454 --> 00:39:40,216
لإجراء بعض الاختبارات على القالب، وأنا ذاهب للذهاب في

501
00:39:40,216 --> 00:39:42,972
وسحب في بضع المزيد من الواردات هنا.

502
00:39:42,972 --> 00:39:49,896
حتى الذهاب إلى أعلى بلدي من هذا الملف، menu_component_spec.tsfile.

503
00:39:49,896 --> 00:39:55,105
أنا ذاهب لاستيراد، واحد

504
00:39:55,105 --> 00:40:00,594
آخر يسمى بواسطة، وهي طريقة.

505
00:40:00,594 --> 00:40:03,044
سترى لي استخدام هذا في فترة قصيرة.

506
00:40:03,044 --> 00:40:10,855
يجب استيراد هذا من، الزاوي،

507
00:40:15,209 --> 00:40:18,863
/منصة المتصفح.

508
00:40:18,863 --> 00:40:27,301
وأيضًا، سأقوم باستيراد عنصر آخر وهو عنصر تصحيح.

509
00:40:27,301 --> 00:40:32,009
يسمح لي عنصر التصحيح بالوصول إلى DOM حتى

510
00:40:32,009 --> 00:40:37,040
أتمكن من إجراء اختبارات على عناصر DOM مباشرة.

511
00:40:37,040 --> 00:40:44,548
لذلك هذا هو المكان الذي سأقوم باستيراد هذا منه، رمز Angular هنا، لذلك هذان الاثنان.

512
00:40:44,548 --> 00:40:49,580
لذلك أضف في By و DebugElement إلى الواردات،

513
00:40:49,580 --> 00:40:54,947
وبعد ذلك بمجرد القيام بذلك، سنسير في الشفرة هنا.

514
00:40:54,947 --> 00:40:59,338
وبعد ذلك سنضيف في اختبار واحد آخر حيث سنذهب إلى DOM

515
00:40:59,338 --> 00:41:01,690
وجلب أحد العناصر من المستند.

516
00:41:01,690 --> 00:41:06,404
لذلك أود أن أقول ذلك، لذلك اختبار واحد آخر هنا،

517
00:41:06,404 --> 00:41:09,889
ما الذي سيفعله هذا الاختبار؟

518
00:41:09,889 --> 00:41:14,970
لهذا الاختبار،

519
00:41:14,970 --> 00:41:22,903
سأحدد الاختبار كما يجب استخدام الأطباق في القالب.

520
00:41:22,903 --> 00:41:25,838
أنا فقط أقول عشوائيا شيئا هنا،

521
00:41:25,838 --> 00:41:29,804
لأنني أريد فقط للتحقق من أن متغير الأطباق،

522
00:41:29,804 --> 00:41:34,905
أيا كان ما هو متاح، يتم استخدامه في القالب بشكل صحيح.

523
00:41:34,905 --> 00:41:38,412
لذلك هذا هو الجزء الذي أقوم بإعداده،

524
00:41:38,412 --> 00:41:42,104
ثم الجزء الثاني هو وظيفة السهم،

525
00:41:42,104 --> 00:41:47,760
وضمن وظيفة السهم هذه سأقوم بتزويد الشفرة للاختبار التالي.

526
00:41:47,760 --> 00:41:52,734
حتى داخل وظيفة السهم هذه ما

527
00:41:52,734 --> 00:41:58,008
سأقوم به هو أنني سوف أدعو أولا لاعبا اساسيا

528
00:41:58,008 --> 00:42:00,880
ومن ثم الكشف عن التغييرات.

529
00:42:00,880 --> 00:42:05,990
ثم بعد ذلك سأقول السماح دي:،

530
00:42:12,226 --> 00:42:13,908
هو ديبوغليمنت.

531
00:42:13,908 --> 00:42:20,748
من خلال هذا أنا ذاهب للحصول على الوصول إلى DOM

532
00:42:20,748 --> 00:42:26,566
ومن ثم العنصر سيكون HTMLElement.

533
00:42:26,566 --> 00:42:33,243
لذلك أريد الحصول على الوصول إلى أحد هتملليمنتس من بلدي دوم.

534
00:42:33,243 --> 00:42:35,369
فما هو العنصر الذي أريده؟

535
00:42:35,369 --> 00:42:38,846
لذلك للقيام بذلك، وسوف تحصل على الوصول إلى،

536
00:42:41,533 --> 00:42:48,138
ديبوغليمنت عن طريق قول لاعبا اساسيا و ديبوغليمنت.

537
00:42:48,138 --> 00:42:54,933
لذلك هذا يسمح لي بالوصول إلى العناصر من DOM الخاص بي هنا حتى DebugElement.

538
00:42:54,933 --> 00:43:02,220
وبعد ذلك يمكنني الاستعلام ثم اختيار فقط تلك التي ستكون ذات فائدة بالنسبة لي.

539
00:43:02,220 --> 00:43:08,690
لذلك أنا ذاهب إلى الاستعلام وبعد ذلك سوف أطلب عن طريق استخدام By.

540
00:43:08,690 --> 00:43:15,908
لذلك لاحظ أين أستخدم بواسطة ذلك الذي قمت بتضمينه عن طريق استيراده.

541
00:43:15,908 --> 00:43:20,780
لذا، يدعم The By مجموعة من المقاييس التي يمكنني من خلالها

542
00:43:20,780 --> 00:43:25,020
طلب الوصول إلى عناصر معينة في DOM.

543
00:43:25,020 --> 00:43:31,824
لذا يمكنك أن ترى أنه سيخبرني بما يمكنني استيراده

544
00:43:31,824 --> 00:43:36,846
ثم يسمح لي css بالوصول

545
00:43:36,846 --> 00:43:43,018
إلى عناصر مطابقة بواسطة محدد css المحدد.

546
00:43:43,018 --> 00:43:45,789
فما هو محدد css الذي سأستخدمه؟

547
00:43:45,789 --> 00:43:50,503
وأنا أعلم أن هناك عنصر h1، عنصر html في DOM

548
00:43:50,503 --> 00:43:55,750
وأنني ذاهب للحصول على الوصول إلى العنصر h1 الأول من DOM.

549
00:43:55,750 --> 00:44:00,764
واحد من عناصر h1 في هناك هو واحد الذي

550
00:44:00,764 --> 00:44:05,670
سيتم عرض اسم كل طبق هناك.

551
00:44:05,670 --> 00:44:10,459
ننظر إلى الوراء وترى أن داخل الجدول الزمني للشبكة باستخدام h1

552
00:44:10,459 --> 00:44:13,839
وأن h1 يحتوي على اسم الطبق هناك.

553
00:44:13,839 --> 00:44:16,723
لذلك أنا ذاهب للحصول على عقد من ذلك ومن

554
00:44:16,723 --> 00:44:21,198
ثم أنا ذاهب للحصول على عنصر وبعد ذلك أود أن أقول دي،

555
00:44:21,198 --> 00:44:26,385
من عنصر التصحيح، وبعد ذلك أود أن أقول ناتيفيليمنت.

556
00:44:26,385 --> 00:44:31,572
وهذا يعطيني الوصول إلى العنصر على وجه التحديد في DOM

557
00:44:31,572 --> 00:44:37,873
الذي أشير إليه وقد اخترت باستخدام هذا البيان في وقت سابق.

558
00:44:37,873 --> 00:44:43,091
لذلك عندما استعلام DOM ثم أقول، أعد لي كل

559
00:44:43,091 --> 00:44:48,964
تلك التي تستخدم العلامة h1 لعنصر HTML.

560
00:44:48,964 --> 00:44:54,077
وأحصل على الوصول إلى ذلك، ويمكنني الاستعلام

561
00:44:54,077 --> 00:44:58,349
وأقول توقع (el.textContent).

562
00:44:58,349 --> 00:45:02,869
لذلك أنا أبحث عن المحتوى داخل هذا h1 في بلدي

563
00:45:02,869 --> 00:45:07,718
قالب ثابت المحتوى وبعد ذلك سأقول إلىContenture.

564
00:45:07,718 --> 00:45:12,596
لذلك هذه طريقة أخرى، toContection، هذه طريقة ياسمين تسمى toContect.

565
00:45:12,596 --> 00:45:18,352
هذا يتحقق لمعرفة ما إذا كان يحتوي على قيمة معينة،

566
00:45:18,352 --> 00:45:23,262
وبعد ذلك سوف تحقق من DUSES (0) .name.

567
00:45:23,262 --> 00:45:29,360
فهل تم إنشاء الطبق الأول في DOM وإضافته إلى DOM؟

568
00:45:29,360 --> 00:45:33,981
إذا كان القالب الخاص بي يعمل بشكل صحيح، فيجب أن يكون موجودًا في DOM.

569
00:45:33,981 --> 00:45:38,626
لذلك هذا هو ما أنا ذاهب للتحقق لمعرفة ما إذا كان

570
00:45:38,626 --> 00:45:42,658
قد تم إنشاء بلاط الشبكة المقابلة لأول DISH وإضافته إلى DOM أم لا.

571
00:45:42,658 --> 00:45:47,521
لذلك أقول DAISS (0) .name، ويقول إلى الأحرف الكبيرة.

572
00:45:47,521 --> 00:45:52,395
أذكر أنني استخدمت أنبوب الأحرف الكبيرة لعرض اسم

573
00:45:52,395 --> 00:45:56,647
DISH عن طريق تحويل اسم الطبق إلى

574
00:45:56,647 --> 00:46:01,450
جميع الأحرف الكبيرة في بلاط الشبكة في مكون القائمة.

575
00:46:01,450 --> 00:46:05,830
لذا هذا ما سأتفقده، حسناً، لذا أنا فقط أتحقق

576
00:46:05,830 --> 00:46:07,200
من واحد منهم فقط.

577
00:46:07,200 --> 00:46:10,983
يمكنك إجراء العديد من هذه الاختبارات، يمكنك التحقق من

578
00:46:10,983 --> 00:46:16,016
DUSES (1) .name ثم DUSIES (2) .name وأكثر إذا كنت تريد.

579
00:46:16,016 --> 00:46:21,683
أنا مجرد توضيح مثال واحد لكيفية الوصول إلى عناصر DOM

580
00:46:21,683 --> 00:46:24,783
ثم التحقق من ما تحتوي عليه في الداخل هناك.

581
00:46:24,783 --> 00:46:29,585
لذلك هذا هو اختبار واحد سوف أجريه هنا، لذلك اسمحوا لي حفظ التغييرات،

582
00:46:29,585 --> 00:46:32,930
ومن ثم معرفة ما إذا كان الاختبار يعمل بشكل صحيح.

583
00:46:32,930 --> 00:46:35,951
الذهاب إلى تلك المحطة وعندما يتم تشغيل الاختبار،

584
00:46:35,951 --> 00:46:41,039
ترى أن أول اختبار لي كان ناجحا، وكان الاختبار الثاني ناجحا،

585
00:46:41,039 --> 00:46:44,635
والاختبار الثالث كان أيضا ناجحا، ورائع.

586
00:46:44,635 --> 00:46:48,374
الآن، دعني أجعل الإختبار الثالث يفشل

587
00:46:48,374 --> 00:46:52,273
الذهاب إلى ملف menucomponentspec.ts،

588
00:46:52,273 --> 00:46:58,818
وأنا ذاهب لإزالة هذا إلى أحرف كبيرة، ومن ثم تنفيذ نفس الاختبار.

589
00:46:58,818 --> 00:47:02,269
سترى أن هذا الاختبار سيفشل، حفظ التغييرات.

590
00:47:02,269 --> 00:47:06,941
وعندما يتم تشغيل الاختبار، سترى أن الاختبار الثالث سيفشل.

591
00:47:06,941 --> 00:47:11,251
لأنني تسبب في فشلها عن طريق التحقق من الشيء الخطأ

592
00:47:11,251 --> 00:47:13,894
هناك وهناك تذهب، فشل الاختبار الثالث هنا.

593
00:47:13,894 --> 00:47:18,490
لذلك هذه هي الطريقة التي يمكنك التحقق لمعرفة ما إذا كانت بعض الأشياء التي

594
00:47:18,490 --> 00:47:22,471
من المفترض أن تكون هناك هناك بشكل صحيح أم لا.

595
00:47:22,471 --> 00:47:28,360
لماذا هذه الحالة، حتى تتمكن من رؤية هنا، والسبب في فشل هذا الاختبار.

596
00:47:28,360 --> 00:47:34,750
يتوقع أن يكون هذا في DOM،

597
00:47:34,750 --> 00:47:40,670
ولكن بدلاً من ذلك هذا هو ما هو موجود في DOM في العنصر h1 في DOM.

598
00:47:40,670 --> 00:47:43,929
لذلك هذا هو السبب في فشل الاختبار هنا.

599
00:47:43,929 --> 00:47:47,718
لذلك مرة أخرى مرة أخرى اسمحوا لي تصحيح الخطأ

600
00:47:47,718 --> 00:47:53,922
وبعد ذلك عندما أعيد تشغيل الاختبار يجب أن نرى الآن أن الاختبار يمر بنجاح.

601
00:47:53,922 --> 00:47:58,757
بالعودة إلى المحطة، سترى أنه عند تشغيل هذا الاختبار الآن سيتم

602
00:47:58,757 --> 00:47:59,875
تشغيله بشكل صحيح.

603
00:48:03,610 --> 00:48:08,670
وهناك تذهب، يتم تمرير جميع الاختبارات الثلاثة من قبل طلبي.

604
00:48:08,670 --> 00:48:13,970
أيضا، بالنظر إلى المتصفح، يمكنك أن ترى أن الاختبارات الثلاثة

605
00:48:13,970 --> 00:48:19,770
تم تنفيذها بنجاح على ملف قالب مكونات القائمة

606
00:48:19,770 --> 00:48:22,571
وأيضا مكون القائمة نفسه.

607
00:48:22,571 --> 00:48:28,398
الآن من الواضح أن هذا ليس بالضرورة الاختبار الأكثر شمولا

608
00:48:28,398 --> 00:48:32,407
لكنني أردت فقط أن أعطيك نكهة لكيفية

609
00:48:32,407 --> 00:48:37,398
إنشاء الاختبارات داخل تطبيق Angular الخاص بك.

610
00:48:37,398 --> 00:48:42,025
إذا كنت تحصل على حمل بعيدا يمكنك الذهاب إلى جميع ملفات.ts المواصفات التي لديك ومن

611
00:48:42,025 --> 00:48:44,194
ثم كتابة الاختبار الخاص بك

612
00:48:44,194 --> 00:48:49,580
لكل واحد من هذه المكونات باستخدام المعرفة التي اكتسبتها هنا.

613
00:48:49,580 --> 00:48:55,150
أيضًا، يمكنك قراءة المزيد حول الاختبار في وثائق Angular

614
00:48:55,150 --> 00:49:00,590
ثم معرفة المزيد من الطرق لإجراء الاختبارات على تطبيق Angular الخاص بك.

615
00:49:00,590 --> 00:49:05,190
الاختبار هو حقل في حد ذاته، لذا إذا كنت بحاجة إلى تعليمك كل شيء عن

616
00:49:05,190 --> 00:49:10,410
الاختبار الذي سيأتي دورة كاملة في حد ذاته لـ Angular.

617
00:49:10,410 --> 00:49:14,500
وفي هذه الدورة، أردت فقط أن أعطيك نكهة لكيفية

618
00:49:14,500 --> 00:49:17,820
إجراء الاختبار في تطبيق Angular الخاص بك.

619
00:49:17,820 --> 00:49:21,585
وهذا مثال على كيفية تكوين

620
00:49:21,585 --> 00:49:27,441
وتنفيذ اختبار وحدة على أحد المكونات في تطبيق Angular الخاص بنا.

621
00:49:27,441 --> 00:49:33,901
هذا هو الوقت المناسب بالنسبة لك للقيام بتعليق جيد مع اختبار مكونات الرسالة.