إعداد بيئة الاختبار: تجهيز ورشة عملك

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

سيضمن لنا هذا الإعداد أن تكون أدواتنا جاهزة، وأن تكون عملية الاختبار سلسة وفعالة. في هذا الدرس، سنقوم بتثبيت الأدوات الأساسية، وتهيئة مشروع جديد، وتثبيت إطار عمل الاختبار الذي سنستخدمه في هذه الدورة. لنبدأ في بناء أساس متين!

المتطلبات الأساسية (Prerequisites)

للبدء، هناك بعض الأدوات الأساسية التي يجب أن تكون مثبتة على جهازك. هذه الأدوات هي العمود الفقري لأي بيئة تطوير JavaScript حديثة.

1. بيئة تشغيل Node.js و مدير الحزم npm

قد تتساءل، "لماذا نحتاج Node.js لكتابة اختبارات للواجهات الأمامية؟" الجواب بسيط: معظم أدوات التطوير الحديثة، بما في ذلك أطر عمل الاختبار، ومُجمِّعات الأكواد (Bundlers)، وأدوات تحليل الشيفرة (Linters)، مبنية باستخدام JavaScript وتعمل في بيئة Node.js.

• Node.js: هي بيئة تشغيل JavaScript تسمح لك بتشغيل أكواد JavaScript خارج المتصفح. سنستخدمها لتشغيل إطار عمل الاختبار الخاص بنا من خلال سطر الأوامر.
• npm (Node Package Manager): هو مدير الحزم الافتراضي لـ Node.js. يأتي مدمجاً مع تثبيت Node.js ويسمح لنا بتثبيت وإدارة الحزم الخارجية (الاعتماديات - Dependencies) التي يحتاجها مشروعنا، مثل إطار عمل الاختبار Vitest.

للتحقق مما إذا كان Node.js و npm مثبتين على جهازك، افتح نافذة الأوامر (Terminal أو Command Prompt) وقم بتنفيذ الأمرين التاليين:

# Check for Node.js version
node -v

# Check for npm version
npm -v

إذا رأيت أرقام الإصدارات (مثل v20.11.0 لـ Node.js و 10.2.4 لـ npm)، فهذا يعني أنها مثبتة بالفعل. إذا حصلت على خطأ، فهذا يعني أنك بحاجة إلى تثبيتها.

يمكنك تنزيل Node.js من الموقع الرسمي.

2. محرر الأكواد: Visual Studio Code (VS Code)

ستحتاج إلى محرر أكواد لكتابة الشيفرة البرمجية والاختبارات. بينما يمكنك استخدام أي محرر تفضله، فإننا نوصي بشدة باستخدام Visual Studio Code (VS Code) لهذه الدورة ولعملك كمطور بشكل عام.

VS Code هو محرر مجاني وقوي ومفتوح المصدر يتمتع بشعبية هائلة بفضل:

• دعمه الممتاز لـ JavaScript و TypeScript.
• توفره على طرفية مدمجة (Integrated Terminal).
• نظام إضافات (Extensions) ضخم يعزز الإنتاجية بشكل كبير.

جميع الأمثلة والإرشادات في هذه الدورة ستفترض أنك تستخدم VS Code. يمكنك تنزيله من الموقع الرسمي.

إضافات VS Code الموصى بها لتجربة اختبار أفضل

لجعل حياتنا أسهل بكثير، سنقوم بتثبيت بعض الإضافات المفيدة في VS Code. افتح VS Code، وانتقل إلى قسم الإضافات (Extensions) وابحث عن الإضافات التالية وقم بتثبيتها:

1. Vitest: بما أننا سنستخدم Vitest كإطار عمل للاختبار، فإن هذه الإضافة الرسمية لا غنى عنها. تسمح لك بتشغيل الاختبارات ومراقبتها مباشرة من داخل المحرر، وتعرض نتائج النجاح والفشل بجانب الكود، وتسهل عملية تصحيح الأخطاء (Debugging).
2. ESLint: أداة لتحليل الكود بشكل ثابت (Static Code Analysis) للعثور على الأنماط الإشكالية أو الأكواد التي لا تلتزم بإرشادات معينة. تساعد في الحفاظ على جودة الكود وتجنب الأخطاء الشائعة.
3. Prettier - Code formatter: أداة لتنسيق الكود تلقائيًا. تضمن أن يكون لجميع الأكواد في المشروع نفس التنسيق، مما يزيل الجدل حول الأسلوب (Styles) ويجعل الكود أسهل في القراءة.

تهيئة مشروع جديد (Initializing a New Project)

الآن بعد أن أصبحت أدواتنا الأساسية جاهزة، لنقم بإنشاء مجلد لمشروعنا ونهيئه كمشروع Node.js.

1. أنشئ مجلدًا جديدًا وانتقل إليه: افتح الطرفية (Terminal) ونفذ الأوامر التالية:

CODEنسخ الكود

# Create a new directory for our course project
mkdir unit-testing-course

# Navigate into the newly created directory
cd unit-testing-course

2. تهيئة مشروع npm: الآن، داخل مجلد unit-testing-course، قم بتشغيل الأمر التالي لإنشاء ملف package.json.

CODEنسخ الكود

npm init -y

الأمر npm init يبدأ عملية إنشاء ملف package.json. هذا الملف هو قلب أي مشروع Node.js؛ فهو يحتوي على بيانات وصفية حول المشروع (مثل الاسم، الإصدار) ويسجل جميع الاعتماديات (Dependencies) التي يحتاجها.

نصيحة

استخدام الراية -y (yes) يخبر npm بتخطي جميع الأسئلة واستخدام القيم الافتراضية، مما يسرّع عملية الإعداد.

بعد تشغيل الأمر، سترى ملفًا جديدًا باسم package.json في مجلدك، وسيبدو محتواه مشابهًا لهذا:

CODEنسخ الكود

{
  "name": "unit-testing-course",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

تثبيت إطار عمل الاختبار (Vitest)

حان الوقت لتثبيت الأداة الرئيسية التي سنستخدمها: Vitest. 

هو إطار عمل اختبار JavaScript حديث وسريع للغاية، متوافق مع واجهة برمجة تطبيقات Jest الشهيرة، مما يجعل الانتقال إليه سهلاً للمطورين الذين لديهم خبرة سابقة مع Jest.

لتثبيت Vitest، سنستخدم npm. سنقوم بتثبيته كـ devDependency (اعتمادية تطوير)، لأنه أداة نحتاجها فقط أثناء عملية التطوير والاختبار، وليس في التطبيق النهائي الذي سيصل للمستخدم.

نفذ الأمر التالي في الطرفية:

npm install -D vitest

• install: هو أمر التثبيت.
• -D: هو اختصار لـ --save-dev، والذي يخبر npm بحفظ الحزمة في قسم devDependencies داخل ملف package.json.

بعد اكتمال التثبيت، ألقِ نظرة على ملف package.json مرة أخرى. ستلاحظ قسمًا جديدًا:

{
  ...
  "devDependencies": {
    "vitest": "^1.0.0" 
  }
  ...
}

هذا يؤكد أن Vitest تم تثبيته بنجاح وهو الآن جزء من مشروعنا.

إعداد سكربت الاختبار (Configuring the Test Script)

الخطوة الأخيرة في إعداد بيئتنا هي تعديل package.json لتسهيل تشغيل اختباراتنا. تذكر قسم scripts في الملف؟ سنقوم بتعديل أمر test الافتراضي ليشغل Vitest.

افتح package.json وقم بتغيير قسم scripts ليبدو كالتالي:

{
  "name": "unit-testing-course",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "vitest"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vitest": "^1.0.0"
  }
}

كل ما فعلناه هو استبدال القيمة الافتراضية لـ "test" بـ "vitest". الآن، عندما تقوم بتشغيل الأمر التالي في الطرفية الخاصة بك:

npm test

سيقوم npm بالبحث عن سكربت يسمى test في package.json وتنفيذ الأمر المرتبط به، والذي هو الآن vitest. سيقوم Vitest بدوره بالبحث عن أي ملفات اختبار في مشروعك وتشغيلها.

الخلاصة

تهانينا! لقد قمت بإعداد بيئة اختبار احترافية بالكامل. قد يبدو الأمر بسيطًا، لكن هذه الخطوات أساسية لضمان سير عمل سلس ومنظم.

دعنا نلخص ما أنجزناه:

• فهمنا أهمية وجود بيئة اختبار مجهزة جيدًا.
• تأكدنا من تثبيت الأدوات الأساسية: Node.js و VS Code.
• قمنا بتهيئة مشروع Node.js جديد باستخدام npm init -y.
• قمنا بتثبيت إطار عمل الاختبار Vitest كاعتمادية تطوير.
• قمنا بإعداد سكربت npm test لتشغيل اختباراتنا بسهولة.

أصبحت ورشة عملك الآن جاهزة ومجهزة بأفضل الأدوات. في الدرس التالي، سنتعرف على المشروع المبدئي الذي سنعمل عليه وسنبدأ في كتابة أول اختبار لنا!