Karma और Jasmine के साथ AngularJS यूनिट टेस्टिंग

AngularJS की सबसे शानदार विशेषताओं में से एक यह है कि... परीक्षण इस पहलू पर गौर करें। जब गूगल के डेवलपर्स ने एंगुलरजेएस विकसित किया, तो उन्होंने परीक्षण को ध्यान में रखा और यह सुनिश्चित किया कि पूरा एंगुलरजेएस फ्रेमवर्क परीक्षण योग्य हो।

AngularJS में, परीक्षण आमतौर पर Karma (फ्रेमवर्क) का उपयोग करके किया जाता है। Karma के बिना भी AngularJS का परीक्षण किया जा सकता है, लेकिन Karma फ्रेमवर्क में AngularJS कोड के परीक्षण के लिए इतनी शानदार कार्यक्षमता है कि इस फ्रेमवर्क का उपयोग करना ही उचित है।

• AngularJS में, हम प्रदर्शन कर सकते हैं इकाई का परीक्षण नियंत्रकों और निर्देशों के लिए अलग-अलग।
• हम यह भी प्रदर्शन कर सकते हैं अंत-से-अंत परीक्षण AngularJS का परीक्षण उपयोगकर्ता के दृष्टिकोण से किया जाता है।

कर्मा फ्रेमवर्क का परिचय और स्थापना

कर्म एक परीक्षण स्वचालन उपकरण इसे गूगल की एंगुलरजेएस टीम ने बनाया है। कर्मा का उपयोग करने का पहला चरण इसे इंस्टॉल करना है। कर्मा को npm (जो कि स्थानीय मशीन पर मॉड्यूल को आसानी से इंस्टॉल करने के लिए उपयोग किया जाने वाला पैकेज मैनेजर है) के माध्यम से इंस्टॉल किया जाता है।

कर्म की स्थापना

एनपीएम के माध्यम से कर्मा की स्थापना दो चरणों की प्रक्रिया में की जाती है।

चरण 1) कमांड लाइन के अंदर से नीचे दी गई लाइन को निष्पादित करें

npm install karma karma-chrome-launcher karma-jasmine --save-dev

जिसमें,

1. npm, नोड पैकेज मैनेजर के लिए एक कमांड लाइन यूटिलिटी है जिसका उपयोग किसी भी मशीन पर कस्टम मॉड्यूल स्थापित करने के लिए किया जाता है। यह इसके साथ आता है। Node.js.
2. इंस्टॉल पैरामीटर npm कमांड लाइन उपयोगिता को निर्देश देता है कि इंस्टॉलेशन आवश्यक है।
3. कमांड लाइन में 3 लाइब्रेरीज़ निर्दिष्ट की जा रही हैं जो कर्मा के साथ काम करने के लिए आवश्यक हैं।
   • कर्मा कोर लाइब्रेरी है जिसका उपयोग परीक्षण उद्देश्यों के लिए किया जाएगा।
   • कर्मा-क्रोम-लॉन्चर एक अलग लाइब्रेरी है जो क्रोम ब्राउज़र द्वारा कर्मा कमांड को पहचानने में सक्षम बनाती है।
   • कर्म-चमेली - यह चमेली को स्थापित करता है जो कर्म के लिए एक आश्रित ढांचा है।

चरण 2) अगला चरण कर्मा कमांड लाइन यूटिलिटी को इंस्टॉल करना है। कर्मा लाइन कमांड को निष्पादित करने के लिए यह आवश्यक है। कर्मा लाइन यूटिलिटी का उपयोग कर्मा वातावरण को परीक्षण के लिए आरंभ करने के लिए किया जाएगा।

कमांड लाइन उपयोगिता को स्थापित करने के लिए कमांड लाइन के भीतर से नीचे दी गई लाइन को निष्पादित करें

npm install -g karma-cli

• karma-cli का उपयोग karma के लिए कमांड लाइन इंटरफ़ेस स्थापित करने के लिए किया जाता है, जिसका उपयोग कमांड लाइन इंटरफ़ेस में karma कमांड लिखने के लिए किया जाएगा। -g फ़्लैग इसे वैश्विक स्तर पर स्थापित करता है ताकि karma कमांड किसी भी फ़ोल्डर से उपलब्ध हो।

कर्मा फ्रेमवर्क का विन्यास

अगला चरण कर्म को कॉन्फ़िगर करना है जो कमांड के माध्यम से किया जा सकता है

karma init

उपरोक्त चरण निष्पादित होने के बाद, कर्मा एक karma.conf.js फ़ाइल बनाएगा। फ़ाइल संभवतः नीचे दिखाए गए स्निपेट की तरह दिखाई देगी

files: [
  'node_modules/angular/angular.js',
  'node_modules/angular-mocks/angular-mocks.js',
  'lib/app.js',
  'tests/*.js'
]

उपरोक्त कॉन्फ़िगरेशन फ़ाइलें कर्मा रनटाइम इंजन को निम्नलिखित बातें बताती हैं

1. angular.js – इससे कर्मा को पता चलता है कि आपका एप्लिकेशन AngularJS के कोर मॉड्यूल पर निर्भर करता है।
2. angular-mocks.js – यह कर्मा को angular-mocks.js फ़ाइल से AngularJS के लिए यूनिट टेस्टिंग कार्यक्षमता का उपयोग करने के लिए कहता है।
3. सभी मुख्य एप्लिकेशन या व्यवसाय तर्क फ़ाइलें आपके एप्लिकेशन के lib फ़ोल्डर में मौजूद होती हैं।
4. परीक्षण फ़ोल्डर में सभी यूनिट परीक्षण शामिल होंगे।

यह जांचने के लिए कि क्या कर्मा काम कर रहा है, Sample.js नामक एक फ़ाइल बनाएं, नीचे दिए गए कोड को डालें और इसे परीक्षण निर्देशिका में रखें।

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

उपरोक्त कोड के निम्नलिखित पहलू हैं

1. परीक्षण का विवरण देने के लिए डिस्क्राइब फ़ंक्शन का उपयोग किया जाता है। हमारे मामले में, हम अपने परीक्षण को 'सैंपल टेस्ट' का विवरण दे रहे हैं।
2. 'it' फ़ंक्शन का उपयोग परीक्षण को नाम देने के लिए किया जाता है। हमारे मामले में, हम अपने परीक्षण का नाम 'Condition is true' दे रहे हैं। परीक्षण का नाम सार्थक होना चाहिए।
3. 'एक्सपेक्ट' और 'टूबी' कीवर्ड का संयोजन बताता है कि परीक्षण परिणाम का अपेक्षित और वास्तविक मूल्य क्या है। यदि वास्तविक और अपेक्षित मूल्य समान है, तो परीक्षण पास हो जाएगा अन्यथा यह विफल हो जाएगा।

जब आप कमांड प्रॉम्प्ट पर निम्न पंक्ति निष्पादित करते हैं, तो यह उपरोक्त परीक्षण फ़ाइल निष्पादित करेगा

karma start

नीचे दिया गया आउटपुट IDE से लिया गया है Webstorm जिसमें उपरोक्त कदम उठाए गए।

1. आउटपुट कर्मा एक्सप्लोरर में आता है Webstormयह विंडो उन सभी परीक्षणों के निष्पादन को दिखाती है जो कर्मा फ्रेमवर्क में परिभाषित हैं।
2. यहां आप देख सकते हैं कि निष्पादित परीक्षण का विवरण दिखाया गया है जो कि “नमूना परीक्षण” है।
3. इसके बाद, आप देख सकते हैं कि परीक्षण जिसका नाम "स्थिति सत्य है" है, निष्पादित किया गया है।
4. ध्यान दें कि चूंकि सभी परीक्षणों के आगे हरे रंग का “ओके” चिह्न है, जो दर्शाता है कि सभी परीक्षण पास हो गए हैं।

