إعداد بيئة الاختبار

تُعد كتابة اختبارات لتعليمات jQuery البرمجية أمرًا بالغ الأهمية لبناء تطبيقات ويب قوية وسهلة الصيانة. فهي تساعد في اكتشاف الأخطاء مبكرًا، وتضمن أن تعمل التعليمات البرمجية كما هو متوقع.

• منع التراجعات: يضمن ألا تؤدي التغييرات الجديدة إلى تعطيل الوظائف الحالية.
• تحسين جودة التعليمات البرمجية: يجبرك على كتابة تعليمات برمجية تركيبية قابلة للاختبار.
• تسهيل التعاون: يوفر توثيقًا واضحًا لكيفية عمل المكوّنات.

لاختبار JavaScript، بما في ذلك jQuery، تحتاج إلى مشغّل اختبارات. تنفذ هذه الأداة اختباراتك وتعرض نتائجها.

من الخيارات الشائعة:

• Jest: إطار اختبار حديث وغني بالميزات من Facebook، يُستخدم على نطاق واسع مع React، لكنه مناسب لأي JavaScript.
• QUnit: إطار اختبار مخصص لـ jQuery، وهو أبسط لكنه أقل غنى بالميزات من Jest.

سنركز في هذا الدرس على إعداد Jest نظرًا إلى ميزاته الشاملة وانتشاره الواسع.

قبل تثبيت Jest، تحتاج إلى مشروع Node.js. وإذا لم يكن لديك مشروع، يمكنك إنشاؤه بسهولة.

انتقل إلى مجلد مشروعك في الطرفية وشغّل:

ينشئ هذا الأمر ملف package.json الذي يدير تبعيات مشروعك وبرامجك النصية.

حان الآن وقت تثبيت Jest. وبما أن jQuery تتفاعل غالبًا مع DOM في المتصفح (نموذج كائن المستند)، فستحتاج أيضًا إلى jest-environment-jsdom. توفر JSDOM بيئة شبيهة بالمتصفح داخل Node.js، بحيث تتمكن تعليمات jQuery البرمجية من معالجة DOM افتراضي.

ثبّتهما كتبَعيات للتطوير:

يضيف هذا Jest وJSDOM إلى package.json.

لإخبار Jest باستخدام JSDOM، تحتاج إلى تهيئته. يمكنك القيام بذلك بإضافة برنامج نصي باسم test إلى package.json، أو بإنشاء ملف jest.config.js.

الخيار 1: في package.json

{
  "name": "my-jquery-app",
  "version": "1.0.0",
  "scripts": {
    "test": "jest --env=jsdom"
  },
  "devDependencies": {
    "jest": "^29.x.x",
    "jest-environment-jsdom": "^29.x.x"
  }
}

يضمن الخيار --env=jsdom تشغيل Jest للاختبارات في بيئة JSDOM.

يبحث Jest عن ملفات الاختبار في مجلد __tests__ أو في الملفات التي ينتهي اسمها بـ .test.js (أو .spec.js). لننشئ ملف اختبار بسيطًا.

أنشئ مجلدًا باسم __tests__ في جذر مشروعك، ثم أضف ملفًا مثل __tests__/my-feature.test.js:

// __tests__/my-feature.test.js

describe('My Feature', () => {
  test('should do something basic', () => {
    // Test logic will go here
  });
});

تجمع describe الاختبارات المرتبطة، بينما تعرّف test (أو it) حالة اختبار فردية.

لاختبار تعليمات jQuery البرمجية، تحتاج إلى استيراد jQuery نفسها إلى ملف الاختبار. يمكنك تثبيت jQuery عبر npm باستخدام: npm install jquery.

بعد ذلك، يمكنك استيرادها في ملف الاختبار:

// __tests__/my-feature.test.js
const $ = require('jquery');

describe('My jQuery Feature', () => {
  // Setup for each test
  beforeEach(() => {
    // Create a fresh DOM element for each test
    document.body.innerHTML = '
Hello
';
  });

  test('should add a class to the element', () => {
    const element = $('#test-element');
    element.addClass('highlight');
    expect(element.hasClass('highlight')).toBe(true);
  });
});

التوكيدات هي الطريقة التي تتحقق بها من أن التعليمات البرمجية تعمل بشكل صحيح. يستخدم Jest الدالة expect() مع أدوات المطابقة لإنشاء التوكيدات.

إليك مثالًا بسيطًا بلغة JavaScript (ليس خاصًا بـ jQuery، لكنه يوضّح التوكيدات):

يوفر Jest مجموعة غنية من أدوات المطابقة. إليك بعض الأدوات الشائعة التي ستستخدمها:

• .toBe(value): يتحقق من التطابق التام (مثل ===).
• .toEqual(value): يتحقق من التطابق العميق للكائنات أو المصفوفات.
• .not.toBe(value): يتحقق من عدم التطابق.
• .toBeTruthy() / .toBeFalsy(): يتحقق من كون القيمة صادقة أو زائفة.
• .toContain(item): يتحقق مما إذا كانت المصفوفة أو السلسلة النصية تحتوي على عنصر.

مع jQuery، ستجمع هذه الأدوات غالبًا مع أساليب jQuery، مثل expect($element.text()).toBe('Expected Text');

بعد إعداد ملفات الاختبار، يصبح تشغيلها بسيطًا. استخدم فقط البرنامج النصي الذي عرّفناه في package.json:

سيعثر Jest على جميع ملفات الاختبار، ويشغّلها في بيئة JSDOM، ويعرض النتائج في الطرفية. وسيُظهر لك الاختبارات التي نجحت والتي فشلت، كما يوفر تفاصيل عن حالات الفشل.

لقد تعلمت كيفية إعداد بيئة اختبار لـ jQuery باستخدام Jest وJSDOM. ما الأوامر والإعدادات التالية الضرورية لإعداد Jest أساسي مع دعم DOM؟

لقد تعلمت في هذا الدرس كيفية إعداد بيئة اختبار قوية لتطبيقات jQuery باستخدام Jest.

• هيّأنا مشروع Node.js باستخدام npm init.
• ثبّتنا Jest وjest-environment-jsdom لمحاكاة بيئة المتصفح.
• هيّأنا Jest في package.json لاستخدام JSDOM.
• فهمنا كيفية تنظيم ملفات الاختبار، واستيراد jQuery، وكتابة التوكيدات الأساسية باستخدام أدوات المطابقة في Jest.

تتيح لك هذه الأسس كتابة اختبارات فعالة تضمن موثوقية تعليمات jQuery البرمجية وسهولة صيانتها.