AngularJS यूनिट परीक्षण: कर्म जैस्मीन ट्यूटोरियल

विषय - सूची:

Anonim

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

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

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

इस ट्यूटोरियल में, आप सीखेंगे-

  • कर्म रूपरेखा का परिचय और स्थापना
    • कर्म की स्थापना
    • कर्म ढांचे का विन्यास
  • परीक्षण AngularJS नियंत्रकों
  • परीक्षण AngularJS निर्देश
  • एंड टू एंड टेस्टिंग AngularJS JS एप्लीकेशन

कर्म रूपरेखा का परिचय और स्थापना

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

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

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

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

npm install karma karma-chrome-launcher karma-jasmine

जिसमें

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

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

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

npm install karma-cli

जिसमें,

  1. कर्म-क्ली का उपयोग कर्म के लिए कमांड लाइन इंटरफ़ेस को स्थापित करने के लिए किया जाता है जिसका उपयोग कमांड लाइन इंटरफ़ेस में कर्म कमांड लिखने के लिए किया जाएगा।

कर्म ढांचे का विन्यास

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

"karma -init"

उपरोक्त चरण निष्पादित होने के बाद, कर्म एक karm.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 ' - यह कर्म को AngularJS के लिए AngularJS से इकाई परीक्षण कार्यक्षमता का उपयोग करने के लिए कहता है। JS-mocks.js फ़ाइल।
  4. सभी मुख्य एप्लिकेशन या व्यावसायिक तर्क फ़ाइलें आपके एप्लिकेशन के लिबास फ़ोल्डर में मौजूद हैं।
  5. परीक्षण फ़ोल्डर में सभी यूनिट परीक्षण शामिल होंगे

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

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

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

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

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

KARMA start

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

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

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

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

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

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

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

  1. एक आईडी वैरिएबल बनाएं और उसमें मान 5 असाइन करें।
  2. ID चर को $ स्कोप ऑब्जेक्ट पर असाइन करें।

हमारा परीक्षण इस नियंत्रक के अस्तित्व का परीक्षण करेगा और यह देखने के लिए भी परीक्षण करेगा कि $ गुंजाइश वस्तु का आईडी चर 5 पर सेट है या नहीं।

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

    1. एनपीएल के माध्यम से कोणीय।जेएस-मोक्स लाइब्रेरी स्थापित करें। यह कमांड प्रॉम्प्ट में नीचे की रेखा को निष्पादित करके किया जा सकता है
npm install Angular JS-mocks
  1. परीक्षण के लिए सही फ़ाइलें शामिल हैं यह सुनिश्चित करने के लिए अगला karm.conf.js फ़ाइल को संशोधित करना है। नीचे का खंड सिर्फ कर्मों की फाइलों को दिखाता है ।conf.js जिसे संशोधित करने की आवश्यकता है 
    files: ['lib/AngularJS.js','lib/AngularJS-mocks.js','lib/index.js','test/*.js']
  • 'फाइल' पैरामीटर मूल रूप से कर्मा को उन सभी फाइलों को बताता है जो परीक्षणों के संचालन में आवश्यक हैं।
  • AngularJS इकाई परीक्षण चलाने के लिए AngularJS.js और AngularJS-mocks.js फ़ाइल की आवश्यकता होती है
  • Index.js फ़ाइल नियंत्रक के लिए हमारे कोड को शामिल करने जा रही है
  • परीक्षण फ़ोल्डर में हमारे सभी AngularJS परीक्षण शामिल हैं

नीचे हमारा Angular.JS कोड है जो हमारे एप्लिकेशन के परीक्षण फ़ोल्डर में फ़ाइल Index.js के रूप में संग्रहीत किया जाएगा।

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

  1. सेम्परेप नामक एक कोणीय जेएस मॉड्यूल बनाएँ
  2. AngularJSController नामक एक नियंत्रक बनाएँ
  3. आईडी नामक एक वैरिएबल बनाएं, इसे 5 का मान दें और इसे $ स्कोप ऑब्जेक्ट में असाइन करें
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.controller('AngularJSController', function($scope) {$scope.ID =5;});

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

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

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

  1. फ़ंक्शन से पहले - इस फ़ंक्शन का उपयोग परीक्षण चलाने से पहले हमारे AngularJS.JS मॉड्यूल को 'sampleApp' कहा जाता है। ध्यान दें कि यह एक index.js फ़ाइल में मॉड्यूल का नाम है।

  2. $ नियंत्रक वस्तु को नियंत्रक '' कोणीय JSController '' के लिए एक मॉकअप ऑब्जेक्ट के रूप में बनाया गया है, जो कि हमारी index.js फ़ाइल में परिभाषित है। किसी भी प्रकार के यूनिट टेस्टिंग में, एक मॉक ऑब्जेक्ट एक डमी ऑब्जेक्ट का प्रतिनिधित्व करता है जो वास्तव में परीक्षण के लिए उपयोग किया जाएगा। यह नकली वस्तु वास्तव में हमारे नियंत्रक के व्यवहार का अनुकरण करेगी।

  3. पहले (इंजेक्शन (फ़ंक्शन (_ $ कंट्रोलर)) - इसका उपयोग हमारे परीक्षण में नकली वस्तु को इंजेक्ट करने के लिए किया जाता है ताकि यह वास्तविक नियंत्रक की तरह व्यवहार करे।

  4. var $ गुंजाइश = {}; यह $ स्कोप ऑब्जेक्ट के लिए एक मॉक ऑब्जेक्ट बनाया जा रहा है।

  5. var नियंत्रक = $ नियंत्रक ('AngularJSController', {$ गुंजाइश: $ गुंजाइश}); - यहाँ हम 'Angular.JSController' नामक कंट्रोलर के अस्तित्व की जाँच कर रहे हैं। यहाँ हम अपने नियंत्रक में हमारे $ स्कोप ऑब्जेक्ट के सभी वेरिएबल्स को Index.js फ़ाइल में हमारे टेस्ट फाइल में $ स्कोप ऑब्जेक्ट में असाइन कर रहे हैं।

  6. अंत में, हम $ गुंजाइश की तुलना कर रहे हैं। 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 निर्देश

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

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

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

  1. एक AngularJS मॉड्यूल बनाएँ, जिसे sampleApp कहा जाता है
  2. नाम के साथ एक कस्टम निर्देश बनाएँ - Guru99
  3. एक फ़ंक्शन बनाएं जो हेडर टैग के साथ एक टेम्पलेट लौटाता है जो पाठ को प्रदर्शित करता है "यह AngularJS परीक्षण है।"
var sampleApp = AngularJS.module('sampleApp',[]);sampleApp.directive('Guru99', function () {return {restrict: 'E',replace: true,template: '

This is AngularJS Testing

'};});

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

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

  1. पहले के कार्य - इस फ़ंक्शन का उपयोग परीक्षण चलाने से पहले हमारे 'एंगुलर जेएस मॉड्यूल' को 'नमूनाएप' कहा जाता है।

  2. $ संकलन सेवा का उपयोग निर्देश को संकलित करने के लिए किया जाता है। यह सेवा अनिवार्य है और इसे घोषित करने की आवश्यकता है ताकि Angular.JS हमारे कस्टम निर्देश को संकलित करने के लिए इसका उपयोग कर सके।

  3. $ Rootcope किसी भी AngularJS.JS एप्लिकेशन का प्राथमिक क्षेत्र है। हमने पहले अध्याय में नियंत्रक की $ गुंजाइश वस्तु देखी है। खैर, $ स्कोप ऑब्जेक्ट $ रूडस्कोप ऑब्जेक्ट का चाइल्ड ऑब्जेक्ट है। यह यहां घोषित किया गया है क्योंकि हम अपने कस्टम निर्देश के माध्यम से डोम में एक वास्तविक HTML टैग में बदलाव कर रहे हैं। इसलिए, हमें $ rootcope सेवा का उपयोग करने की आवश्यकता है जो वास्तव में सुनता है या जानता है कि किसी HTML दस्तावेज़ में कोई परिवर्तन कब होता है।

  4. var element = $ compile (" ") - इसका उपयोग यह जांचने के लिए किया जाता है कि क्या हमारे निर्देश को अंतःक्षिप्त होना चाहिए। हमारे कस्टम निर्देश का नाम गुरु99 है, और हम अपने कस्टम निर्देश अध्याय से जानते हैं कि जब निर्देश हमारे 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 directivevar element = $compile("")($rootScope);$rootScope.$digest();expect(element.html()).toContain("This is AngularJS Testing");});});

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

एंड टू एंड टेस्टिंग AngularJS JS एप्लीकेशन

कर्म टेस्टिंग फ्रेमवर्क के साथ-साथ एक फ्रेमवर्क जिसे प्रोट्रैक्टर कहा जाता है, में एक वेब एप्लिकेशन एंड टू एंड टेस्ट की कार्यक्षमता है।

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

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

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

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


{{ ptutor.Name }}{{ ptutor.Description }}