QUnit - Hızlı Kılavuz

Test, uygulamanın işlevselliğini gereksinimlere göre çalışıp çalışmadığını kontrol etme ve geliştirici düzeyinde birim testinin devreye girmesini sağlama sürecidir. Birim testi, tek bir varlığın (sınıf veya yöntem) test edilmesidir. Birim testi, her yazılım kuruluşunun müşterilerine kaliteli ürünler sunması için çok önemlidir.

Ünite testi, aşağıdaki tabloda belirtildiği gibi iki şekilde yapılabilir.

Manuel test Otomatik test
Test senaryolarının herhangi bir araç desteği olmadan manuel olarak yürütülmesi manuel test olarak bilinir. Araç desteğini almak ve test senaryolarını otomasyon aracı kullanarak yürütmek, otomasyon testi olarak bilinir.
Zaman alıcı ve sıkıcı. Test senaryoları insan kaynakları tarafından yürütüldüğü için çok yavaş ve sıkıcıdır. Hızlı Otomasyon. Test senaryolarını insan kaynaklarından önemli ölçüde daha hızlı çalıştırır.
İnsan kaynaklarına büyük yatırım. Test senaryolarının manuel olarak yürütülmesi gerektiğinden, daha fazla sayıda test görevlisine ihtiyaç vardır. İnsan kaynaklarına daha az yatırım. Test senaryoları otomasyon aracı kullanılarak yürütülür, bu nedenle daha az sayıda test görevlisi gerekir.
İnsan hataları nedeniyle testler her seferinde hassas bir şekilde gerçekleştirilemeyebileceği için daha az güvenilir. Daha güvenilir. Otomasyon testleri, her çalıştırıldıklarında tam olarak aynı işlemi gerçekleştirir.
Programlanamaz. Gizli bilgileri getiren karmaşık testler yazmak için hiçbir programlama yapılamaz. Programlanabilir. Test uzmanları, gizli bilgileri ortaya çıkarmak için karmaşık testler programlayabilir.

QUnit nedir?

QUnit, JavaScript programlama dili için bir birim test çerçevesidir. Test odaklı geliştirmede önemlidir ve jQuery, jQuery UI ve jQuery Mobile projeleri tarafından kullanılır. QUnit, herhangi bir jenerik JavaScript kod tabanını test edebilir.

QUnit, önce test edilip sonra uygulanabilen bir kod parçası için test verilerini ayarlamaya vurgu yapan "önce test sonra kodlama" fikrini destekler. Bu yaklaşım "biraz test edin, biraz kodlayın, biraz test edin, biraz kodlayın ..." gibi, programcının üretkenliğini ve program kodunun kararlılığını artırarak programcının stresini ve hata ayıklamaya harcanan zamanı azaltır.

QUnit'in Özellikleri

QUnit, testleri yazmak ve çalıştırmak için kullanılan açık kaynaklı bir çerçevedir. Aşağıdakiler en belirgin özellikleridir -

  • QUnit, beklenen sonuçları test etmek için Onaylar sağlar.

  • QUnit, testleri çalıştırmak için Test fikstürleri sağlar.

  • QUnit testleri, kodun daha hızlı yazılmasına izin verir ve bu da kaliteyi artırır.

  • QUnit zarif ve basittir. Daha az karmaşıktır ve daha az zaman alır.

  • QUnit testleri otomatik olarak çalıştırılabilir ve kendi sonuçlarını kontrol eder ve anında geri bildirim sağlar. Test sonuçları raporunu manuel olarak taramanıza gerek yoktur.

  • QUnit testleri, test senaryolarını ve hatta diğer test gruplarını içeren test paketleri halinde organize edilebilir.

  • QUnit, testin ilerleyişini yeşil olan bir çubukta, test iyi giderse gösterir ve bir test başarısız olduğunda kırmızıya döner.

Birim Test Vakası nedir?

Birim Test Örneği, kodun (yöntemin) başka bir bölümünün beklendiği gibi çalışmasını sağlayan bir kod parçasıdır. İstenilen sonuçlara hızlı bir şekilde ulaşmak için test çerçevesi gereklidir. QUnit, JavaScript programlama dili için mükemmel bir birim test çerçevesidir.

