QUnit - Temel Kullanım

Şimdi size basit bir örnek kullanarak QUnit'te bir kickstart elde etmek için adım adım bir süreç göstereceğiz.

Qunit.js dosyasını içe aktar

Qunit kitaplığının qunit.js'si test çalıştırıcısını ve test çerçevesini temsil eder.

<script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>

Qunit.css dosyasını içe aktar

Qunit kütüphanesinin qunit.css dosyası, test sonuçlarını görüntülemek için test paketi sayfasını biçimlendirir.

<link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">

Fikstür Ekle

İki div öğesi ekleyin id = "qunit" ve "qunit-fixture". Bu div elemanlar gereklidir ve testler için fikstür sağlar.

<div id = "qunit"></div>
<div id = "qunit-fixture"></div>

Test Etmek İçin Bir İşlev Oluşturun

function square(x) {
   return x * x;
}

Bir Test Vakası Oluşturun

QUnit.test işlevine iki bağımsız değişkenle bir çağrı yapın.

Name - Test sonuçlarını görüntülemek için testin adı.
Function - Bir veya daha fazla iddiaya sahip fonksiyon test kodu.

QUnit.test( "TestSquare", function( assert ) {
   var result = square(2);
   assert.equal( result, "4", "square(2) should be 4." );
});

Testi çalıştırın

Şimdi kodun tamamını çalışırken görelim.

<html>
   <head>
      <meta charset = "utf-8">
      <title>QUnit basic example</title>
      <link rel = "stylesheet" href = "https://code.jquery.com/qunit/qunit-1.22.0.css">
      <script src = "https://code.jquery.com/qunit/qunit-1.22.0.js"></script>
   </head>
   
   <body>
      <div id = "qunit"></div>
      <div id = "qunit-fixture"></div> 
      
      <script>
         function square(x) {
            return x * x;
         }
         QUnit.test( "TestSquare", function( assert ) {
            var result = square(2);
            assert.equal( result, "4", "square(2) should be 4." );
         });
      </script>
   </body>
</html>

Sayfayı tarayıcıya yükleyin. Test koşucusu çağırırQUnit.test()sayfa yüklendiğinde ve testi bir kuyruğa eklediğinde. Test senaryosunun yürütülmesi ertelenir ve test çalıştırıcısı tarafından kontrol edilir.

Çıkışı Doğrulayın

Aşağıdaki sonucu görmelisiniz -

Header- Test paketi başlığı, tüm testler geçildiğinde yeşil bir çubuk olan sayfa başlığını görüntüler. Aksi takdirde, en az bir test başarısız olduğunda kırmızı bir çubuk, test sonuçlarını filtrelemek için üç onay kutusu olan bir çubuk ve tarayıcı ayrıntılarını görüntülemek için navigator.userAgent metnini içeren mavi bir çubuk.
Hide passed tests checkbox - Başarılı test senaryolarını gizlemek ve yalnızca başarısız test olaylarını sergilemek için.
Check for globals checkbox- Pencere nesnesindeki tüm özelliklerin listesini her testten önce ve sonra göstermek için, ardından farklılıkları kontrol edin. Özelliklerde değişiklik yapılması testi geçemeyecektir.
No try-catch checkbox - Test senaryolarını bir dene-yakala bloğunun dışında çalıştırmak, böylece bir testin bir istisna atması durumunda, test çalıştırıcısı ölür ve yerel istisna gösterir.
Summary- Test senaryolarını çalıştırmak için geçen toplam süreyi gösterir. Toplam test senaryoları çalıştırılır ve başarısız olur.
Contents- Test sonuçlarını gösterir. Her test sonucu, testin adına ve ardından başarısız, geçildi ve toplam iddialara sahiptir. Daha fazla ayrıntı almak için her giriş tıklanabilir.