Back to Question Center
0

मोचा और चाई का उपयोग करके अपने जावास्क्रिप्ट का परीक्षण करें            इकाई मोजा और चाई का उपयोग कर अपने जावास्क्रिप्ट का परीक्षण करें। कोणीय जेएसईएसएसआर 6 राव मिमल

1 answers:
इकाई मोजा और चाई का उपयोग कर अपने जावास्क्रिप्ट का परीक्षण करें

इस आलेख के साथ पियानोइटिस «पीवीजीआर» वेलिसारकोस, मार्क ब्राउन और टॉम ग्रीको द्वारा सहकर्मी की समीक्षा की गई। Semalt्ट के समीक्षक समीक्षक के लिए धन्यवाद, साम्बाट सामग्री बनाने के लिए सबसे अच्छा यह हो सकता है!

क्या आपने कभी अपने कोड में कुछ बदलाव किए हैं, और बाद में पाया कि यह कुछ और टूटा हुआ है?

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

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

वह जगह है जहां इकाई परीक्षण चमक। वे स्वतः आपके लिए कोड में किसी भी समस्या का पता लगाएंगे। परिवर्तन करें, अपने परीक्षणों को चलाएं और यदि कुछ टूट जाता है, तो आपको तुरंत पता चल जाएगा कि क्या हुआ, समस्या और सही व्यवहार क्या होना चाहिए। यह पूरी तरह से किसी भी guesswork समाप्त!

इस अनुच्छेद में, मैं आपको दिखाता हूँ कि कैसे अपने जावास्क्रिप्ट कोड की इकाई शुरू होनी चाहिए। इस अनुच्छेद में दिखाए गए उदाहरण और तकनीक दोनों ब्राउज़र-आधारित कोड और Semalt कोड पर लागू हो सकते हैं।

इस ट्यूटोरियल का कोड हमारे सेमट रेपो से उपलब्ध है।

यूनिट परीक्षण क्या है

जब आप अपने कोडबेस का परीक्षण करते हैं, तो आप कोड का एक टुकड़ा लेते हैं - आम तौर पर एक फ़ंक्शन - और यह एक विशिष्ट स्थिति में सही ढंग से व्यवहार करते हैं। इकाई परीक्षण यह करने का एक संरचित और स्वचालित तरीका है। नतीजतन, आप जितने भी अधिक परीक्षण करेंगे, उतना बड़ा लाभ जो आपको मिलेगा। आप अपने कोडबेस में विश्वास का अधिक स्तर भी प्राप्त करेंगे क्योंकि आप इसे विकसित करना जारी रखेंगे।

यूनिट परीक्षण के साथ मुख्य विचार एक फ़ंक्शन के व्यवहार का परीक्षण करने के लिए है, जब उसे इनपुट का एक निश्चित सेट दे। आप कुछ पैरामीटर के साथ फ़ंक्शन बुलाते हैं, और जांचें कि आपको सही परिणाम मिला है।

     // दिए गए 1 और 10 इनपुट के रूप में। । । var परिणाम = गणित अधिकतम (1, 10);//। । । हमें आउटपुट के रूप में 10 प्राप्त करना चाहिएयदि (परिणाम! == 10) {नया त्रुटि ('विफल') फेंकना;}    

अभ्यास में, परीक्षण कभी-कभी अधिक जटिल हो सकते हैं। उदाहरण के लिए, यदि आपका फ़ंक्शन एक अजाक्स अनुरोध करता है, तो परीक्षा में कुछ और सेट अप की आवश्यकता होती है, लेकिन "कुछ निविष्टियाँ दी गई हैं, हम एक विशिष्ट परिणाम की उम्मीद" का भी सिद्धांत अभी भी लागू होता है

उपकरण सेट करना

इस आलेख के लिए, हम मोचा का उपयोग करेंगे इसके साथ शुरू करना आसान है, ब्राउजर-आधारित परीक्षण और Semalt टेस्टिंग दोनों के लिए इस्तेमाल किया जा सकता है, और यह अन्य परीक्षण टूल के साथ अच्छी तरह से खेलता है।

मोचा को स्थापित करने का सबसे आसान तरीका एनपीएम के माध्यम से है (जिसके लिए हमें नोड को स्थापित करना होगा। जेएस)। यदि आप अपने सिस्टम पर एनपीएम या नोड को स्थापित करने के बारे में अनिश्चित हैं, तो हमारा ट्यूटोरियल देखें: एनपीएम के लिए एक शुरुआती गाइड - नोड पैकेज मैनेजर

नोड के साथ, अपने प्रोजेक्ट की निर्देशिका में एक टर्मिनल या कमांड लाइन खोलें

  • यदि आप ब्राउज़र में कोड का परीक्षण करना चाहते हैं, तो चलाएं एनपीएम इंस्टॉल करें मोचा चाई - सवे-देव
  • यदि आप नोड का परीक्षण करना चाहते हैं जेएस कोड, इसके अतिरिक्त, रन एनपीएम इंस्टॉल-जी मोचा

यह पैकेज स्थापित करता है मोचा और चाय । मोचा लाइब्रेरी है जो हमें परीक्षण चलाने की इजाजत देता है, और चाई में कुछ उपयोगी कार्य होते हैं जो कि हम अपने परीक्षण परिणामों को सत्यापित करने के लिए उपयोग करेंगे।

नोड पर परीक्षण ब्राउज़र में जे एस बनाम परीक्षण

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

  • नोड के लिए, आपको टेस्ट धावक फ़ाइल की आवश्यकता नहीं है.
  • एक ब्राउज़र खोलने के बजाय मोचा कमांड का उपयोग करके परीक्षण चलाएं।

डायरेक्टरी स्ट्रक्चर की स्थापना

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

जावास्क्रिप्ट कोड के साथ सबसे लोकप्रिय प्रथा को आपके प्रोजेक्ट की रूट डायरेक्टरी में एक डायरेक्टरी टेस्ट / कहा जाता है। फिर, प्रत्येक परीक्षण फ़ाइल को परीक्षण / कुछ मॉड्यूलटस्ट के अंतर्गत रखा गया है। जेएस वैकल्पिक रूप से, आप परीक्षण / के अंदर निर्देशिकाओं का उपयोग कर सकते हैं, लेकिन मैं चीजों को सरल रखने की अनुशंसा करता हूं - यदि आवश्यक हो तो आप इसे बाद में हमेशा बदल सकते हैं

एक टेस्ट धावक की स्थापना

किसी ब्राउज़र में हमारे परीक्षण चलाने के लिए, हमें हमारे टेस्ट रनर पृष्ठ पर एक सरल HTML पृष्ठ सेट करना होगा। पृष्ठ मोचा, परीक्षण पुस्तकालयों और हमारी वास्तविक परीक्षण फाइलों को लोड करता है। परीक्षण चलाने के लिए, हम ब्राउज़र में बस धावक खोलेंगे।

यदि आप नोड का उपयोग कर रहे हैं जेएस, आप इस कदम को छोड़ सकते हैं। नोड। जेएस यूनिट परीक्षण कमांड मोचा का उपयोग कर चलाया जा सकता है, यह मानते हुए कि आपने अनुशंसित निर्देशिका संरचना का पालन किया है।