Resmi bir yazılı birim test senaryosu, bilinen bir girdi ve test gerçekleştirilmeden önce üzerinde çalışılan beklenen bir çıktı ile karakterize edilir. Bilinen girdi bir ön koşulu test etmeli ve beklenen çıktı bir son koşulu test etmelidir.

Her gereksinim için en az iki birim test durumu olmalıdır: bir pozitif test ve bir negatif test. Bir gereksinimin alt gereksinimleri varsa, her alt gereksinim, pozitif ve negatif olmak üzere en az iki test durumuna sahip olmalıdır.

QUnit'i kullanmanın iki yolu vardır.

  • Local Installation - QUnit kitaplığını yerel makinenize indirebilir ve HTML kodunuza ekleyebilirsiniz.

  • CDN Based Version - QUnit kitaplığını HTML kodunuza doğrudan İçerik Dağıtım Ağı'ndan (CDN) dahil edebilirsiniz.

Yerel Kurulum

  • Şuraya git https://code.jquery.com/qunit/ mevcut en son sürümü indirmek için.

  • İndirilenleri yerleştirin qunit-git.js ve qunit-git.css dosya, web sitenizin bir dizininde, örneğin / jquery.

Misal

Dahil edebilirsiniz qunit-git.js ve qunit-git.css HTML dosyanızdaki dosyalar aşağıdaki gibidir -

<html> 
   <head> 
      <meta charset = "utf-8"> 
      <title>QUnit basic example</title> 
      <link rel = "stylesheet" href = "/jquery/qunit-git.css"> 
      <script src = "/jquery/qunit-git.js"></script> 
   </head> 
   
   <body> 
      <div id = "qunit"></div> 
      <div id = "qunit-fixture"></div>  
      <script> 
         QUnit.test( "My First Test", function( assert ) { 
            var value = "1"; 
            assert.equal( value, "1", "Value should be 1" ); 
         }); 
      </script> 
   </body> 
</html>

Bu, aşağıdaki sonucu verecektir -

CDN Tabanlı Sürüm

QUnit kitaplığını HTML kodunuza doğrudan İçerik Dağıtım Ağı'ndan (CDN) dahil edebilirsiniz.

Bu eğitim boyunca kitaplığın jQuery CDN sürümünü kullanıyoruz.

Misal

Yukarıdaki örneği jQuery CDN'den QUnit kitaplığını kullanarak yeniden yazalım.

<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>
         QUnit.test( "My First Test", function( assert ) {
            var value = "1";
            assert.equal( value, "1", "Value should be 1" );
         });
      </script>
   </body>
</html>

Bu, aşağıdaki sonucu verecektir -

Ş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.

QUnit'in önemli API'leri

QUnit'in önemli kategorilerinden bazıları -

Sr.No. Kategori İşlevsellik
1 İddia Bir dizi iddia yöntemi.
2 Eşzamansız Kontrol Eşzamansız işlemler için.
3 Geri aramalar QUnit'i CI sunucuları gibi diğer araçlara entegre ederken, bu geri çağırmalar test sonuçlarını okumak için bir API olarak kullanılabilir.
4 Yapılandırma ve Yardımcı Programlar Bu yöntemler ve özellikler, yardımcı program yardımcıları olarak ve QUnit'i yapılandırmak için kullanılır. Örneğin, çalışma zamanı davranışını doğrudan ayarlamak için, QUnit API'yi özel onaylamalar vb. Yoluyla genişletin.
5 Ölçek Test işlemleri için.

Kategori: Onaylama

Bir dizi iddia yöntemi sağlar.

Sr.No. Yöntemler ve Açıklama
1

async()

QUnit'e eşzamansız bir işlem için beklemesini söyleyin.
2

deepEqual()

İlkel türler, diziler, nesneler, düzenli ifadeler, tarihler ve işlevler üzerinde çalışan derin özyinelemeli bir karşılaştırma.
3

equal()

JUnit'in assertEquals'ına kabaca eşdeğer, katı olmayan bir karşılaştırma.
4

expect()

Bir test içinde kaç onay çalışmasının beklendiğini belirtin.
5

notDeepEqual()

İlkel türler, diziler, nesneler, normal ifadeler, tarihler ve işlevler üzerinde çalışan tersine çevrilmiş derin özyinelemeli karşılaştırma.
6

notEqual()

Eşitsizliği kontrol eden katı olmayan bir karşılaştırma.
7

notOk()

Ok () ve CommonJS'nin assert.ok () ifadesinin tersi olan ve JUnit'in assertFalse () değerine eşdeğer bir boole kontrolü. İlk argüman yanlışsa geçer.
8

notPropEqual()

Eşitsizliği kontrol ederek bir nesnenin kendi özelliklerinin katı bir karşılaştırması.
9

notStrictEqual()

Eşitsizliği kontrol eden katı bir karşılaştırma.
10

ok()

CommonJS'nin assert.ok () ve JUnit'in assertTrue () değerine eşdeğer bir boole kontrolü. İlk argüman doğruysa geçer.
11

propEqual()

Bir nesnenin kendi özelliklerinin katı bir tür ve değer karşılaştırması.
12

push()

Özel bir iddianın sonucunu bildirin.
13

strictEqual()

Kesin bir tür ve değer karşılaştırması.
14

throws()

Bir geri aramanın bir istisna atıp atmadığını test edin ve isteğe bağlı olarak atılan hatayı karşılaştırın.

Kategori: Eşzamansız Denetim

Bir dizi asenkron işlem sağlar.

Sr.No. Yöntemler ve Açıklama
1

async()

QUnit'e eşzamansız bir işlem için beklemesini söyleyin.
2

QUnit.asyncTest()

KULLANIMDAN KALDIRILDI: Çalıştırmak için zaman uyumsuz bir test ekleyin. Test, QUnit.start () için bir çağrı içermelidir.
3

QUnit.start()

KISMEN KULLANIMDAN KALDIRILDI: Test çalıştırıcısı durdurulduktan sonra testleri tekrar çalıştırmaya başlayın. Bkz QUnit.stop () ve QUnit.config.autostart.
4

QUnit.stop()

KULLANIMDAN KALDIRILDI: Devam etmeden önce test çalıştırıcısının beklemesi gereken QUnit.start () çağrılarının sayısını artırın.
5

QUnit.test()

Çalıştırmak için bir test ekleyin.

Kategori: Geri aramalar

QUnit'i CI sunucuları gibi diğer araçlara entegre ederken, bu geri çağırmalar test sonuçlarını okumak için bir API olarak kullanılabilir.

Sr.No. Yöntemler ve Açıklama
1

QUnit.begin()

Test paketi başladığında tetiklemek için bir geri arama kaydedin.
2

QUnit.done()

Test paketi sona erdiğinde tetiklenecek bir geri arama kaydedin.
3

QUnit.log()

Bir onaylama işlemi tamamlandığında tetiklenecek bir geri arama kaydedin.
4

QUnit.moduleDone()

Bir modül bittiğinde tetiklenecek bir geri arama kaydedin.
5

QUnit.moduleStart()

Bir modül başladığında tetiklemek için bir geri arama kaydedin.
6

QUnit.testDone()

Bir test bittiğinde tetiklemek için bir geri arama kaydedin.
7

QUnit.testStart()

Bir test başladığında tetiklemek için bir geri arama kaydedin.

Kategori: Yapılandırma ve Yardımcı Programlar

Bu yöntemler ve özellikler, yardımcı program yardımcıları olarak ve QUnit'i yapılandırmak için kullanılır. Örneğin, çalışma zamanı davranışını doğrudan ayarlamak için, QUnit API'yi özel onaylamalar vb. Yoluyla genişletin.

Sr.No. Yöntemler ve Açıklama
1

QUnit.assert

QUnit iddiaları için ad alanı.
2

QUnit.config

QUnit için yapılandırma.
3

QUnit.dump.parse()

JavaScript için gelişmiş ve genişletilebilir veri dökümü.
4

QUnit.extend()

Mixin nesnesi tarafından tanımlanan özellikleri hedef nesneye kopyalayın.
5

QUnit.init()

KULLANIMDAN KALDIRILDI: Test çalıştırıcısını yeniden başlatın.
6

QUnit.push()

KULLANIMDAN KALDIRILDI: Özel bir onaylamanın sonucunu bildirin.
7

QUnit.reset()

KULLANIMDAN KALDIRILDI: DOM'daki test fikstürünü sıfırlayın.
8

QUnit.stack()

Yığın izini (çağrı yığını) temsil eden tek satırlık bir dize döndürür.

Kategori: Test

Bir dizi test işlemi sağlar.