AngularJS यूनिट टेस्टिंग में जैस्मिन क्या है?

कर्मा यह तय करता है कि टेस्ट कहाँ चलेंगे, जबकि जैस्मिन यह तय करता है कि उन्हें कैसे लिखा जाएगा। जैस्मिन एक व्यवहार-आधारित विशिष्टता ढांचा है जो इस पृष्ठ पर दिए गए प्रत्येक उदाहरण में प्रयुक्त शब्दावली प्रदान करता है, यही कारण है कि कर्मा-जैस्मिन एडाप्टर रनर के साथ स्थापित किया गया है।

जैस्मीन चार मूलभूत तत्वों का योगदान देती है:

• वर्णन करना(): यह संबंधित विशिष्टताओं को एक समूह में रखता है और परीक्षण के तहत इकाई का पठनीय विवरण स्वीकार करता है।
• यह(): यह एक ही विशिष्टता को घोषित करता है। नाम में उस व्यवहार का उल्लेख होना चाहिए जिसकी पुष्टि की जा रही है, न कि उस विधि का जिसे कॉल किया जा रहा है।
• मैचर्स के साथ expect(): यह वास्तविक मान की तुलना अपेक्षित मान से करता है। सामान्य मिलानकर्ताओं में toBe, toEqual, toContain और toBeDefined शामिल हैं।
• beforeEach() और afterEach(): प्रत्येक विनिर्देशन से पहले और बाद में सेटअप और टियरडाउन प्रक्रिया चलाएँ, जिससे प्रत्येक परीक्षण स्वतंत्र बना रहता है।

जैस्मिन स्पाई (speye) सुविधा भी प्रदान करता है। स्पाई किसी वास्तविक फ़ंक्शन को रिकॉर्ड किए गए वैकल्पिक फ़ंक्शन से बदल देता है, जिससे लाइव HTTP एंडपॉइंट को कॉल किए बिना कंट्रोलर का परीक्षण किया जा सकता है। चूंकि जैस्मिन को DOM या अपनी किसी असर्शन लाइब्रेरी की आवश्यकता नहीं होती है, इसलिए कर्मा और जैस्मिन का संयोजन AngularJS को चलाने का सबसे हल्का तरीका है। Javaस्क्रिप्ट यूनिट परीक्षण.

AngularJS नियंत्रकों का परीक्षण

कर्मा परीक्षण ढांचे में कंट्रोलर्स को अंत से अंत तक परीक्षण करने की कार्यक्षमता भी है। इसमें $scope ऑब्जेक्ट का परीक्षण शामिल है जिसका उपयोग कंट्रोलर्स के भीतर किया जाता है।

आइये एक उदाहरण देखें कि हम इसे कैसे प्राप्त कर सकते हैं।

हमारे उदाहरण में,

हमें सबसे पहले एक नियंत्रक को परिभाषित करना होगा। यह नियंत्रक नीचे दिए गए चरणों को पूरा करेगा

1. एक ID वैरिएबल बनाएं और उसे मान 5 निर्दिष्ट करें.
2. $scope ऑब्जेक्ट को ID वैरिएबल असाइन करें.

हमारा परीक्षण इस नियंत्रक के अस्तित्व का परीक्षण करेगा और यह भी देखेगा कि $scope ऑब्जेक्ट का ID वैरिएबल 5 पर सेट है या नहीं।

सबसे पहले हमें यह सुनिश्चित करना होगा कि निम्नलिखित पूर्व-आवश्यकताएं पूरी हों

npm के माध्यम से angular-mocks लाइब्रेरी इंस्टॉल करें। इसके लिए कमांड प्रॉम्प्ट में नीचे दी गई लाइन को चलाएं।

npm install angular-mocks --save-dev

अगला चरण karma.conf.js फ़ाइल को संशोधित करना है ताकि यह सुनिश्चित हो सके कि परीक्षण के लिए सही फ़ाइलें शामिल की गई हैं। नीचे दिया गया खंड karma.conf.js के केवल उन फ़ाइलों वाले भाग को दिखाता है जिन्हें संशोधित करने की आवश्यकता है

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

