🔷 🐎 👩🏻‍💻 जावास्क्रिप्ट में TDD। अनुप्रयोग विकास 👂🏽 👩🏽‍💼 🏳️

सभी को नमस्कार। यह लेख जावास्क्रिप्ट के साथ उपयोग के लिए परीक्षण (TDD) पद्धति के माध्यम से विकास पर केंद्रित है।
मैं केवल TDD कार्यप्रणाली के बारे में संक्षेप में लिखूंगा, ऊपर दिए गए लिंक से अधिक विस्तृत जानकारी प्राप्त की जा सकती है।

परीक्षण के माध्यम से विकास का तात्पर्य है कि कोड लिखने से पहले, आपको यह करना होगा:

एक परीक्षण बनाएं जो गैर-मौजूद कोड का परीक्षण करेगा, परीक्षण तदनुसार विफल हो जाएगा
कोड लिखें और सुनिश्चित करें कि परीक्षा पास हो गई है
साफ कोड
दोहराना

तो, विषय के करीब।

तकनीकी साधन

परीक्षण के लिए पुस्तकालय : क्वनिट सभी आवश्यक कार्यक्षमता के साथ एक आसान-उपयोग वाली लाइब्रेरी है।

वस्तुओं की अवधारणा

हम सिस्टम में सभी वस्तुओं को 3 श्रेणियों में विभाजित करते हैं:

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

बंटवारा क्यों? इसकी कार्यक्षमता के परीक्षण कवरेज की पूर्णता वस्तु के प्रकार पर निर्भर करेगी। मूल वस्तुएं - जितना संभव हो, मॉड्यूल - लगभग 70%, सहायक वस्तुएं - केवल एक वस्तु को डिजाइन करने के लिए (इस पर बाद में) और परिणाम की जांच।

वस्तुओं का नामकरण

इस मामले में, हम सबसे सरल नाम का उपयोग करते हैं:
सभी एप्लिकेशन ऑब्जेक्ट एप्लिकेशन के साथ शुरू होंगे

आधार - Application_Core_ObjectName
मॉड्यूल - Application_Module_ModuleName
हेल्पर ऑब्जेक्ट - Application_Helper_ModuleName (यदि ऑब्जेक्ट केवल एक विशिष्ट मॉड्यूल के साथ काम करता है) _Objecterame

नामकरण के कई और दिलचस्प तरीके हैं, जिनमें शामिल हैं और वैश्विक दायरे से नाम छिपाना, लेकिन यह लेख उस बारे में नहीं है।

वस्तु कार्यान्वयन

क्योंकि मुझे सिद्धांत पसंद है "सरल जटिल से बेहतर है" (सी), फिर वस्तुओं का कार्यान्वयन टीडीडी पद्धति के अनुरूप सरल और (बहुत महत्वपूर्ण!) होगा:

बेस और मॉड्यूल

function Application_Core_FuncName() {

this .publicMethod = function () {
}

this ._privateMethod = function () {
}

}

* This source code was highlighted with Source Code Highlighter .

function Application_Core_FuncName() { this .publicMethod = function () { } this ._privateMethod = function () { } } * This source code was highlighted with Source Code Highlighter .

function Application_Core_FuncName() {

this .publicMethod = function () {
}

this ._privateMethod = function () {
}

}

* This source code was highlighted with Source Code Highlighter .

सहायक वस्तुएं

var Application_Helper_HelperName = {
init: function () {
},

publicMethod: function () {
},

_privateMethod: function () {
}
};

* This source code was highlighted with Source Code Highlighter .

var Application_Helper_HelperName = { init: function () { }, publicMethod: function () { }, _privateMethod: function () { } }; * This source code was highlighted with Source Code Highlighter .

var Application_Helper_HelperName = {
init: function () {
},

publicMethod: function () {
},

_privateMethod: function () {
}
};

* This source code was highlighted with Source Code Highlighter .