Sr.No. Yöntemler ve Açıklama
1

QUnit.assert

QUnit iddiaları için ad alanı.
2

QUnit.asyncTest()

KULLANIMDAN KALDIRILDI: Çalıştırmak için zaman uyumsuz bir test ekleyin. Test, QUnit.start () için bir çağrı içermelidir.
3

QUnit.module()

Grupla ilgili testleri tek bir etiket altında toplayın.
4

QUnit.only()

Özel olarak çalıştırılacak bir test ekler ve diğer tüm testlerin çalışmasını engeller.
5

QUnit.skip()

Atlanacak test benzeri bir nesne ekler.
6

QUnit.test()

Çalıştırılacak bir test ekler.

Tüm iddialar Onay Kategorisindedir.

Bu kategori, test yazmak için yararlı olan bir dizi onaylama yöntemi sağlar. Yalnızca başarısız iddialar kaydedilir.

Sr.No. Yöntemler ve Açıklama
1

async()

QUnit'e eşzamansız bir işlem için beklemesini söyleyin.
2

deepEqual()

İlkel türler, diziler, nesneler, düzenli ifadeler, tarihler ve işlevler üzerinde çalışan derin özyinelemeli bir karşılaştırma.
3

equal()

JUnit'in assertEquals'ına kabaca eşdeğer, katı olmayan bir karşılaştırma.
4

expect()

Bir test içinde kaç onay çalışmasının beklendiğini belirtin.
5

notDeepEqual()

İlkel türler, diziler, nesneler, normal ifadeler, tarihler ve işlevler üzerinde çalışan tersine çevrilmiş derin özyinelemeli karşılaştırma.
6

notEqual()

Eşitsizliği kontrol eden katı olmayan bir karşılaştırma.
7

notOk()

Ok () ve CommonJS'nin assert.ok () ifadesinin tersi olan ve JUnit'in assertFalse () değerine eşdeğer bir boole kontrolü. İlk argüman yanlışsa geçer.
8

notPropEqual()

Eşitsizliği kontrol ederek bir nesnenin kendi özelliklerinin katı bir karşılaştırması.
9

notStrictEqual()

Eşitsizliği kontrol eden katı bir karşılaştırma.
10

ok()

CommonJS'nin assert.ok () ve JUnit'in assertTrue () değerine eşdeğer bir boole kontrolü. İlk argüman doğruysa geçer.
11

propEqual()

Bir nesnenin kendi özelliklerinin katı bir tür ve değer karşılaştırması.
12

push()

Özel bir iddianın sonucunu bildirin.
13

strictEqual()

Kesin bir tür ve değer karşılaştırması.
14

throws()

Bir geri aramanın bir istisna atıp atmadığını test edin ve isteğe bağlı olarak atılan hatayı karşılaştırın.

Yukarıda belirtilen yöntemlerin çoğunu bir örnekte ele almaya çalışalım.

<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>
         QUnit.test( "TestSuite", function( assert ) {
            //test data
            var str1 = "abc";
            var str2 = "abc";
            var str3 = null;
            var val1 = 5;
            var val2 = 6;
            var expectedArray = ["one", "two", "three"];
            var resultArray =  ["one", "two", "three"];

            //Check that two objects are equal
            assert.equal(str1, str2, "Strings passed are equal.");
			
            //Check that two objects are not equal
            assert.notEqual(str1,str3, "Strings passed are not equal.");

            //Check that a condition is true
            assert.ok(val1 < val2, val1 + " is less than " + val2);
			
            //Check that a condition is false
            assert.notOk(val1 > val2, val2 + " is not less than " + val1);

            //Check whether two arrays are equal to each other.
            assert.deepEqual(expectedArray, resultArray ,"Arrays passed are equal.");
			
            //Check whether two arrays are equal to each other.
            assert.notDeepEqual(expectedArray, ["one", "two"],
               "Arrays passed are not equal.");			
         });
      </script>
   </body>
</html>

Çıkışı Doğrulayın

Aşağıdaki sonucu görmelisiniz -

Bu bölüm, hangi yöntemin önce ve sonra hangisinin çağrıldığını belirten QUnit'teki yöntemlerin yürütme prosedürünü açıklar. Aşağıda, QUnit test API yöntemlerinin çalıştırma prosedürü bir örnekle verilmiştir.

