Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Angular
Code

Jasmine के उपयोग से Angular मैं टेस्ट कॉम्पोनेंट: भाग 2, सर्विसेस

by
Difficulty:IntermediateLength:LongLanguages:

Hindi (हिंदी) translation by Ashish Rampal (you can also view the original English article)

Final product image
What You'll Be Creating

यह Jasmine का उपयोग कर Angular में टेस्ट पर सीरीज की दूसरी किस्त है। टिटोरियल के पहले भाग में हमने Pastebin क्लास और Pastebin कॉम्पोनेंट के लिए बेसिक यूनिट टेस्ट लिखे। टेस्ट, जो शुरू में फेल हो गए, बाद में हरे रंग के बन गए।

ओवरव्यू

या हम ट्यूटोरियल के दूसरे भाग में क्या काम करेंगे, इसका ओवरव्यू किया गया है।

High level overview of things weve discussed in the previous tutorial and things we will be discussing in this tutorial

इस टिटोरियल में, हम निम्न चीजें करेंगे:

  • नए कॉम्पोनेंट बनाना और अधिक यूनिट टेस्ट लिखना
  • कंपोनेंट के UI के लिए टेस्ट लिखना
  • Pastebin सर्विस के लिए यूनिट टेस्ट लिखना
  • इनपुट और आउटपुट के साथ एक कॉम्पोनेंट का टेस्ट
  • रूट्स के साथ एक कॉम्पोनेंट का टेस्ट

आइये शुरू करें!

एक पेस्ट जोड़ना (जारी)

हम AddPaste कॉम्पोनेंट के लिए यूनिट टेस्ट लिखने की प्रक्रिया से आधे रास्ते में थे। यहां पर हमने सीरीज के भाग एक में छोड़ दिया।

जैसा कि पहले उल्लेख किया गया है, हम सॉलिड UI टेस्ट नहीं लिखेंगे। इसके बजाय हम UI के लिए कुछ बेसिक टेस्ट लिखेंगे और कॉम्पोनेंट के लॉजिक का टेस्ट करने के तरीकों की तलाश करेंगे।

क्लिक एक्शन को DebugElement.triggerEventHandler() मेथड का उपयोग करके ट्रिगर किया जाता है, जो कि Angular टेस्ट यूटिलिटीज का एक हिस्सा है।

AddPaste कॉम्पोनेंट अनिवार्य रूप से पेस्ट बनाने के बारे में है; इसलिए, कॉम्पोनेंट के टेंप्लेट में एक नया पेस्ट बनाने के लिए एक बटन होना चाहिए। बटन पर क्लिक करने के लिए एक id ‘source-modal’ के साथ एक ‘modal-window’ को स्पॉन (spawn) करना चाहिए जो अन्यथा छिपे रहने चाहिए। मॉडल विंडो बूटस्ट्रैप का उपयोग करके डिजाइन किया जाएगा; इसलिए, आपको टेंप्लेट के अंदर बहुत CSS क्लासेज मिल सकती हैं।

add-paste कॉम्पोनेंट के लिए टेंप्लेट कुछ इस तरह दिखना चाहिए:

दूसरे और तीसरे टेस्ट कॉम्पोनेंट इंप्लीमेंटेशन के डिटेल के बारे में कोई जानकारी नहीं देते हैं। यहां add-paste.component.spec.ts का रिवाइज्ड वर्जन है।

रिवाइज्ड टेस्ट अधिक स्पष्ट है कि वह पूरी तरह से कंपोनेंट के लॉजिक का वर्णन करते हैं। यहां AddPaste कॉम्पोनेंट और उसका टेंप्लेट है।

टेस्ट अभी भी फेल होना चाहिए क्योंकि addPaste पर spy PastebinService मैं ऐसे मेथड खोजने में फेल रहता है। आइए Pastebin सर्विस पर वापस जाते हैं और उस पर कुछ फ्लैश (flesh) डालते हैं।