ऐसा क्यों? आइए समस्या के बयान से शुरू करें: आवेदन को टीडीडी पद्धति के अनुसार विकसित किया जाएगा, अर्थात। आपको परीक्षण के लिए निजी वर्ग के तरीकों तक पहुंच को लागू करने की आवश्यकता है (निजी तरीकों का परीक्षण करने की आवश्यकता के बारे में कई राय हैं। मैं परीक्षण कर रहा हूं)। सामान्य मानकों के अनुसार, एक अंडरस्कोर के साथ शुरू होने वाली एक जावास्क्रिप्ट विधि निजी है (कई आईडीई इसे उपलब्ध तरीकों के संकेत में नहीं दिखाते हैं), लेकिन यह विधि वास्तव में उपलब्ध है - एक्सेस करने, कहने पर त्रुटि को नहीं फेंका जाएगा, Application_Helper_HelperName._privateMethod() ।

डिज़ाइन

मान लें कि हमें कुछ प्रकार के सहायक मॉड्यूल विकसित करने की आवश्यकता है, जो उपयोगकर्ता के बारे में जानकारी के साथ उत्पन्न HTML को वापस करना चाहिए।

चलो परीक्षण के साथ शुरू करते हैं:

module( "User Info" );

test( "main" , function () {
equals( typeof (Application_Helper_UserInfo), "object" , "Check object" );
})

* This source code was highlighted with Source Code Highlighter .

module( "User Info" ); test( "main" , function () { equals( typeof (Application_Helper_UserInfo), "object" , "Check object" ); }) * This source code was highlighted with Source Code Highlighter .

module( "User Info" );

test( "main" , function () {
equals( typeof (Application_Helper_UserInfo), "object" , "Check object" );
})

* This source code was highlighted with Source Code Highlighter .

परीक्षण चलाएं।

जाहिर है, क्योंकि परीक्षण विफल रहता है ऐसी कोई वस्तु मौजूद नहीं है।
कोई वस्तु बनाएँ

var Application_Helper_UserInfo = {

};

* This source code was highlighted with Source Code Highlighter .

var Application_Helper_UserInfo = { }; * This source code was highlighted with Source Code Highlighter .

var Application_Helper_UserInfo = {

};

* This source code was highlighted with Source Code Highlighter .

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

module( "User Info" );

test( "main" , function () {
equals( typeof (Application_Helper_UserInfo), "object" , "Check object" );

equals(Application_Helper_UserInfo.hasOwnProperty( "getHTML" ), true , "Check existing method getHTML" );

});

* This source code was highlighted with Source Code Highlighter .

module( "User Info" ); test( "main" , function () { equals( typeof (Application_Helper_UserInfo), "object" , "Check object" ); equals(Application_Helper_UserInfo.hasOwnProperty( "getHTML" ), true , "Check existing method getHTML" ); }); * This source code was highlighted with Source Code Highlighter .

module( "User Info" );

test( "main" , function () {
equals( typeof (Application_Helper_UserInfo), "object" , "Check object" );

equals(Application_Helper_UserInfo.hasOwnProperty( "getHTML" ), true , "Check existing method getHTML" );

});

* This source code was highlighted with Source Code Highlighter .

और कार्यान्वयन:

var Application_Helper_UserInfo = {

getHTML: function () {
}

};

* This source code was highlighted with Source Code Highlighter .

var Application_Helper_UserInfo = { getHTML: function () { } }; * This source code was highlighted with Source Code Highlighter .

var Application_Helper_UserInfo = {

getHTML: function () {
}

};

* This source code was highlighted with Source Code Highlighter .

प्रलेखन पर आगे यह देखा गया है कि उपयोगकर्ता जानकारी में शामिल हैं: फ़ोटो, नाम और विस्तृत जानकारी। इसलिए, हम इस तरह से डिजाइन करेंगे:

module( "User Info" );

test( "main" , function () {
equals( typeof (Application_Helper_UserInfo), "object" , "Check object" );

equals(Application_Helper_UserInfo.hasOwnProperty( "getHTML" ), true , "Check existing method getHTML" );

equals(Application_Helper_UserInfo.hasOwnProperty( "_getPhoto" ), true , "Check existing private method _getPhoto" );

equals(Application_Helper_UserInfo.hasOwnProperty( "_getUsername" ), true , "Check existing private method _getUsername" );

equals(Application_Helper_UserInfo.hasOwnProperty( "_getInfo" ), true , "Check existing method _getInfo" );

});

* This source code was highlighted with Source Code Highlighter .

module( "User Info" ); test( "main" , function () { equals( typeof (Application_Helper_UserInfo), "object" , "Check object" ); equals(Application_Helper_UserInfo.hasOwnProperty( "getHTML" ), true , "Check existing method getHTML" ); equals(Application_Helper_UserInfo.hasOwnProperty( "_getPhoto" ), true , "Check existing private method _getPhoto" ); equals(Application_Helper_UserInfo.hasOwnProperty( "_getUsername" ), true , "Check existing private method _getUsername" ); equals(Application_Helper_UserInfo.hasOwnProperty( "_getInfo" ), true , "Check existing method _getInfo" ); }); * This source code was highlighted with Source Code Highlighter .

module( "User Info" );

test( "main" , function () {
equals( typeof (Application_Helper_UserInfo), "object" , "Check object" );

equals(Application_Helper_UserInfo.hasOwnProperty( "getHTML" ), true , "Check existing method getHTML" );

equals(Application_Helper_UserInfo.hasOwnProperty( "_getPhoto" ), true , "Check existing private method _getPhoto" );

equals(Application_Helper_UserInfo.hasOwnProperty( "_getUsername" ), true , "Check existing private method _getUsername" );

equals(Application_Helper_UserInfo.hasOwnProperty( "_getInfo" ), true , "Check existing method _getInfo" );

});

* This source code was highlighted with Source Code Highlighter .

हम लॉन्च करते हैं - नए परीक्षण पास नहीं हुए।

हम एक कार्यान्वयन लिख रहे हैं।

var Application_Helper_UserInfo = {

getHTML: function () {
},

_getPhoto: function () {
},

_getUsername: function () {
},

_getInfo: function () {
}
};

* This source code was highlighted with Source Code Highlighter .

var Application_Helper_UserInfo = { getHTML: function () { }, _getPhoto: function () { }, _getUsername: function () { }, _getInfo: function () { } }; * This source code was highlighted with Source Code Highlighter .

var Application_Helper_UserInfo = {

getHTML: function () {
},

_getPhoto: function () {
},

_getUsername: function () {
},

_getInfo: function () {
}
};

* This source code was highlighted with Source Code Highlighter .

अब आपको तरीकों के कार्यान्वयन का परीक्षण करने की आवश्यकता है। परीक्षण के लिए, हम एक मॉक ऑब्जेक्ट (परीक्षण के लिए एक स्टब) बनाएंगे और इसके संदर्भ में परीक्षण का संचालन करेंगे।

module( "User Info" );

test( "main" , function () {
equals( typeof (Application_Helper_UserInfo), "object" , "Check object" );

equals(Application_Helper_UserInfo.hasOwnProperty( "getHTML" ), true , "Check existing method getHTML" );

equals(Application_Helper_UserInfo.hasOwnProperty( "_getPhoto" ), true , "Check existing private method _getPhoto" );

equals(Application_Helper_UserInfo.hasOwnProperty( "_getUsername" ), true , "Check existing private method _getUsername" );

equals(Application_Helper_UserInfo.hasOwnProperty( "_getInfo" ), true , "Check existing method _getInfo" );

var mockUserInfo = {
username: 'Name' ,
photo: 'photo.png' ,
info: 'Information'
};

var photo = Application_Helper_UserInfo._getPhoto.call(mockUserInfo);

equals(photo, 'photo.png' , 'Checking photo' );

var username = Application_Helper_UserInfo._getUsername.call(mockUserInfo);

equals(username, 'Name' , 'Checking username' );

var info = Application_Helper_UserInfo._getInfo.call(mockUserInfo);

equals(info, 'Information' , 'Checking information' );
});

