TDD في JavaScript: كيف تتوقف عن الخوف من الأخطاء وتبدأ البرمجة بثقة

مدرب بايثون أونلاين للمبتدئين

تعلم Python بسهولة دون إرهاق نظري. حل مهام عملية مع التحقق التلقائي واكتب الكود مباشرة في المتصفح.

ابدأ الدورة

لماذا TDD ليس مجرد موضة عابرة، بل هو أفضل صديق جديد لك

\n\n

تخيل: أنت تكتب كوداً، كل شيء يعمل بشكل مثالي. تقوم بتشغيل التطبيق - لا توجد أخطاء. بعد أسبوع، تضيف ميزة جديدة... وكل شيء ينهار. هل هذا مألوف؟ إذا كنت قد أمضيت ساعات في البحث عن خطأ ظهر بسبب تغيير عشوائي في وحدة مجاورة - فهذه المقالة لك.

\n\n

التطوير القائم على الاختبار (Test-Driven Development, TDD) ليس مجرد منهجية، بل هو طوق نجاة حقيقي للمطور. في عالم JavaScript، حيث يتغير الكود أسرع من الطقس، يساعدك TDD على البقاء واقفاً على قدميك. دعنا نفهم كيف يعمل هذا، ولماذا بعد TDD لن تتمكن من كتابة الكود بالطريقة القديمة.

\n\n

ما هو TDD في الحقيقة؟ (تحذير: لا يتعلق الأمر بالاختبارات)

\n\n

يعتقد الكثيرون أن TDD هو مجرد "كتابة اختبارات قبل الكود". لكن في الحقيقة هو فلسفة تصميم. TDD يجعلك تفكر في كيفية استخدام الكود الخاص بك، قبل أن تكتبه. إنه مثل مهندس معماري يرسم مخطط المبنى أولاً، ثم يبدأ في البناء.

\n\n

تتكون دورة TDD من ثلاث خطوات (غالباً ما تسمى "Red-Green-Refactor"):

\n\n
    \n
  • Red: اكتب اختباراً سيفشل بالتأكيد (لأن الوظيفة غير موجودة بعد).
  • \n
  • Green: اكتب الحد الأدنى من الكود ليجتاز الاختبار.
  • \n
  • Refactor: حسّن الكود دون تغيير سلوكه (تضمن الاختبارات أنك لم تكسر شيئاً).
  • \n
\n\n

ونعم، تتكرر هذه الدورة لكل وحدة صغيرة من الوظائف. يبدو وكأنه تباطؤ؟ ربما. لكن على المدى الطويل، ستوفر ساعات من التصحيح.

\n\n

لماذا JavaScript مثالي لـ TDD

\n\n

JavaScript هي لغة ديناميكية. هذه هي قوتها وضعفها. الأخطاء في وقت التشغيل أمر شائع، خاصة في المشاريع الكبيرة. TDD يحول JavaScript من أداة "مرنة لكنها هشة" إلى منصة موثوقة.

\n\n

علاوة على ذلك، فإن نظام JS البيئي غني بأدوات الاختبار: Jest، Mocha، Chai، Jasmine. سنستخدم Jest - فهو بسيط وقوي وشائع. إذا لم تكن على دراية بـ Jest بعد، لا تقلق: سنبدأ من الأساسيات.

\n\n

تطبيق عملي: كتابة آلة حاسبة باستخدام TDD

\n\n

النظرية جيدة، لكن دعنا ننتقل إلى كود حقيقي. سنكتب آلة حاسبة بسيطة باستخدام TDD. هذا مثال كلاسيكي، لكنه يوضح العملية بشكل ممتاز.

\n\n

الخطوة 1: إعداد المشروع

\n\n

أنشئ مجلداً جديداً وقم بتهيئة المشروع:

\n\n
mkdir tdd-calculator\ncd tdd-calculator\nnpm init -y\nnpm install --save-dev jest\n
\n\n

أضف السكريبت في package.json:

\n\n
"scripts": {\n  "test": "jest"\n}\n
\n\n

الخطوة 2: الأحمر - كتابة اختبار لعملية الجمع

\n\n

أنشئ ملف calculator.test.js:

\n\n
// calculator.test.js\nconst { add } = require('./calculator');\n\ndescribe('Calculator', () => {\n  test('adds 2 + 3 to equal 5', () => {\n    expect(add(2, 3)).toBe(5);\n  });\n});\n
\n\n

شغّل الاختبار: npm test. سيفشل مع خطأ لأن الدالة add غير موجودة. هذا طبيعي - هذه هي المرحلة الحمراء.

\n\n

الخطوة 3: الأخضر - كتابة الحد الأدنى من الكود

\n\n

أنشئ calculator.js:

\n\n
// calculator.js\nfunction add(a, b) {\n  return a + b;\n}\n\nmodule.exports = { add };\n
\n\n

شغّل الاختبار مرة أخرى. أخضر؟ ممتاز! لقد اجتزنا للتو المرحلة الخضراء.

\n\n

الخطوة 4: إعادة الهيكلة (Refactoring)

\n\n

الكود بسيط، لا شيء لإعادة هيكلته. لكن تخيل أننا نريد إضافة التحقق من نوع البيانات. TDD يسمح لنا بفعل ذلك بأمان: أولاً اختبار، ثم كود.

\n\n
// calculator.test.js\ntest('throws error if arguments are not numbers', () => {\n  expect(() => add('2', 3)).toThrow('Arguments must be numbers');\n});\n
\n\n

الآن نقوم بتعديل add:

\n\n
                

المدونات

توصيات الكتب