<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>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		 		 
         QUnit.module( "Module B" );		
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });		 
      </script>
   </body>
</html>

Çıkışı Doğrulayın

Aşağıdaki sonucu görmelisiniz -

QUnit yürütme prosedürü budur.

  • Modül, test durumlarını gruplamak için kullanılır.

  • beforeEach() yöntem her test senaryosu için ancak test senaryosu yürütülmeden önce yürütülür.

  • afterEach() yöntem, her test senaryosu için, ancak test senaryosunun yürütülmesinden sonra yürütülür.

  • Arasında beforeEach() ve afterEach() her test senaryosu yürütülür.

  • Aranıyor QUnit.module() yine, daha önce başka bir modül tarafından tanımlanan herhangi bir beforeEach / afterEach işlevini sıfırlamanız yeterlidir.

Bazen kodumuz hazır değildir ve bu yöntemi / kodu test etmek için yazılan test senaryosu çalıştırılırsa başarısız olur. QUnit.skipbu konuda yardımcı olur. Skip yöntemi kullanılarak yazılan bir test yöntemi çalıştırılmayacaktır. Skip yöntemini iş başında 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>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.skip( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		 		 
         QUnit.module( "Module B" );		
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });
         
         QUnit.skip( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });		 
      </script>
   </body>
</html>

Çıkışı Doğrulayın

Aşağıdaki sonucu görmelisiniz -

Bazen kodumuz hazır değildir ve çalıştırılırsa bu yöntemi / kodu test etmek için yazılmış test senaryosu başarısız olur. QUnit.onlybu konuda yardımcı olur. Yalnızca yöntem kullanılarak yazılmış bir test yöntemi yürütülürken diğer testler çalışmayacaktır. Yalnızca birden fazla yöntem belirtilirse, yalnızca birincisi yürütülür. Sadece yöntem eylemde 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>
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.only( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		      
         QUnit.test( "test case 3", function( assert ) {
            assert.ok( true, "Module A: in test case 3" );
         });
		 
         QUnit.test( "test case 4", function( assert ) {
            assert.ok( true, "Module A: in test case 4" );
         });	 
      </script>
   </body>
</html>

Çıkışı Doğrulayın

Aşağıdaki sonucu görmelisiniz -

İçindeki her zaman uyumsuz işlem için QUnit.test() geri arama, kullanım assert.async(), işlem tamamlandığında çağrılması gereken bir "tamamlandı" işlevi döndürür. assert.async () çağrı sayılarını bir parametre olarak kabul eder. Assert.async () işlevinden döndürülen geri arama, sağlanmışsa, kabul edilen arama sayısından daha fazla çağrılırsa bir Hata atar. Her biridone()çağrı, çağrı sayısına eklenir. Her görüşme tamamlandıktan sonra test yapılır.

<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>
         QUnit.test( "multiple call test()", function( assert ) {
            var done = assert.async( 3 );
            
            setTimeout(function() {
               assert.ok( true, "first callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "second callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "third callback." );
               done();
            }, 500 );
         });		 
      </script>
   </body>
</html>

Çıkışı Doğrulayın

Aşağıdaki sonucu görmelisiniz -

Kullanabiliriz assert.expect()Testte yapılan iddiaların sayısını kontrol etme işlevi. Aşağıdaki örnekte, testte üç iddiada bulunulmasını bekliyoruz.

<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>
         QUnit.test( "multiple call test()", function( assert ) {
            assert.expect( 3 );
            var done = assert.async( 3 );
            
            setTimeout(function() {
               assert.ok( true, "first callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "second callback." );
               done();
            }, 500 );

            setTimeout(function() {
               assert.ok( true, "third callback." );
               done();
            }, 500 );
         });		 
      </script>
   </body>
</html>

Çıkışı Doğrulayın

Aşağıdaki sonucu görmelisiniz -

QUnit'i CI sunucuları gibi diğer araçlara entegre ederken, bu geri çağırmalar test sonuçlarını okumak için bir API olarak kullanılabilir. Aşağıda, QUnit geri arama API yönteminin yürütme prosedürü bir örnekle verilmiştir.

<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>
         //Register a callback to fire whenever a testsuite starts.
         QUnit.begin(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = "<br/>" + 
               "QUnit.begin- Test Suite Begins " + "<br/>" + 
               "Total Test: " + details.totalTests;
         });

         //Register a callback to fire whenever a test suite ends.		 
         QUnit.done(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.done - Test Suite Finised" +  "<br/>" + "Total: " +  
               details.total + " Failed: " + details.failed + " Passed: 
               " + details.passed;
         });
		 
         //Register a callback to fire whenever a module starts.
            QUnit.moduleStart(function( details ) {
               var data = document.getElementById("console").innerHTML;
               document.getElementById("console").innerHTML = data + "<br/><br/>" + 
                  "QUnit.moduleStart - Module Begins " +  "<br/>" + details.name;
         });
		 
         //Register a callback to fire whenever a module ends.	  
         QUnit.moduleDone(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.moduleDone - Module Finished " +  "<br/>" + details.name + 
               " Failed/total: " + details.failed +"/" + details.total ;
         });
		 
         //Register a callback to fire whenever a test starts.
         QUnit.testStart(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.testStart - Test Begins " +  "<br/>" + details.module +" 
               " + details.name;
         });
		 
         //Register a callback to fire whenever a test ends.
         QUnit.testDone(function( details ) {
            var data = document.getElementById("console").innerHTML;
            document.getElementById("console").innerHTML = data + "<br/><br/>" + 
               "QUnit.testDone - Test Finished " +  "<br/>" + details.module +" " 
               + details.name + "Failed/total: " + details.failed +" " + details.total+ 
               " "+ details.duration;
         });
		 
         QUnit.module( "Module A", {
            beforeEach: function( assert ) {
               assert.ok( true, "before test case" );
            }, afterEach: function( assert ) {
               assert.ok( true, "after test case" );
            }
         });
         
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module A: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module A: in test case 2" );
         });
		 		 
         QUnit.module( "Module B" );		
         QUnit.test( "test case 1", function( assert ) {
            assert.ok( true, "Module B: in test case 1" );
         });
         
         QUnit.test( "test case 2", function( assert ) {
            assert.ok( true, "Module B: in test case 2" );
         });	 
      </script>

      <div id = "console" ></div>
   </body>