सर्विसेज के लिए टेस्ट लिखना

इससे पहले कि हम और टेस्ट लिखने के लिए आगे बढ़े, चलो Pastebin सर्विस में कुछ कोड जोड़ते हैं।

addPaste() नए पेस्ट बनाने के लिए सर्विस का मेथड है। http.post एक oberservable रिटर्न करता है, जिसे toPromise() मेथड का उपयोग करके एक प्रॉमिस में परिवर्तित किया जाता है। रिस्पांस को JSON फॉर्मेट में तब्दील किया जाता है, और किसी भी रनटाइम एक्सेप्शन को पकड़ा जाता है और इसे handleError() द्वारा रिपोर्ट किया जाता है।

क्या हमें सर्विसेज के लिए एक टेस्ट नहीं लिखना चाहिए, यह आप पूछ सकते हैं? और मेरा जवाब निश्चित तौर पर हां है। डिपेंडेंसी इंजेक्शन (DI) के माध्यम से Angular कॉम्पोनेंट में इंजेक्ट की जाने वाली सर्विसेज भी error से ग्रस्त है। इसके अलावा, Angular सर्विसेज के लिए टेस्ट अपेक्षाकृत आसान है। PastebinService के मेथड्स error को संभालने के लिए एक अतिरिक्त मेथड के साथ, चार CRUD ऑपरेशन को रीसेंबल करना चाहिए। मेथड इस प्रकार है:

  • handleError()
  • getPastebin()
  • addPaste()
  • updatePaste()
  • deletePaste()

हमने लिस्ट में पहले तीन मेथड्स को लागू किया है। आइए उनके लिए टेस्ट लिखने की कोशिश करें। यहां डिस्क्राइब ब्लॉक है।

हमने अपने टेस्ट में रियल सर्विस को इंजेक्ट करने के लिए TestBed.get(PastebinService) का उपयोग किया है।

getPastebin Pastebin ऑब्जेक्ट्स का एक array रिटर्न करता है। TypeScript के कंपाइल-टाइम टाइप की जांच का उपयोग यह वैलिडेट करने के लिए नहीं किया जा सकता है कि रिटर्न की गई वैल्यू वास्तव में Pastebin ऑब्जेक्ट का एक array है। इसलिए, हमने Object.getOwnPropertNames() का उपयोग यह सुनिश्चित करने के लिए किया है कि दोनों ऑब्जेक्ट्स में एक जैसी प्रॉपर्टीज के नाम है।

दूसरा टेस्ट इस प्रकार है:

दोनों टेस्ट को पास होना चाहिए। यहां बाकी बचे हुए टेस्ट हैं।

updatePaste() और deletePaste() मेथड्स के लिए कोड के साथ pastebin.service.ts को रिवाइज करें।

कॉम्पोनेंट्स पर वापस चलें

AddPaste कॉम्पोनेंट के लिए बाकी रिक्वायरमेंट्स इस प्रकार हैं:

  • Save बटन को दबाने से Pastebin सर्विस के addPaste() मेथड को इन्वोक करना चाहिए।
  • यदि addPaste ऑपरेशन सफल, तो कॉम्पोनेंट को पैरंट कॉम्पोनेंट को सूचित करने के लिए एक इवेंट का उत्सर्जन करना चाहिए।
  • Close बटन पर क्लिक करने से DOM से id ‘source-modal’ को हटा देना चाहिए और showModal प्रॉपर्टी को false से अपडेट करना चाहिए।

चूंकि उपरोक्त टेस्ट केसेस मॉडल विंडो से संबंधित है, इसलिए नेस्टेड डिस्क्राइब ब्लॉक का उपयोग करना एक अच्छा विचार हो सकता है।