• 'फ़ाइलें' पैरामीटर मूलतः कर्मा को उन सभी फ़ाइलों के बारे में बताता है जो परीक्षणों को चलाने के लिए आवश्यक हैं।
• AngularJS यूनिट टेस्ट चलाने के लिए angular.js और angular-mocks.js फ़ाइलें आवश्यक हैं।
• index.js फ़ाइल में नियंत्रक के लिए हमारा कोड शामिल होगा
• टेस्ट फ़ोल्डर में हमारे सभी AngularJS टेस्ट शामिल होंगे

नीचे हमारा AngularJS कोड है जिसे हमारे एप्लिकेशन के टेस्ट फोल्डर में Index.js नामक फाइल के रूप में स्टोर किया जाएगा।

नीचे दिया गया कोड बस निम्नलिखित कार्य करता है

1. एक बनाएं एंगुलरजेएस मॉड्यूल सैंपलऐप कहा जाता है
2. AngularJSController नामक एक नियंत्रक बनाएँ
3. ID नामक एक वैरिएबल बनाएं, इसे 5 का मान दें और इसे $scope ऑब्जेक्ट को असाइन करें

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

एक बार उपरोक्त कोड सफलतापूर्वक निष्पादित हो जाने पर, अगला चरण एक बनाना होगा परीक्षण का मामला यह सुनिश्चित करने के लिए कि कोड ठीक से लिखा और निष्पादित किया गया है।

हमारे परीक्षण का कोड नीचे दिखाया गया है।

कोड ControllerTest.js नामक एक अलग फ़ाइल में होगा, जिसे टेस्ट फ़ोल्डर में रखा जाएगा। नीचे दिया गया कोड बस निम्नलिखित मुख्य कार्य करता है

1. beforeEach फ़ंक्शन – इस फ़ंक्शन का उपयोग टेस्ट रन से पहले 'sampleApp' नामक हमारे AngularJS मॉड्यूल को लोड करने के लिए किया जाता है। ध्यान दें कि यह index.js फ़ाइल में मॉड्यूल का नाम है।
2. $controller ऑब्जेक्ट को "AngularJSController" कंट्रोलर के लिए एक मॉकअप ऑब्जेक्ट के रूप में बनाया गया है, जिसे हमारी index.js फ़ाइल में परिभाषित किया गया है। किसी भी प्रकार के यूनिट टेस्टिंग में, एक मॉक ऑब्जेक्ट एक डमी ऑब्जेक्ट को दर्शाता है जिसका उपयोग वास्तव में टेस्टिंग के लिए किया जाएगा। यह मॉक ऑब्जेक्ट हमारे कंट्रोलर के व्यवहार का अनुकरण करेगा।
3. beforeEach(inject(function(_$controller_) – इसका उपयोग हमारे परीक्षण में नकली ऑब्जेक्ट को इंजेक्ट करने के लिए किया जाता है ताकि यह वास्तविक नियंत्रक की तरह व्यवहार करे।
4. var $scope = {}; यह $scope ऑब्जेक्ट के लिए बनाया जा रहा एक नकली ऑब्जेक्ट है।
5. var controller = $controller('AngularJSController', { $scope: $scope }); – यहाँ हम 'AngularJSController' नाम के कंट्रोलर के अस्तित्व की जाँच कर रहे हैं। साथ ही, हम Index.js फ़ाइल में मौजूद अपने कंट्रोलर के $scope ऑब्जेक्ट से सभी वेरिएबल्स को टेस्ट फ़ाइल में मौजूद $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);
    });
  });
});

उपरोक्त परीक्षण कर्मा ब्राउज़र में चलेगा और वही पास परिणाम देगा जैसा कि पिछले विषय में दिखाया गया था।

AngularJS निर्देशों का परीक्षण

