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

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

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

टेस्ट ड्रिवन डेवलपमेंट एक प्रोग्रामिंग प्रैक्टिस है जिसे इस ग्रह पर हर एक डेवलपर कम्युनिटी के द्वारा प्रचारित और प्रसारित किया गया है. और फिर भी यह एक ऐसे रूटीन है जो एक नए फ्रेमवर्क को सीखने के दौरान एक डेवलपर द्वारा काफी हद तक उपेक्षित होता है. पहले दिन से ही यूनिट टेस्ट लिखना आपको बेहतर कोड लिखने, बग को आसानी से ढूंढने में, और एक बेहतर डेवलपमेंट वर्कफ्लो मेंटेन करने में मदद करेगा.

Angular में टेस्ट-ड्रिवेन डेवलपमेंट

Angular,एक पूरी तरह से विकसित फ्रंट-एंड डेवलपमेंट प्लेटफॉर्म है, जिसके पास टेस्ट करने के लिए टूल्स का अपना सेट है. हम इस ट्यूटोरियल में निम्नलिखित टूल्स का उपयोग करेंगे:

  • Jasmine फ्रेमवर्क. Jasmine जावास्क्रिप्ट के लिए एक लोकप्रिय बिहेवियर ड्रिवन टेस्टिंग फ्रेमवर्क है. Jasmine के साथ, आप टेस्ट्स लिख सकते हैं जो अधिक एक्सप्रेसिव और सीधे हैं. यहां शुरुआत करने के लिए एक उदाहरण है.
  • Karma टेस्ट रनर. Karma टूल है जो आपको कहीं ब्राउज़र पर आपके एप्लिकेशन का टेस्ट करने देता है. Karma का Chrome, Firefox, Safari,और अन्य कई ब्राउज़र के लिए प्लगइन है. लेकिन मैं टेस्टिंग के लिए एक हैडलेस ब्राउज़र का उपयोग करना पसंद करता हूं. एक हैडलेस ब्राउज़र में GUI की कमी होती है, और इस तरह, आप अपने टर्मिनल के अंदर टेस्ट रिजल्ट रख सकते हैं. इस टिटोरियल में, हम Karma को Chrome के साथ चलाने के लिए कॉन्फ़िगर करेंगे, और वैकल्पिक रूप से, Chrome का एक हैडलेस वर्जन.
  • Angular टेस्टिंग यूटिलिटीज. Angular टेस्टिंग यूटिलिटीज आपको अपनी एप्लीकेशन के लिए एक टेस्टिंग इन्वायरमेंट बनाने के लिए एक लाइब्रेरी प्रदान करता है. TestBed और ComponentFixtures जैसी क्लासेस और हेल्पर फंक्शन जैसे कि async और fakeAsync @angular/core/testing पैकेज का हिस्सा है. इन यूटिलिटीज से परिचित होना आवश्यक है, यदि आप टेस्टिंग लिखना चाहते हैं जो यह बताता है कि आपके कॉम्पोनेंट अपने स्वयं के टेंपलेट, सर्विसेज और अन्य कॉम्पोनेंट्स के साथ कैसे इंटरेक्ट करते हैं.

हम इस टिटोरियल में Protractor का उपयोग करके फंक्शनल टेस्ट को कवर करने नहीं जा रहे हैं. Protractor एक लोकप्रिय एंड-टू-एंड टेस्ट फ्रेमवर्क है जो एक वास्तविक ब्राउज़र का उपयोग करके एप्लीकेशन के UI के साथ इंटरेक्ट करता है.

इस ट्यूटोरियल में, हम टेस्टिंग कॉम्पोनेंट्स और टेस्ट के लॉजिक के बारे में अधिक कंसर्न है. हालांकि, Jasmine फ्रेमवर्क का उपयोग करके बेसिक UI इंटरेक्शन को प्रदर्शित करने वाले कुछ लिखेंगे.

हमारा लक्ष्य

