أساسيات JavaScript للمختبِرين

لماذا يهم

في تطبيقات الويب الحديثة يمرّ معظم ما يفعله المستخدمون عبر JavaScript، وعندما تفشل تبقى الصفحة في الغالب سليمة المظهر: زر لا يفعل شيئاً، أو مؤشر تحميل لا يتوقف، أو سعر يظهر NaN. وكثيراً ما يكون الدليل الوحيد رسالة حمراء في وحدة التحكم (Console) بالمتصفح، وهي رسالة لا يراها المستخدم. والمختبِر الذي لا يفتح وحدة التحكم يفوته هذا الإخفاق، أو يكتب تقارير مثل «الزر لا يعمل» لا يستطيع المطور أن يبني عليها شيئاً.

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

المتغيّرات والقيم والدوال

المتغيّر (variable) اسمٌ لمكان يحفظ قيمة: const total = 150; لا يمكن إعادة إسناده، وlet qty = 1; يمكن. وللقيم أنواع: النصوص ('150') والأرقام (150) والقيم المنطقية (true) والكائنات ({ price: 25 }) والمصفوفات ([3, 5])، وundefined (لم تُضبط قيمة) أو null (فارغ عن قصد). أما الدالة (function) فمجموعة خطوات لها اسم تعمل عندما يستدعيها شيء ما، وقراءتها تكشف غالباً الحالات التي نسيها المطور، مثل صنف في السلة بلا منتج في المثال أدناه.

• '5' + 1 تعطي '51': فإذا كان أحد الطرفين نصاً ضمّ العامل + الطرفين بدلاً من جمعهما، والقيمة المقروءة من حقل نصي تبقى نصاً حتى تحوّلها الشيفرة. فقد تعرض السلة 51 صنفاً بدلاً من 6.
• 'abc' * 2 تعطي NaN (ليس رقماً)، وأي عملية حسابية فيها NaN نتيجتها NaN، وقد تظهر على الشاشة في مكان السعر.
• القيمة المفقودة حين تُستخدم نصاً تظهر بكلمة «undefined» أو بعنوان فارغ.

// cart.js: the kind of function you will read in a page
function lineTotal(item) {
  const price = item.product.price;  // a number, e.g. 25
  const qty = Number(item.qty);      // the field gives a string, e.g. '2'
  return price * qty;
}

lineTotal({ product: { price: 25 }, qty: '2' });  // 50
lineTotal({ product: undefined, qty: '2' });      // throws a TypeError

الأحداث والشيفرة غير المتزامنة

معظم شيفرة الصفحة ينتظر الأحداث. تربط الشيفرة معالجاً (handler) بعنصر، مثل button.addEventListener('click', applyCoupon)، ويستدعيه المتصفح كلما وقع الحدث. ومن الأحداث الشائعة click وinput وchange وsubmit وkeydown. ولا يعمل المعالج إلا لأحداثه: فالفحص الذي يستمع لضغطات المفاتيح لا يعمل أبداً عندما تُلصق القيمة بالفأرة أو يملؤها الملء التلقائي.

التواصل مع الخادم يستغرق وقتاً، ولذلك تكون شيفرته غير متزامنة (asynchronous). ترسل fetch() طلب HTTP وتعيد فوراً وعداً (Promise)، أي كائناً يمثّل نتيجة لم تصل بعد. يبقى الوعد معلّقاً (pending) حتى يتحقّق (fulfilled) بقيمة أو يُرفض (rejected) بخطأ؛ وفي أثناء ذلك تتوقف الشيفرة التي تستخدم await داخل دالتها غير المتزامنة (async)، وتبقى بقية الصفحة قابلة للاستخدام.

وعندما يصل الرد يتحقّق الوعد بكائن استجابة يُسمّى عادةً res: تكون قيمة res.ok هي true لرموز الحالة من 200 إلى 299 وحدها، وتقرأ await res.json() جسم الاستجابة (body) بصيغة JSON، وهي الصيغة النصية التي تستخدمها معظم الواجهات البرمجية (APIs) لنقل البيانات، وتُكتب على نحو يشبه كائن JavaScript. ولا يُرفض وعد fetch() إلا عندما يفشل الطلب نفسه، كخطأ في الشبكة. أما استجابة 404 أو 500 فتحقّقه، فيجب أن تفحص الشيفرة res.ok.

• يستطيع المستخدم أن يتصرف والطلب معلّق: ينقر مرة أخرى، أو يعدّل الحقل، أو يغادر الصفحة. افحص الطلبات المكررة وحالة الانتظار.
• قد تصل الردود بغير ترتيبها: ففي مربع البحث قد يحلّ ردّ بطيء على «ri» محلّ الردّ الأحدث على «riyadh».
• اختبر على الأقل النجاح، وحالة الخطأ، وغياب الرد تماماً (انقطاع الشبكة أو انتهاء المهلة)؛ والرد البطيء يكشف حالة الانتظار.

جرّبها: محاكي رموز حالة API جرّبها: مولّد استجابات خطأ وهمية

كيف تُعطّل JavaScript الصفحة

عندما تُطلق الشيفرة استثناءً (exception) ولا يلتقطه شيء، يتخلّى المتصفح عن الشيفرة التي كانت تعمل، أي تلك الدالة وكل دالة استدعتها، ويسجّل الخطأ في وحدة التحكم. وتواصل المعالجات والشيفرات الأخرى عملها، فتبقى بقية الصفحة تعمل في الغالب، ولا تصمت إلا الميزة التي اصطدمت بالخطأ. وبمصطلحات ISTQB فما تلاحظه إخفاق (failure)، سببه عيب (defect) أدخله شخص بخطأ (error) بشري؛ أما JavaScript فتسمّي استثناءاتها أخطاءً فحسب. ومن صور الإخفاق المعتادة:

