نقاط المفاتيح

• استخدم الياسمين والكرمة لاختبار الوحدة واختبار angularjs من الطرف إلى النهاية لضمان موثوقية الكود وكشف الأخطاء في وقت مبكر من التطوير.
• كتابة اختبارات وحدة لمكونات AngularJS مثل وحدات التحكم والتعليمات والمرشحات والمصانع للتحقق من مقتطفات التعليمات البرمجية المستقلة.
• قم بتنفيذ اختبار من طرف إلى طرف (E2E) للتحقق من تكامل المكونات في تطبيقات AngularJS لضمان عملها كما هو متوقع في السيناريو الحقيقي.
• استخدم Mocks والجواسيس في اختبار الوحدة لمحاكاة بيئات الاختبار الوظيفية وعزلها ، وهو أمر مفيد بشكل خاص للخدمات والمصانع التي تتفاعل مع الموارد الخارجية مثل LocalStorage.
• تحسين اختبار E2E مع دعم اختبار AngularJS المدمج وإطار المنقلة ، بما في ذلك ميزات مثل الانتظار التلقائي وسياسات محددة محددة للتطبيقات الزاوية.

اختبار الوحدة هو تقنية تساعد المطورين على التحقق من مقتطفات التعليمات البرمجية المستقلة. يتم استخدام اختبارات من طرف إلى طرف (E2E) لتحديد ما إذا كانت مجموعة من المكونات تعمل كما هو متوقع بعد دمجها. AngularJS هو إطار JavaScript MVC حديث يدعم تمامًا اختبار الوحدة واختبار E2E. يمكن أن توفر اختبارات الكتابة أثناء تطوير التطبيقات الزاوية الكثير من الوقت ، وإلا فإنه سيتم إهداره على إصلاح أخطاء غير متوقعة. يشرح هذا البرنامج التعليمي كيفية تضمين اختبارات الوحدة واختبارات E2E في التطبيقات الزاوية. يفترض هذا البرنامج التعليمي أنك على دراية بتطوير AngularJS. يجب أن تكون على دراية بالمكونات المختلفة التي تشكل تطبيقات زاوية. سوف نستخدم ياسمين كإطار اختبار وكارما كعداء اختبار. يمكنك استخدام Yeoman لإنشاء مشاريع لك بسهولة ، أو الحصول على تطبيق البذور الزاوي مباشرة من Github. إذا لم يكن لديك بيئة اختبار ، فاتبع هذه الخطوات: 1. قم بتنزيل وتثبيت Node.js (إذا لم تكن قد لم تكن بالفعل). 2. قم بتثبيت الكرمة باستخدام NPM (تثبيت NPM -G karma). 3. قم بتنزيل تطبيق العرض التجريبي لهذا البرنامج التعليمي من GitHub وفك ضغطه.

في التطبيق غير المدمج ، يمكنك العثور على اختبارات في الدلائل في الاختبار/الوحدة والاختبار/E2E. لعرض نتائج اختبار الوحدة ، ما عليك سوى تشغيل البرامج النصية/test.bat وسيبدأ خادم Karma. ملف HTML الرئيسي الخاص بنا هو App/Notes.html ، والذي يمكن الوصول إليه عبر http: //localhost/angular-eseed/app/notes.html .

مبتدئ في اختبارات الوحدة

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

سنقوم ببناء تطبيق ملاحظات بسيط للغاية. سوف تحتوي العلامة لدينا على حقل نص حيث يمكن للمستخدم كتابة ملاحظات بسيطة. تتم إضافة الملاحظات إلى قائمة الملاحظات عند الضغط على الزر. سنستخدم التخزين المحلي HTML5 لتخزين الملاحظات. يظهر علامة HTML الأولية أدناه. يتم استخدام bootstrap لبناء تخطيطات بسرعة.

    
    
    
    
    
    
    


    

      

        

        

           
        
        

          Add
        
        

      
      

        

        

          

            

              {{note}}
            
          
        
        

      
    

كما هو موضح في العلامة أعلاه ، فإن الوحدة الزاوية لدينا هي toDoApp ووحدة التحكم هي Todocontroller. يرتبط نص الإدخال بنموذج الملاحظة. هناك أيضًا قائمة بجميع الملاحظات المضافة. بالإضافة إلى ذلك ، عند النقر فوق الزر ، سيتم تشغيل وظيفة CreateNote () من TodoconTroller. الآن دعنا نفتح ملف app.js المضمّن وإنشاء الوحدة النمطية ووحدة التحكم. أضف الكود التالي إلى App.js.

var todoApp = angular.module('todoApp',[]);

todoApp.controller('TodoController', function($scope, notesFactory) {
  $scope.notes = notesFactory.get();
  $scope.createNote = function() {
    notesFactory.put($scope.note);
    $scope.note = '';
    $scope.notes = notesFactory.get();
  }
});

todoApp.factory('notesFactory', function() {
  return {
    put: function(note) {
      localStorage.setItem('todo'   (Object.keys(localStorage).length   1), note);
    },
    get: function() {
      var notes = [];
      var keys = Object.keys(localStorage);

      for(var i = 0; i 

يستخدم todocontroller لدينا مصنع يسمى NotesFactory لتخزين واسترداد الملاحظات. عند تشغيل وظيفة CreateNote () ، فإنها تستخدم المصنع لوضع الملاحظات في LocalStorage ثم يقوم بمسح نموذج الملاحظة. لذلك إذا كنا اختبار الوحدة على Todocontroller ، نحتاج إلى التأكد من أنه عند تهيئة وحدة التحكم ، يحتوي النطاق على عدد معين من الملاحظات. بعد تشغيل وظيفة Createnote () Scoped ، يجب أن يكون عدد الملاحظات أكثر من الرقم السابق. يظهر رمز اختبار الوحدة لدينا أدناه.

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