0Pricing
jQuery Academy · Lezione

Scrittura di test jQuery efficaci

Esercitarsi nella scrittura di unit test per manipolazioni del DOM, gestori di eventi e chiamate AJAX, assicurandosi che i componenti jQuery siano robusti e privi di bug.

Scrittura di test jQuery efficaci è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 3 di 3. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 3 lezioni in totale.

Padroneggiare la scrittura di test jQuery

Benvenuto! In questa lezione approfondiremo la scrittura di unit test efficaci per le applicazioni jQuery. Ci concentreremo su strategie pratiche per verificare le manipolazioni del DOM, la gestione degli eventi e le chiamate AJAX asincrone.

Test robusti garantiscono che il codice funzioni come previsto e aiutano a prevenire le regressioni durante l'evoluzione del progetto.

Verifica delle modifiche al DOM

Quando il codice jQuery modifica il Document Object Model (DOM), i test dovrebbero verificare tali modifiche. Questo include il controllo della creazione e della rimozione degli elementi, delle modifiche agli attributi o degli aggiornamenti del testo.

In genere selezionerà l'elemento dopo l'operazione e ne verificherà le proprietà con un'assertion.

<!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>

Isolamento dei test del DOM

Per ottenere test del DOM affidabili, è fondamentale assicurarsi che ogni test venga eseguito in un ambiente pulito e isolato. La maggior parte dei framework di testing fornisce gli hook beforeEach e afterEach.

  • beforeEach: configura lo stato iniziale del DOM per un nuovo test.
  • afterEach: ripulisce le modifiche al DOM apportate dal test.

In questo modo si impedisce ai test di interferire tra loro.

Testing delle modifiche alle classi

Testiamo una manipolazione comune del DOM: l'aggiunta o la rimozione di classi CSS. Può verificare con un'assertion se un elemento .hasClass() una determinata classe dopo l'esecuzione della funzione 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>

Simulazione degli eventi utente

Per testare i gestori degli eventi, è necessario simulare le interazioni dell'utente. Il metodo jQuery .trigger() è perfetto a questo scopo. Può generare qualsiasi evento, come 'click', 'submit' o 'change', su un elemento selezionato.

Dopo aver generato l'evento, verifichi con un'assertion il risultato previsto, ad esempio le modifiche al DOM o le chiamate di funzione.

Verifica di un evento click

Ecco come verificare se un evento click aggiorna correttamente una parte dell'interfaccia utente. Genereremo un click e controlleremo quindi il nuovo contenuto testuale dell'elemento.

<!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>

Assertion sullo stato degli eventi

I gestori degli eventi spesso fanno più che modificare il DOM: potrebbero aggiornare gli attributi data o lo stato interno dell'applicazione. I test dovrebbero verificare anche queste modifiche meno visibili.

Può controllare i valori di .data() o altre proprietà dopo un evento.

<!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>

Testing AJAX asincrono

Testare chiamate AJAX reali può essere lento, inaffidabile e dipendente da servizi esterni. La soluzione consiste nel creare un mock delle richieste AJAX.

Il mocking consiste nel sostituire la chiamata di rete effettiva con una risposta controllata e predefinita. In questo modo i test vengono eseguiti rapidamente e in modo coerente, concentrandosi solo sulla logica lato client.

Implementazione dei mock AJAX

Può usare strumenti come Sinon.js oppure, nei casi semplici, sovrascrivere il comportamento AJAX di jQuery. Un modo basilare per simulare una risposta AJAX positiva durante i test consiste nel modificare temporaneamente $.ajax o nell'usare una libreria di mocking.

Qui simuleremo una callback di successo senza effettuare una vera richiesta di rete.

<!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>

Verifica rapida

Ha imparato a testare le manipolazioni del DOM, gli eventi e le chiamate AJAX. Quale metodo jQuery viene generalmente usato per generare programmaticamente un evento su un elemento durante un test?

Riepilogo: testing efficace di jQuery

Congratulazioni! Ha esplorato come scrivere unit test efficaci per diversi aspetti delle applicazioni jQuery.

  • Abbiamo visto come verificare con assertion le modifiche al DOM, controllando le proprietà e il contenuto degli elementi.
  • Abbiamo imparato a simulare le interazioni dell'utente e a testare i gestori degli eventi usando .trigger().
  • Infine, abbiamo parlato del mocking delle richieste AJAX per garantire test rapidi e affidabili per le operazioni asincrone.

Queste tecniche sono fondamentali per creare codice jQuery robusto e facile da mantenere.

Domande Frequenti

La lezione «Scrittura di test jQuery efficaci» è gratuita?

Sì — il testo completo di «Scrittura di test jQuery efficaci» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 3 lezioni in totale.

Cosa imparerò in «Scrittura di test jQuery efficaci»?

Esercitarsi nella scrittura di unit test per manipolazioni del DOM, gestori di eventi e chiamate AJAX, assicurandosi che i componenti jQuery siano robusti e privi di bug. Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare jQuery Academy?

Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 3 di 3.

Quanto tempo richiede la lezione «Scrittura di test jQuery efficaci»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione jQuery Academy?

Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Introduzione agli unit test con jQuery
  2. Configurazione dell'ambiente di test
  3. Scrittura di test jQuery efficaci
← Torna a jQuery Academy