jQuery Academy · Ders

Etkili jQuery Testleri Yazma

jQuery bileşenlerinizin sağlam ve hatasız olmasını sağlamak için DOM değişiklikleri, olay işleyicileri ve AJAX çağrıları için birim testleri yazma pratiği yapın.

Etkili jQuery Testleri Yazma, CoddyKit'te ücretsiz bir jQuery Academy dersidir. Bu, 3 dersinin 3. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, jQuery Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. jQuery Academy kursu toplamda 3 dersten oluşur.

jQuery Testi Yazmada Uzmanlaşma

Hoş geldiniz! Bu derste jQuery uygulamalarınız için etkili birim testleri yazmayı derinlemesine inceleyeceğiz. DOM değişikliklerini, olay yönetimini ve eşzamansız AJAX çağrılarını doğrulamaya yönelik pratik stratejilere odaklanacağız.

Sağlam testler, kodunuzun beklendiği gibi çalışmasını sağlar ve projeniz geliştikçe gerilemeleri önlemeye yardımcı olur.

DOM Değişikliklerini Doğrulama

jQuery kodunuz Document Object Model'i (DOM) değiştirdiğinde testleriniz bu değişiklikleri doğrulamalıdır. Buna öğe oluşturma, kaldırma, öznitelik değişiklikleri veya metin güncellemelerini kontrol etmek dahildir.

Genellikle işlemden sonra öğeyi seçer ve özelliklerini doğrularsınız.

<!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 Testlerini Yalıtma

Güvenilir DOM testleri için her testin temiz ve yalıtılmış bir ortamda çalışmasını sağlamak çok önemlidir. Çoğu test çerçevesi beforeEach ve afterEach kancalarını sunar.

beforeEach: Yeni bir test için başlangıç DOM durumunu hazırlar.
afterEach: Testin yaptığı tüm DOM değişikliklerini temizler.

Bu, testlerin birbirini etkilemesini önler.

Sınıf Değişikliklerini Test Etme

Yaygın bir DOM değişikliğini test edelim: CSS sınıfları ekleme veya kaldırma. jQuery işleviniz çalıştıktan sonra bir öğenin belirli bir sınıfa sahip olup olmadığını .hasClass() ile doğrulayabilirsiniz.

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

Kullanıcı Olaylarını Taklit Etme

Olay işleyicilerini test etmek için kullanıcı etkileşimlerini taklit etmeniz gerekir. jQuery'nin .trigger() yöntemi bunun için idealdir. Seçilen bir öğede 'click', 'submit' ve 'change' gibi herhangi bir olayı tetikleyebilir.

Olayı tetikledikten sonra DOM değişiklikleri veya işlev çağrıları gibi beklenen sonucu doğrularsınız.

Tıklama Olayını Doğrulama

Bir tıklama olayının kullanıcı arayüzünüzün bir bölümünü doğru şekilde güncelleyip güncellemediğini şöyle test edebilirsiniz. Bir tıklamayı tetikleyecek, ardından öğenin yeni metin içeriğini kontrol edeceğiz.

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

Olay Durumu için Doğrulamalar

Olay işleyicileri çoğu zaman yalnızca DOM'u değiştirmekle kalmaz; veri özniteliklerini veya uygulamanın dahili durumunu da güncelleyebilir. Testleriniz bu daha az görünür değişiklikleri de doğrulamalıdır.

Bir olaydan sonra .data() değerlerini veya diğer özellikleri kontrol edebilirsiniz.

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

Eşzamansız AJAX'ı Test Etme

Gerçek AJAX çağrılarını test etmek yavaş, güvenilmez olabilir ve dış hizmetlere bağlı kalabilir. Çözüm, AJAX isteklerinizi taklit etmektir.

Taklit etme, gerçek ağ çağrısını denetimli ve önceden tanımlanmış bir yanıtla değiştirmek anlamına gelir. Bu sayede testleriniz hızlı ve tutarlı şekilde çalışır, yalnızca istemci tarafı mantığınıza odaklanır.

AJAX Taklitleri Uygulama

Sinon.js gibi araçları kullanabilir veya basit durumlarda jQuery'nin AJAX davranışını geçersiz kılabilirsiniz. Test amacıyla başarılı bir AJAX yanıtını taklit etmenin temel bir yolu, $.ajax davranışını geçici olarak değiştirmek ya da bir taklit kitaplığı kullanmaktır.

Burada gerçek bir ağ isteği göndermeden başarı geri çağrısını taklit edeceğiz.

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

Hızlı Denetim

DOM değişikliklerini, olayları ve AJAX'ı test etmeyi öğrendiniz. Bir testte bir öğe üzerindeki olayı program aracılığıyla tetiklemek için genellikle hangi jQuery yöntemi kullanılır?

Özet: Etkili jQuery Testi

Tebrikler! jQuery uygulamalarınızın çeşitli yönleri için etkili birim testleri yazmayı incelediniz.

DOM değişikliklerini doğrulamayı, öğe özelliklerini ve içeriğini kontrol etmeyi ele aldık.
Kullanıcı etkileşimlerini taklit etmeyi ve .trigger() kullanarak olay işleyicilerini test etmeyi öğrendik.
Son olarak, eşzamansız işlemler için hızlı ve güvenilir testler sağlamak amacıyla AJAX isteklerini taklit etmeyi ele aldık.

Bu teknikler, sağlam ve bakımı kolay jQuery kodu oluşturmak için hayati önem taşır.

Sıkça Sorulan Sorular

“Etkili jQuery Testleri Yazma” dersi ücretsiz mi?

Evet — “Etkili jQuery Testleri Yazma” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve jQuery Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. jQuery Academy kursu toplamda 3 dersten oluşur.

“Etkili jQuery Testleri Yazma” dersinde ne öğreneceğim?

jQuery bileşenlerinizin sağlam ve hatasız olmasını sağlamak için DOM değişiklikleri, olay işleyicileri ve AJAX çağrıları için birim testleri yazma pratiği yapın. jQuery Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

jQuery Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te jQuery Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 3 dersinin 3. dersidir.

“Etkili jQuery Testleri Yazma” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu jQuery Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her jQuery Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← jQuery Academy Sayfasına Dön