</html>

Çıkışı Doğrulayın

Aşağıdaki sonucu görmelisiniz -

Gruplanmış test işlevlerine sahip modüller, yuvalanmış modülleri tanımlamak için kullanılır. QUnit, ilk olarak bildirilmiş olsalar bile, iç içe geçmiş modüllerde derinlemesine gitmeden önce üst modül üzerinde testler çalıştırın. beforeEach ve afterEachYuvalanmış bir modül çağrısındaki geri çağırmalar, LIFO (Son Giren, İlk Çıkar) Modunda üst kancalara yığılır. Bağımsız değişken ve kancaları kullanarak her testten önce ve sonra çalıştırılacak kodu belirtebilirsiniz.

Hook'lar ayrıca her testin bağlamında paylaşılacak özellikler oluşturmak için de kullanılabilir. Hooks nesnesindeki herhangi bir ek özellik bu bağlama eklenecektir. Geri arama bağımsız değişkeniyle QUnit.module'ü çağırırsanız, hooks bağımsız değişkeni isteğe bağlıdır.

Modülün geri çağrısı, ortamın özellikleri modülün testlerine, kancalarına ve iç içe modüllere kopyalanmış olarak test ortamı olarak içeriğe sahip olarak çağrılır.

<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>
         QUnit.module( "parent module", function( hooks ) {
            hooks.beforeEach( function( assert ) {
               assert.ok( true, "beforeEach called" );
            });

            hooks.afterEach( function( assert ) {
               assert.ok( true, "afterEach called" );
            });

            QUnit.test( "hook test 1", function( assert ) {
               assert.expect( 2 );
            });

            QUnit.module( "nested hook module", function( hooks ) {
               // This will run after the parent module's beforeEach hook
               hooks.beforeEach( function( assert ) {
                  assert.ok( true, "nested beforeEach called" );
               });

               // This will run before the parent module's afterEach
               hooks.afterEach( function( assert ) {
                  assert.ok( true, "nested afterEach called" );
               });

               QUnit.test( "hook test 2", function( assert ) {
                  assert.expect( 4 );
               });
            });
         });
      </script>

      <div id = "console" ></div>
   </body>
</html>

Çıkışı Doğrulayın

Aşağıdaki sonucu görmelisiniz -

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved