jQuery Academy · درس

كتابة اختبارات jQuery فعّالة

تدرّب على كتابة اختبارات وحدات لمعالجة DOM ومعالجات الأحداث واستدعاءات AJAX، مع ضمان متانة مكوّنات jQuery وخلوّها من الأخطاء.

كتابة اختبارات jQuery فعّالة درس مجاني في jQuery Academy على CoddyKit. هذا هو الدرس 3 من أصل 3. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في jQuery Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة jQuery Academy 3 دروس في المجموع.

إتقان كتابة اختبارات jQuery

مرحبًا! سنتعمق في هذا الدرس في كتابة اختبارات وحدات فعالة لتطبيقات jQuery. وسنركز على استراتيجيات عملية للتحقق من معالجات DOM، ومعالجة الأحداث، واستدعاءات AJAX غير المتزامنة.

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

التحقق من تغييرات DOM

عندما تعدّل تعليمات jQuery البرمجية نموذج كائن المستند (DOM)، ينبغي أن تتحقق اختباراتك من هذه التغييرات. ويشمل ذلك التحقق من إنشاء العناصر أو إزالتها، وتغييرات السمات، أو تحديثات النص.

عادةً ما تحدد العنصر بعد العملية وتتحقق من خصائصه.

<!DOCTYPE html>
<html>
<head>
  <title>Test DOM Change</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <div id="app"></div>

  <script>
    $(document).ready(function() {
      // Simulate a jQuery operation
      $('#app').append('<p class="message">Hello world!</p>');

      // Simulate a test assertion
      if ($('#app .message').length === 1 && $('#app .message').text() === 'Hello world!') {
        console.log("PASS: Element appended and text is correct.");
      } else {
        console.log("FAIL: Element not found or text is incorrect.");
      }
    });
  </script>
</body>
</html>

عزل اختبارات DOM

لإجراء اختبارات DOM موثوقة، من الضروري ضمان تشغيل كل اختبار في بيئة نظيفة ومعزولة. توفر معظم أطر الاختبار خطافات beforeEach وafterEach.

beforeEach: يهيئ حالة DOM الأولية لاختبار جديد.
afterEach: ينظف أي تغييرات في DOM أجراها الاختبار.

يمنع هذا الاختبارات من التأثير بعضها في بعض.

اختبار تغييرات الأصناف

لنختبر معالجة شائعة لـ DOM: إضافة أصناف CSS أو إزالتها. يمكنك التحقق مما إذا كان العنصر .hasClass() يمتلك صنفًا معينًا بعد تشغيل دالة jQuery.

<!DOCTYPE html>
<html>
<head>
  <title>Test Class Toggle</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <button id="toggleBtn" class="active">Toggle</button>

  <script>
    $(document).ready(function() {
      // Function to test
      function toggleActiveClass(element) {
        $(element).toggleClass('active');
      }

      // Test Case 1: Active class is present initially
      if ($('#toggleBtn').hasClass('active')) {
        console.log("PASS: Initial state has 'active' class.");
      } else {
        console.log("FAIL: Initial state missing 'active' class.");
      }

      // Run the function
      toggleActiveClass('#toggleBtn');

      // Test Case 2: Active class should be removed
      if (!$('#toggleBtn').hasClass('active')) {
        console.log("PASS: 'active' class removed after toggle.");
      } else {
        console.log("FAIL: 'active' class not removed.");
      }
    });
  </script>
</body>
</html>

محاكاة أحداث المستخدم

لاختبار معالجات الأحداث، تحتاج إلى محاكاة تفاعلات المستخدم. وتُعد طريقة jQuery .trigger() مثالية لهذا الغرض. إذ يمكنها إطلاق أي حدث (مثل 'click' أو 'submit' أو 'change') على عنصر محدد.

بعد إطلاق الحدث، تتحقق من النتيجة المتوقعة، مثل تغييرات DOM أو استدعاءات الدوال.

التحقق من حدث النقر

إليك طريقة اختبار ما إذا كان حدث النقر يحدّث جزءًا من واجهة المستخدم بشكل صحيح. سنطلق نقرة، ثم نتحقق من محتوى النص الجديد للعنصر.

<!DOCTYPE html>
<html>
<head>
  <title>Test Click Event</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <button id="myButton">Click Me</button>
  <p id="status">Not clicked yet.</p>

  <script>
    $(document).ready(function() {
      // Attach the event handler
      $('#myButton').on('click', function() {
        $('#status').text('Button was clicked!');
      });

      // Simulate the click event
      $('#myButton').trigger('click');

      // Simulate assertion
      if ($('#status').text() === 'Button was clicked!') {
        console.log("PASS: Status updated after click.");
      } else {
        console.log("FAIL: Status not updated correctly.");
      }
    });
  </script>
</body>
</html>

توكيدات حالة الحدث

غالبًا ما تفعل معالجات الأحداث أكثر من مجرد تغيير DOM؛ فقد تحدّث سمات البيانات أو حالة التطبيق الداخلية. ينبغي أن تتحقق اختباراتك من هذه التغييرات الأقل وضوحًا أيضًا.

يمكنك التحقق من قيم .data() أو الخصائص الأخرى بعد وقوع الحدث.

<!DOCTYPE html>
<html>
<head>
  <title>Test Event Data</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <button id="counterBtn" data-count="0">Increase Count</button>

  <script>
    $(document).ready(function() {
      // Attach event handler
      $('#counterBtn').on('click', function() {
        let currentCount = parseInt($(this).data('count'));
        $(this).data('count', currentCount + 1);
      });

      // Initial check
      if ($('#counterBtn').data('count') === 0) {
        console.log("PASS: Initial count is 0.");
      } else {
        console.log("FAIL: Initial count is not 0.");
      }

      // Trigger click
      $('#counterBtn').trigger('click');

      // Assert after first click
      if ($('#counterBtn').data('count') === 1) {
        console.log("PASS: Count is 1 after first click.");
      } else {
        console.log("FAIL: Count is not 1.");
      }

      // Trigger another click
      $('#counterBtn').trigger('click');

      // Assert after second click
      if ($('#counterBtn').data('count') === 2) {
        console.log("PASS: Count is 2 after second click.");
      } else {
        console.log("FAIL: Count is not 2.");
      }
    });
  </script>
</body>
</html>

اختبار AJAX غير المتزامن

قد تكون اختبارات استدعاءات AJAX الفعلية بطيئة وغير موثوقة وتعتمد على خدمات خارجية. والحل هو محاكاة طلبات AJAX.

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

تنفيذ محاكاة AJAX

يمكنك استخدام أدوات مثل Sinon.js، أو تجاوز سلوك AJAX في jQuery للحالات البسيطة. ومن الطرق الأساسية لمحاكاة استجابة AJAX ناجحة لأغراض الاختبار تعديل $.ajax مؤقتًا أو استخدام مكتبة للمحاكاة.

سنحاكي هنا استدعاء نجاح من دون إجراء طلب شبكة فعلي.

<!DOCTYPE html>
<html>
<head>
  <title>Mock AJAX Test</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
  <div id="data-display">Loading...</div>

  <script>
    $(document).ready(function() {
      // Store original $.ajax for restoration
      const originalAjax = $.ajax;

      // Mock $.ajax for this test
      $.ajax = function(options) {
        // Simulate a successful response
        const deferred = $.Deferred();
        deferred.resolve({ message: "Mocked data received!" });
        return deferred.promise();
      };

      // Your function that makes an AJAX call
      function fetchDataAndDisplay() {
        $.ajax({
          url: '/api/data',
          method: 'GET'
        }).done(function(response) {
          $('#data-display').text(response.message);
        }).fail(function() {
          $('#data-display').text('Error fetching data.');
        });
      }

      // Run the function under test
      fetchDataAndDisplay();

      // Simulate assertion after a short delay (for async effect)
      setTimeout(function() {
        if ($('#data-display').text() === 'Mocked data received!') {
          console.log("PASS: AJAX call successfully mocked and handled.");
        } else {
          console.log("FAIL: AJAX mock failed or handler incorrect.");
        }
        // Restore original $.ajax (important for real apps)
        $.ajax = originalAjax;
      }, 10); // Small delay to allow promise resolution
    });
  </script>
</body>
</html>

تحقق سريع

لقد تعلمت اختبار معالجات DOM والأحداث وAJAX. ما طريقة jQuery التي تُستخدم عادةً لإطلاق حدث برمجيًا على عنصر في اختبار؟

مراجعة: اختبار jQuery الفعال

تهانينا! لقد استكشفت كيفية كتابة اختبارات وحدات فعالة لجوانب مختلفة من تطبيقات jQuery.

غطّينا التحقق من تغييرات DOM، والتحقق من خصائص العناصر ومحتواها.
تعلمنا محاكاة تفاعلات المستخدم واختبار معالجات الأحداث باستخدام .trigger().
وأخيرًا، ناقشنا محاكاة طلبات AJAX لضمان اختبارات سريعة وموثوقة للعمليات غير المتزامنة.

تُعد هذه التقنيات ضرورية لبناء تعليمات jQuery برمجية قوية وسهلة الصيانة.

الأسئلة الشائعة

هل درس «كتابة اختبارات jQuery فعّالة» مجاني؟

نعم — نص درس «كتابة اختبارات jQuery فعّالة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة jQuery Academy، انتقل إلى CoddyKit PRO. تتضمن دورة jQuery Academy 3 دروس في المجموع.

ماذا ستتعلم في «كتابة اختبارات jQuery فعّالة»؟

تدرّب على كتابة اختبارات وحدات لمعالجة DOM ومعالجات الأحداث واستدعاءات AJAX، مع ضمان متانة مكوّنات jQuery وخلوّها من الأخطاء. تتمرن على jQuery Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ jQuery Academy؟

لا تُشترط خبرة سابقة. jQuery Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 3.

كم من الوقت يستغرق درس «كتابة اختبارات jQuery فعّالة»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس jQuery Academy هذا؟

نعم. كل درس في jQuery Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى jQuery Academy