डिस्क्राइब ब्लॉक के रूप में सभी वेरिएबल को डिक्लेअर करना दो कारणों से एक अच्छा अभ्यास है। वेरिएबल डिस्क्राइब ब्लॉक के अंदर एक्सेसिबल होगा जिसमें वे डिक्लेअर किए गए थे, और यह टेस्ट को अधिक रीडेबल बनाता है।

उपरोक्त टेस्ट में inputTitle, SelectLanguage और textAreaPaste को उनके संबंधित HTML एलिमेंट्स (<input>, <select>, और <textArea>) को साइन करने के लिए querySelector() मेथड का उपयोग किया जाता है। इसके बाद, इन एलिमेंट्स की वैल्यू स्कोर mockPaste प्रॉपर्टी वॉल्यूम से बदल दिया जाता है। यह एक ब्राउज़र के माध्यम से फॉर्म भरने वाले यूजर के बराबर है।

element.dispatchEvent(new Event(“input”)) एक नए इनपुट इवेंट को ट्रिगर करता है ताकि टेंप्लेट को पता चल सके कि इनपुट फील्ड में वैल्यू बदल गई है। टेस्ट उम्मीद करता है कि इनपुट वैल्यू स्कोर कॉम्पोनेंट की newPaste प्रॉपर्टी में propagate किया जाना चाहिए।

newPaste प्रॉपर्टी को निम्नानुसार डिक्लेअर करें:

और निम्नलिखित कोर्ट के साथ टेंप्लेट को अपडेट करें:

अतिरिक्त divs और क्लासेज बूटस्ट्रैप के मॉडल विंडो के लिए हैं। [(ngModel)] एक Angular डायरेक्टिव है जो दो तरफा डाटा बाइंडिंग को लागू करता है। (click) = “onClose()” और (click) = “onSave()” इवेंट बाइंडिंग तकनीकों के उदाहरण है जिनका उपयोग कॉम्पोनेंट में क्लिक इवेंट को एक मेथड से बांधने के लिए किया जाता है आप Angular के ऑफिशियल टेंप्लेट सिंटेक्स गाइड में विभिन्न डाटा बाइंडिंग तकनीकों के बारे में अधिक पढ़ सकते हैं।

यदि आप एक टेंप्लेट parse error का सामना करते हैं, तो ऐसा इसलिए है क्योंकि आपने AppComponent में FormsModule को इंपोर्ट नहीं किया है।

आइए हमारे टेस्ट में अधिक specs को जोड़ें।

component.onSave() Save बटन एलिमेंट पर triggerEventHandler() कॉलिंग के अनुरूप है। चूंकि हमने पहले ही बटन के लिए UI जोड़ दिया है, इस component.save() को कॉल करना अधिक सार्थक लगता है। एक्सपेक्ट स्टेटमेंट यह जानता है कि क्या spy को कोई कॉल किया गया था। यहां AddPaste कॉम्पोनेंट का अंतिम वर्जन है।

यदि onSave ऑपरेशन सफल होता है, तो कॉम्पोनेंट को अपने व्यू को अपडेट करने के लिए बेसिक कॉम्पोनेंट (Pastebin कॉम्पोनेंट) को प्वाइंट करने वाले इवेंट का उत्सर्जन करना चाहिए। addPasteSuccess, जो एक @Output डेकोरेटर के साथ सजाया गया एक इवेंट प्रॉपर्टी है, इस उद्देश्य को पूरा करता है।

एक कॉम्पोनेंट का टेस्ट करना जो एक आउटपुट इवेंट का उत्सर्जन करता है आसान है।

टेस्ट केवल पैरंट कॉम्पोनेंट के रूप में addPasteSuccess प्रॉपर्टी को सब्सक्राइब करता है। अंत की ओर एक्सपेक्टेशन, इस बात की पुष्टि करता है। AddPaste कॉम्पोनेंट का काम हो गया है।

pastebin.component.html मैं इस लाइन को अनकमेंट करें।

और नीचे दिए गए कोर्ट के साथ pastebin.component.ts को अपडेट करें।

