jQuery Academy · Lektion

Effektive jQuery-Tests schreiben

Üben Sie das Schreiben von Unit-Tests für DOM-Manipulationen, Event-Handler und AJAX-Aufrufe, um robuste und fehlerfreie jQuery-Komponenten sicherzustellen.

Effektive jQuery-Tests schreiben ist eine kostenlose jQuery Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 3. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des jQuery Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Testschreiben mit jQuery meistern

Willkommen! In dieser Lektion beschäftigen wir uns intensiv mit dem Schreiben effektiver Unit-Tests für Ihre jQuery-Anwendungen. Der Schwerpunkt liegt auf praktischen Strategien zur Überprüfung von DOM-Manipulationen, Event-Handlern und asynchronen AJAX-Aufrufen.

Robuste Tests stellen sicher, dass Ihr Code wie erwartet funktioniert, und helfen, Regressionen zu verhindern, wenn sich Ihr Projekt weiterentwickelt.

DOM-Änderungen überprüfen

Wenn Ihr jQuery-Code das Document Object Model (DOM) verändert, sollten Ihre Tests diese Änderungen überprüfen. Dazu gehören das Erstellen und Entfernen von Elementen, Änderungen an Attributen oder Aktualisierungen von Text.

Typischerweise wählen Sie das Element nach der Operation aus und überprüfen seine Eigenschaften mit einer 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>

DOM-Tests isolieren

Für zuverlässige DOM-Tests ist es entscheidend, dass jeder Test in einer sauberen, isolierten Umgebung ausgeführt wird. Die meisten Test-Frameworks stellen die Hooks beforeEach und afterEach bereit.

beforeEach: Richtet den ursprünglichen DOM-Zustand für einen neuen Test ein.
afterEach: Bereinigt alle vom Test vorgenommenen DOM-Änderungen.

Dadurch wird verhindert, dass sich Tests gegenseitig beeinflussen.

Klassenänderungen testen

Testen wir eine häufige DOM-Manipulation: das Hinzufügen oder Entfernen von CSS-Klassen. Sie können mit .hasClass() überprüfen, ob ein Element nach der Ausführung Ihrer jQuery-Funktion eine bestimmte Klasse besitzt.

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

Benutzerereignisse simulieren

Um Event-Handler zu testen, müssen Sie Benutzerinteraktionen simulieren. Die jQuery-Methode .trigger() eignet sich dafür hervorragend. Sie kann jedes Ereignis (z. B. 'click', 'submit' oder 'change') auf einem ausgewählten Element auslösen.

Nach dem Auslösen des Ereignisses überprüfen Sie das erwartete Ergebnis, etwa DOM-Änderungen oder Funktionsaufrufe.

Ein Click-Ereignis überprüfen

So testen Sie, ob ein Click-Ereignis einen Teil Ihrer Benutzeroberfläche korrekt aktualisiert. Wir lösen einen Click aus und überprüfen anschließend den neuen Textinhalt des Elements.

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

Assertions für den Ereignisstatus

Event-Handler ändern häufig nicht nur das DOM, sondern aktualisieren möglicherweise auch Datenattribute oder den internen Anwendungsstatus. Ihre Tests sollten auch diese weniger sichtbaren Änderungen überprüfen.

Nach einem Ereignis können Sie .data()-Werte oder andere Eigenschaften prüfen.

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

Asynchrone AJAX-Aufrufe testen

Das Testen echter AJAX-Aufrufe kann langsam und unzuverlässig sein und von externen Diensten abhängen. Die Lösung besteht darin, Ihre AJAX-Anfragen zu mocken.

Beim Mocking wird der tatsächliche Netzwerkaufruf durch eine kontrollierte, vordefinierte Antwort ersetzt. Dadurch laufen Ihre Tests schnell und konsistent und konzentrieren sich ausschließlich auf Ihre clientseitige Logik.

AJAX-Mocks implementieren

Sie können Tools wie Sinon.js verwenden oder in einfachen Fällen das AJAX-Verhalten von jQuery überschreiben. Eine grundlegende Möglichkeit, für Tests eine erfolgreiche AJAX-Antwort zu simulieren, besteht darin, $.ajax vorübergehend zu ändern oder eine Mocking-Bibliothek zu verwenden.

Hier simulieren wir einen Erfolgs-Callback ohne eine echte Netzwerkanfrage.

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

Kurze Überprüfung

Sie haben gelernt, wie DOM-Manipulationen, Ereignisse und AJAX getestet werden. Welche jQuery-Methode wird typischerweise verwendet, um in einem Test programmgesteuert ein Ereignis auf einem Element auszulösen?

Zusammenfassung: Effektives Testen mit jQuery

Glückwunsch! Sie haben erkundet, wie Sie effektive Unit-Tests für verschiedene Bereiche Ihrer jQuery-Anwendungen schreiben.

Wir haben das Überprüfen von Änderungen am DOM sowie von Element-Eigenschaften und -Inhalten behandelt.
Wir haben gelernt, Benutzerinteraktionen zu simulieren und Event-Handler mithilfe von .trigger() zu testen.
Schließlich haben wir das Mocking von AJAX-Anfragen besprochen, um schnelle und zuverlässige Tests für asynchrone Vorgänge zu gewährleisten.

Diese Techniken sind entscheidend für die Entwicklung robusten und wartbaren jQuery-Codes.

Häufig gestellte Fragen

Ist die Lektion „Effektive jQuery-Tests schreiben“ kostenlos?

Ja — der vollständige Text von „Effektive jQuery-Tests schreiben“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des jQuery Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der jQuery Academy-Kurs umfasst insgesamt 3 Lektionen.

Was lerne ich in „Effektive jQuery-Tests schreiben“?

Üben Sie das Schreiben von Unit-Tests für DOM-Manipulationen, Event-Handler und AJAX-Aufrufe, um robuste und fehlerfreie jQuery-Komponenten sicherzustellen. Du übst jQuery Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um jQuery Academy zu starten?

Keine Vorkenntnisse erforderlich. jQuery Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 3.

Wie lange dauert die Lektion „Effektive jQuery-Tests schreiben“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser jQuery Academy-Lektion Code schreiben und ausführen?

Ja. Jede jQuery Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

← Zurück zu jQuery Academy