इस टिटोरियल का लक्ष्य टेस्ट ड्रिवन डेवलपमेंट एनवायरमेंट में Pastebin एप्लीकेशन के लिए फ्रंट एंड बनाना है. इस ट्यूटोरियल में, हम लोकप्रिय TDD मंत्र को फॉलो करेंगे, जो “red/green/refactor” है. हम टेस्ट लिखेंगे जो शुरू में फेल (red) है और फिर उन्हें पास (green) बनाने के लिए हमारे एप्लीकेशन को पर काम करते हैं. जब यह ब्लाटेड (bloated) और अगली (ugly) हो जाता है, तो हम अपने कोड को रीफेक्टर करेंगे.

हम कंपोनेंट, उनके टेंप्लेट, सर्विसेज और Pastebin क्लास के लिए टेस्ट लिखेंगे. नीचे दी गई इमेज हमारे Pastebin एप्लीकेशन के स्ट्रक्चर को दर्शाती है. जो आइटम gray हैं उनके बारे में टिटोरियल के दूसरे भाग में चर्चा की जाएगी.

Structure of the application we are about to build Components services and modules are highlighted

सीरीज के पहले भाग में, हम पूरी तरह से टेस्टिंग इन्वायरमेंट सेटअप करने और कॉम्पोनेंट्स के लिए बेसिक टेस्ट लिखने पर ध्यान केंद्रित करेंगे. Angular एक कॉम्पोनेंट-आधारित फ्रेमवर्क है, इसलिए, कॉम्पोनेंट्स के लिए टेस्ट लिखने से परिचित होने के लिए कुछ समय बिताना एक अच्छा विचार है. सीरीज के दूसरे भाग में, हम कॉम्पोनेंट्स के लिए अधिक मुश्किल टेस्ट लिखेंगे, इनपुट के साथ कॉम्पोनेंट, रूट किए गए कॉम्पोनेंट और सर्विसेज. सीरीज के अंत तक, हमारे पास पूरी तरह से काम करने वाली Pastebin एप्लीकेशन होगी जो इस तरह दिखती है.

Screenshot of the front-end of the application
Pastebin कॉम्पोनेंट का व्यू
Screenshot of the front-end of the application
AddPaste कॉम्पोनेंट का व्यू
ViewPaste component in action using a bootstrap modal
ViewPaste कॉम्पोनेंट का व्यू

एस ट्यूटोरियल में, आप सीखेंगे कि कैसे:

  • Jasmine और Karma को कॉन्फ़िगर करें
  • एक Pastebin क्लास बनाए जो एक इंडिविजुअल पेस्ट को रिप्रेजेंट करता है
  • एक bare-bones PastebinService बनाएं
  • दो कॉम्पोनेंट बनाएं, Pastebin और AddPaste
  • यूनिट टेस्ट लिखें

टिटोरियल के लिए सारे कोर्ट Github पर उपलब्ध हैं.

रेपो को क्लोज करें और इस स्टोरी के किसी भी स्टेट में संदेह (doubt) होने पर कोड की जांच करने के लिए स्वतंत्र महसूस करें. आइए शुरू करें!

Jasmine और Karma को कॉन्फ़िगर करना

Angular के डेवलपर्स ने हमारे लिए अपना टेस्टिंग एनवायरमेंट सेट अप करना आसान बना दिया है. शुरुआत करने के लिए, हमें पहले Angular इंस्टॉल करना होगा. मैं Angular-CLI का उपयोग करना पसंद करता हूं. यह एक ऑल इन वन समाधान है जो आप के Angular प्रोजेक्ट को बनाने, जनरेट करने, बिल्ड करने और टेस्टिंग का ध्यान रखता है.

यहां Angular-CLI द्वारा बनाई गई डायरेक्टरी स्ट्रक्चर है.

क्योंकि हमारा इंटरेस्ट Angular में टेस्टिंग पहलुओं की ओर अधिक है, इसलिए हमें दो प्रकार की फाइलों को देखने की जरूरत है.

karma.conf.js Karma टेस्ट रनर के लिए कंफीग्रेशन फाइल और एकमात्र कंफीग्रेशन फाइल है जिसकी हमें Angular में यूनिट टेस्टिंग लिखने के लिए आवश्यकता होगी. डिफ़ॉल्ट रूप से, क्रोम डिफॉल्ट ब्राउज़र लांचर है जिसका उपयोग Karma द्वारा टेस्ट को कैप्चर करने के लिए किया जाता है. हम हैडलेस Chrome चलाने के लिए एक कस्टम लॉन्चर बनाएंगे और इसे browsers array में जोड़ेंगे.

दूसरी प्रकार की फाइल जिसे हमें देखने की जरूरत है, वह कुछ भी जो .spec.ts के साथ समाप्त होती है. कन्वेंशन द्वारा, Jasmine में लिखे गए टेस्ट को specs कहा जाता है. सभी टेस्ट specs एप्लीकेशन के src/app/ डायरेक्टरी के अंदर स्थित होने चाहिए क्योंकि यही वह जगह है जहां Karma टेस्ट specs के लिए देखता है. यदि आप एक नया कॉम्पोनेंट या सर्विस बनाते हैं, तो यह महत्वपूर्ण है कि आप अपने टेस्ट specs को उसी डायरेक्टरी के अंदर रखें जिसमें कॉम्पोनेंट या सर्विस के लिए कोड रहते हैं.

ng new कमांड ने हमारे app.component.ts के लिए एक app.component.spec.ts फाइल बनाई है. इसे खोलने के लिए स्वतंत्र महसूस करें और Angular में Jasmine टेस्ट्स पर एक नजर डालें. यहां तक कि अगर कोड का कोई मतलब समझ नहीं आता, तो यह ठीक है. हम अभी के लिए AppComponent को रखेंगे और इसका उपयोग टिटोरियल में बात के प्वाइंट्स पर रूट्स को होस्ट करने के लिए करेंगे.

Pastebin क्लास बनाना

हमें कॉम्पोनेंट्स और टेस्ट्स के अंदर अपने Pastebin को मॉडल करने के लिए Pastebin क्लास की आवश्यकता है. आप एक Angular-CLI का उपयोग करके इसे बना सकते हैं.

Pastebin.ts में निम्नलिखित लॉजिक जोड़ें:

हमने एक Pastebin क्लास को डिफाइन किया है, और है और इस हर इंस्टेंस में निम्नलिखित प्रॉपर्टीज होंगी:

  • id
  • title
  • language
  • paste

टेस्ट सूट के लिए pastebin.spc.ts नामक एक और फाइल बनाएं.

टेस्ट सूट एक describe ब्लॉक के साथ शुरू होता है, जो एक ग्लोबल Jasmine फंक्शन है जो दो पैरामीटर को स्वीकार करता है. पहले टेस्ट सूट का टाइटल है, और दो वास्तविक इंप्लीमेंटेशन है. specs एक it फंक्शन का उपयोग करके डिफाइन किया जाता है जो describe ब्लॉक के समान दो पैरामीटर लेता है.

मल्टीपल specs (it ब्लॉक्स) को टेस्ट सूट के अंदर नेस्ट किया जा सकता है (describe ब्लॉक). हालांकि, यह सुनिश्चित करें कि टेस्ट सूट के टाइटल इस तरह से नामांकित हो कि वह स्पष्ट और अधिक पढ़ने योग्य हो क्योंकि वे लीडर के लिए एक डॉक्यूमेंटेशन के रूप में काम करने के लिए है.

एक्सपेक्टेशन, except फंक्शन का उपयोग करके, Jasmine द्वारा यह निर्धारित करने के लिए उपयोग किया जाता है कि क्या एक spec पास होनी चाहिए या फेल. except फंक्शन एक पैरामीटर लेता है जिसे वास्तविक वैल्यू के रूप में जाना जाता है. इसके बाद एक अन्य फंक्शन के साथ chain किया जाता है जो एक्सपेक्टेड वैल्यू लेता है. इन फंक्शन को मैचर फंक्शन कहा जाता है, और हम इस ट्यूटोरियल में बहुत सारे मैच फंक्शन का उपयोग करेंगे जैसे toBeTruthy(), toBeDefined(), toBe(), और toContain().