कर्मा टेस्टिंग फ्रेमवर्क में कस्टम डायरेक्टिव्स का परीक्षण करने की कार्यक्षमता भी है। इसमें टेम्पलेट शामिल है।URL's जिनका उपयोग कस्टम निर्देशों के भीतर किया जाता है।

आइये एक उदाहरण देखें कि हम इसे कैसे प्राप्त कर सकते हैं।

हमारे उदाहरण में, हम पहले एक कस्टम डायरेक्टिव परिभाषित करेंगे जो निम्नलिखित कार्य करता है

1. sampleApp नामक एक AngularJS मॉड्यूल बनाएं
2. guru99 नाम से एक कस्टम डायरेक्टिव बनाएं
3. एक फ़ंक्शन बनाएं जो एक हेडर टैग के साथ एक टेम्पलेट लौटाता है जो "यह AngularJS परीक्षण है" पाठ प्रदर्शित करता है।

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

एक बार जब उपरोक्त कोड सफलतापूर्वक निष्पादित हो जाता है, तो अगला चरण एक परीक्षण केस बनाना होगा ताकि यह सुनिश्चित किया जा सके कि कोड ठीक से लिखा और निष्पादित किया गया है। हमारे परीक्षण के लिए कोड नीचे दिखाए अनुसार होगा

कोड DirectiveTest.js नामक एक अलग फ़ाइल में होगा, जिसे टेस्ट फ़ोल्डर में रखा जाएगा। नीचे दिया गया कोड बस निम्नलिखित मुख्य कार्य करता है

1. beforeEach फ़ंक्शन – इस फ़ंक्शन का उपयोग टेस्ट रन से पहले 'sampleApp' नामक हमारे AngularJS मॉड्यूल को लोड करने के लिए किया जाता है।
2. डायरेक्टिव को कंपाइल करने के लिए $compile सेवा का उपयोग किया जाता है। यह सेवा अनिवार्य है और इसे घोषित करना आवश्यक है ताकि AngularJS इसका उपयोग हमारे कस्टम डायरेक्टिव को कंपाइल करने के लिए कर सके।
3. AngularJS एप्लिकेशन का प्राथमिक स्कोप $rootScope होता है। हमने पिछले अध्यायों में कंट्रोलर के $scope ऑब्जेक्ट को देखा है। दरअसल, $scope ऑब्जेक्ट, $rootScope ऑब्जेक्ट का चाइल्ड ऑब्जेक्ट है। इसे यहाँ घोषित करने का कारण यह है कि हम अपने कस्टम डायरेक्टिव के माध्यम से DOM में मौजूद एक वास्तविक HTML टैग में बदलाव कर रहे हैं। इसलिए, हमें $rootScope सेवा का उपयोग करना आवश्यक है, जो HTML दस्तावेज़ में होने वाले किसी भी बदलाव को सुनती है या पहचानती है।
4. var element = $compile(“ ”)($rootScope) – इसका उपयोग यह जांचने के लिए किया जाता है कि हमारा डायरेक्टिव सही तरीके से इंजेक्ट हो रहा है या नहीं। डायरेक्टिव को कैमल केस नाम guru99 के साथ पंजीकृत किया गया है, इसलिए AngularJS लोअरकेस एलिमेंट से मेल खाता है। मार्कअप में। इसलिए इस जाँच के लिए इस कथन का उपयोग किया जाता है।
5. expect(element.html()).toContain(“This is AngularJS Testing”) – इसका उपयोग expect फ़ंक्शन को यह निर्देश देने के लिए किया जाता है कि उसे “This is AngularJS Testing” का innerHTML टेक्स्ट रखने के लिए एलिमेंट (हमारे मामले में h1 टैग) खोजना चाहिए।

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("<guru99></guru99>")($rootScope);
    $rootScope.$digest();
    expect(element.html()).toContain("This is AngularJS Testing");
  });
});

उपरोक्त परीक्षण कर्मा ब्राउज़र में चलेगा और वही पास परिणाम देगा जैसा कि पिछले विषय में दिखाया गया था।

