اختبار شامل باستخدام Angular

يعد الاختبار الشامل مكونًا مهمًا لتطوير أي تطبيق برمجي. يضمن أن التطبيق الخاص بك يعمل كما هو متوقع في ظروف وسيناريوهات مختلفة. تعتبر الاختبارات الشاملة مهمة بشكل خاص عند تطوير تطبيقات معقدة ، مثل تلك التي تم إنشاؤها باستخدام Angular. سنستكشف كيفية إجراء اختبار شامل باستخدام Angular والأدوات التي يمكنك استخدامها للمهمة. سنناقش أيضًا سبب أهمية خدمات اختبار البرامج المستقلة الشاملة وكيف يمكن أن توفر لك الوقت والمال على المدى الطويل.

ما هو الاختبار الشامل؟

الاختبار الشامل هو منهجية تُستخدم لاختبار تطبيق من البداية إلى النهاية. الهدف من الاختبار الشامل هو التأكد من أن التطبيق يتصرف كما هو متوقع في جميع السيناريوهات.

يمكن إجراء الاختبار الشامل باستخدام الزاوية باستخدام مجموعة متنوعة من الأدوات ، مثل Protractor و webdriverIO و Selenium. تسمح لك هذه الأدوات بأتمتة اختباراتك وتشغيلها مقابل متصفح حقيقي.

Angular هو إطار عمل شائع لبناء تطبيقات الويب. يسمح لك الاختبار الشامل باستخدام Angular باختبار تطبيقك في سيناريو واقعي. هذا النوع من الاختبار مهم لأنه يمكن أن يكتشف الأخطاء التي قد لا تكتشفها اختبارات الوحدة.

لماذا تستخدم الزاوية للاختبار الشامل؟

يعد الاختبار الشامل جزءًا مهمًا من عملية تطوير البرامج. يسمح لك باختبار التطبيق الخاص بك من البداية إلى النهاية ، مما يضمن أن جميع الوظائف تعمل كما هو متوقع. الزاوية هي أداة قوية يمكنها مساعدتك في أتمتة الاختبار الشامل. فيما يلي بعض فوائد استخدام الزاوية للاختبار الشامل:

1. يجعل Angular من السهل إنشاء اختبارات قابلة للتكرار ومتسقة.

2. يوفر الكثير من الوظائف المضمنة التي تجعل الاختبار الشامل أسهل ، مثل حقن التبعية وربط البيانات.

3. Angular هو إطار عمل شائع مع مجتمع كبير من المطورين الذين يمكنهم تقديم الدعم والمشورة.

4. تتوفر العديد من الأدوات مفتوحة المصدر لأتمتة الاختبارات الشاملة باستخدام الزاوية.

إعداد بيئتك للاختبار الشامل باستخدام الزاوية

بافتراض أنك قمت بتثبيت Angular CLI ، فلنقم بإنشاء مشروع جديد:

ng جديد تطبيقي

سيؤدي هذا إلى إنشاء دليل جديد يسمى my-app يحتوي على جميع الملفات والتبعيات اللازمة لتشغيل تطبيق Angular.

بعد ذلك ، نحتاج إلى تثبيت المنقلة. يمكن القيام بذلك باستخدام npm:

cd بلدي التطبيق

npm install -g منقلة

تحديث مدير برنامج تشغيل الويب - كاذب مستقل - زغة زائفة

يعد Web driver-manager أداة مساعدة للحصول بسهولة على مثيل لخادم Selenium قيد التشغيل. سيقوم الأمر أعلاه بتنزيل الثنائيات الضرورية في بيئتك المحلية.

الآن بعد أن تم تثبيت كل شيء ، يمكننا البدء في كتابة اختباراتنا. قم بإنشاء ملف جديد في جذر المشروع يسمى e2e.ts

كتابة أول اختبار شامل لك

عندما يتعلق الأمر بكتابة أول اختبار شامل لك ، فهناك بعض الأشياء التي يجب وضعها في الاعتبار. أولاً ، تريد التأكد من أن اختبارك يغطي جميع وظائف تطبيقك. ثانيًا ، تريد كتابة اختبارك بطريقة يسهل فهمها والمحافظة عليها. أخيرًا ، سترغب في إجراء اختبارك مقابل متصفح حقيقي للتأكد من أن كل شيء يعمل كما هو متوقع.

مع وضع هذه الأشياء في الاعتبار ، دعنا نلقي نظرة على كيفية كتابة أول اختبار شامل لك. سنستخدم أداة Angular CLI لإنشاء اختبارنا وسنختبر وظيفة تسجيل الدخول لتطبيقنا.

للبدء ، سنحتاج إلى تثبيت أداة Angular CLI. يمكنك القيام بذلك عن طريق تشغيل الأمر التالي:

تثبيت npm -g @ angular / cli

أولاً ، ستحتاج إلى استيراد الوحدات ذات الصلة من @ angular / test. في ملف الاختبار الشامل الخاص بك ، سيبدو هذا شيئًا كالتالي:

استيراد {TestBed} من "@ angular / core / testing" ؛

استيراد {BrowserModule} من "@ angular / platform-browser" ؛

استيراد {NgModule} من "@ angular / core" ؛

استيراد {AppComponent} من "./app.component" ؛

استيراد {LoginComponent} من "./login/login.component" ؛

بعد ذلك ، تحتاج إلى تكوين وحدة الاختبار الخاصة بك. هذا هو المكان الذي ستخبر فيه Angular بالمكونات المستخدمة في اختباراتك ومكان العثور عليها.

تصحيح الاختبارات من طرف إلى طرف

عند إجراء اختبارات شاملة ، من الضروري أحيانًا تصحيح أخطاء الاختبارات نفسها. يمكن القيام بذلك بعدة طرق ، اعتمادًا على عداء الاختبار المستخدم.

إذا كنت تستخدم منقلة ، فيمكنك استخدام الأمر browser.pause () لإيقاف تنفيذ الاختبار مؤقتًا في أي وقت. سيؤدي هذا إلى فتح وحدة تحكم لتصحيح الأخطاء في المتصفح ، مما يسمح لك بفحص حالة التطبيق واستئناف التنفيذ عندما يكون جاهزًا.

إذا كنت تستخدم الياسمين ، يمكنك استخدام مصحح الأخطاء ؛ عبارات في التعليمات البرمجية الخاصة بك لاقتحام مصحح الأخطاء في تلك المرحلة. سيسمح لك ذلك بالمرور عبر الكود وفحص المتغيرات حسب الحاجة.

من الممكن أيضًا تصحيح أخطاء الاختبارات عن بُعد ، عن طريق توصيل عميل التصحيح بعملية عداء الاختبار. غالبًا ما يكون هذا مفيدًا عند إجراء الاختبارات في بيئات CI / CD ، حيث قد لا يكون من الممكن الوصول إلى المتصفح مباشرة.

يعد الاختبار الشامل طريقة رائعة لاكتشاف الأخطاء في وقت مبكر من عملية التطوير. إنها أيضًا طريقة جيدة للتعرف على كيفية عمل تطبيقك في العالم الحقيقي.

تسهل أدوات الاختبار الشاملة من Angular كتابة الاختبارات وتشغيلها لتطبيقات Angular الخاصة بك. في منشور المدونة هذا ، سنوضح لك كيفية إعداد وتشغيل اختبارات شاملة لتطبيق Angular الخاص بك باستخدام أداة منقلة.

المنقلة هي إطار اختبار شامل للتطبيقات الزاويّة. إنه برنامج anode.js يدير اختباراتك مقابل تشغيل تطبيقك في متصفح حقيقي.

استنتاج

باختصار ، يعد الاختبار الشامل باستخدام الزاوية طريقة فعالة لاختبار تطبيقك بدقة والتأكد من جودته قبل إصداره. من خلال إنشاء اختبارات تحاكي تفاعل المستخدم مثل النقر وضغطات المفاتيح وإدخال النص ، يمكنك بسهولة اكتشاف العيوب في البرنامج واستكشافها وإصلاحها. بالإضافة إلى ذلك ، يسمح الاختبار الشامل باستخدام الزاوية بتحكم أكبر في النظام بأكمله من خلال منحك الوصول إلى جميع مكونات التطبيق. مع وجود هذه المعرفة في متناول اليد ، فأنت متأكد من إنشاء منتج ويب أو هاتف محمول ناجح.

المؤلف BIO

Santosh هو مطور واجهة أمامي شغوف لشركة تطوير زاوي رائدة في الهند. تعمل حاليًا مع Devstringx Technologies كقائد فريق أمامي. مع عشر سنوات من الخبرة في التنمية. لديه أكثر من 8 سنوات من الخبرة. إنه يدافع بقوة عن التنوع والشمول. لديه خبرة كبيرة في النكهات المختلفة للتطوير مثل Bootstrap و Vuejs و Angular و React Development. يحب استكشاف الأدوات والتقنيات الجديدة ومشاركة تجربته من خلال كتابة المدونات.