* This source code was highlighted with Source Code Highlighter .

module( "User Info" ); test( "main" , function () { equals( typeof (Application_Helper_UserInfo), "object" , "Check object" ); equals(Application_Helper_UserInfo.hasOwnProperty( "getHTML" ), true , "Check existing method getHTML" ); equals(Application_Helper_UserInfo.hasOwnProperty( "_getPhoto" ), true , "Check existing private method _getPhoto" ); equals(Application_Helper_UserInfo.hasOwnProperty( "_getUsername" ), true , "Check existing private method _getUsername" ); equals(Application_Helper_UserInfo.hasOwnProperty( "_getInfo" ), true , "Check existing method _getInfo" ); var mockUserInfo = { username: 'Name' , photo: 'photo.png' , info: 'Information' }; var photo = Application_Helper_UserInfo._getPhoto.call(mockUserInfo); equals(photo, 'photo.png' , 'Checking photo' ); var username = Application_Helper_UserInfo._getUsername.call(mockUserInfo); equals(username, 'Name' , 'Checking username' ); var info = Application_Helper_UserInfo._getInfo.call(mockUserInfo); equals(info, 'Information' , 'Checking information' ); }); * This source code was highlighted with Source Code Highlighter .

module( "User Info" );

test( "main" , function () {
equals( typeof (Application_Helper_UserInfo), "object" , "Check object" );

equals(Application_Helper_UserInfo.hasOwnProperty( "getHTML" ), true , "Check existing method getHTML" );

equals(Application_Helper_UserInfo.hasOwnProperty( "_getPhoto" ), true , "Check existing private method _getPhoto" );

equals(Application_Helper_UserInfo.hasOwnProperty( "_getUsername" ), true , "Check existing private method _getUsername" );

equals(Application_Helper_UserInfo.hasOwnProperty( "_getInfo" ), true , "Check existing method _getInfo" );

var mockUserInfo = {
username: 'Name' ,
photo: 'photo.png' ,
info: 'Information'
};

var photo = Application_Helper_UserInfo._getPhoto.call(mockUserInfo);

equals(photo, 'photo.png' , 'Checking photo' );

var username = Application_Helper_UserInfo._getUsername.call(mockUserInfo);

equals(username, 'Name' , 'Checking username' );

var info = Application_Helper_UserInfo._getInfo.call(mockUserInfo);

equals(info, 'Information' , 'Checking information' );
});

* This source code was highlighted with Source Code Highlighter .

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

var Application_Helper_UserInfo = {

getHTML: function () {
},

_getPhoto: function () {

return this .photo;
},

_getUsername: function () {

return this .username;
},

_getInfo: function () {

return this .info;
}
};

* This source code was highlighted with Source Code Highlighter .

var Application_Helper_UserInfo = { getHTML: function () { }, _getPhoto: function () { return this .photo; }, _getUsername: function () { return this .username; }, _getInfo: function () { return this .info; } }; * This source code was highlighted with Source Code Highlighter .

var Application_Helper_UserInfo = {

getHTML: function () {
},

_getPhoto: function () {

return this .photo;
},

_getUsername: function () {

return this .username;
},

_getInfo: function () {

return this .info;
}
};

* This source code was highlighted with Source Code Highlighter .

क्योंकि चूंकि ऑब्जेक्ट सहायक वस्तुओं के प्रकार से संबंधित है, इसलिए निजी तरीकों की कार्यक्षमता पर अधिक विस्तृत परीक्षण नहीं लिखे जाएंगे। यह केवल एक परीक्षण लिखने के लिए रहता है जो ऑब्जेक्ट के परिणाम की जांच करता है, इस मामले में getHTML विधि।

module( "User Info" );