AngularJS अनुप्रयोगों का एंड-टू-एंड परीक्षण

कर्म परीक्षण ढांचा, साथ ही प्रो नामक एक ढांचाtracटोर में वेब एप्लिकेशन का शुरू से अंत तक परीक्षण करने की कार्यक्षमता है।

अतः यह केवल निर्देशों और नियंत्रकों का परीक्षण नहीं है, बल्कि HTML पृष्ठ पर प्रदर्शित होने वाली किसी भी अन्य चीज़ का परीक्षण भी है।

आइये एक उदाहरण देखें कि हम इसे कैसे प्राप्त कर सकते हैं।

नीचे दिए गए हमारे उदाहरण में, हमारे पास एक AngularJS अनुप्रयोग होगा जो ng-repeat निर्देश का उपयोग करके एक डेटा तालिका बनाता है।

1. हम सबसे पहले "ट्यूटोरियल" नामक एक वैरिएबल बना रहे हैं और एक चरण में इसे कुछ कुंजी-मूल्य जोड़े असाइन कर रहे हैं। प्रत्येक कुंजी-मूल्य जोड़ी का उपयोग तालिका प्रदर्शित करते समय डेटा के रूप में किया जाएगा। फिर ट्यूटोरियल वैरिएबल को स्कोप ऑब्जेक्ट को असाइन किया जाता है ताकि इसे हमारे दृश्य से एक्सेस किया जा सके।
2. तालिका में डेटा की प्रत्येक पंक्ति के लिए, हम ng-repeat निर्देश का उपयोग कर रहे हैं। यह निर्देश ट्यूटोरियल स्कोप ऑब्जेक्ट में प्रत्येक कुंजी-मूल्य जोड़ी के माध्यम से चर ptutor का उपयोग करके जाता है।
3. अंत में, हम उपयोग कर रहे हैं कुंजी मान युग्मों के साथ टैग (ptutor.Name और ptutor.Descriptतालिका डेटा प्रदर्शित करने के लिए (ion) का उपयोग करें।

<table>
  <tr ng-repeat="ptutor in tutorial">
    <td>{{ ptutor.Name }}</td>
    <td>{{ ptutor.Description }}</td>
  </tr>
</table>
</div>
<script type="text/javascript">
var app = angular.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 पंक्तियाँ हों, जैसा कि उपरोक्त उदाहरण में होना चाहिए।

सबसे पहले हमें यह सुनिश्चित करना होगा कि निम्नलिखित पूर्व-आवश्यकताएं पूरी हों

प्रो इंस्टॉल करेंtracnpm के माध्यम से टोर लाइब्रेरी का उपयोग किया जा सकता है। इसके लिए कमांड प्रॉम्प्ट में नीचे दी गई लाइन को निष्पादित करें।

npm install -g protractor

हमारे परीक्षण का कोड नीचे दिखाया गया है।

कोड एक अलग फ़ाइल में होगा जिसका नाम CompleteTest.js होगा, जिसे टेस्ट फ़ोल्डर में रखा जाएगा। नीचे दिया गया कोड बस निम्नलिखित मुख्य कार्य करता है

1. ब्राउज़र फ़ंक्शन प्रो द्वारा प्रदान किया जाता हैtracयह टोर लाइब्रेरी का उपयोग करता है और मानता है कि हमारा एंगुलरजेएस एप्लिकेशन (ऊपर दिखाए गए कोड के साथ) हमारी साइट पर चल रहा है। URL – http://localhost:8080/Guru/ 99
2. var list = element.all(by.repeater('ptutor in tutorial')); - यह कोड की पंक्ति वास्तव में ng-repeat डायरेक्टिव को फ़ेच कर रही है, जो 'ptutor in tutorial' कोड द्वारा पॉपुलेट किया गया है। element और by.repeater प्रो द्वारा प्रदान किए गए विशेष कीवर्ड हैं।tracटोर लाइब्रेरी जो हमें ng-repeat निर्देश के बारे में जानकारी प्राप्त करने की अनुमति देती है।
3. expect(list.count()).toEqual(3); - अंत में, हम यह देखने के लिए expect फ़ंक्शन का उपयोग कर रहे हैं कि ng-repeat निर्देश के परिणामस्वरूप हमें वास्तव में हमारी तालिका में 3 आइटम मिल रहे हैं।

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);
  });
});