इसलिए इस कोड के साथ, हमने Pastebin क्लास का एक नया इंस्टेंस बनाया है और उम्मीद करते हैं कि यह true होगा. चलिए कंफर्म करने के लिए एक और spec जोड़ते हैं कि Pastebin मॉडल हमारे इरादों के अनुसार काम करता है.

हमने PasteBin क्लास को तुरंत तैयार कर लिया है और हमारे टेस्ट spec से कुछ एक्सपेक्टेशन जोड़ दी हैं. ng test को रन करें यह वेरीफाई करने के लिए की सभी टेस्ट हरे हैं.

बेयर-बोन सर्विस बनाना

नीचे दी गई कमांड का उपयोग करके एक सर्विस बनाएं.

PastebinService HTTP रिक्वेस्ट को सर्वर पर भेजने के लिए लॉजिक को होस्ट करेगा; हालांकि, हमारे पास जो एप्लीकेशन बन रहा है, उसके लिए हमारे पास सर्वर API नहीं है. इस, हम InMemoryWebApiModule नामक एक मॉड्यूल का उपयोग करके सर्वर कम्युनिकेशन को सिम्युलेट करने जा रहे हैं.

Angular-in-Memory-Web-API को सेट अप करना

angular-in-memory-web-api को npm के माध्यम से इंस्टॉल करें:

इस वर्जन के साथ AppModule अपडेट करें.

InMemoryDataService को इंप्लीमेंट करने वाली InMemoryDataService बनाएं.

जहां, pastebin सैंपल पेस्ट का एक array है जिसे http.get या http.post जैसे HTTP एक्शन करने पर रिटर्न या अपडेट किया जाएगा.

getPastebin() मेथड HTTP.get रिक्वेस्ट करता है और सरवर द्वारा दिए गए Pastebin ऑब्जेक्ट के लिए array को रिजॉल्व करने वाला प्रॉमिस रिटर्न करता है.

यदि आपको spec रन करते समय No provider for HTTP error मिलता है, तो आपको संबंधित spec फाइल में HTTPModule को इंपोर्ट करना होगा.

कॉम्पोनेंट्स के साथ शुरुआत करना

कॉम्पोनेंट एक Angular ऐप एप्लीकेशन UI का सबसे बुनियादी बिल्डिंग ब्लॉक है. एक Angular एप्लीकेशन, Angular कॉम्पोनेंट्स का एक पेड़ है.
— Angular डॉक्यूमेंटेशन

जैसा कि पहले Overview सेक्शन में प्रकाश डाला गया था, हम इस टिटोरियल में दो कॉम्पोनेंट पर काम करेंगे: PastebinComponent और AddPasteComponent. Pastebin कॉम्पोनेंट में एक टेबल स्ट्रक्चर होता है जो सर्वर से प्राप्त सभी पेस्ट को सूचीबद्ध करता है. AddPaste कंपोनेंट नए पेस्ट के निर्माण के लिए लॉजिक रखता है.

Pastebin कॉम्पोनेंट की डिजाइनिंग और टेस्टिंग

आगे बढ़े और Angular-CLI का उपयोग करके कॉम्पोनेंट्स को जनरेट करें.

--spec=false ऑप्शन बताता है कि Angular-CLI spec फाइल नहीं बनाता है. या इसलिए है क्योंकि हम ग्रेट से कॉम्पोनेंट्स के लिए यूनिट टेस्ट लिखना चाहते हैं. pastebin-component फोल्डर के अंदर एक pastebin.component.spec.ts फाइल बनाएं.

यहां pastebin.component.spec.ts के लिए कोड है.

यहां बहुत कुछ हो रहा है. आइए इसे ब्रेक करें और एक बार में एक टुकड़ा ले. describe ब्लॉक के अंदर, हमने कुछ वेरिएबल डिक्लेअर किए हैं, और फिर हमने beforeEach फंक्शन का उपयोग किया है. beforeEach() Jasmine द्वारा प्रदान किया गया एक ग्लोबल फंक्शन है और जैसा की नाम से पता चलता है, यह describe ब्लॉक में हर एक spec से पहले एक बार इन्वोक किया जाता है जिस में इसे कॉल करते हैं.

TestBed क्लास Angular टेस्टिंग यूटिलिटीज का एक हिस्सा है, और यह @NgModel क्लास के समान टेस्टिंग मॉड्यूल बनाता है. इसके अलावा, आप configureTestingModule मेथड का उपयोग करके TestBed को कॉन्फ़िगर कर सकते हैं. उदाहरण के लिए, आप अपने प्रोजेक्ट के लिए एक टेस्ट इन एनवायरमेंट बना सकते हैं जो वास्तविक Angular एप्लीकेशन एम्युलेट करता है, और फिर आप अपने एप्लीकेशन मॉड्यूल से एक कॉम्पोनेंट पुल कर सकते हैं और इसे इस टेस्ट मॉड्यूल में री-अटैच कर सकते हैं.

Angular डॉक्यूमेंटेशन से:

createComponent मेथड ComponentFixture,क्रिएट किए गए कॉम्पोनेंट के आसपास टेस्ट एनवायरमेंट पर एक हैंडल देता है. fixture कॉम्पोनेंट इंस्टेंस के लिए और DebugElement को एक्सेस प्रदान करता है, जो कॉन्पोनेंट के DOM एलिमेंट पर एक हैंडल है.

जैसे कि ऊपर बताया गया है, हमने PastebinComponent की एक फिक्सचर बनाया है और फिर कॉम्पोनेंट का एक इंस्टेंस बनाने के लिए उस फिक्सचर का उपयोग किया है. अब हम comp.property_name को कॉल करके कॉम्पोनेंट के प्रॉपर्टीज ओर मेथड को अपने टेस्ट के अंदर एक्सेस कर सकते हैं. क्योंकि फिक्सचर debugElement तक भी एक्सेस प्रदान करता है, अब हम DOM एलिमेंट्स और सिलेक्टर्स को क्वेरी कर सकते हैं.

हमारे code के साथ एक समस्या है जिसके बारे में हमने अभी तक सोचा नहीं है. हमारे कॉम्पोनेंट में एक बाहरी टेंप्लेट और एक CSS फाइल है. फाइल सिस्टम में उन्हें लाना और पढ़ना कोड के बाकी हिस्सों के विपरीत, एक एसिंक्रोनस (asynchronous) एक्टिविटी है, जो सभी सिंक्रोनस (synchronous) है.

Angular आपको async() नामक एक फंक्शन प्रदान करता है जो सभी एसिंक्रोनस stuff की देखभाल करता है. async जो करता है, वो इसके अंदर के सभी एसिंक्रोनस टास्क को ट्रैक करता है, जबकि हम से एसिंक्रोनस एग्जीक्यूशन की कंपलेक्सिटी को छुपाता है. इसलिए अब हमारे पास दो beforeEach फंक्शंस होंगे, एक एसिंक्रोनस beforeEach() और एक सिंक्रोनस beforeEach().

हमने अभी तक कोई टेस्ट spec नहीं लिखा है., spec हालांकि पहले से spec की आउटलाइन तैयार करना एक अच्छा विचार है. नीचे दी गई इमेज Pastebin कॉम्पोनेंट के रफ डिजाइन को दर्शाती है.

Mock design of the Pastebin Application

हमें निम्नलिखित एक्सपेक्टेशन के साथ टेस्ट लिखने की आवश्यकता है.

  • Pastebin कॉम्पोनेंट मौजूद होना चाहिए.
  • कंपोनेंट के टाइटल प्रॉपर्टी को टेंप्लेट में डिस्प्ले किया जाना चाहिए.
  • टेंप्लेट में मौजूदा पेस्ट को डिस्प्ले करने के लिए एक HTML टेबल होनी चाहिए.
  • pastebinService कॉम्पोनेंट में इंजेक्ट किया जाता है, और इसके मेथड्स एक्सेसिबल होते हैं.
  • जब तक onInit() को कॉल नहीं किया जाता है तब तक किसी भी पेस्ट को डिस्प्ले नहीं किया जाना चाहिए.
  • जब तक हमारी सर्विस में प्रॉमिस नहीं किया जाता है तब तक पेस्ट को डिस्प्ले नहीं किया जाता है.

पहले तीन टेस्ट को इंप्लीमेंट करना आसान है.

एक टेस्ट इन एनवायरमेंट में, Angular कॉम्पोनेंट के प्रॉपर्टीज को ऑटोमेटिक रूप से टेंप्लेट एलिमेंट्स के साथ नहीं बनता है. हर बार जब आप किसी कॉम्पोनेंट की प्रॉपर्टी को टेंप्लेट से बांधना चाहते हैं, तो आपको स्पष्ट रूप से fixture.detextChanges() कॉल करना होगा.कोरन करने से आपको एक error मिलना चाहिए क्योंकि हमने अभी तक अपने कंपोनेंट के अंदर टाइटल प्रॉपर्टी डिक्लेअर नहीं की है.

एक बेसिक टेबल स्ट्रक्चर के साथ टेंप्लेट को अपडेट करना ना भूलें.

बाकी मामलों के लिए, हमें Pastebinservice कोई जैक करने और कॉम्पोनेंट-सर्विस इंटरेक्शन के साथ टेस्ट लिखने की आवश्यकता है. एक वास्तविक सर्विस रिमोट सर्वर को कॉल कर सकती है, और इसे अपने रॉ रूप में इंजेक्ट करना एक कठिन और चुनौतीपूर्ण टास्क होगा.

इसके बजाय, हमें उन टेस्ट को लिखना चाहिए जो इस बात पर ध्यान केंद्रित करते हैं कि कॉम्पोनेंट अपेक्षित रूप से सर्विस के साथ इंटरेक्ट करता है या नहीं. हम pastebinService और उस उसके getPastebin() मेथड पर जासूसी करने वाले specs को जोड़ देंगे.

सबसे पहले, PastebinService को हमारे टेस्ट सूट में इंपोर्ट करें.

इसके बाद, इसे TestBed.configureTestingMosule() के अंदर providers के array में जोड़ें.

नीचे दिए गए कोर्ट एक Jasmine जासूस बनाता है जिसे सभी कॉल को getPastebin() मेथड से ट्रैक करने के लिए डिजाइन किया गया है और एक प्रॉमिस रिटर्न करता है जो तुरंत mockPaste को रिजॉल्व करता है.

जासूसी वास्तविक सर्विस के इंप्लीमेंटेशन की डिटेल के बारे में कंसर्न नहीं करता, ले वास्तविक getPastebin() मेथड के लिए किसी भी कॉल को बायपास करता है. इसके अलावा, getPastebin() के अंदर दफन सभी रिमोट कॉल को हमारे टेस्ट द्वारा अनदेखा किया जाता है. हम ट्यूटोरियल के दूसरे भाग में Angular सर्विसेज के लिए अलग-अलग यूनिट टेस्ट लिखेंगे.

pastebin.component.spec.ts में निम्न टेस्ट को जोड़ें.

पहले दो टेस्ट सिंक्रोनस टेस्ट है. पहला spec जांचता है कि क्या div एलिमेंट का innerText तब तक खाली रहता है जब तक कि कॉम्पोनेंट को इनीशिएलाइज नहीं किया जाता है. Jasmine मैच फंक्शन का दूसरा लॉजिक ऑप्शनल हैऔर टेस्ट फेल होने पर डिस्प्ले किया जाता है. यह तब मददगार होता है जब आपके पास किसी spec के अंदर कई एक्सपेक्ट स्टेटमेंट्स होते हैं.

दूसरे spec में, कॉम्पोनेंट को इनिशियलाइज़ किया जाता है (क्योंकि fixture.detectChanges() को कॉल किया जाता है), और स्पाई भी इन्वोक होने की उम्मीद है, लेकिन टेंप्लेट को अपडेट नहीं किया जाना चाहिए. भले ही स्पाई एक सुलझा हुआ प्रॉमिस रिटर्न करता है, लेकिन mockPaste अभी तक उपलब्ध नहीं है. यह तब तक उपलब्ध नहीं होना चाहिए जब तक कि टेस्ट एक एसिंक्रोनस टेस्ट ना हो.

तीसरा टेस्ट एक async टेस्ट जॉन में टेस्ट चलाने के लिए पहले चर्चा किए गए एक async() फंक्शन का उपयोग करता है. async() का प्रयोग सिंक्रोनस टेस्ट को एसिंक्रोनस बनाने के लिए किया जाता है. fixture.whenStable() उस समय कॉल किया जाता है जब सभी पेंडिंग एसिंक्रोनस एक्टिविटीज को कॉन्प्लीमेंट किया जाता है, और फिर fixture.detectChanges() के एक दूसरे दौर को नए वैल्यू के साथ DOM को अपडेट करने के लिए कॉल किया जाता है. अंतिम टेस्ट में उम्मीद यह सुनिश्चित करती है कि हमारे DOM को mockPaste वैल्यू के साथ अपडेट किया गया है.

टेस्ट्स को पास करने के लिए, हमें अपने pastebin.component.ts को निम्न कोड से अपडेट करना होगा.

टेम्पलेट को भी अपडेट करने की जरूरत है.

एक नया पेस्ट जोड़ना

Angular-CLIका उपयोग करके एक AddPaste कॉम्पोनेंट बनाएं. नीचे दी गई इमेज में AddPaste कॉम्पोनेंट का डिजाइन दर्शाया गया है.

Mock design of the AddPaste component

कॉम्पोनेंट के लॉजिक को निम्नलिखित specs पास करने चाहिए.

  • AddPaste कॉम्पोनेंट के टेंपलेट में Create Paste नामक बटन होना चाहिए.
  • Create Paste बटन पर क्लिक करके id ‘source-modal’ के साथ एक मॉडल बॉक्स डिस्प्ले करना चाहिए.
  • क्लिक एक्शन को कंपोनेंट की showModal प्रॉपर्टी में true तक अपडेट करना चाहिए. (showModal एक बुलियन प्रॉपर्टी है जो मॉडल के प्रदर्शित होने पर true होती है और मॉडल के बंद होने पर false होती है.)
  • save बटन को दबाने पर Pastebin सर्विस के addPaste() मेथड को इन्वोक करना चाहिए.
  • close बटन पर क्लिक करने से DOM से id ‘source-modal’ हटा देना चाहिए और showModal प्रॉपर्टी को false अपडेट करना चाहिए.

हमने आपके लिए पहले तीन टेस्ट किए हैं. देखें कि क्या आप टेस्ट्स को अपने दम पर पास कर सकते हैं.

DebugElement.triggerEventHandler() यहां केवल एक ही चीज नई है. इसका उपयोग बटन एलिमेंट पर एक क्लिक इवेंट को ट्रिगर करने के लिए किया जाता है, जिस पर इसे कॉल किया जाता है. दूसरा पैरामीटर इवेंट ऑब्जेक्ट है, और हमने इसे खाली छोड़ दिया है क्योंकि कॉम्पोनेंट के click() को इसकी उम्मीद नहीं है.

सारांश

आज के लिए बस इतना ही. इस पहले आर्टिकल में, हमने सीखा:

  • Jasmine और Karma को कैसे सेट अप और कंफीग्र्ड करें
  • क्लासेज के लिए बेसिक टेस्ट कैसे लिखें
  • कैसे कॉम्पोनेंट्स के लिए यूनिट टेस्ट डिजाइन करें और लिखे
  • कैसे एक बेसिक सर्विस बनाएं
  • हमारे प्रोजेक्ट Angular टेस्ट यूटिलिटीज का उपयोग कैसे करें

अगले ट्यूटोरियल में हम नए कॉम्पोनेंट बनाएंगे, इनपुट और आउटपुट, सर्विसेज और रूट के साथ अधिक टेस्ट कॉम्पोनेंट लिखेंगे. सीरीज के दूसरे भाग के लिए साथ बनी रहे. अपने विचारों को कमेंट के माध्यम से साझा करें.

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.