test( "main" , function () {
equals( typeof (Application_Helper_UserInfo), "object" , "Check object" );

equals(Application_Helper_UserInfo.hasOwnProperty( "getHTML" ), true , "Check existing method getHTML" );

equals(Application_Helper_UserInfo.hasOwnProperty( "_getPhoto" ), true , "Check existing private method _getPhoto" );

equals(Application_Helper_UserInfo.hasOwnProperty( "_getUsername" ), true , "Check existing private method _getUsername" );

equals(Application_Helper_UserInfo.hasOwnProperty( "_getInfo" ), true , "Check existing method _getInfo" );

var mockUserInfo = {
username: 'Name' ,
photo: 'photo.png' ,
info: 'Information'
};

var photo = Application_Helper_UserInfo._getPhoto.call(mockUserInfo);

equals(photo, 'photo.png' , 'Checking photo' );

var username = Application_Helper_UserInfo._getUsername.call(mockUserInfo);

equals(username, 'Name' , 'Checking username' );

var info = Application_Helper_UserInfo._getInfo.call(mockUserInfo);

equals(info, 'Information' , 'Checking information' );

var html = Application_Helper_UserInfo.getHTML.call(mockUserInfo);

if (html != undefined && html.indexOf( 'id="application_helper_userinfo"' ) != -1 && html.indexOf( 'Name' ) != -1 && html.indexOf( 'photo.png' ) != -1 && html.indexOf( 'Information' ) != -1) {

ok( true , "HTML ok" );

} else {
ok( false , "HTML does not pass" );
}

});

* This source code was highlighted with Source Code Highlighter .

module( "User Info" ); test( "main" , function () { equals( typeof (Application_Helper_UserInfo), "object" , "Check object" ); equals(Application_Helper_UserInfo.hasOwnProperty( "getHTML" ), true , "Check existing method getHTML" ); equals(Application_Helper_UserInfo.hasOwnProperty( "_getPhoto" ), true , "Check existing private method _getPhoto" ); equals(Application_Helper_UserInfo.hasOwnProperty( "_getUsername" ), true , "Check existing private method _getUsername" ); equals(Application_Helper_UserInfo.hasOwnProperty( "_getInfo" ), true , "Check existing method _getInfo" ); var mockUserInfo = { username: 'Name' , photo: 'photo.png' , info: 'Information' }; var photo = Application_Helper_UserInfo._getPhoto.call(mockUserInfo); equals(photo, 'photo.png' , 'Checking photo' ); var username = Application_Helper_UserInfo._getUsername.call(mockUserInfo); equals(username, 'Name' , 'Checking username' ); var info = Application_Helper_UserInfo._getInfo.call(mockUserInfo); equals(info, 'Information' , 'Checking information' ); var html = Application_Helper_UserInfo.getHTML.call(mockUserInfo); if (html != undefined && html.indexOf( 'id="application_helper_userinfo"' ) != -1 && html.indexOf( 'Name' ) != -1 && html.indexOf( 'photo.png' ) != -1 && html.indexOf( 'Information' ) != -1) { ok( true , "HTML ok" ); } else { ok( false , "HTML does not pass" ); } }); * This source code was highlighted with Source Code Highlighter .

module( "User Info" );

test( "main" , function () {
equals( typeof (Application_Helper_UserInfo), "object" , "Check object" );

equals(Application_Helper_UserInfo.hasOwnProperty( "getHTML" ), true , "Check existing method getHTML" );

equals(Application_Helper_UserInfo.hasOwnProperty( "_getPhoto" ), true , "Check existing private method _getPhoto" );

equals(Application_Helper_UserInfo.hasOwnProperty( "_getUsername" ), true , "Check existing private method _getUsername" );

equals(Application_Helper_UserInfo.hasOwnProperty( "_getInfo" ), true , "Check existing method _getInfo" );

var mockUserInfo = {
username: 'Name' ,
photo: 'photo.png' ,
info: 'Information'
};

var photo = Application_Helper_UserInfo._getPhoto.call(mockUserInfo);

equals(photo, 'photo.png' , 'Checking photo' );

var username = Application_Helper_UserInfo._getUsername.call(mockUserInfo);

equals(username, 'Name' , 'Checking username' );

var info = Application_Helper_UserInfo._getInfo.call(mockUserInfo);

equals(info, 'Information' , 'Checking information' );

var html = Application_Helper_UserInfo.getHTML.call(mockUserInfo);

if (html != undefined && html.indexOf( 'id="application_helper_userinfo"' ) != -1 && html.indexOf( 'Name' ) != -1 && html.indexOf( 'photo.png' ) != -1 && html.indexOf( 'Information' ) != -1) {

ok( true , "HTML ok" );

} else {
ok( false , "HTML does not pass" );
}

});