उपरोक्त परीक्षण कर्मा ब्राउज़र में चलेगा और वही पास परिणाम देगा जैसा कि पिछले विषय में दिखाया गया था।

कर्मा बनाम जैस्मीन बनाम प्रोtracटोर: मुख्य अंतर

इस पृष्ठ पर उपयोग किए गए तीनों उपकरण अक्सर भ्रमित करने वाले होते हैं क्योंकि वे एक ही कमांड लाइन में दिखाई देते हैं। नीचे दी गई तालिका से स्पष्ट होता है कि प्रत्येक उपकरण परीक्षण स्टैक की एक अलग परत पर कार्य करता है।

संक्षेप में, जैस्मीन टेस्ट लिखती है, कर्मा उसे निष्पादित करता है, और प्रोtractor पूरी तरह से रेंडर किए गए पेज पर जैस्मिन के समान सिंटैक्स का विस्तार करता है।

AngularJS यूनिट टेस्टिंग के लिए सर्वोत्तम अभ्यास

कुछ चुनिंदा आदतें AngularJS सूट को एप्लिकेशन के विकास के साथ-साथ तेज और भरोसेमंद बनाए रखती हैं।

1. एक समय में एक ही यूनिट का परीक्षण करें। beforeEach के अंदर केवल परीक्षण के तहत मॉड्यूल को लोड करें, और प्रत्येक सहयोगी को मॉक करें ताकि विफलता एक ही फ़ाइल की ओर इंगित करे।
2. कभी भी वास्तविक बैकएंड को कॉल न करें। पहले से तैयार प्रतिक्रियाएँ प्राप्त करने के लिए angular-mocks से $httpBackend सेवा का उपयोग करें। फिर परीक्षण ऑफ़लाइन चलाए जाते हैं और प्रत्येक मशीन पर समान परिणाम प्राप्त होते हैं।
3. विनिर्देश नामों को व्यवहारिक रखें। “कंट्रोलर के आरंभ होने पर 5 लौटाता है” जैसा नाम रिपोर्ट में “test1” की तुलना में बेहतर पढ़ा जाता है।
4. पाचन चक्र को हमेशा पूरी तरह से साफ करें। स्कोप डेटा बदलने के बाद $rootScope.$digest() को कॉल करें, अन्यथा बाइंडिंग और वॉचर कभी अपडेट नहीं होंगे और गलत कारण से अभिकथन विफल हो जाएंगे।
5. कवरेज का माप लें, लेकिन इसका आकलन सावधानीपूर्वक करें। अनपरीक्षित शाखाओं को देखने के लिए कर्मा-कवरेज जोड़ें। कमजोर अभिकथनों के साथ उच्च कवरेज भी दोषों को छिपा सकता है।
6. इस सूट को निरंतर एकीकरण (कंटीन्यूअस इंटीग्रेशन) मोड में चलाएं। हेडलेस क्रोम लॉन्चर का उपयोग करें ताकि समान स्पेसिफिकेशन केवल डेवलपर मशीन पर ही नहीं बल्कि प्रत्येक कमिट पर निष्पादित हों।

इन नियमों को लागू करने से ऊपर दिए गए उदाहरण अलग-थलग प्रदर्शनों से हटकर पुराने AngularJS कोडबेस के लिए एक रिग्रेशन सुरक्षा जाल बन जाते हैं। व्यापक परिप्रेक्ष्य के लिए, देखें AngularJS ट्यूटोरियल श्रृंखला.

अक्सर पूछे जाने वाले प्रश्न