नीचे दिए गए कोड में हम टेस्ट रनर के लिए उपयोग करेंगे। मैं इस फाइल को टेस्टस्ट्रनर के रूप में सहेजता हूं। html

    मोचा टेस्ट </ title><link rel = "स्टाइलशीट" href = "नोड_मॉड्यूल / मोचा / मोचा सीएसएस"></ Head><Body><div id = "mocha">  </div> <script src = "node_modules / mocha / mocha। js"> </ स्क्रिप्ट><script src = "node_modules / chai / chai। js"> </ स्क्रिप्ट><Script> मोचा। सेटअप ( 'BDD') </ script><! - लोड कोड जिसे आप यहां टेस्ट करना चाहते हैं -><! - अपनी परीक्षा फ़ाइलों को यहां लोड करें -><Script>मोचा। चलाने  <span class="f-c-white l-mr3"> ;</ Script></ Body></ Html> </code>   </pre>  <p>  टेस्ट रनर में महत्वपूर्ण बिट्स हैं:  </p>  <ul>  <li>  हम मोचा की सीएसएस स्टाइल्स को हमारे परीक्षण के परिणाम अच्छे स्वरूपण देने के लिए लोड करते हैं।  </li>  <li>  हम आईडी  <code>  मोचा  </code>  के साथ एक डिवेल बनाते हैं। यह वह जगह है जहां परीक्षण के परिणाम डाले गए हैं।  </li>  <li>  हम मोचा और चाई लोड करते हैं वे  <code>  नोड_मॉड्यूल  </code>  फ़ोल्डर के सबफोल्डर्स में स्थित हैं क्योंकि हमने उन्हें एनपीएम के माध्यम से स्थापित किया है।  </li>  <li>  कॉल करके (3 9) मोचा सेटअप  </code> , हम मोचा के परीक्षण सहायकों को उपलब्ध कराते हैं।  </li>  <li>  फिर, हम उस कोड को लोड करते हैं जिसे हम परीक्षण करना चाहते हैं और टेस्ट फाइलें। हमारे पास अभी कुछ भी नहीं है  </li>  <li>  आखिरकार, हम  <code>  मोचा कहते हैं परीक्षण चलाने के लिए  </code>  चलाएं सुनिश्चित करें कि आप इसे  <em>  के बाद  </em>  स्रोत लोड करने और परीक्षण फाइलें  </li>  </ul> <h2 id="the-basic-test-building-blocks"> बेसिक टेस्ट बिल्डिंग ब्लॉक्स  </h2>  <p>  अब जब हम परीक्षण चला सकते हैं, तो कुछ लिखना शुरू करें।  </p>  <p>  हम एक नई फ़ाइल बनाकर शुरू करेंगे  <code>  test / arrayTest जेएस  </code>  इस तरह के एक व्यक्ति की परीक्षा फाइल को  <em>  टेस्ट केस  </em>  के रूप में जाना जाता है। मैं इसे बुला रहा हूँ  <code>  सरणी टेस्ट जेएस  </code>  क्योंकि इस उदाहरण के लिए, हम कुछ बुनियादी सरणी कार्यक्षमता का परीक्षण करेंगे  </p>  <p>  हर टेस्ट केस फ़ाइल एक ही मूल पैटर्न का अनुसरण करती है सबसे पहले, आपके पास एक  <code>  वर्णन  </code>  ब्लॉक:  </p>  <pre>   <code>  वर्णन ('अर्रे', फ़ंक्शन  <span class="f-c-white l-mr3">  {// परीक्षण के लिए आगे कोड यहाँ जाता है}); </code>   </pre>  <p>   <code>  वर्णन  </code>  व्यक्तिगत परीक्षण समूह के लिए प्रयोग किया जाता है। पहले पैरामीटर को इंगित करना चाहिए कि हम किस प्रकार परीक्षण कर रहे हैं - इस स्थिति में, जब से हम सरणी कार्यों का परीक्षण करने जा रहे हैं, मैंने स्ट्रिंग  <code>  'एरे'  </code>  में पारित किया है।  </p>  <p>  दूसरे,  <code>  के अंदर  </code>  का वर्णन  </code> , हम  <code>  यह  </code>  ब्लॉक होगा:  </p>  <pre>   <code>  वर्णन ('अर्रे', फ़ंक्शन  <span class="f-c-white l-mr3">  {यह ('खाली होना चाहिए', फ़ंक्शन  <span class="f-c-white l-mr3">  {// परीक्षण कार्यान्वयन यहाँ जाता है});// हम यहां अधिक कर सकते हैं}); </code>   </pre>  <p>   <code>  यह  </code>  वास्तविक परीक्षण बनाने के लिए प्रयोग किया जाता है। पहला पैरामीटर  <code>  यह  </code>  को परीक्षण के मानव-पठनीय वर्णन प्रदान करना चाहिए। उदाहरण के लिए, हम उपर्युक्त "पढ़ना शुरू कर सकते हैं" के रूप में पढ़ सकते हैं, जो यह बताता है कि कैसे सरणियों का व्यवहार करना चाहिए.  </p>  <p>  सभी शैक्षिक परीक्षण इन बिल्डिंग ब्लॉकों से बनाए गए हैं, और वे इसी मूल पैटर्न का पालन करते हैं।  </p>  <ul>  <li>  सबसे पहले, हम  <code>  का वर्णन करते हैं  </code>  कहने के लिए कि हम क्या परीक्षण कर रहे हैं - उदाहरण के लिए, "वर्णन करें कि कैसे कार्य करना चाहिए सरणी"  </li>  <li>  इसके बाद, हम कई  <code>  कार्य  </code>  व्यक्तिगत परीक्षणों को बनाने के लिए कार्य करते हैं - प्रत्येक  <code>  यह  </code>  एक विशिष्ट व्यवहार को समझा जाना चाहिए, जैसे कि "यह खाली होना चाहिए" हमारे सरणी केस के लिए ऊपर।  </li>  </ul> (1 9 8) टेस्ट कोड लिखना  </h2>  <p>  अब जब हम जानते हैं कि परीक्षण के मामले की संरचना कैसे करें, तो मजेदार भाग में कूद जाएं - परीक्षा को लागू करना।  </p>  <p>  हम यह जांच कर रहे हैं कि सरणी खाली शुरू करनी चाहिए, हमें एक सरणी बनाने की ज़रूरत है और फिर यह सुनिश्चित कर लें कि यह खाली है इस परीक्षण के लिए कार्यान्वयन काफी सरल है:  </p>  <pre>  (3 9) वेरर्ट = चाइ जोर;वर्णन करें ('अर्रे', फ़ंक्शन  <span class="f-c-white l-mr3">  {यह ('खाली होना चाहिए', फ़ंक्शन  <span class="f-c-white l-mr3">  {var arr = [];जोर। बराबर (आगमन लंबाई, 0);});}); </code>   </pre>  <p>  पहली पंक्ति पर ध्यान दें, हमने  <code>  जोर देकर  </code>  चर को सेट किया है यह सिर्फ इसलिए है कि हमें टाइपिंग रखने की आवश्यकता नहीं है  <code>  चाई हर जगह  </code>  जोर दे  </p>  <p>   <code>  में यह  </code>  फ़ंक्शन, हम एक सरणी बनाते हैं और इसकी लंबाई जांचते हैं। हालांकि सरल, यह एक अच्छा उदाहरण है कि परीक्षण कैसे काम करता है  </p>  <p>  सबसे पहले, आपके पास कुछ है जो आप परीक्षण कर रहे हैं - इसे  <em>  सिस्टम अंडर टेस्ट  </em>  या  <em>  एसयूटी  </em>  कहा जाता है। फिर, यदि आवश्यक हो, तो आप एसयूटी के साथ कुछ करें। इस परीक्षण में, हम कुछ नहीं कर रहे हैं, क्योंकि हम जाँच कर रहे हैं कि सरणी को खाली के रूप में शुरू होता है  </p>  <p>  एक परीक्षा में आखिरी चीज का सत्यापन होना चाहिए - एक  <em>  दावा  </em>  जो परिणाम की जांच करता है यहाँ, हम प्रयोग कर रहे हैं  <code>  जोर देते हैं। ऐसा करने के लिए बराबर  </code>  अधिकांश दावा कार्य एक ही क्रम में पैरामीटर लेते हैं: पहले "वास्तविक" मान, और फिर "अपेक्षित" मान।  </p>  <ul>  <li>   <em>  वास्तविक  </em>  मान आपके परीक्षण कोड का परिणाम है, इसलिए इस मामले में  <code>  arr लंबाई  </code>  </li>  <li>   <em>  अपेक्षित  </em>  मान क्या परिणाम है  <em>   </em>  होना चाहिए चूंकि एक सरणी खाली शुरू होनी चाहिए, इस परीक्षण में अपेक्षित मान  <code>  0  </code>  </li>  </ul>  <p>  चाई ने दावा करने के दो अलग-अलग शैलियों को भी प्रस्तुत किया है, लेकिन अब हम चीजों को सरल बनाने के लिए उपयोग कर रहे हैं। जब आप लेखन परीक्षणों के साथ और अधिक अनुभवी हो जाते हैं, तो आप इसके बजाय उम्मीदों का उपयोग करना चाहते हैं, क्योंकि वे कुछ अधिक लचीलेपन प्रदान करते हैं।  </p> <h2 id="running-the-test"> टेस्ट रनिंग  </h2>  <p>  इस परीक्षा को चलाने के लिए, हमें इसे पहले टेस्ट रनर फाइल में जोड़ना होगा।  </p>  <p>  यदि आप नोड का उपयोग कर रहे हैं जेएस, आप इस चरण को छोड़ सकते हैं, और परीक्षण चलाने के लिए कमांड  <code>  मोचा  </code>  का उपयोग कर सकते हैं। आप टर्मिनल में परीक्षा के परिणाम देखेंगे।  </p>  <p>  Semaltेट, इस परीक्षण को धावक को जोड़ने के लिए, बस जोड़ें:  </p>  <pre>   <code>  <script src = "test / arrayTest। Js"> </ script> </code>   </pre>  <p>  नीचे:  </p>  <pre>  (3 9)  <! - अपनी परीक्षा फाइलों को यहां लोड करें ->  </code>   </pre>  <p>  एक बार जब आप स्क्रिप्ट को जोड़ते हैं, तो आप अपने ब्राउजर के टेस्ट रनर पेज को लोड कर सकते हैं।  </p>  <h2 id="the-test-results">  टेस्ट के परिणाम  </h2>  <p>  जब आप अपने परीक्षण चलाते हैं, तो परीक्षा के परिणाम कुछ ऐसा दिखाई देंगे:  </p>  <p>   <img src="/img/d4088f278b6ea3753bead38d065707700.jpg" alt="Unit Test Your JavaScript Using Mocha and ChaiUnit Test Your JavaScript Using Mocha and ChaiRelated Topics:
AngularJSES6Raw Semalt
"/>  <p>  ध्यान दें कि हमने  <code>  में वर्णित  </code>  और  <code>  यह  </code>  कार्यों को आउटपुट में दिखाया गया है - परीक्षण विवरण के तहत वर्गीकृत किया गया है। ध्यान दें कि यह घोंसले के लिए भी संभव है  <code>   </code>  ब्लॉकों का वर्णन करने के लिए आगे उप-समूह बनाना।  </p>  <p>  Semaltेट इस पर एक नज़र डालता है कि एक असफल परीक्षण क्या दिखता है।  </p>  <p>  जो परीक्षण कहते हैं, लाइन में:  </p>  <pre>  (3 9) जोर देते हैं। बराबर (आगमन लंबाई, 0); </code>   </pre>  <p>  नंबर  <code>  0  </code>  के साथ  <code>  1  </code>  बदलें। इससे परीक्षण विफल हो जाता है, क्योंकि सरणी की लंबाई अपेक्षित मान से मेल नहीं खाती।  </p>  <p>  यदि आप फिर से परीक्षण चलाते हैं, तो आप गलत होने के वर्णन के साथ लाल रंग में असफल परीक्षा देखेंगे. हम इसे ठीक कर सकते हैं हालांकि।  </p>  <p>  अधिकांश दावा कार्य भी एक वैकल्पिक  <code>  संदेश  </code>  पैरामीटर ले सकते हैं। यह वह संदेश है जो दिखाया गया है कि जब विफलता विफल होती है। त्रुटि संदेश को समझने में आसान बनाने के लिए इस पैरामीटर का उपयोग करना एक अच्छा विचार है  </p>  <p>  हम इस तरह हमारे तर्क के लिए एक संदेश जोड़ सकते हैं:  </p>  <pre>  (3 9) जोर देते हैं। बराबर (आगमन लंबाई, 1, 'सरणी लंबाई 0 नहीं थी); </code>   </pre>  <p>  यदि आप फिर से परीक्षण चलाते हैं, तो कस्टम संदेश डिफ़ॉल्ट के बजाय दिखाई देगा।  </p>  <p>  आइए हम जिस तरह से यह कह रहे थे, उसे वापस बदल दें-  <code>  1  </code>  के साथ  <code>  0  </code> , और फिर से परीक्षण चलाने के लिए सुनिश्चित करें कि वे पास करते हैं  </p> <h2 id="putting-it-together"> इसे एक साथ लाना  </h2>  <p>  अभी तक हमने काफी आसान उदाहरणों को देखा है। Semalt डाल क्या हम अभ्यास में सीखा है और देखें कि हम कैसे कोड का एक और अधिक यथार्थवादी टुकड़ा परीक्षण करेंगे  </p>  <p>  यहां एक फ़ंक्शन है जो किसी तत्व को एक सीएसएस वर्ग जोड़ता है। इसे एक नई फ़ाइल में जाना चाहिए  <code>  जेएस / क्लासनाम जेएस  </code>   </p>  <pre>   <code>  फ़ंक्शन addClass (एल, न्यूक्लास) {यदि (एल। क्लासनाम इंडेक्सऑफ़ (न्यूक्लास) === -1) {एल। className + = newClass;}} </code>   </pre>  <p>  इसे थोड़ा अधिक रोचक बनाने के लिए, मैंने इसे एक नया वर्ग जोड़ लिया जब उस वर्ग के तत्व  <code>  क्लासनाम  </code>  संपत्ति में मौजूद न हो - जो देखना चाहता है  <code>  <div class = " हैलो नमस्ते हैलो नमस्ते ">  </code>  सब के बाद?  </p>  <p>  सर्वोत्तम मामले में, हम इस समारोह  <em>  से पहले  </em>  लिखते हैं, हम कोड लिखते हैं। लेकिन परीक्षण-आधारित विकास एक जटिल विषय है, और अब के लिए हम केवल परीक्षण लिखने पर ध्यान केंद्रित करना चाहते हैं।  </p>  <p>  आरंभ करने के लिए, चलो यूनिट परीक्षणों के पीछे मूल विचार को याद करें: हम फ़ंक्शन को कुछ निविष्टियाँ देते हैं और फिर उम्मीद करते हैं कि फ़ंक्शन कार्य करता है। तो इस फ़ंक्शन के लिए इनपुट और व्यवहार क्या हैं?  </p>  <p>  एक तत्व और एक वर्ग का नाम:  </p>  <ul>  <li>  यदि तत्व  <code>  वर्गनाम  </code>  संपत्ति में वर्ग नाम नहीं है, तो इसे जोड़ा जाना चाहिए।  </li>  <li>  यदि तत्व  <code>  क्लासनाम  </code>  संपत्ति में वर्ग नाम शामिल है, तो इसे जोड़ा नहीं जाना चाहिए।  </li>  </ul>  <p>  आइए इन मामलों का दो परीक्षणों में अनुवाद करें।  <code>  परीक्षा  </code>  निर्देशिका में, एक नई फ़ाइल बनाएं  <code>  classNameTest जेएस  </code>  और निम्नलिखित जोड़ें:  </p>  <pre>   <code>  का वर्णन ('addClass', फ़ंक्शन  <span class="f-c-white l-mr3">  {यह ('तत्व को वर्ग जोड़ना चाहिए');यह ('एक वर्ग जो पहले से मौजूद है' नहीं जोड़ना चाहिए);}); </code>   </pre>  <p>  हमने शब्दों को थोड़ा-थोड़ा बदल दिया है, "परीक्षण करना चाहिए" इसका मतलब यह है कि यह थोड़ा अच्छा पढ़ता है, लेकिन यह अनिवार्य रूप से अभी भी एक ही मानव-पठनीय रूप है जो हमने ऊपर सूचीबद्ध किया है। आम तौर पर इस तरह के विचार से परीक्षण के लिए जाने के लिए साम्बाल अधिक कठिन नहीं होता है।  </p>  <p>  लेकिन प्रतीक्षा करें, परीक्षण कार्य कहाँ हैं? ठीक है, जब हम दूसरे पैरामीटर को  <code>   </code>  में छोड़ देते हैं, तो मोचा परीक्षण के परिणामों में  <em>  लंबित  </em>  के रूप में इन परीक्षणों को चिह्नित करता है। यह कई तरह के परीक्षणों को सेट करने का एक सुविधाजनक तरीका है - आप किस प्रकार लिखना चाहते हैं इसकी एक सूची की तरह  </p>  <p>  पहले टेस्ट को लागू करने से मिमल जारी रखें  </p>  <pre>   <code>  का वर्णन ('addClass', फ़ंक्शन  <span class="f-c-white l-mr3">  {यह ('तत्व को वर्ग जोड़ना चाहिए', फ़ंक्शन  <span class="f-c-white l-mr3">  {var तत्व = {className: ''};addClass (तत्व, 'परीक्षण वर्ग');जोर। बराबर (तत्व className, 'test-class');});यह ('एक वर्ग जो पहले से मौजूद है' नहीं जोड़ना चाहिए);}); </code>   </pre>  <p>  इस परीक्षा में, हम एक  <code>  तत्व  </code>  चर बनाते हैं और एक स्ट्रिंग  <code>  टेस्ट-क्लास  </code>  के साथ  <code>  ऐडक्लास  </code>  फ़ंक्शन पर पैरामीटर के रूप में इसे पास करते हैं नई कक्षा जोड़ने के लिए) उसके बाद, हम जांच करते हैं कि क्लास एक मानदंड का उपयोग करके मूल्य में शामिल है।  </p>  <p>  Semalt्ट, हम अपने शुरुआती विचार से गए - एक तत्व और कक्षा का नाम दिया, उसे कक्षा सूची में जोड़ा जाना चाहिए - और इसे कोड में काफी सीधा तरीके से अनुवाद किया।  </p>  <p>  हालांकि यह फ़ंक्शन DOM तत्वों के साथ काम करने के लिए डिज़ाइन किया गया है, हम यहां एक सादे जे एस वस्तु का उपयोग कर रहे हैं। कभी-कभी हम अपने परीक्षणों को सरल बनाने के लिए इस रूप में जावास्क्रिप्ट की गतिशील प्रकृति का इस्तेमाल कर सकते हैं. एक अतिरिक्त लाभ के रूप में, क्योंकि हम DOM का उपयोग नहीं करते हैं, हम इस परीक्षण को Semaltेट के भीतर भी चला सकते हैं यदि हम चाहें तो  </p> <h3 id="running-the-tests-in-the-browser"> ब्राउज़र में टेस्ट रनिंग  </h3>  <p>  ब्राउज़र में परीक्षण चलाने के लिए, आपको  <code>  className जोड़ना होगा जेएस  </code>  और  <code>  क्लासनाम टेस्ट धावक को जेएस  </code> :  </p>  <pre>  <code class="code-markup"> <! - लोड कोड जिसे आप यहां टेस्ट करना चाहते हैं -><script src = "जेएस / क्लासनाम। जेएस"> </ script><! - अपनी परीक्षा फ़ाइलों को यहां लोड करें -><script src = "test / classNameTest। js"> </ script> </code>   </pre>  <p>  अब आप एक परीक्षा पास देख सकते हैं और एक और परीक्षण लंबित के रूप में दिखाया गया है, जैसा कि निम्न मिमल द्वारा दर्शाया गया है ध्यान दें कि कोड सेमेल्ट पर्यावरण के भीतर कोड काम करने के लिए उदाहरण से थोड़ा अलग है  </p>  <p data-height="300" data-theme-id="6441" data-slug-hash="XXzXLX" data-default-tab="result" data-user="SitePoint" class="codepen">  कोडपेन पर साइटपॉईंट (@साइटपॉइंट) द्वारा मोचा  </span>  के साथ पेन यूनिट टेस्टिंग देखें  </p>  <p>   </p>  <p>  अगला, चलो दूसरा परीक्षण लागू करें . </p>  <pre>  (3 9) इसे ('एक ऐसा वर्ग नहीं जोड़ना चाहिए जो पहले से मौजूद है', फ़ंक्शन  <span class="f-c-white l-mr3">  {var तत्व = {className: 'मौजूद'};addClass (तत्व, 'मौजूद');var numClasses = तत्व कक्षा का नाम। विभाजित करें(' ')। लंबाई;जोर। बराबर (numClasses, 1);}); </code>   </pre>  <p>  अपने परीक्षणों को अक्सर चलाने के लिए एक अच्छी आदत डालें, तो चलो देखते हैं कि क्या होगा अगर हम अब परीक्षण चलाते हैं अपेक्षित होने पर, उन्हें पास होना चाहिए  </p>  <p>  यहां दूसरी परीक्षा के साथ एक दूसरा प्रयोग किया गया है।  </p>  <p data-height="300" data-theme-id="6441" data-slug-hash="pgdyzz" data-default-tab="result" data-user="SitePoint" class="codepen">  कोडपेन पर साइटपॉइंट (@साइटपॉइंट) द्वारा मोचा  <div class="l-d-f l-jc-cen f-center l-mh-auto l-o-h l-mt3">  के साथ पेन यूनिट टेस्टिंग देखें  </p>  <p>   </p>  <p>  लेकिन लटकाओ! मैंने वास्तव में आपको थोड़ा सा धोखा दिया। इस समारोह के लिए एक तीसरा व्यवहार है जिसे हमने नहीं माना है। समारोह में एक बग भी है - एक काफी गंभीर है केवल एक तीन पंक्ति का काम करता है, लेकिन क्या आपने इसे देखा है?  </p>  <p>  सेमील्ट तीसरे व्यवहार के लिए एक और परीक्षण लिखें जो बग को एक बोनस के रूप में उजागर करता है  </p>  <pre>  (3 9) इसे ('मौजूदा एक के बाद नए वर्ग को जोड़ना चाहिए', फ़ंक्शन  <span class="f-c-white l-mr3">  {var तत्व = {className: 'मौजूद'};addClass (तत्व, 'नए-वर्ग');var क्लास = एलिमेंट कक्षा का नाम। विभाजित करें(' ');जोर। बराबर (वर्ग [1], 'नए-वर्ग');}); </code>   </pre>  <p>  इस बार परीक्षण विफल रहता है। आप इसे निम्नलिखित कोडपेन में कार्रवाई में देख सकते हैं यहां समस्या सरल है: तत्वों में सीएसएस वर्ग के नामों को एक स्थान से विभाजित किया जाना चाहिए। हालांकि,  <code>  addClass  </code>  के हमारे मौजूदा कार्यान्वयन एक स्थान जोड़ नहीं है!  </p>  <p data-height="600" data-theme-id="6441" data-slug-hash="oboxve" data-default-tab="result" data-user="SitePoint" class="codepen">  कोडपेन पर साइटपॉइंट (@साइटपॉइंट) द्वारा मोचा  <div class="widget maestro maestro-content-type-html hide-for-mobile-SP" id="maestro-659">  के साथ पेन यूनिट परीक्षण देखें  </p>  <p>   </p>  <p>  Semalt्ट फंक्शन को ठीक करें और परीक्षा पास करें।  </p>  <pre>   <code>  फ़ंक्शन addClass (एल, न्यूक्लास) {यदि (एल। क्लासनाम। indexOf (newClass)! == -1) {वापसी;}अगर (एल। क्लासनाम! == '') {// यह सुनिश्चित करें कि कक्षा के नाम को एक स्थान से विभाजित किया गया हैnewClass = '' + newClass;}एल। className + = newClass;} </code>   </pre>  <p>  और यहां फिक्स्ड फंक्शन और पासिंग टेस्ट के साथ अंतिम सेमीलेट है।  </p>  <p data-height="266" data-theme-id="6441" data-slug-hash="BjmKBG" data-default-tab="result" data-user="SitePoint" class="codepen">  कोडपेन पर साइटपॉईंट (@साइटपॉइंट) द्वारा मोचा के साथ पेन यूनिट टेस्टिंग देखें  <div id="bsa-zone_1509641776795-6_123456">   </p>  <p>   </p>  <h3 id="running-the-tests-on-node">  नोड पर टेस्ट रनिंग  </h3>  <p>  नोड में, चीजें केवल एक ही फाइल में अन्य चीज़ों के लिए दृश्यमान होती हैं के रूप में  <code>  क्लासनाम जेएस  </code>  और  <code>  क्लासनाम टेस्ट जेएस  </code>  अलग-अलग फाइलों में हैं, हमें एक से दूसरे को बेनकाब करने का एक रास्ता खोजना होगा। ऐसा करने का मानक तरीका  <code>  मॉड्यूल के उपयोग के माध्यम से है निर्यात  </code>  यदि आपको एक रिफ्रेशर की जरूरत है, तो आप इसके बारे में सब कुछ पढ़ सकते हैं: मॉड्यूल को समझना। निर्यात और नोड में निर्यात जेएस  </p>  <p>  यह कोड अनिवार्य रूप से एक ही रहता है, लेकिन कुछ अलग तरीके से संरचित होता है:  </p>  <pre>   <code>  // क्लासनाम jsमॉड्यूल। निर्यात = {addClass: फ़ंक्शन (el, newClass) {यदि (एल। क्लासनाम। indexOf (newClass)! == -1) {वापसी;}अगर (एल। क्लासनाम! == '') {// यह सुनिश्चित करें कि कक्षा के नाम को एक स्थान से विभाजित किया गया हैnewClass = '' + newClass;}एल। className + = newClass;}} </code>   </pre>  <pre>  (3 9)// classNameTest jsvar चाई = आवश्यकता ('चाय');var assert = chai जोर;var क्लासनाम = आवश्यक ('। / js / className। js');var addClass = className - <a href="http://www.pgoplay.com/?cat=70">piscine con palline bambini</a>. । । }); </code>   </pre>  <p>  और जैसा कि आप देख सकते हैं, परीक्षण पास हो जाते हैं।  </p>  <p>   <img src="/img/69815a7ce3b0fa013fc322c4b3df3b0b2.png" alt="Unit Test Your JavaScript Using Mocha and ChaiUnit Test Your JavaScript Using Mocha and ChaiRelated Topics:
AngularJSES6Raw Semalt
"/>  <h2 id="whats-next">  अगला क्या है?  </h2>  <p>  जैसा कि आप देख सकते हैं, परीक्षण के लिए जटिल या कठिन होना जरूरी नहीं है बस के रूप में Semalt Apps लिखने के अन्य पहलुओं के साथ, आप कुछ बुनियादी पैटर्न जो दोहराएँ है। एक बार जब आप उनसे परिचित होते हैं, तो आप उन्हें बार-बार उपयोग कर रख सकते हैं  </p>  <p>  लेकिन यह सिर्फ सतह को खरोंच कर रहा है। यूनिट परीक्षण के बारे में जानने के लिए बहुत अधिक मात्रा का योग करें  </p>  <ul>  <li>  अधिक जटिल प्रणालियों का परीक्षण करना  </li>  <li>  कैसे अजाक्स, डेटाबेस, और अन्य "बाहरी" चीजों से निपटने के लिए?  </li>  <li>  टेस्ट-चालित विकास  </li>  </ul>  <p>  यदि आप इस और अधिक सीखना जारी रखना चाहते हैं, तो मैंने एक मुफ्त Semalt इकाई का परीक्षण क्विकस्टार्ट सीरीज़ बनाया है। यदि आप इस आलेख को उपयोगी पाते हैं, तो आपको निश्चित रूप से यहां इसे जांचना चाहिए।  </p>  <p>  वैकल्पिक रूप से, यदि वीडियो आपकी शैली अधिक है, तो आप साइटपॉईंट प्रीमियम के पाठ्यक्रम में दिलचस्पी ले सकते हैं: नोड में परीक्षण-प्रेरित विकास जे एस।  </p>  <div class="Article_authorBio l-mv4 t-bg-white m-border l-pa3">  <div class="l-d-f l-pt3">  <img src="/img/69815a7ce3b0fa013fc322c4b3df3b0b3.jpg" alt="Unit Test Your JavaScript Using Mocha and ChaiUnit Test Your JavaScript Using Mocha and ChaiRelated Topics:
AngularJSES6Raw Semalt
"/>  <div class="f-lh-title">  <div class="f-c-grey-300">  लेखक से मिलो  </div>  <div class="f-large"> जानी हार्टिकैनेंन <i class="fa fa-twitter">   </i>   <i class="fa fa-google-plus">   </i>   </div>  </div>  </div>  <div class="f-light f-lh-copy l-mt3">  जनी ने 15 से अधिक वर्षों के लिए सभी प्रकार के जेएस ऐप्लिकंस बनाए हैं। अपने ब्लॉग पर, वह जावास्क्रिप्ट डेवलपर्स को बुरे कोड को खत्म करने के लिए सीखने में मदद करता है ताकि वे अद्भुत ऐप्स लिख सकें और वास्तविक समस्याओं का समाधान कर सकें।  </div>  </div>  </div>  </div>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </span>  </div>  </div>  </div>  </div>  </p>  </p>  </html>  </head>                                                     
March 1, 2018