اختبار وحدة AngularJS: البرنامج التعليمي لـKarma Jasmine

واحدة من الميزات الرائعة في Angular.JS هي الاختبار وجه. عندما قام المطورون في Google بتطوير AngularJS، وضعوا الاختبار في الاعتبار وتأكدوا من أن إطار عمل AngularJS بأكمله قابل للاختبار.

في AngularJS، يتم إجراء الاختبار عادةً باستخدام Karma (إطار العمل). يمكن إجراء اختبار Angular JS بدون Karma، لكن إطار عمل Karma لديه وظيفة رائعة لاختبار كود AngularJS، مما يجعل استخدام هذا الإطار منطقيًا.

• في AngularJS، يمكننا الأداء وحدة التجارب بشكل منفصل لوحدات التحكم والتوجيهات.
• يمكننا أيضًا إجراء اختبار نهائي لـ AngularJS، والذي يتم اختباره من منظور المستخدم.

مقدمة وتركيب إطار الكرمة

الكرمة هي أ أداة أتمتة الاختبار تم إنشاؤه بواسطة فريق Angular JS في Google. الخطوة الأولى لاستخدام Karma هي تثبيت Karma. يتم تثبيت Karma عبر npm (وهو مدير حزم يستخدم لسهولة تثبيت الوحدات على جهاز محلي).

تركيب الكرمة

يتم تثبيت Karma عبر npm في عملية مكونة من خطوتين.

الخطوة 1) قم بتنفيذ السطر أدناه من داخل سطر الأوامر

npm install karma karma-chrome-launcher karma-jasmine

حيث،

1. npm هي أداة مساعدة لسطر الأوامر لمدير حزمة العقدة المستخدمة لتثبيت الوحدات النمطية المخصصة على أي جهاز.
2. تقوم معلمة التثبيت بإرشاد الأداة المساعدة لسطر الأوامر npm بأن التثبيت مطلوب.
3. هناك 3 مكتبات محددة في سطر الأوامر مطلوبة للعمل مع الكارما.
• الكرمة هي المكتبة الأساسية التي سيتم استخدامها لأغراض الاختبار.
• karma-chrome-launcher هي مكتبة منفصلة تتيح لمتصفح Chrome التعرف على أوامر karma.
• كارما-ياسمين - يؤدي هذا إلى تثبيت الياسمين الذي يعد إطارًا تابعًا للكارما.

الخطوة 2) الخطوة التالية هي تثبيت الأداة المساعدة لسطر أوامر Karma. هذا مطلوب لتنفيذ أوامر خط الكارما. سيتم استخدام الأداة المساعدة لخط karma لتهيئة بيئة karma للاختبار.

لتثبيت الأداة المساعدة لسطر الأوامر، قم بتنفيذ السطر أدناه من داخل سطر الأوامر

npm install karma-cli

حيث،

يتم استخدام karma-cli لتثبيت واجهة سطر الأوامر لـ karma والتي سيتم استخدامها لكتابة أوامر karma في واجهة سطر الأوامر.

تكوين إطار الكرمة

الخطوة التالية هي تكوين الكارما والتي يمكن إجراؤها عبر الأمر

"karma –init"

بعد تنفيذ الخطوة أعلاه، سيقوم karma بإنشاء ملف karma.conf.js. من المحتمل أن يبدو الملف مثل المقتطف الموضح أدناه

files: [
  'Your application Name'/AngularJS/AngularJS.js',
  'Your application Name'/AngularJS-mocks/AngularJS-mocks.js',
  'lib/app.js',
  'tests/*.js'
]

تخبر ملفات التكوين أعلاه محرك تشغيل الكارما بالأشياء التالية

1. "اسم التطبيق الخاص بك" – سيتم استبدال هذا باسم التطبيق الخاص بك.
2. 'اسم التطبيق الخاص بك "/AngularJS/AngularJS.js" - هذا يخبر الكارما أن تطبيقك يعتمد على الوحدات الأساسية في AngularJS
3. "اسم التطبيق الخاص بك"/AngularJS-mocks/AngularJS-mocks.js" - هذا يخبر Karma باستخدام وظيفة اختبار الوحدة لـ AngularJS من ملف Angular.JS-mocks.js.
4. جميع ملفات التطبيق أو منطق الأعمال الرئيسية موجودة في مجلد lib الخاص بالتطبيق الخاص بك.
5. سيحتوي مجلد الاختبارات على جميع اختبارات الوحدة.

للتحقق مما إذا كانت الكارما تعمل، قم بإنشاء ملف يسمى Sample.js، وأدخل الكود أدناه وضعه في دليل الاختبار.

describe('Sample test', function() {
  it('Condition is true', function() {
    expect('AngularJS').toBe('AngularJS');
  });
});

يحتوي الكود أعلاه على الجوانب التالية

1. يتم استخدام وظيفة الوصف لإعطاء وصف للاختبار. في حالتنا، نحن نعطي الوصف "اختبار العينة" للاختبار الخاص بنا.
2. يتم استخدام الدالة "it" لإعطاء اسم للاختبار. في حالتنا، نعطي اسم الاختبار الخاص بنا على أنه "الحالة صحيحة". يجب أن يكون اسم الاختبار ذا معنى.
3. يشير الجمع بين الكلمة الأساسية "expect" و"toBe" إلى القيمة المتوقعة والفعلية لنتيجة الاختبار. إذا كانت القيمة الفعلية والمتوقعة هي نفسها، فإن الاختبار سينجح وإلا فإنه سيفشل.

عند تنفيذ السطر التالي في موجه الأوامر، سيتم تنفيذ ملف الاختبار أعلاه

KARMA start

الإخراج أدناه مأخوذ من IDE Webstorm حيث تم تنفيذ الخطوات المذكورة أعلاه.

1. يأتي الإخراج في مستكشف Karma بالداخل Webstorm. تعرض هذه النافذة تنفيذ جميع الاختبارات المحددة في إطار عمل الكارما.
2. هنا يمكنك أن ترى أن وصف الاختبار الذي تم تنفيذه يظهر وهو "اختبار العينة".
3. بعد ذلك، يمكنك أن ترى أن الاختبار نفسه الذي يحمل اسم "الشرط صحيح" قد تم تنفيذه.
4. لاحظ أنه نظرًا لأن جميع الاختبارات تحتوي على أيقونة "موافق" الخضراء بجوارها والتي ترمز إلى اجتياز جميع الاختبارات.

اختبار وحدات تحكم AngularJS

يتمتع إطار اختبار الكارما أيضًا بوظيفة اختبار وحدات التحكم من البداية إلى النهاية. يتضمن ذلك اختبار كائن النطاق $ الذي يتم استخدامه داخل وحدات التحكم.

دعونا نلقي نظرة على مثال لكيفية تحقيق ذلك.

في مثالنا ،

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

1. قم بإنشاء متغير معرف وقم بتعيين القيمة 5 له.
2. قم بتعيين متغير المعرف إلى كائن النطاق $.

سيختبر اختبارنا وجود وحدة التحكم هذه وسيختبر أيضًا معرفة ما إذا كان متغير ID الخاص بكائن $scope مضبوطًا على 5.

أولاً، نحتاج إلى التأكد من توافر الشرط المسبق التالي

قم بتثبيت مكتبة Angular.JS-mocks عبر npm. يمكن القيام بذلك عن طريق تنفيذ السطر أدناه في موجه الأوامر

npm install Angular JS-mocks

الخطوة التالية هي تعديل ملف karma.conf.js لضمان تضمين الملفات الصحيحة للاختبار. يعرض المقطع أدناه فقط جزء الملفات من karma.conf.js الذي يحتاج إلى تعديل

files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']

• تخبر المعلمة "الملفات" Karma بشكل أساسي بجميع الملفات المطلوبة أثناء تشغيل الاختبارات.
• يلزم وجود ملف AngularJS.js وAngularJS-mocks.js لتشغيل اختبارات وحدة AngularJS
• سيحتوي ملف Index.js على الكود الخاص بوحدة التحكم
• سيحتوي مجلد الاختبار على جميع اختبارات AngularJS

يوجد أدناه رمز Angular.JS الخاص بنا والذي سيتم تخزينه كملف Index.js في مجلد الاختبار الخاص بتطبيقنا.

الكود أدناه يقوم بالأشياء التالية فقط

1. خلق وحدة AngularJS يسمى SampleApp
2. قم بإنشاء وحدة تحكم تسمى AngularJSController
3. قم بإنشاء متغير يسمى ID، وأعطه القيمة 5 وقم بتعيينه للكائن $scope

var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.controller('AngularJSController', function($scope) {
    $scope.ID =5;
});

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

سيكون رمز اختبارنا كما هو موضح أدناه.

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

1. دالة beforeEach - تُستخدم هذه الوظيفة لتحميل وحدة AngularJS.JS الخاصة بنا والتي تسمى "sampleApp" قبل التشغيل التجريبي. لاحظ أن هذا هو اسم الوحدة في ملف Index.js.
2. يتم إنشاء كائن $controller ككائن نموذج بالحجم الطبيعي لوحدة التحكم "Angular JSController" التي تم تعريفها في ملف Index.js الخاص بنا. في أي نوع من اختبارات الوحدات، يمثل الكائن الوهمي كائنًا وهميًا سيتم استخدامه فعليًا للاختبار. هذا الكائن الوهمي سوف يحاكي في الواقع سلوك وحدة التحكم لدينا.
3. beforeEach(inject(function(_$controller_) - يُستخدم هذا لإدخال كائن وهمي في اختبارنا بحيث يتصرف مثل وحدة التحكم الفعلية.
4. فار $النطاق = {}; هذا كائن وهمي يتم إنشاؤه لكائن $scope.
5. وحدة تحكم var = $controller('AngularJSController', { $scope: $scope }); - نحن هنا نتحقق من وجود وحدة تحكم تسمى "Angular.JSController". نقوم هنا أيضًا بتعيين جميع المتغيرات من كائن $scope الخاص بنا في وحدة التحكم الخاصة بنا في ملف Index.js إلى كائن $scope في ملف الاختبار الخاص بنا
6. وأخيرًا، نقوم بمقارنة $scope.ID بـ 5

describe('AngularJSController', function() {
    beforeEach(module('sampleApp'));

    var $controller;

    beforeEach(inject(function(_$controller_){
              $controller = _$controller_;
    }));

    describe('$scope.ID', function() {
        it('Check the scope object', function() {
            var $scope = {};
            var controller = $controller('AngularJSController', { $scope: $scope });
            expect($scope.ID).toEqual(5);
        });
    });
});

سيتم تشغيل الاختبار أعلاه في متصفح Karma وسيعطي نفس نتيجة النجاح كما هو موضح في الموضوع السابق.

اختبار توجيهات AngularJS

يتمتع إطار اختبار الكارما أيضًا بوظيفة اختبار التوجيهات المخصصة. يتضمن ذلك عناوين URL الخاصة بالقوالب المستخدمة ضمن التوجيهات المخصصة.

دعونا نلقي نظرة على مثال لكيفية تحقيق ذلك.

في مثالنا، سنقوم أولاً بتعريف توجيه مخصص يقوم بالأشياء التالية

1. قم بإنشاء وحدة AngularJS تسمى SampleApp
2. قم بإنشاء توجيه مخصص بالاسم – Guru99
3. قم بإنشاء دالة تقوم بإرجاع قالب بعلامة رأس تعرض النص "هذا هو اختبار AngularJS".

var sampleApp = AngularJS.module('sampleApp',[]);
sampleApp.directive('Guru99', function () {
    return {
        restrict: 'E',
        replace: true,
        template: '<h1>This is AngularJS Testing</h1>'
    };
});

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

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

1. beforeEach وظيفة - يتم استخدام هذه الوظيفة لتحميل وحدة Angular JS الخاصة بنا والتي تسمى "sampleApp" قبل التشغيل التجريبي.
2. يتم استخدام خدمة الترجمة $ لتجميع التوجيه. هذه الخدمة إلزامية ويجب الإعلان عنها حتى تتمكن Angular.JS من استخدامها لتجميع التوجيه المخصص لدينا.
3. $rootscope هو النطاق الأساسي لأي تطبيق AngularJS.JS. لقد رأينا كائن $scope الخاص بوحدة التحكم في الفصول السابقة. حسنًا، الكائن $scope هو الكائن الفرعي لكائن $rootscope. سبب الإعلان عن ذلك هنا هو أننا نجري تغييرًا على علامة HTML الفعلية في DOM عبر توجيهنا المخصص. ومن ثم، نحتاج إلى استخدام خدمة $rootscope التي تستمع فعليًا أو تعرف متى يحدث أي تغيير من داخل مستند HTML.
4. عنصر فار = $ ترجمة(" ") - يُستخدم هذا للتحقق مما إذا كان توجيهنا قد تم إدخاله كما ينبغي. اسم التوجيه المخصص الخاص بنا هو Guru99، ونحن نعلم من فصل التوجيهات المخصصة لدينا أنه عندما يتم إدخال التوجيه في HTML الخاص بنا، فسيتم إدخاله كـ " '. ومن ثم يتم استخدام هذا البيان لإجراء هذا الاختيار.
5. توقع (element.html()).toContain("هذا هو اختبار AngularJS") - يُستخدم هذا لإرشاد الدالة المتوقعة إلى أنه يجب عليها العثور على العنصر (في حالتنا علامة div) الذي يحتوي على نص HTML الداخلي الخاص بـ "هذا هو اختبار AngularJS".

describe('Unit testing directives', function() {
  var $compile,
      $rootScope;
   beforeEach(module('sampleApp'));

  beforeEach(inject(function(_$compile_, _$rootScope_){
    $compile = _$compile_;
    $rootScope = _$rootScope_;
 }));

 it('Check the directive', function() {
    // Compile a piece of HTML containing the directive
    var element = $compile("<ng-Guru99></ng-Guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("This is AngularJS Testing");
  });
});

سيتم تشغيل الاختبار أعلاه في متصفح Karma وسيعطي نفس نتيجة النجاح كما هو موضح في الموضوع السابق.

اختبار شامل لتطبيقات AngularJS JS

يتمتع إطار اختبار الكارما جنبًا إلى جنب مع إطار العمل المسمى Protractor بوظيفة اختبار تطبيق الويب من البداية إلى النهاية.

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

دعونا نلقي نظرة على مثال لكيفية تحقيق ذلك.

في المثال أدناه، سيكون لدينا تطبيق AngularJS الذي يقوم بإنشاء جدول بيانات باستخدام التوجيه ng-repeat.

1. نقوم أولاً بإنشاء متغير يسمى "البرنامج التعليمي" ونخصص له بعض أزواج القيمة الرئيسية في خطوة واحدة. سيتم استخدام كل زوج من القيمة الرئيسية كبيانات عند عرض الجدول. يتم بعد ذلك تعيين المتغير التعليمي لكائن النطاق بحيث يمكن الوصول إليه من وجهة نظرنا.
2. لكل صف من البيانات في الجدول، نستخدم التوجيه ng-repeat. يمر هذا التوجيه عبر كل زوج من قيمة المفتاح في كائن نطاق البرنامج التعليمي باستخدام المتغير ptutor.
3. وأخيرا، نحن نستخدم ضع علامة مع أزواج القيمة الرئيسية (ptutor.Name وptutor.Description) لعرض بيانات الجدول.

<table >
             <tr ng-repeat="ptutor in tutorial">
                   <td>{{ ptutor.Name }}</td>
	               <td>{{ ptutor.Description }}</td>
             </tr>
   </table>
</div>
  <script type="text/javascript">
      var app = AngularJS.module('DemoApp', []);
        app.controller('DemoController', function($scope) {
           $scope.tutorial =[
                {Name: "Controllers" , Description : "Controllers in action"},
                {Name: "Models" , Description : "Models and binding data"},
	            {Name: "Directives" , Description : "Flexibility of Directives"}
			]   });

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

سيقوم اختبارنا في الواقع باختبار التوجيه ng-repeat والتأكد من احتوائه على 3 صفوف من البيانات كما ينبغي من المثال أعلاه.

أولاً، نحتاج إلى التأكد من توافر الشرط المسبق التالي

قم بتثبيت مكتبة المنقلة عبر npm. يمكن القيام بذلك عن طريق تنفيذ السطر أدناه في موجه الأوامر

"npm install protractor"

سيكون رمز اختبارنا كما هو موضح أدناه.

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

1. يتم توفير وظيفة المتصفح بواسطة مكتبة المنقلة وتفترض أن تطبيق AngularJS الخاص بنا (مع الكود الموضح أعلاه) يعمل على عنوان URL الخاص بموقعنا – http://localhost:8080/Guru99/
2. - يقوم هذا السطر من التعليمات البرمجية في الواقع بجلب توجيه ng-repeat الذي يتم ملؤه بواسطة التعليمات البرمجية 'ptutor in tutorial'. إن element وby.repeater عبارة عن كلمات رئيسية خاصة تقدمها مكتبة protractor والتي تسمح لنا بالحصول على تفاصيل توجيه ng-repeat.
3. توقع(list.count()).toEqual(3); - أخيرًا، نحن نستخدم الدالة المتوقعة لنرى أننا حصلنا بالفعل على 3 عناصر يتم ملؤها في جدولنا نتيجة لتوجيه ng-repeat.

Describe('Unit testing end to end', function() {
  beforeEach(function() {
browser.get('http://localhost:8080/Guru99/');
})
   it('Check the ng directive', function() {
      var list=element.all(by.repeater(ptutor in tutorial'));
      expect(list.count()).toEqual(3);  }); });

سيتم تشغيل الاختبار أعلاه في متصفح Karma وسيعطي نفس نتيجة النجاح كما هو موضح في الموضوع السابق.

ملخص

• يتم إجراء الاختبار في AngularJS باستخدام إطار عمل karma، وهو إطار عمل تم تطويره بواسطة Google نفسها.
• يتم تثبيت إطار عمل Karma باستخدام مدير حزم العقدة. الوحدات الأساسية المطلوب تثبيتها للاختبار الأساسي هي karma، وkarma-chrome-launcher، وkarma-jasmine، وkarma-cli.
• تتم كتابة الاختبارات في ملفات js منفصلة، ​​ويتم الاحتفاظ بها عادةً في مجلد الاختبار الخاص بالتطبيق الخاص بك. يجب ذكر موقع ملفات الاختبار هذه في ملف تكوين خاص يسمى karma.conf.js. يستخدم Karma ملف التكوين هذا عند تنفيذ كافة الاختبارات.
• يمكن استخدام Karma لاختبار وحدات التحكم والتوجيهات المخصصة أيضًا.
• لإجراء اختبار شامل للويب، يجب تثبيت إطار عمل آخر يسمى المنقلة عبر Node، مدير الحزم. يوفر هذا الإطار طرقًا خاصة يمكن استخدامها لاختبار كافة العناصر الموجودة في صفحة HTML.