यदि रन करने पर आपको error मिलता है, तो इसका कारण यह है कि आपने Pastebin कॉम्पोनेंट spec फाइल में AddPaste कॉम्पोनेंट डिक्लेअर नहीं किया है। क्या यह बहुत अच्छा नहीं होगा अगर हम हर उस चीज को डिक्लेयर कर सके जो हमारे टेस्ट के लिए एक ही स्थान पर होनी चाहिए और उसे हमारे टेस्ट में इंपोर्ट करना चाहिए? ऐसा करने के लिए, हम या तो AppModule को अपने टेस्ट में इंपोर्ट कर सकते हैं या हमारे टेस्ट के बदले एक नया मॉड्यूल बना सकते हैं। एक नई फाइल बनाएं और इसे app-testing-module.ts का नाम दें:

अब आप रिप्लेस कर सकते हैं।

साथ में:

मेटा डाटा जो providers और declarations को परिभाषित करता है, गायब हो गया है और इसके बजाय, AppTestingModule इंपोर्ट हो जाता है। काफी अच्छा है! TestBed.configureTestingModule() पहले की तुलना में स्लीक दिखता है।

पेस्ट को व्यू, एडिट और डिलीट करें

ViewPaste कॉम्पोनेंट किसी पेस्ट को व्यू करने, एडिट करने और डिलीट करने के लिए लॉजिक को संभालता है। इस कॉन्पोनेंट का डिजाइन, जैसा हमने AddPaste कॉम्पोनेंट में किया था उसी के जैसा ही है।

Mock design of the ViewPasteComponent in edit mode
एडिट मोड
Mock design of the ViewPasteComponent in view mode
व्यू मोड

ViewPaste कॉम्पोनेंट का ऑब्जेक्टिव नीचे लिस्टेड है:

  • कॉम्पोनेंट की टेंप्लेट में View Paste नमक एक बटन होना चाहिए।
  • View Paste बटन पर क्लिक करके id ‘source-modal’ के साथ एक मॉडल विंडो डिस्प्ले करनी चाहिए।
  • पेस्ट डाटा को पेरेंट कॉम्पोनेंट से चाइल्ड कॉम्पोनेंट तक पिलाना चाहिए और इसे मॉडल विंडो के अंदर डिस्प्ले किया जाना चाहिए।
  • एडिट बटन को दबाने पर component.editEnable को true पर सेट होना चाहिए (editEnabled का इस्तेमाल एडिट मोड और व्यू मोड के बीच टॉगल करने के लिए किया जाता है)
  • Save बटन पर क्लिक करने से Pastebin सर्विस के updatePaste() मैथर्ड को इंप्लीमेंट करना चाहिए।
  • Delete बटन पर क्लिक करने से Pastebin सर्विस के deletePaste() मैथर्ड को इंप्लीमेंट करना चाहिए।
  • चाइल्ड कॉम्पोनेंट में किसी भी परिवर्तन के पैरंट कॉम्पोनेंट को सूचित करने के लिए एक सफल अपडेट और डिलीट ऑपरेशन को करना चाहिए।

आइए शुरू करें! पहले दो specs उन टेस्ट के समान है जो हमने पहले AddPaste कॉम्पोनेंट के लिए लिखे थे।

हमने जो पहले किया था, उसी की तरह, हम एक नया डिस्क्राइब ब्लॉक बनाएंगे और बाकी specs को उसके अंदर रखेंगे। नेस्टिंग डिस्क्राइब ब्लॉक्स इस तरीके से spec फाइल को और अधिक पढ़ने योग्य बनाता है और डिस्क्राइब फंक्शन की मौजूदगी को और अधिक सार्थक बनाता है।

नेस्टेड डिस्क्राइब ब्लॉक में beforeEach() फंक्शन होगा जहां हम दो spies कोई नशीला इस करेंगे, एक updatePaste() मेथड के लिए और दूसरा deletePaste() मेथड के लिए। चूंकि हमारा टेस्ट इस पर निर्भर है, इस mockPaste ऑब्जेक्ट को बनाना ना भूलें।