* This source code was highlighted with Source Code Highlighter .

वह सब है। गैर-मौजूद मापदंडों, आदि के लिए अधिक विस्तृत जांच नहीं की जाएगी, क्योंकि ऑब्जेक्ट सहायक है, बेस कक्षाओं या मॉड्यूल के लिए, अतिरिक्त परीक्षण लिखना आवश्यक होगा जो स्थिति की जांच करते हैं, बार-बार कॉल करते हैं, DOM ट्री के साथ काम करते हैं, और इसी तरह।

अब आपको ऑब्जेक्ट के अंतिम कार्यान्वयन को लिखने की आवश्यकता है, क्योंकि जो परीक्षण लिखा गया था वह पास नहीं हुआ था।

var Application_Helper_UserInfo = {

getHTML: function () {
var html = '<div id="application_helper_userinfo">' ;
html += '<div>' + Application_Helper_UserInfo._getPhoto.call( this ) + '</div>' ;
html += '<div>' + Application_Helper_UserInfo._getUsername.call( this ) + '</div>' ;
html += '<div>' + Application_Helper_UserInfo._getInfo.call( this ) + '</div>' ;
html += '</div>' ;
return html;
},

_getPhoto: function () {

return this .photo;
},

_getUsername: function () {

return this .username;
},

_getInfo: function () {

return this .info;
}
};

* This source code was highlighted with Source Code Highlighter .

var Application_Helper_UserInfo = { getHTML: function () { var html = '<div id="application_helper_userinfo">' ; html += '<div>' + Application_Helper_UserInfo._getPhoto.call( this ) + '</div>' ; html += '<div>' + Application_Helper_UserInfo._getUsername.call( this ) + '</div>' ; html += '<div>' + Application_Helper_UserInfo._getInfo.call( this ) + '</div>' ; html += '</div>' ; return html; }, _getPhoto: function () { return this .photo; }, _getUsername: function () { return this .username; }, _getInfo: function () { return this .info; } }; * This source code was highlighted with Source Code Highlighter .

var Application_Helper_UserInfo = {

getHTML: function () {
var html = '<div id="application_helper_userinfo">' ;
html += '<div>' + Application_Helper_UserInfo._getPhoto.call( this ) + '</div>' ;
html += '<div>' + Application_Helper_UserInfo._getUsername.call( this ) + '</div>' ;
html += '<div>' + Application_Helper_UserInfo._getInfo.call( this ) + '</div>' ;
html += '</div>' ;
return html;
},

_getPhoto: function () {

return this .photo;
},

_getUsername: function () {

return this .username;
},

_getInfo: function () {

return this .info;
}
};

* This source code was highlighted with Source Code Highlighter .

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

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

डेवलपर्स के लिए भी एक जरूरी समस्या प्रारंभिक डिजाइन की कमी है। यदि कार्य सरल लगता है, तो डिजाइन के समय की बर्बादी को देखते हुए कई तुरंत कार्यान्वयन में शामिल हो जाते हैं। डिजाइनिंग बढ़िया है। कई परिस्थितियां जहां अपना अंतिम कोड दिखाना शर्मनाक है, पूर्व डिजाइन से बचा जा सकता था।

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

आपका ध्यान देने के लिए धन्यवाद। फिर मिलते हैं।

जावास्क्रिप्ट में TDD। अनुप्रयोग विकास

तकनीकी साधन

वस्तुओं की अवधारणा

वस्तुओं का नामकरण

वस्तु कार्यान्वयन

डिज़ाइन

More articles: