التنقل بين الاختبارات بسهولة في VSCode

في الدرس السابق، تعلمنا كيفية تشغيل اختباراتنا باستخدام سطر الأوامر (Terminal). هذا رائع ويعمل بشكل جيد، ولكن مع نمو مشروعك وزيادة عدد الاختبارات، قد يصبح التنقل بين سطر الأوامر ومحرر الكود مربكًا بعض الشيء. ماذا لو أردت تشغيل اختبار واحد فقط؟ أو تصحيح أخطاء اختبار معين خطوة بخطوة؟

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

لماذا تحتاج إلى أدوات مساعدة داخل VSCode؟

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

دمج الاختبارات في VSCode يحل هذه المشكلة ويقدم مزايا هائلة:

• واجهة مرئية: سترى قائمة بجميع اختباراتك في شجرة منظمة، مع أيقونات توضح حالة كل اختبار (ناجح، فاشل، لم يتم تشغيله).
• تشغيل بنقرة واحدة: يمكنك تشغيل جميع الاختبارات، أو اختبارات ملف واحد، أو حتى اختبار واحد فقط بنقرة زر.
• نتائج فورية: تظهر رسائل الخطأ مباشرةً بجانب الكود الفاشل، مما يسهل فهم المشكلة وتحديد مكانها بدقة.
• تصحيح أخطاء متكامل (Debugging): يمكنك وضع نقاط توقف (Breakpoints) وتتبع تنفيذ الكود خطوة بخطوة، تمامًا كما تفعل مع أي جزء آخر من تطبيقك.

إعداد بيئة VSCode لتناسب Vitest

لتحقيق هذا التكامل، سنستخدم إضافة (Extension) رائعة مصممة خصيصًا لـ Vitest. مجتمع VSCode مليء بالإضافات، ولكن للحصول على أفضل تجربة، سنستخدم الإضافة الرسمية من فريق Vitest.

1. افتح Visual Studio Code.
2. انتقل إلى قسم الإضافات (Extensions) من الشريط الجانبي (أيقونة المربعات أو Ctrl+Shift+X).
3. في شريط البحث، اكتب Vitest.
4. ابحث عن الإضافة التي تحمل اسم Vitest ومطورها هو Vitest Team. انقر على زر Install.

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

استكشاف واجهة اختبارات Vitest (Test Explorer)

بعد تثبيت الإضافة، ستلاحظ ظهور أيقونة جديدة على شكل أنبوب اختبار (Beaker icon) في الشريط الجانبي (Activity Bar) في VSCode. هذه هي بوابة Test Explorer الخاصة بك.

عند النقر عليها، ستفتح لوحة تعرض جميع اختباراتك في هيكل شجري مرتب:

• اسم الملف: example.test.js
  • مجموعة الاختبارات (describe): fizzBuzz tests
    • الاختبار الفردي (it): should return "Fizz" for numbers divisible by 3
    • الاختبار الفردي (it): should return "Buzz" for numbers divisible by 5

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

تشغيل الاختبارات وتحليل النتائج مباشرةً في الكود

الجمال الحقيقي لهذه الإضافة يكمن في أنها تجلب واجهة التحكم بالاختبارات إلى ملفاتك مباشرة.

1. مؤشرات CodeLens

افتح أي ملف اختبار، وستلاحظ ظهور نصوص صغيرة قابلة للنقر فوق كل describe و it بلوك. هذه النصوص، التي تسمى CodeLens، هي اختصارات لتشغيل الاختبارات وتصحيحها.

// math.test.js
import { factorial } from './math';
import { describe, it, expect } from 'vitest';

// You will see 'Run Test | Debug Test' above this line
describe('factorial', () => {
  // And also here...
  it('should return 1 for 0', () => {
    expect(factorial(0)).toBe(1);
  });

  // And here...
  it('should return 120 for 5', () => {
    expect(factorial(5)).toBe(120);
  });
});

هذا يعني أنك لم تعد بحاجة لمغادرة ملفك لتشغيل اختبار معين. ببساطة انقر على Run Test فوق الاختبار الذي تعمل عليه.

2. رسائل الخطأ المضمنة

لنجرب故意 إفشال أحد اختباراتنا لنرى كيف تستجيب الإضافة.

// math.test.js - with a failing test
// ...

describe('factorial', () => {
  it('should return 1 for 0', () => {
    expect(factorial(0)).toBe(1);
  });

  it('should return 120 for 5', () => {
    // Let's introduce a mistake
    expect(factorial(5)).toBe(121); // This will fail
  });
});

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

• سيتم وضع خط أحمر متعرج تحت expect(factorial(5)).toBe(121).
• عند تمرير الفأرة فوقه، ستظهر رسالة خطأ واضحة تعرض القيمة المتوقعة (Expected) والقيمة الفعلية (Received).
• سيتم عرض diff (الاختلاف) بين القيمتين، مما يجعل تحديد المشكلة فوريًا.

هذه الميزة وحدها توفر دقائق ثمينة في كل دورة تطوير وتصحيح.

تصحيح الأخطاء (Debugging) خطوة بخطوة

هذه هي الميزة الأقوى. أحيانًا لا يكون الخطأ واضحًا من رسالة الفشل وحدها، وتحتاج إلى الدخول إلى الكود ورؤية ما يحدث أثناء التنفيذ.

مع إضافة Vitest، أصبح تصحيح الأخطاء سهلاً للغاية:

1. ضع نقطة توقف (Breakpoint): افتح ملف الكود الأصلي (وليس ملف الاختبار) الذي تريد فحصه، وانقر على الهامش الأيسر بجانب رقم السطر لوضع نقطة حمراء. يمكنك أيضًا وضع نقاط توقف داخل ملف الاختبار نفسه.

2. ابدأ جلسة تصحيح الأخطاء: عد إلى ملف الاختبار، وانقر على Debug Test (من CodeLens فوق الاختبار أو من Test Explorer).

3. تتبع التنفيذ: سيتوقف تنفيذ الكود عند نقطة التوقف التي وضعتها. ستظهر لك لوحة التحكم في تصحيح الأخطاء في VSCode، والتي تتيح لك:

• Step Over: الانتقال إلى السطر التالي.
• Step Into: الدخول إلى دالة لفحصها من الداخل.
• Step Out: الخروج من الدالة الحالية.
• فحص قيم المتغيرات الحالية في لوحة VARIABLES.

هذا يسمح لك برؤية قيم المتغيرات، مسار تنفيذ الكود، واكتشاف الأخطاء المنطقية المعقدة التي يصعب العثور عليها بالطرق التقليدية.

خلاصة

لقد قمنا في هذا الدرس بترقية سير عملنا في الاختبار بشكل جذري. لم نعد مقيدين بسطر الأوامر، بل أصبح لدينا بيئة اختبار مرئية وتفاعلية ومتكاملة داخل VSCode. لقد تعلمنا كيفية:

• تثبيت واستخدام إضافة Vitest الرسمية.
• استكشاف الاختبارات وتشغيلها بنقرة واحدة من Test Explorer.
• الاستفادة من CodeLens لتشغيل الاختبارات مباشرة من الكود.
• تحليل الأخطاء بسرعة من خلال الرسائل المضمنة.
• تصحيح أخطاء الاختبارات والكود المصدر خطوة بخطوة باستخدام Debugger.

أصبحت الآن قادرًا على كتابة وتشغيل وتحليل وتصحيح اختباراتك بسرعة وكفاءة لا مثيل لهما. في الدرس التالي، سنتعمق في موضوع مهم آخر: كيفية قياس مدى تغطية اختباراتنا للكود المصدري باستخدام أداة Code Coverage.