यहां टेस्ट्स है।

टेस्ट यह मानता है कि कॉम्पोनेंट में एक paste प्रॉपर्टी है जो पैरंट कॉम्पोनेंट्स ए इनपुट स्वीकार करती है। इससे पहले, हमने एक उदाहरण देखा कि कैसे चाइल्ड कॉम्पोनेंट से उत्सर्जित होने वाले इवेंट्स का टेस्ट किया जा सकता है ताकि होस्ट कंपोनेंट के लॉजिक को हमारे टेस्ट में शामिल किया जा सके। इसी तरह, इनपुट प्रॉपर्टीज लेटेस्ट के लिए, प्रॉपर्टी को एक मॉक ऑब्जेक्ट पर सेट करके और HTML कोड में दिखाने के लिए मॉक ऑब्जेक्ट की वैल्यू की अपेक्षा करना आसान है।

मॉडल विंडो में बहुत सारे बटन होंगे, और यह सुनिश्चित करना एक बुरा विचार नहीं होगा कि यह गारंटी देने के लिए टेंप्लेट में बटन उपलब्ध है।

चलो अधिक मुश्किल टेस्ट करने से पहले असफल टेस्ट को ठीक करें।

पेस्ट को देखने में सक्षम होना पर्याप्त नहीं है। कॉम्पोनेंट एक पोस्ट को एडिट करने, अपडेट करने और डिलीट करने के लिए भी जिम्मेदार है। कंपोनेंट में एक editEnabled प्रॉपर्टी होनी चाहिए, जो यूज़र द्वारा Edit Paste बटन पर क्लिक करने पर true हो जाएगी।

onEdit() मेथड में editEnabled=true; को जोड़ें जिससे पहली एक्सपेक्ट स्टेटमेंट साफ हो सके।

नीचे दिया गया टेंप्लेट व्यू मोड और एडिट मोड के बीच टॉगल करने के लिए ngIf डायरेक्टिव का उपयोग करता है। <ng-container> एक लॉजिकल कंटेनर है जिसका उपयोग एलिमेंट्स और nodes के ग्रुप के लिए किया जाता है।

कॉम्पोनेंट में दो Output() इवेंट एमिटर होने चाहिए, एक updatePasteSuccess प्रॉपर्टी के लिए और दूसरा deletePasteSuccess के लिए। नीचे दिया गया टेस्ट निम्नलिखित को वेरीफाई करता है:

  1. कॉम्पोनेंट कार्ड टेंप्लेट इनपुट स्वीकार करता है।
  2. टेंप्लेट इनपुट कॉम्पोनेंट की paste प्रॉपर्टी के लिए बाउंड है।
  3. यदि अपडेट ऑपरेशन सफल होता है, तो updatePasteSuccess पेस्ट अपडेट के साथ एक इवेंट का उत्सर्जन करता है।

इस टेस्ट और पिछले वाले के बीच फर्स्ट अंतर fakeAsync फंक्शन का उपयोग है। fakeAsync async से तुलना करने योग्य है क्योंकि दोनों फंक्शंस का उपयोग एसिंक्रोनस टेस्ट जोन में टेस्ट चलाने के लिए किया जाता है। हालांकि, fakeAsync आपके लुक टेस्ट को अधिक सिंक्रोनस बनाता है।

tick() मेथड fixture.whenStable().then() को रिप्लेस करता है, और डेवलपर के दृष्टिकोण से कोड को और अधिक पढ़ने योग्य बनाता है। fakeAsync को इंपोर्ट करना ना भूलें और @angular/core/testing से tick को।

अंत में, पेस्ट को डिलीट करने के लिए spec यहां है।

हमने कॉम्पोनेंट्स को लगभग पूरा कर लिया है। यहां ViewPaste कंपोनेंट का अंतिम ड्राफ्ट तैयार किया गया है।

पैरंट कॉम्पोनेंट (pastebin.component.ts) को चाइल्ड कॉम्पोनेंट द्वारा उत्सर्जित इवेंट्स को संभालने के महत्व के साथ अपडेट करने की जरूरत है।

यहां अपडेट की गई pastebin.component.html है।

रूट को सेट अप करना

एक रूट वाली एप्लीकेशन को बनाने के लिए, हमें कुछ और स्टॉक कॉम्पोनेंट्स की आवश्यकता है ताकि हम इन कंप्लेंट के लिए सिंपल रूट बना सके। मैंने एक About कंप्लेंट और एक Contact कॉम्पोनेंट बनाया है ताकि हम इन्हें नेविगेशन बार के अंदर फिट कर सके। AppComponent रूट्स के लिए लॉजिक रखेगा। हम उनके साथ समाप्त कर लेने के बाद रूट्स के लिए टेस्ट को लिखेंगे।

सबसे पहले, RouterModule और Routes को AppModule (और AppTestingModule) मैं इंपोर्ट करें।

इसके बाद, अपने रूट्स को डिफाइन करें और RouterModule.forRoot मेथड के लिए रूट की डेफिनेशन पास करें।

AppModule मैं किए गए किसी भी परिवर्तन को AppTestingMocule में भी किया जाना चाहिए। लेकिन यदि आप टेस्ट को एग्जीक्यूट करते समय No base href set error प्राप्त करते हैं, तो अपने AppTestingModule के providers array में निम्न लाइन को जोड़ें।

अब app.component.html पर निम्न कोड जोड़ें।

routerLink एक डायरेक्टिव है जो एक रूट के साथ एक HTML एलिमेंट को bind करने के लिए उपयोग किया जाता है। हमने इसका उपयोग HTML एंकर टैग के साथ किया है। RouterOutlet एक और डायरेक्टिव है जो उस स्थान को मार्क करता है, जहां राउटर का व्यू डिस्प्ले होना चाहिए।

टेस्टिंग रूट थोड़ा मुश्किल है क्योंकि इसमें अधिक UI इंटरेक्शन शामिल है। यहां वह टेस्ट है जो यह जांच करता है कि एंकर लिंक काम कर रहे हैं या नहीं।

अगर सब कुछ ठीक हो जाता है, तो आपको कुछ इस तरह से दिखना चाहिए।

Screenshot of Karma test runner on Chrome displaying the final test results

फाइनल टच

अपने प्रोजेक्ट में एक अच्छा दिखने वाला बूटस्ट्रैप डिजाइन जोड़ें, और यदि आपने पहले ही ऐसा नहीं किया है तो अपने प्रोजेक्ट को सर्व करें।

सारांश

हमने टेस्ट ड्रिवन एनवायरमेंट में स्क्रैच से एक पूरी एप्लीकेशन लिखी। क्या कुछ ऐसा ही नहीं है? इस टिटोरियल में हमने सीखा:

  • टेस्ट फर्स्ट अप्रोच के साथ एक कॉम्पोनेंट को कैसे डिजाइन करें
  • कॉम्पोनेंट्स के लिए यूनिट टेस्ट और बेसिक UI टेस्ट को कैसे लिखें
  • Angular की टेस्टिंग यूटिलिटीज के बारे में और उन्हें हमारे टेस्ट के अंदर किस प्रकार शामिल करें
  • एसिंक्रोनस को चलाने के लिए async() और fakeAsync() का प्रयोग करने के बारे में
  • Angular में रूटिंग की बेसिक बातें और रूट्स के लिए टेस्ट लिखना

मुझे आशा है कि आप ने TDD वर्कफ्लो का आनंद लिया। कृपया कमेंट के माध्यम से संपर्क करें और हमें बताएं कि आप क्या सोचते हैं!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.