• زر لا يفعل شيئاً: أطلق معالجه استثناءً قبل أن يغيّر أي شيء.
• مؤشر تحميل لا يتوقف أو زر يبقى معطّلاً: السطر الذي يعيدهما إلى حالتهما يأتي بعد السطر الذي فشل.
• قيم غريبة، وكثيراً بلا أي خطأ، لأن الشيفرة عملت حتى نهايتها ببيانات خاطئة: NaN أو undefined أو [object Object]، أو 51 بدلاً من 6.
• جزء كامل من الصفحة مفقود: ملف الشيفرة الخاص به لم يُحمَّل أو فيه خطأ في الصياغة، فلم يعمل شيء منه.
• إخفاق مع بعض البيانات فقط: قائمة فارغة، أو حقل اختياري مفقود، أو منتج محذوف.

قراءة خطأ في وحدة التحكم

افتح أدوات المطوّر (F12 في معظم متصفحات الحاسوب) واختر لوحة Console؛ وسيتناول درس أدوات المطوّر بقية اللوحات. امسحها، وكرّر الإجراء، واقرأ الأخطاء الحمراء الجديدة وحدها. وفيما يلي ما تسجّله الدالة lineTotal من القسم الأول، بصياغة Chrome، عندما يكون في السلة صنف بلا منتج.

• النوع: TypeError (عملية على نوع خاطئ من القيم، وغالباً undefined)، وReferenceError (اسم غير معروف)، وSyntaxError (شيفرة أو JSON يتعذّر تحليلها)، وRangeError (قيمة خارج النطاق).
• الرسالة: هنا قراءة price من undefined، أي أن item.product مفقود. اسأل أي بيانات سبّبت ذلك، كمنتج حُذف من الكتالوج. وتختلف الصياغة بين المتصفحات، أما النوع فلا.
• الموضع: الملف والسطر والعمود، cart.js:58:30.
• تتبّع المكدّس (Stack Trace): موضع إطلاق الخطأ في الأعلى، وتحته كل من استدعاه. اقرأه من الأسفل لتعرف القصة (نقرة زر شغّلت معالجاً بلا اسم، فاستدعى renderCart ثم lineTotal). وتعني Uncaught أن شيئاً لم يلتقط الخطأ، وتعني (in promise) أنه جاء من وعد مرفوض.
• تُصغَّر الشيفرة (minify) في المواقع الحية عادةً، وكثيراً ما تصير سطراً واحداً طويلاً (app.3f9c1.js:1:20431)؛ وتعيد خرائط المصدر (source maps) المطورين إلى الملف الأصلي، ويجعلها المنسِّق مقروءة لك.

Uncaught TypeError: Cannot read properties of undefined (reading 'price')
    at lineTotal (cart.js:58:30)
    at renderCart (cart.js:31:17)
    at HTMLButtonElement.<anonymous> (cart.js:12:5)

جرّبها: منسّق JavaScript

مثال تطبيقي: زر «تطبيق القسيمة» الذي لا ينتهي

في اختبار استكشافي لصفحة الدفع، تترك القسيمة المنتهية WELCOME10 مؤشر التحميل يدور بلا نهاية، بينما تعمل القسيمة الصالحة. يمسح المختبِر وحدة التحكم، ويكرّر الخطوات، ويجمع الأدلة أدناه.

• رفض الخادم القسيمة كما ينبغي، بالحالة 422 (Unprocessable Content: الطلب سليم الصياغة، لكن الخادم لا يقبل معالجة مضمونه) ورمز خطأ.
• ومع ذلك تحقّق وعد fetch()، والشيفرة لا تفحص res.ok. وجسم الخطأ ليس فيه discount، فيُطلق السطر 42 استثناء TypeError، ولا يُنفَّذ أبداً السطر 43 الذي يخفي مؤشر التحميل.
• التقرير: «القسيمة المنتهية تترك مؤشر التحميل يدور ولا تعرض رسالة»، مع الخطوات، والنتيجة المتوقعة (اختفاء مؤشر التحميل ورسالة تفيد بانتهاء القسيمة)، والنتيجة الفعلية، ونص وحدة التحكم، والطلب والاستجابة. ثم اختبر بقية النتائج: رمز غير معروف، وخطأ في الخادم، ورد بطيء، وانقطاع الشبكة، ونقرة مزدوجة.

Console
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'percent')
    at applyCoupon (checkout.js:42:44)

Network
POST /api/coupons/apply  ->  422   {"error":"COUPON_EXPIRED"}

checkout.js
38  async function applyCoupon() {
39    spinner.hidden = false;
40    const res = await fetch(url, options);
41    const data = await res.json();
42    total.textContent = format(data.discount.percent);
43    spinner.hidden = true;
44  }

جرّبها: مولّد استجابات API وهمية

أسئلة شائعة

المراجع

• ECMAScript® Language Specification (ECMA-262)Ecma International / TC39معيار لغة JavaScript، بما فيه قواعد RegExp ودلالاتها، وJSON.parse/JSON.stringify، وكائن Date.
• Fetch StandardWHATWGيعرّف CORS: طلبات التحقق المسبق وترويسات Access-Control-* والاستجابات التي يسمح المتصفح للصفحة برؤيتها.
• ISTQB GlossaryISTQBالتعريفات القياسية لمصطلحات الاختبار — حالة الاختبار واختبار الانحدار والخطورة والأولوية وتحليل القيم الحدّية وغيرها.
• JavaScript — MDNMDN Web Docs (Mozilla)دليل MDN ومرجعه للغة JavaScript: صياغة اللغة وأنواعها وكائناتها ومكوّناتها المدمجة كما تنفّذها المتصفحات.