टीडीडी सिद्धांतों का उपयोग कर जावास्क्रिप्ट में यूआई का विकास

See also: JavaScript unit test tools for TDD

मुझे एमवीपी आर्किटेक्चर टेस्टेबल यूआई लिखने के लिए बहुत उपयुक्त पाया गया है। आपका प्रस्तुतकर्ता और मॉडल कक्षाएं केवल 100% इकाई परीक्षण की जा सकती हैं। यूआई परीक्षण (सेलेनियम इत्यादि के साथ) आपको केवल देखें (जो एक गूंगा, पतला परत होना चाहिए जो प्रेजेंटर को ईवेंट चलाता है) के बारे में चिंता करने की ज़रूरत है।

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

आपको प्रस्तुतकर्ता प्रथम टीडीडी तकनीक पर भी एक नज़र डालना चाहिए।

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

मैंने अभी एक ओपन सोर्स टूलकिट जारी किया है जो जावास्क्रिप्ट tdd के साथ अत्यधिक मदद करेगा। यह कई ओपन सोर्स टूल्स की एक रचना है जो आपको बॉक्स से बाहर काम करने की आवश्यकता है।

यह चलाने के लिए एकल आदेश प्रदान करता है: देव वेब सर्वर, जैस्मीन एकल ब्राउज़र परीक्षण धावक, जैस्मीन जेएस-टेस्ट-ड्राइवर बहु ​​ब्राउज़र परीक्षण धावक, और जावास्क्रिप्ट और सीएसएस के लिए concatenization/minification। यह उत्पादन एबगिंग के लिए आपके ऐप के एक अपूर्ण संस्करण को भी आउटपुट करता है, आपके हैंडलबार टेम्पलेट्स को प्रीकंपाइल करता है, और अंतर्राष्ट्रीयकरण का समर्थन करता है।

कोई सेटअप की आवश्यकता नहीं है। यह सिर्फ काम करता है।

http://github.com/davidjnelson/agilejs

मैं बस एक नई परियोजना पर जावास्क्रिप्ट टीडीडी करना शुरू कर रहा हूं जिस पर मैं काम कर रहा हूं। मेरी वर्तमान योजना यूनिट परीक्षण करने के लिए qunit का उपयोग करना है। परीक्षणों को विकसित करते समय ब्राउज़र में परीक्षण पृष्ठ को रीफ्रेश करके चलाया जा सकता है।

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

मैं परीक्षणों के कोड कवरेज विश्लेषण प्राप्त करने के लिए JSCoverage का उपयोग करने जा रहा हूं। यह सेलेनियम के साथ भी स्वचालित हो जाएगा।

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

परीक्षण उपकरण:

• qunit
• JSCoverage
• सेलेनियम

यह Google कारण टूलकिट पर स्विच करने का प्राथमिक कारण है ... मैं जावा में विकसित और परीक्षण करता हूं और एक उचित उम्मीद है कि संकलित जावास्क्रिप्ट विभिन्न ब्राउज़रों पर ठीक से काम करेगा। चूंकि टीडीडी मुख्य रूप से एक इकाई परीक्षण कार्य है, इसलिए अधिकांश परियोजनाओं को संकलन और तैनाती से पहले विकसित और परीक्षण किया जा सकता है।

एकीकरण और कार्यात्मक परीक्षण सूट सत्यापित करते हैं कि परिणामी कोड परीक्षण सर्वर पर तैनात किए जाने के बाद अपेक्षित कार्य कर रहा है।

मैंने सफलतापूर्वक टीडीडीड यूआई कोड कभी नहीं किया है। सबसे नज़दीकी हम वास्तव में आवेदन तर्क से जितना संभव हो यूआई कोड अलग करना था। यह एक कारण है कि मॉडल-व्यू-कंट्रोलर पैटर्न उपयोगी है - मॉडल और नियंत्रक को बिना किसी परेशानी के और टी जटिल होने के बिना टीडीडी किया जा सकता है।

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

तो दोहराने के लिए, केवल एक ही सलाह जो मैं दे सकता हूं वह है जिसे आप पहले से ही संदेह करते हैं - अपने यूआई कोड को जितना संभव हो सके अपने तर्क से अलग करें और उन्हें टीडीडी करें।

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

आप जो चाहते हैं वह सिर्फ यूआई है जिसके साथ आप बातचीत कर रहे हैं, और आपकी स्क्रिप्ट। इसके लिए आप जिस टूल का उपयोग करेंगे, वह मूल रूप से JsUnit है, जो कुछ जावास्क्रिप्ट कार्यों के साथ एक HTML दस्तावेज़ लेता है पृष्ठ पर और पृष्ठ के संदर्भ में उन्हें निष्पादित करता है। तो आप अपने कार्यों के साथ पेज पर स्टब किए गए एचटीएमएल सहित क्या कर रहे हैं। वहां से, आप मॉक किए गए एचटीएमएल, आपकी स्क्रिप्ट और आपके परीक्षणों की पृथक इकाई में यूआई घटकों के साथ अपनी स्क्रिप्ट की बातचीत का परीक्षण कर सकते हैं।

यह थोड़ा उलझन में हो सकता है तो देखते हैं कि हम थोड़ा परीक्षण कर सकते हैं या नहीं। कुछ टीडीडी को यह मानने के लिए कि एक घटक लोड होने के बाद, एलआई की सामग्री के आधार पर तत्वों की एक सूची रंगीन होती है।

tests.html

<html>
<head>
<script src="jsunit.js"></script>
<script src="mootools.js"></script>
<script src="yourcontrol.js"></script>
</head>
<body>
    

        
red
        
green
    
   
</body>
<script>
    function testListColor() {
        assertNotEqual( $$("#mockList li")[0].getStyle("background-color", "red") );

        var colorInst = new ColorCtrl( "mockList" );

        assertEqual( $$("#mockList li")[0].getStyle("background-color", "red") );
    }
</script>


</html>

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

yourcontrol.js (चरण 1)

function ColorCtrl( id ) {
 /* Fail! */    
}

yourcontrol.js (step2)

function ColorCtrl( id ) {
    $$("#mockList li").forEach(function(item, index) {
        item.setStyle("backgrond-color", item.getText());
    });
    /* Success! */
}

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