عطر الياسمين من كل أكاليل الزهور تلك
في شارع المعبد يهوى في الهواء
ياله من شعور مستقر
لابد أنها العاقبة الجيدة من حياتي السابقة
آسف، أين كنت؟
كنت أتحدث معك عن اختبار الزاوي، أليس كذلك؟
ونحن في طريقنا إلى استخدام تعديل الكارما للقيام الاختبار الزاوي لدينا.
لذلك دعونا الحصول على مع ذلك.
شيء واحد جيد حول استخدام CLI Angular هو أنه يقوم بإعداد جميع السقالات
لك لتضمين الدعم تلقائيًا
لاختبار تطبيق Angular الخاص بك.
لذلك ستلاحظ أنه كلما قمت بإنشاء
مكون أو خدمة جنبا إلى جنب مع ملفات TS المكون،
ستلاحظ أيضًا ملفًا يسمى component.spect.ts
مضمنًا بالفعل في مجلدات مشروعك.
وأيضا، إذا ذهبت إلى ملف package.json،
سترى أن هناك بالفعل دعم للاختبار الزاوي المضمنة هناك.
لذلك إذا ذهبت إلى تبعيات ديف سترى أن جوهر الياسمين،
مراسل مواصفات الياسمين،
وحدات npm ذات الصلة الكرمة والكرمة مثبتة بالفعل داخل
التطبيق الزاوي الخاص بك الذي هو سقالة من قبل كلي الزاوي.
لذلك، لدينا كل الأشياء والمكان بالنسبة
لنا لمجرد الحصول على القيام باختبارنا للتطبيق الزاوي لدينا.
لذلك، إذا نظرت حولك سترى أن هناك
ملف يسمى test.ts في المجلد المصدر الخاص بك،
لذلك دعونا فتح ملف test.ts.
سترى أيضا أن هناك مجلد آخر هنا يسمى e2e.
و سنعود إلى ذلك في التمرين التالي.
ولكن في المجلد test.ts، سترى أن هذا هو المكان الذي يتم فيه
تكوين دعم الكارما الخاص بك هنا.
حتى الذهاب إلى هذا الملف test.ts، افتراضيا،
عند استخدام دعم CLS الزاوي للاختبار،
فإنه سيتم تشغيل الاختبارات لجميع المكونات
والخدمات التي يتم تضمينها في التطبيق الزاوي الخاص بك.
الآن، أنا ذاهب إلى توضيح لكم كيفية القيام اختبار
لعنصر واحد محدد، مينوكومبوننت.
لذلك أريد تقييد نفسي لاستخدام ملف.spec مكون القائمة فقط
وإجراء الاختبار لمكون القائمة فقط.
لذلك، انتقل إلى ملف.ts test.ts.
إحدى الطرق التي يمكننا بها تكوين اختبار CLIs Angular لتشغيل الاختبار فقط
لمكون معين هي الانتقال إلى هذا السطر هنا،
والذي يقول سياق const ثم تغيير هذا إلى القائمة،
يمكنك أن ترا/menu\ .component وملف spec.ts.
في وقت سابق كان ملف/\ .spec.ts فقط، مما يعني أنك
ستقوم بتشغيل كافة ملفات المواصفات الموجودة في مجلد مصدر المشروع الخاص بك.
لذلك، في الوقت الحالي، من خلال تحديد هذا هنا،
أنا مهتم لتشغيل الاختبار فقط لملف مواصفات مكون القائمة هنا.
الآن هذا أنا معرفة من خلال البحث حول
تجاوز المكدس حيث وجدت شخص ما يعطيني الجواب على هذا،
مشيرا إلى بعض الموارد على Angular
CLI، وهكذا اكتشفت أن هذه هي الطريقة لتقييد
الاختبار إلى ملف اختبار مكون معين.
لذلك بعد إجراء تغيير على ملف.ts test.ts، دعونا حفظ التغيير.
الآن، سنحاول تشغيل اختبارنا على مكون القائمة.
لذلك كما ترى، في مكون القائمة، لدينا بالفعل
ملف.spec.ts مكون القائمة، والذي يحتوي على بعض التعليمات البرمجية بالفعل.
دعونا نحاول تشغيل هذا الاختبار ونرى ما يحدث.
الذهاب إلى المحطة الطرفية، إضافة المطالبة، اكتب اختبار ng، وهذا
سيؤدي إلى CLI Angular بدء اختبار مكون القائمة.
لذلك عند كتابة هذا وضرب العودة،
ثم الزاوي كلي سوف تبدأ تجميع التطبيق الزاوي الخاص بك.
سيفتح أيضًا نافذة متصفح، وفي حالتي سيفتح
نافذة متصفح Chrome ثم استخدم نافذة المتصفح هذه لتشغيل الاختبار.
وترى أنه في الجزء الخلفي، لديك نافذة متصفح Chrome قيد التشغيل
وكلها مليئة باللون الأحمر ومجموعة كاملة من الكلمات هناك.
سيتم أيضًا طباعة نفس المعلومات في نافذة وحدة التحكم الخاصة بك،
ومن هذا يمكنني أن أرى أن الاختبار لم يتم تشغيله بشكل صحيح.
هناك شيء لم يتم تكوينه بشكل صحيح في ملف الاختبار الخاص بي، لذلك سأحتاج إلى الذهاب
وتحرير ملف الاختبار الخاص بي لتضمين الدعم المناسب لتشغيل هذا الاختبار بشكل صحيح.
لذلك دعونا نذهب إلى ملف.ts مكون القائمة
ثم إعداد اختبارنا وفقا لذلك.
الآن يمكننا ترك اختبار ng قيد التشغيل هنا.
في أي وقت تقوم بإجراء تغييرات على ملف component.ts
المصغر أو ملف component.spec.ts المصغر
وحفظ التغييرات، سيتم تشغيل هذا الاختبار تلقائيًا في هذه المرحلة.
لذلك، دعونا نذهب إلى ملف MenuComponent.spect.ts.
الذهاب إلى ملف MenuComponent.spect.ts،
ونحن نفهم أن ملف spect يستخدم بناء جملة الياسمين لوصف الاختبار.
لذلك كنت قد لاحظت بالفعل أن هناك شيئا هنا
الذي يبدأ مع وصف ومن ثم هناك وظيفة محددة في هناك.
لذلك هذا ما كنت أشير إليه عندما تحدثت عن بناء جملة الياسمين في وقت سابق.
وأيضا إذا قمت بالتمرير لأسفل سترى ذلك أو نحو ذلك هناك.
وبالإضافة إلى ذلك، سترى شيئا يسمى قبلكل، هنا.
دعونا نفحص هذا الملف بمزيد من التفصيل لفهم كيفية
تكوين هذا الملف، وكيفية إعداد هذا الاختبار في هذا الملف بالذات.
لذلك داخل ملف الاختبار هذا، ستلاحظ
أننا نستورد هنا مجموعة من الفئات من اختبار Angular الأساسي.
لذلك تمكنك هذه الوحدة من توفير دعم الاختبار
للتطبيق الزاوي الخاص بك، وتتيح لك تصميم الاختبار للمكون الخاص بك.
لذلك ترى أنني استيراد المتزامن و
كومبوننتفيكستور و تستبيد من مكتبة الاختبار هذه.
أنا ذاهب إلى استدعاء ذلك مكتبة الاختبار.
كما ترى أن مينوكومبوننت يتم استيرادها أيضا هنا.
الآن، بمجرد أن نفهم هذين الاثنين،
دعونا نسير في التعليمات البرمجية لفهم ما نحاول القيام به هنا.
لذا، هنا، كما تتوقع، هذا الوصف هنا
يحدد أن هذه الوظيفة المعينة تصف،
اختبار يستند إلى الياسمين الذي نحدده لتطبيق Angular الخاص بنا.
لذلك عندما تنظر إلى الوصف هنا،
سترى أن هذا يتضمن كل هذا الرمز هنا.
لذلك هذا هو جزء من مجموعة واحدة من الاختبارات التي نقوم بتشغيلها هي
عنصر القائمة لدينا.
حتى داخل الوصف، سترى أن هناك سلسلة هنا.
يحدد هذا مجموعة معينة من الاختبارات التي تقوم بتشغيلها هنا.
لذلك، فإنه يقول على مكون القائمة.
حتى هنا يمكنك تحديد أي سلسلة تريدها.
يمكنك استخدام هذا كوصف
لتحديد ما تقوم به هذه المجموعة المعينة من الاختبارات.
لذا هنا، أنا ذاهب إلى البقاء مع شيء قبل.
نحن نحاول اختبار مكون القائمة.
وبعد ذلك، ترى أننا نحدد وظيفة addo هنا.
ضمن هذه الوظيفة addo، سنقوم ببناء الاختبار.
لدينا مينوكومبوننت هنا.
حتى بعد هذا، سترى أننا نعلن متغير يسمى المكون،
وهو من نوع MenuComponent.
الآن وبعد ذلك، نحن نعلن أيضا متغير لاعبا اساسيا،
وهو من نوع ComponentFixture.
وهو من النوع MenuComponent.
الآن، لماذا هذا مثير للاهتمام؟
الآن، ضمن التطبيق الزاوي لدينا،
لدينا مينوكومبوننت التي قمنا بتصميمها بالفعل.
لذا في ملف الاختبار هذا،
سنقوم بإنشاء ذلك MenuComponent باستخدام TestBed الزاوي،
ثم سنقوم بإجراء الاختبارات على MenuComponent.
لذلك نحن ذاهبون لعزل مينوكومبوننت، ومن
ثم إجراء اختبارات وحدة على هذا المكون المحدد.
الآن، هذا هو المكان الذي أدوات الاختبار الزاوي
التي تأتي مع الدعم باستخدام TestBed.
يسمح لي TestBed بإعداد البيئة التي
يمكنني من خلالها اختبار المكون الزاوي الخاص بي.
حتى هنا، ترى أننا نقول TestBed
ثم استدعاء طريقة وحدة اختبار التكوين من فئة TestBed هنا.
وداخل وحدة اختبار التكوين هذه،
يمكنك الإعلان عن مجموعة من الأشياء، وسوف تراني إضافة المزيد هنا.
هذا يعمل تماما مثل تكوين وحدة نغ
التي تقوم به لدينا في وحدة هناك.
لذلك
سيتم الإعلان عن جميع المعلومات التي تحتاجها لإعداد مينوكومبوننت هنا.
لذا فإن جزء نموذج NG الذي رأيته في وحدة التطبيق،
يمكن استخدام نوع مماثل من بناء الجملة هنا للإعلان عن دعم
اختبار MenuComponent هنا.
وأيضا بعد ذلك، سترى هذه الوظيفة تسمى إلى كومبيكومبوننتس.
لذلك سوف تقوم هذه الطريقة بتجميع MenuComponent
وجعلها جاهزة لإجراء الاختبار.
لاحظ أيضا، أن هذا الشيء كله، هذه الوظيفة هنا،
محاطة داخل شيء يسمى التزامن هنا.
الآن، لماذا نحتاج إلى هذا المتزامن؟
الآن، لأن إعداد المكونات باستخدام هذه
الطريقة CompileComponents يستغرق بعض الوقت.
وحتى يكتمل هذا، لا يمكننا المضي قدما في الاختبارات.
لذا باستخدام وحدة التزامن، فإننا نحدد بشكل أساسي
أنني سأنتظر حتى يكتمل هذا الأمر برمته قبل المضي قدمًا.
لذا فإن الوحدة النمطية غير المتزامنة كما ترى،
تلتف وظيفة اختبار داخل منطقة اختبار غير متزامنة.
لذا، ما يعنيه هذا هو أن هذا الاختبار سيكتمل تلقائيًا
عند إجراء جميع المكالمات غير المتزامنة داخل هذه المنطقة.
إذن هذا ما يفعله استخدام المتزامن الذي لدينا هنا.
لذلك ما يعنيه هذا هو أنه يمكنك استخدام وظيفة المزامنة هذه،
إما في قبل كل منها أو في ذلك أيضا، وذلك ضمن ذلك، إعلاننا.
لذلك عندما ترى داخله أيضًا، سترى أنه يمكنك استخدام المتزامن.
لذلك في حال كان لديك أي عمليات هنا تتم بشكل غير متزامن.
ثم تحتاج إلى الانتظار حتى تكتمل هذه العمليات حتى يكتمل هذا الاختبار.
على سبيل المثال، إذا كنت تتصل بخدمة وانتظر حتى
تقوم الخدمة بإرجاع القيمة ثم.
كل ما يحتاج إلى إكمال قبل أن تتمكن من المضي قدما.
لذلك يتم تمكين تلك باستخدام هذا المتزامن، لإحاطة هذه الوظيفة هنا.
الآن، بالإضافة إلى ذلك، الثانية قبلكل، الآن قمنا بفصل
هذا إلى قسمين منفصلين قبلكل هنا، لأننا نريد أن يكتمل هذا.
وهذا كومبيكومبوننتس سوف يستغرق قدرا معينا من الوقت،
وخاصة إذا كان المكون الخاص بك يستخدم قالب خارجي،
كما نفعل في مينوكومبوننت لدينا.
لذلك، فإنه يتطلب بعض الوقت للقالب الخارجي للحصول على استعداد
لاختبار بلدي للمضي قدما.
لذلك، نحن بحاجة إلى الانتظار حتى يكتمل هذا الشيء كله.
لذلك هذا هو السبب بعد اكتمال هذا،
ثم سوف نصل إلى الجزء الثاني حيث نحن ذاهبون
للحصول على بعض الإشارات إلى بعض القيم من سرير الاختبار.
الآن، ما هو هذا قبلكل وظيفة التي تقوم بها هنا؟
ما يعنيه قبلEach هو أنه مهما كنت تعلن داخل هنا،
سيتم تنفيذ هذه الوظيفة قبل اختبار كل،
والتي ستقوم بتحديدها لاحقًا عند استخدامه.
لذلك باستخدام هذا قبلEach، يمكنك إعداد
التكوين الأولي للاختبار الخاص بك للمضي قدما.
وهذا يعني أنه هنا، ونحن إعداد TestBed
لدينا، وإعداد مكون القائمة لدينا ومن ثم إعداد بعض الأشياء
لمكون القائمة لدينا، قبل المضي قدما في تنفيذ الاختبار.
لذلك بالنسبة لكل اختبار ستقوم بتحديده باستخدام هذا الاختبار هنا،
سيتم تنفيذ هذه قبل كل شيء تحدده في هذا قبل كل منهما، قبل إجراء الاختبار.
حتى هنا كما ترون أنا إعداد تستبيد.
ثم بعد ذلك، أنا الحصول على الوصول إلى لاعبا اساسيا.
لذلك أنا باستخدام تستبيد، وأنا أقول كريتكومبوننت و مينوكومبوننت.
لذلك هذا سوف يعود لي إشارة إلى مينوكومبوننت الذي
أنا خلق داخل بلدي اختبار البرنامج النصي هنا ومن
ثم الحصول على إشارة إلى ذلك، لأنني سوف تحتاج إلى إشارة إلى
ذلك من أجل القيام ببعض التلاعب على هذا المكون هناك.
بالإضافة إلى ذلك، من لاعبا اساسيا، وأنا الحصول على الوصول إلى
مثيل المكون الذي يتم إنشاؤه من قبل لاعبي المكون هنا.
حتى كما ترون، لاعبا اساسيا مكون من نوع مينوكومبوننتينستانس
ثم استدعاء كومبوننتينستانس، يعطيني الوصول إلى
هذا المكون القائمة المحددة التي قمت بإنشائها داخل تيستبيد لتنفيذ اختبارات الوحدة.
الآن، بعد هذا نسمي هذا detectChanges.
الآن، ما يعنيه هذا هو أن هذا لن يستمر إلا بعد
اكتمال جميع التغييرات، ومن ثم التعرف على أن التغييرات قد اكتملت.
لذلك سيؤدي هذا إلى تشغيل دورة اكتشاف التغيير لهذا المكون.
لذلك ما يعنيه هذا هو أن هذا سيضمن أنك قمت
بإجراء أي تغييرات في وقت سابق، ويتم اكتشاف جميع التغييرات
واستقرار كل شيء قبل أن تتمكن من المضي قدما في الاختبار الخاص بك.
الآن، بعد هذا، سنستخدمه لتكوين أول اختبار لدينا هنا.
ما هو الاختبار الأول الذي نقوم به هنا؟
الاختبار الأول،
ما سنقوم باختباره هو التأكد من أن المكون قد تم إنشاؤه.
لذلك، داخل هذا هنا، أنا باستخدام بناء جملة ياسمين وأنا أقول ذلك.
ثم هنا يمكنك إعطاء وصف في شكل سلسلة
لتحديد ما هو اختبار هذا الاختبار في الواقع حول.
لذلك، ما نقوله هو،
نحن نختبر لمعرفة ما إذا كان المكون قد تم إنشاؤه أم لا.
لذلك للقيام بذلك، أقول أنه يجب أن يخلق معنى أن
هذا الإعداد هنا يجب أن يكون قد خلق المكون بشكل صحيح.
لذلك هذا هو السبب في الداخل هنا، وأنا باستخدام هذه الطريقة تسمى توقع.
لذا فإن طريقة التوقع داخل هنا تأخذ قيمة هنا،
وبعد ذلك يمكنك اختبار لمعرفة ما إذا كانت هذه القيمة تلبي شيئًا ما.
لذلك نحن هنا نقول لبتروثي، وهذا يعني أن هذه القيمة الخاصة يجب أن تكون صحيحة.
هذا هو ما تحدده هذه الطريقة تسمى هنا tobetRuthy.
يمكنك أيضا أن تقول TobeFalsy، وهذا يعني أنه يجب تقييم إلى false.
ولكن في هذه الحالة،
نحن اختبار للتأكد من أن المكون قد تم إنشاؤه بشكل صحيح.
لهذا السبب نحن نقول أن نتوقع أن يكون تروثي هنا.
لذلك هذا اختبار بسيط نقوم به للتأكد من أن
المكون الخاص بنا يتم إنشاؤه بشكل صحيح.
ولكن كما ندرك عندما أقوم بتشغيل هذا الاختبار، فإنه لا يعمل بشكل صحيح.
دعونا ننظر بسرعة ونرى ما هي المشكلة داخل
إنشاء المكون لدينا في نافذة وحدة التحكم هناك.
العودة إلى نافذة وحدة التحكم، اسمحوا لي فقط استعراض مرة أخرى
ونرى أين المشكلة.
وبدأت ألاحظ أن هذا يحدد أنه لا يبدو أنه
يتعرف على بعض الأشياء التي يستخدمها المكون الخاص بي. على
وجه الخصوص، فإنه يقول أن مدسبانخ
هو شيء أنه لا تعترف،
و مدجيتغريدليست وعدد قليل من الأشياء الأخرى.
هذا يوحي لي على الفور أنني بحاجة إلى القيام ببعض
التكوينات داخل ملف الاختبار الخاص بي قبل أن يتم تشغيل الاختبار بشكل صحيح.
لذلك، دعونا نعود إلى ملف المواصفات لدينا وإجراء بعض التغييرات عليه.
العودة إلى ملف المواصفات
لدينا، من تذكرنا كيف أنشأنا القالب.
ونحن نعلم أنه داخل القالب كان لدينا رابط جهاز توجيه في
قالب مينوكومبوننت.
لذلك أحتاج إلى دعم للتوجيه من أجل التعرف على
ارتباط جهاز التوجيه هذا الذي استخدمناه داخل ملف MenuComponent.html.
لذلك هذا هو المكان الذي سأقوم باستيراد
دعم اختبار آخر
يسمى RoutertestingModule،
والذي يتوفر من مكتبة الزاوية/الموجه/الاختبار هنا.
لذا ستمكنني وحدة اختبار جهاز التوجيه هذه من
تكوين بعض الجوانب حول جهاز التوجيه الخاص بي.
سنرى أن الطريقة التي نستخدم بها هذا تختلف قليلاً عن وحدة جهاز التوجيه
التي استخدمناها في تطبيقنا.
لذلك سنقوم باستيراد وحدة اختبار التوجيه، كما لاحظت
أننا نستخدم بعض الرسوم المتحركة،
وأيضا باستخدام مكون المادة الزاوي داخل القالب الخاص بنا.
لذلك أنا بحاجة إلى استيراد
بروسيرانيماتيونسومودول في ملف الاختبار الخاص بي.
لذلك يأتي هذا من الزاوي/المنصة/المتصفح.
الآن ستلاحظ أننا بحاجة إلى القيام بذلك بشكل صريح هنا ببساطة لأنه،
في تطبيق Angular الفعلي كل هذا كان في وحدة التطبيق،
وهكذا كان متاحًا للمكونات.
الآن نحن اختبار هذا المكون، مينوكومبوننت في عزلة، لذلك
هذا هو السبب في أنها لا تعرف عن كل هذه الأشياء لذلك
نحن بحاجة إلى تحديد صراحة كل هذه الأشياء هنا.
لذلك سوف استيراد ذلك من الرسوم المتحركة متصفح منصة IM هنا.
حتى angular.platform.browser الرسوم المتحركة استيراد
وحدة الرسوم المتحركة المتصفح هنا.
اسمحوا لي أن تشمل وحدة الطبقة المرنة، لذلك
سوف تشمل الزاوي فليكسلايوت.
لذلك هناك حاجة إلى هذه لأنني في حاجة إليها في القالب،
وأنا ذاهب أيضا لاستيراد هذا الطبق من،
مشتركة/طبق لأنه كما سترى في وقت لاحق،
وأنا بحاجة إلى تكوين، A،
ديشسرفيس لأن بلدي مينوكومبوننت
يعتمد على ديشسرفيس لذلك
أنا بحاجة إلى ذلك أيضا في مكان.
على الرغم من أنك سترين أنني سأتوقف عن ذلك
سأشرح ذلك في فترة قصيرة، وأيضا أحتاج إلى استيراد بعض الأشياء الأخرى.
سأقوم باستيراد DUSES من،
تتذكر أننا نستخدم هذا الثابت المسمى DUSES
الذي قمنا بتصديره من الملف المشاركة/disches.ts.
سأحتاج إلى ذلك من أجل تكوين عدد قليل من الأشياء الأخرى.
أنا أيضا ذاهب لاستيراد baseurl.
الذي أعلنته في
ملف url المشاركة/الأساسي.
وأيضا، أنا بحاجة إلى استيراد
ملحوظ من،
rxjs، شرطة مائلة، لأنني
سوف تستخدم أيضا رصد قليلا في وقت لاحق، عندما أقوم بتكوين بعض الأشياء.
حتى الآن، لقد استوردت كل هذه الأشياء.
النزول في تكوين TestBed، ترى أن هذا
الجزء هو بالضبط مثل ديكور وحدة المحرك الذي لدينا في وحدة التطبيق.
لذلك هذا هو المكان الذي يمكنني أيضا استخدام الواردات تماما
كما فعلت مع وحدة المحرك.
وضمن الواردات، سأقوم باستيراد
وحدة BrowserAnimation لأن هذا شيء ما يتطلب،
ثم استيراد وحدة FlexLayout.
وأيضا روترتستينغمودول
لأنني سوف تحتاج إلى روترتستينغمودول لتكوين عدد قليل من الأشياء.
الآن، عند استخدام RoutertestingModule، تحتاج إلى استخدام هذه الطريقة
CalledWithRouts بدلاً من استخدام ForRoot كما استخدمنا مع وحدة جهاز التوجيه هنا.
حتى ضمن هذا ويثروتس يمكنك تحديد بعض
المسارات الافتراضية التي تحتاج إليها لتطبيق معين الخاص بك هنا.
أنا فقط ذاهب لتكوين مسار واحد فقط هنا،
وهذا أمر جيد بما فيه الكفاية بالنسبة لي لاختبار هذه الوحدة هنا.
لذلك أنا فقط ذاهب إلى القول المسار: «القائمة»،
والمكون: مينوكومبوننت.
بما أن قوالب MenuComponent تستخدم مكونات مادية معينة،
دعنا نمضي قدما واستيرادها.
لذلك سنقوم باستيراد ماغريدليستمودول
من @angular /مادي/قائمة الشبكة
وأيضا مابروغريسسبينيرمودول من
@angular /مادي/تقدم الغزل.
وبمجرد استيرادنا لهم، ثم دعونا المضي قدما
وإدراجها في الواردات أسفل هناك.
لذلك دعونا إضافة في ماغريدليستمودول و ماتبريسسبينيرمودول.
وهذا هو كل ما أحتاجه
لهذه الواردات معينة ليتم تكوينها هنا.
لذلك جنبا إلى جنب مع الواردات، لدينا الإعلانات حيث لدي
مينوكومبوننت المستخدمة هنا، ويمكنني أيضا تكوين مقدمي الخدمات هنا.
لذلك أنا بحاجة إلى تكوين مقدمي الخدمات هنا.
الآن هذا هو المكان الذي سنقوم
بإنشاء عدد قليل من بذرة هنا، لذلك
سأقول تقديم: DishService.
الآن، DishService التي سنستخدمها هنا لن تكون
DishService الحقيقية.
عندما تقوم باختبار مكون، لا تريد استخدام خدمة حقيقية.
بدلاً من ذلك، فإنك تخاطر بإخراج الخدمة،
ثم استخدم dishService كعب، والذي سأسميه باسم DishServiceStub.
لذلك سأقول، أوسيفالو: ديشسيرفيسيستوب.
لذلك سيكون هذا وظيفة كعب التي سوف تستخدم من
أجل وضع علامة ديشسرفيس هنا.
لذلك هذا هو واحد أن أنا ذاهب للاستفادة من.
وأيضا الثاني الذي
سأستخدمه هو BaseUrl،
والذي سأستخدم القيمة مثل BaseUrl
التي قمنا باستيرادها بالفعل في وقت سابق.
لذلك، الآن، مع هذا، لقد قمت بالفعل بتكوين وحدة الاختبار الخاصة بي،
لذلك لاحظ أن الطريقة التي نحدد بها هذا هو بالضبط مثل الطريقة التي
نحدد بها مصمم وحدة NG لوحدة التطبيق الخاصة بنا.
وهنا، نحن فقط تكوين تلك التي هي مطلوبة من قبل مينوكومبوننت، لذلك
ليس لدي غيرها من تلك التي نستخدمها في وحدة التطبيق نفسها.
إذن هذه هي الطريقة التي سنقوم بها بتكوين وحدة الاختبار.
الآن الشيء الوحيد المفقود هو هذا ديشسيرفيسيستوب.
لذا ما سأقوم به هو
تنفيذ وظيفة هنا
والدعوة التي تسمح لـ DishServiceStub
يكون كائن جافا سكريبت بسيط هنا،
والذي سأدعه يعمل
بدلاً من الخدمة الحقيقية.
يمكننا أن نخرج خدمات كهذه كما رأينا هنا
حتى داخل هنا، أنا مجرد الذهاب
لتوفير وظيفة بسيطة، وظيفة
جيتدايوسيس هنا،
والتي سوف تعود ملحوظ من نوع صحن صفيف.
لذلك هذا هو بالضبط كيف تم تكوين قيمة الإرجاع هناك.
وأنا ذاهب
لإرجاع ملاحظتها من DUSES هنا.
لذلك باستخدام هذه الوظيفة كعب هنا،
ما أقوم به هو أنني سأقذف ديشسرفيس،
ومن ثم تكوينه مع هذه الطريقة التي أحتاجها
لذاكرة التخزين المؤقت الخاصة بي، قائلا جيتدايز، وعندما يتم استدعاء هذه الطريقة،
أنا فقط ذاهب لإرجاع هذه القيمة.
الأطباق ثابتة، هنا.
لذا بهذه الطريقة، يمكنك الآن أن ترى كيف أتحكم في ما يتم
توفيره للمكون من dishService كعب التي قمت بإنشائها هنا للتو.
إذن هذه هي الطريقة التي ستقوم بها بإنشاء بذرة لـ DishService الخاص بك.
النهج الآخر الذي يمكننا استخدامه في
الحالات التي نستخدم فيها الخدمات يسمى باستخدام الجاسوس.
الياسمين يدعم شيئا يسمى الجاسوس، والذي يسمح لنا للتجسس على المكالمات وظيفة،
ومن ثم التقاط المكالمات وظيفة، ومن ثم الرد على تلك الدعوة وظيفة.
لذلك هذا هو وسيلة أخرى لاستخدام خدمة وهمية بدلا من الخدمة الحقيقية.
حتى الآن نحن قادرون على التحكم في ما يتم توفيره لمكون القائمة لدينا.
حتى بعد هذه التعديلات، ثم نحن في
طريقنا إلى أسفل إلى لدينا قبل كل طريقة هنا.
بعد التزامن، ما سأقوم به
هو أنني سوف أحصل على عقد من ديشسرفيس.
لذلك ترى أنني أستخدم سرير الاختبار ثم أستخدم
طريقة الحصول على سرير الاختبار للحصول على adhold من DishService التي تم إنشاؤها هنا،
من هذا كعب معين أعلنا هنا في مقدمي الخدمات.
لذلك هذا يعطيني إشارة إلى ديشسرفيس
بحيث يمكنني استدعاء أساليب ديشسرفيس أينما أحتاج هنا.
لذلك بعد إجراء هذه التغييرات، دعونا حفظ التغييرات
ثم نرى كيف سيتم تشغيل CLI Angular هذا الاختبار بعد هذه التغييرات،
وما إذا كان اختبارنا سيكون ناجحا في هذه المرحلة أم لا.
لذلك دعونا حفظ التغييرات.
في اللحظة التي تقوم فيها بحفظ التغييرات ستلاحظ أن
اختبار NG الخاص بك سيبدأ في إعادة تشغيل الاختبار مرة أخرى.
لذلك سيتم تجميع التطبيق ثم إعادة تشغيل الاختبار.
وفويلا، اجتاز اختبارنا بنجاح بعد
إجراء التغييرات على ملف.spec.ts المكون لدينا.
لذلك لدينا أول اختبار، وهذا يعني أننا الآن قادرون على إنشاء مكون القائمة
من القائمة لدينا، ملف component.spec.ts هناك.
لذلك إعداد الاختبار لدينا يعمل بشكل صحيح.
الآن يمكنني الدخول وإجراء اختبارات أكثر كثافة داخل مكون الاختبار الخاص بي.
بالعودة إلى ملف component.spec القائمة، اسمحوا لي أن أضيف في اختبار آخر.
الآن ترى ذلك لأن لدي الآن خدمة راسخة هنا
والتي تعيد قيمة DUSES هذه يمكنني الآن الاستفادة من DishService الخاصة بي،
والتي حصلت على المرجع هنا.
كان داخل قبل كل منهما، ثم استدعاء طريقة getDubishes
وبعد ذلك سأكون قادرا على الحصول على القيمة.
والتي سوف تكون متاحة داخل بلدي عنصر القائمة التي أنا قد خلقت للتو.
لذا يجب على MenuComponent الآن الوصول إلى الأطباق الثابتة التي
تم توفيرها مرة أخرى إليها من خلال هذا التوقف خدمة الأطباق.
لذلك يمكنني الآن اختبار لمعرفة ما إذا كان متغير الأطباق داخل
MenuComponent الخاص بي يتلقى بالفعل القيم بشكل صحيح أم لا.
لذا أدخل، دعني أخلق إختبار آخر هنا.
لذلك سوف إنشاء اختبار هنا، مع ذلك،
كما رأيت في وقت سابق، وذلك تماما مثل سابقتها.
هذا الاختبار الثاني أنا ذاهب إلى استدعاء ذلك كما هو
والأطباق, يجب أن تكون العناصر 4,
لأن الأطباق الثابتة التي أعلناها في
ملف.duses المشتركة لديها أربعة أطباق في ثابت هناك.
لذلك عندما يتم
تهيئة الأطباق الخاصة بي داخل ملف MenuComponent أو TS الخاص بي عن طريق استدعاء خدمة الصحون.
كان يجب أن تستلم تلك الأطباق الأربعة
وتمت تهيئتها مع تلك الأطباق الأربعة
لذلك أنا ذاهب لإجراء بعض الاختبارات على أن الأطباق المتغيرة هناك.
فكيف يمكنني الوصول إلى متغير الأطباق هنا؟
لذلك أود أن أقول أنه يجب أن تكون عناصر الأطباق 4،
وبعد ذلك سوف أعلن وظيفة السهم هنا.
وداخل وظيفة السهم هذه سأقوم
بتحديد الاختبارات المختلفة التي سأقوم بتنفيذها.
حتى هنا أنا ذاهب إلى القول الآن نتوقع (مكون.
، ولاحظ أنه يعطيني تلقائيًا
الوصول إلى خاصية الأطباق هذه من MenuComponent.
لذلك أستطيع أن أقول أن component.dises، ومن ثم يمكنني اختبار
أن نرى أن طول تلك الأطباق جافا سكريبت مجموعة كائن يجب أن يكون.
لذلك هذا هو المكان الذي أستخدم فيه طريقة ToBe للياسمين هنا.
وبعد ذلك يمكنني تحديد القيمة 4،
لأنني كنت توريد 4 أطباق في أطباقي الثابتة
التي أعلنتها في ملف.duses المشتركة هناك.
لذلك هذا هو الاختبار الأول الذي سأقوم به،
وهذا يجب أن يكون صحيحا.
وإلا فإن الإعداد لم يعمل بشكل صحيح، لذلك
أعرف أن التعليمات البرمجية الخاصة بي لا تعمل بشكل صحيح.
لكنني أعلم على وجه اليقين أن هذا الاختبار يجب أن يعمل بشكل صحيح.
إذا كنت ترغب في التأكد،
دعنا نحفظ التغييرات ثم نذهب ونرى الاختبار الخاص بنا قيد التشغيل.
الذهاب إلى هذا الجهاز،
ترى أنه الآن يتم إعادة تجميع تطبيقي، ويتم تشغيل الاختبار.
ولاحظ جميع الخضر في نافذة المحطة الطرفية.
وتقول تنفيذ 1 من 2 النجاح، نفذت 2 من 2 النجاح.
مما يعني أن كلا اختباراتي ركضتا بنجاح.
إذا نظرت إلى المتصفح الخاص بي، لذلك ترى أن مينوكومبوننت،
كل من الاختبارات ناجحة.
اسمحوا لي أن إنشاء عدد قليل أكثر
وإضافتها إلى تلك المجموعة من المجموعة الثانية من الاختبارات التي أقوم بإنشائها هناك.
الذهاب إلى ملف menu_component_spec.ts، وسوف أضيف في واحد أكثر.
سأقول نتوقع مكون. ,
وسوف أقول أطباق [1].
أذكر أن اسم الطبق الأول كان,
لذلك هذا هو ما أنا ذاهب لاختبار, الأطباق [1] .name.
لذلك هذه هي الطريقة التي يمكنني اختبار لمعرفة ما إذا كان يتلقى القيم بشكل صحيح.
ما هي كل الطرق التي يمكنني اختبارها؟
إذا وضعت نقطة هناك، وسوف تعطيني اقتراح من كل الاحتمالات هنا.
لذلك سأقول، وسوف أيضا مرة أخرى استخدام طريقة توبي هنا.
ثم اسم الطبق الثاني هو،
فقط أن هناك، بحيث هو العجلات الثانية أنا ذاهب لتنفيذ.
لذلك إذا تم تشغيل التعليمات البرمجية الخاصة بي بشكل صحيح، فيجب أن يمر هذا أيضًا.
وبالمثل، اسمحوا لي أن أضع واحدة أخرى هنا.
لذلك سأقول نتوقع،
مكون. الأطباق وسوف أقول 3.
وهنا،
يجب أن تكون الخاصية المميزة Falsy.
أنك يجب أن تكون خاطئة، وهذا ليس صحيحا في هذه الحالة، لذلك اسمحوا لي أن أضيف في واحدة أخرى.
يمكنك البدء في إضافة المزيد إذا كنت تريد،
واللعب حولها حتى كنت راضيا.
وكذلك تفعل تلك الإضافات. اسمحوا لي أن حفظ التغييرات التي قمت بها
هنا، دعونا نذهب ونرى ما إذا كان هذا الاختبار يعمل بشكل صحيح.
وبالعودة إلى محطتي، ترى أن اختباري يعمل مرة أخرى.
ترى أن كلا الإختبارين كانا ناجحين،
والآن سأجعل إحدى تلك الأشياء تفشل.
لذلك أنا ذاهب للذهاب في وتغيير هذا إلى حقيقة.
انظر، هذا هو متعة اللعب مع التعليمات البرمجية.
أنا ذاهب لتغيير هذا إلى حقيقة وأنا أعلم أن هذا الاختبار سوف يفشل.
لذلك دعونا حفظ التغييرات.
إلقاء نظرة على المحطة، هناك ترى أن الاختبار قد فشل.
ترى كل هذا الأحمر هنا، وهذا يعني أن الاختبار الثاني لم يمر بشكل صحيح.
وإذا قمت بالتمرير إلى الوراء، سترى فشل هذا الاختبار بالذات،
لأنه في مكان ما هناك سوف يقول أنه لم يفعل ذلك.
حسنا، انظر هذا البيان هنا يقول أنه من المتوقع أن تكون خاطئة
أن تكون صحيحة، لذلك السبب فشلت.
لذلك لم يكن من المفترض أن يكون صحيحًا، لكنني قلت أنه يجب أن يكون صحيحًا، ومن
الواضح أن الاختبار خاطئ، ولهذا السبب فشل الاختبار.
لذلك هذه هي الطريقة التي يمكنك حتى اختبار لمعرفة ما إذا كان الاختبار فشل،
إذا سألت عن الأشياء الخاطئة أيضا.
ولكن مرة أخرى، اسمحوا لي أن أعود وأصحح ذلك مرة أخرى.
حتى العودة إلى بلدي، ملف أنا سوف تغييرها
مرة أخرى إلى كاذبة، لأنني أريد هذا الاختبار لتشغيل بشكل صحيح.
الآن نحن لسنا راضين بعد
الآن في هذا الاختبار بالذات أنا اختبار فقط
متغير الأطباق الذي هو داخل بلدي مينوكومبوننت.
كيف أذهب حول اللعب مع القالب نفسه؟
لذلك هذا هو المكان الذي نحتاج فيه إلى مزيد من المساعدة من Angular.
لإجراء بعض الاختبارات على القالب، وأنا ذاهب للذهاب في
وسحب في بضع المزيد من الواردات هنا.
حتى الذهاب إلى أعلى بلدي من هذا الملف، menu_component_spec.tsfile.
أنا ذاهب لاستيراد، واحد
آخر يسمى بواسطة، وهي طريقة.
سترى لي استخدام هذا في فترة قصيرة.
يجب استيراد هذا من، الزاوي،
/منصة المتصفح.
وأيضًا، سأقوم باستيراد عنصر آخر وهو عنصر تصحيح.
يسمح لي عنصر التصحيح بالوصول إلى DOM حتى
أتمكن من إجراء اختبارات على عناصر DOM مباشرة.
لذلك هذا هو المكان الذي سأقوم باستيراد هذا منه، رمز Angular هنا، لذلك هذان الاثنان.
لذلك أضف في By و DebugElement إلى الواردات،
وبعد ذلك بمجرد القيام بذلك، سنسير في الشفرة هنا.
وبعد ذلك سنضيف في اختبار واحد آخر حيث سنذهب إلى DOM
وجلب أحد العناصر من المستند.
لذلك أود أن أقول ذلك، لذلك اختبار واحد آخر هنا،
ما الذي سيفعله هذا الاختبار؟
لهذا الاختبار،
سأحدد الاختبار كما يجب استخدام الأطباق في القالب.
أنا فقط أقول عشوائيا شيئا هنا،
لأنني أريد فقط للتحقق من أن متغير الأطباق،
أيا كان ما هو متاح، يتم استخدامه في القالب بشكل صحيح.
لذلك هذا هو الجزء الذي أقوم بإعداده،
ثم الجزء الثاني هو وظيفة السهم،
وضمن وظيفة السهم هذه سأقوم بتزويد الشفرة للاختبار التالي.
حتى داخل وظيفة السهم هذه ما
سأقوم به هو أنني سوف أدعو أولا لاعبا اساسيا
ومن ثم الكشف عن التغييرات.
ثم بعد ذلك سأقول السماح دي:،
هو ديبوغليمنت.
من خلال هذا أنا ذاهب للحصول على الوصول إلى DOM
ومن ثم العنصر سيكون HTMLElement.
لذلك أريد الحصول على الوصول إلى أحد هتملليمنتس من بلدي دوم.
فما هو العنصر الذي أريده؟
لذلك للقيام بذلك، وسوف تحصل على الوصول إلى،
ديبوغليمنت عن طريق قول لاعبا اساسيا و ديبوغليمنت.
لذلك هذا يسمح لي بالوصول إلى العناصر من DOM الخاص بي هنا حتى DebugElement.
وبعد ذلك يمكنني الاستعلام ثم اختيار فقط تلك التي ستكون ذات فائدة بالنسبة لي.
لذلك أنا ذاهب إلى الاستعلام وبعد ذلك سوف أطلب عن طريق استخدام By.
لذلك لاحظ أين أستخدم بواسطة ذلك الذي قمت بتضمينه عن طريق استيراده.
لذا، يدعم The By مجموعة من المقاييس التي يمكنني من خلالها
طلب الوصول إلى عناصر معينة في DOM.
لذا يمكنك أن ترى أنه سيخبرني بما يمكنني استيراده
ثم يسمح لي css بالوصول
إلى عناصر مطابقة بواسطة محدد css المحدد.
فما هو محدد css الذي سأستخدمه؟
وأنا أعلم أن هناك عنصر h1، عنصر html في DOM
وأنني ذاهب للحصول على الوصول إلى العنصر h1 الأول من DOM.
واحد من عناصر h1 في هناك هو واحد الذي
سيتم عرض اسم كل طبق هناك.
ننظر إلى الوراء وترى أن داخل الجدول الزمني للشبكة باستخدام h1
وأن h1 يحتوي على اسم الطبق هناك.
لذلك أنا ذاهب للحصول على عقد من ذلك ومن
ثم أنا ذاهب للحصول على عنصر وبعد ذلك أود أن أقول دي،
من عنصر التصحيح، وبعد ذلك أود أن أقول ناتيفيليمنت.
وهذا يعطيني الوصول إلى العنصر على وجه التحديد في DOM
الذي أشير إليه وقد اخترت باستخدام هذا البيان في وقت سابق.
لذلك عندما استعلام DOM ثم أقول، أعد لي كل
تلك التي تستخدم العلامة h1 لعنصر HTML.
وأحصل على الوصول إلى ذلك، ويمكنني الاستعلام
وأقول توقع (el.textContent).
لذلك أنا أبحث عن المحتوى داخل هذا h1 في بلدي
قالب ثابت المحتوى وبعد ذلك سأقول إلىContenture.
لذلك هذه طريقة أخرى، toContection، هذه طريقة ياسمين تسمى toContect.
هذا يتحقق لمعرفة ما إذا كان يحتوي على قيمة معينة،
وبعد ذلك سوف تحقق من DUSES (0) .name.
فهل تم إنشاء الطبق الأول في DOM وإضافته إلى DOM؟
إذا كان القالب الخاص بي يعمل بشكل صحيح، فيجب أن يكون موجودًا في DOM.
لذلك هذا هو ما أنا ذاهب للتحقق لمعرفة ما إذا كان
قد تم إنشاء بلاط الشبكة المقابلة لأول DISH وإضافته إلى DOM أم لا.
لذلك أقول DAISS (0) .name، ويقول إلى الأحرف الكبيرة.
أذكر أنني استخدمت أنبوب الأحرف الكبيرة لعرض اسم
DISH عن طريق تحويل اسم الطبق إلى
جميع الأحرف الكبيرة في بلاط الشبكة في مكون القائمة.
لذا هذا ما سأتفقده، حسناً، لذا أنا فقط أتحقق
من واحد منهم فقط.
يمكنك إجراء العديد من هذه الاختبارات، يمكنك التحقق من
DUSES (1) .name ثم DUSIES (2) .name وأكثر إذا كنت تريد.
أنا مجرد توضيح مثال واحد لكيفية الوصول إلى عناصر DOM
ثم التحقق من ما تحتوي عليه في الداخل هناك.
لذلك هذا هو اختبار واحد سوف أجريه هنا، لذلك اسمحوا لي حفظ التغييرات،
ومن ثم معرفة ما إذا كان الاختبار يعمل بشكل صحيح.
الذهاب إلى تلك المحطة وعندما يتم تشغيل الاختبار،
ترى أن أول اختبار لي كان ناجحا، وكان الاختبار الثاني ناجحا،
والاختبار الثالث كان أيضا ناجحا، ورائع.
الآن، دعني أجعل الإختبار الثالث يفشل
الذهاب إلى ملف menucomponentspec.ts،
وأنا ذاهب لإزالة هذا إلى أحرف كبيرة، ومن ثم تنفيذ نفس الاختبار.
سترى أن هذا الاختبار سيفشل، حفظ التغييرات.
وعندما يتم تشغيل الاختبار، سترى أن الاختبار الثالث سيفشل.
لأنني تسبب في فشلها عن طريق التحقق من الشيء الخطأ
هناك وهناك تذهب، فشل الاختبار الثالث هنا.
لذلك هذه هي الطريقة التي يمكنك التحقق لمعرفة ما إذا كانت بعض الأشياء التي
من المفترض أن تكون هناك هناك بشكل صحيح أم لا.
لماذا هذه الحالة، حتى تتمكن من رؤية هنا، والسبب في فشل هذا الاختبار.
يتوقع أن يكون هذا في DOM،
ولكن بدلاً من ذلك هذا هو ما هو موجود في DOM في العنصر h1 في DOM.
لذلك هذا هو السبب في فشل الاختبار هنا.
لذلك مرة أخرى مرة أخرى اسمحوا لي تصحيح الخطأ
وبعد ذلك عندما أعيد تشغيل الاختبار يجب أن نرى الآن أن الاختبار يمر بنجاح.
بالعودة إلى المحطة، سترى أنه عند تشغيل هذا الاختبار الآن سيتم
تشغيله بشكل صحيح.
وهناك تذهب، يتم تمرير جميع الاختبارات الثلاثة من قبل طلبي.
أيضا، بالنظر إلى المتصفح، يمكنك أن ترى أن الاختبارات الثلاثة
تم تنفيذها بنجاح على ملف قالب مكونات القائمة
وأيضا مكون القائمة نفسه.
الآن من الواضح أن هذا ليس بالضرورة الاختبار الأكثر شمولا
لكنني أردت فقط أن أعطيك نكهة لكيفية
إنشاء الاختبارات داخل تطبيق Angular الخاص بك.
إذا كنت تحصل على حمل بعيدا يمكنك الذهاب إلى جميع ملفات.ts المواصفات التي لديك ومن
ثم كتابة الاختبار الخاص بك
لكل واحد من هذه المكونات باستخدام المعرفة التي اكتسبتها هنا.
أيضًا، يمكنك قراءة المزيد حول الاختبار في وثائق Angular
ثم معرفة المزيد من الطرق لإجراء الاختبارات على تطبيق Angular الخاص بك.
الاختبار هو حقل في حد ذاته، لذا إذا كنت بحاجة إلى تعليمك كل شيء عن
الاختبار الذي سيأتي دورة كاملة في حد ذاته لـ Angular.
وفي هذه الدورة، أردت فقط أن أعطيك نكهة لكيفية
إجراء الاختبار في تطبيق Angular الخاص بك.
وهذا مثال على كيفية تكوين
وتنفيذ اختبار وحدة على أحد المكونات في تطبيق Angular الخاص بنا.
هذا هو الوقت المناسب بالنسبة لك للقيام بتعليق جيد مع اختبار مكونات الرسالة.