🌻 🎆 😄 चमेली DRY: क्या आप सही तरीके से परीक्षण लिखते हैं? 🧕 ☕️ 🎛️

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

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

एक बुरा परीक्षण क्या है?

नॉकआउट.जेएस के 3.0 संस्करण को समझते हुए, मैंने बाइंडरों के अंदर संपत्ति के बाद कम से कम नए का कुछ उल्लेख खोजने की उम्मीद में परीक्षणों को देखने का फैसला किया। ईमानदारी से, मैं लिखित परीक्षणों की जटिलता से नाराज था।

खराब परीक्षण

describe('Binding: Checked', function() { beforeEach(jasmine.prepareTestNode); it('Triggering a click should toggle a checkbox\'s checked state before the event handler fires', function() { testNode.innerHTML = "<input type='checkbox' />"; var clickHandlerFireCount = 0, expectedCheckedStateInHandler; ko.utils.registerEventHandler(testNode.childNodes[0], "click", function() { clickHandlerFireCount++; expect(testNode.childNodes[0].checked).toEqual(expectedCheckedStateInHandler); }) expect(testNode.childNodes[0].checked).toEqual(false); expectedCheckedStateInHandler = true; ko.utils.triggerEvent(testNode.childNodes[0], "click"); expect(testNode.childNodes[0].checked).toEqual(true); expect(clickHandlerFireCount).toEqual(1); expectedCheckedStateInHandler = false; ko.utils.triggerEvent(testNode.childNodes[0], "click"); expect(testNode.childNodes[0].checked).toEqual(false); expect(clickHandlerFireCount).toEqual(2); }); });

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

यहाँ उन प्रश्नों की एक सूची दी गई है जो मुझे समझने योग्य और सरल चश्मा बनाने में मदद करते हैं:

परीक्षण डेटा क्या हैं?
परीक्षण संदर्भ क्या है?
किन मामलों को कवर करने की आवश्यकता है?
मैं इन मामलों को कैसे कर सकता हूं?

उपरोक्त उदाहरण के लिए:

चेकबॉक्स इनपुट फ़ील्ड
उपयोगकर्ता चेकबॉक्स पर क्लिक करता है
मामलों:
1. क्लिक हैंडलर कहे जाने से पहले स्थिति बदल जाती है।
2. यदि चेकबॉक्स की जाँच नहीं की गई थी, तो स्थिति में परिवर्तन हुआ है
3. यदि चेकबॉक्स की जाँच की गई तो अनियंत्रित होने की स्थिति में परिवर्तन होता है

अब सब कुछ केवल अंग्रेजी में ही है:

बस पठनीय परीक्षण

 describe('Binding: Checked', function() { beforeEach(jasmine.prepareTestNode); describe("when user clicks on checkbox", function () { beforeEach(function () { testNode.innerHTML = "<input type='checkbox' />"; this.checkbox = testNode.childNodes[0]; this.stateHandler = jasmine.createSpy("checked handler"); this.checkbox.checked = false; ko.utils.registerEventHandler(this.checkbox, "click", function() { this.stateHandler(this.checkbox.checked); }.bind(this)); ko.utils.triggerEvent(this.checkbox, "click"); }) it ("changes state before event handler is triggered", function () { expect(this.stateHandler).toHaveBeenCalledWith(true); }) it ("marks checkbox if it's not marked", function () { expect(this.checkbox.checked).toBe(true) }) it ("unmarks checkbox if it's marked", function () { this.checkbox.checked = true; ko.utils.triggerEvent(this.checkbox, "click"); expect(this.checkbox.checked).toBe(false); }) }) })

सेटअप जटिल है, परीक्षण सरल हैं। आदर्श विकल्प एक परीक्षण है जिसमें अपेक्षित फ़ंक्शन के लिए एक कॉल है।

कम कोड, अधिक परीक्षण

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

आइए कल्पना करें कि जावास्क्रिप्ट ++ है जिसमें एक सामान्य इंटरफ़ेस ( आकार और समाहित ) के साथ 2 कक्षाएं हैं सरणी और सेट । अब आपको कोड को डुप्लिकेट किए बिना उन्हें परीक्षणों के साथ कवर करने की आवश्यकता है! हमारे संग्रह के लिए सामान्य परीक्षणों को परिभाषित करें:

 sharedExamplesFor("collection", function () { beforeEach(function () { this.sourceItems = [1,2,3]; this.collection = new this.describedClass(this.sourceItems); }) it ("returns proper size", function () { expect(this.collection.size()).toBe(this.sourceItems.length); }) // another specs it ("returns true if contains item", function () { expect(this.collection.contains(this.sourceItems[0])).toBe(true); }) })

Rspec के साथ सादृश्य द्वारा, मैं तरीकों में से एक का उपयोग कर चश्मा कनेक्ट करने में सक्षम होना चाहूंगा:

itBehavesLike - एक नेस्टेड संदर्भ में परीक्षण चलाएँ
itShouldBehaveLike - एक नेस्टेड संदर्भ में परीक्षण चलाएँ
शामिल करें उदाहरण - वर्तमान संदर्भ में परीक्षण चलाता है
शामिल करेंExamplesFor - वर्तमान संदर्भ में परीक्षण चलाता है

नोट : itShouldBehaveLike और शामिल करेंExamplesFor - केवल परीक्षणों की पठनीयता में सुधार के लिए मौजूद हैं

 // array_spec.js describe("Array", function () { beforeEach(function () { this.describedClass = Array; }) itBehavesLike("collection"); //another specs }) // set_spec.js describe("Set", function () { beforeEach(function () { this.describedClass = Set; }) itBehavesLike("collection"); //another specs });

मैं आमतौर पर कल्पना पठनीयता में सुधार के लिए एक संदर्भ समारोह ( वर्णन के लिए एक उपनाम) भी बनाता हूं।

साझा कल्पना के कार्यान्वयन के लिए स्रोत कोड

  // spec_helper.js var sharedExamples = {}; window.sharedExamplesFor = function (name, executor) { sharedExamples[name] = executor; }; window.itBehavesLike = function (sharedExampleName) { jasmine.getEnv().describe("behaves like " + sharedExampleName, sharedExamples[sharedExampleName]); }; window.includeExamplesFor = function (sharedExampleName) { var suite = jasmine.getEnv().currentSuite; sharedExamples[sharedExampleName].call(suite); }; window.context = window.describe; window.includeExamples = window.includeExamplesFor; window.itShouldBehaveLike = window.itBehavesLike;

चमेली DRY: क्या आप सही तरीके से परीक्षण लिखते हैं?

एक बुरा परीक्षण क्या है?

कम कोड, अधिक परीक्षण

More articles: