Melakukan Pengujian jQuery Ajax Di QUnit


Sesuai dengan namanya, unit testing adalah pengujian yang dilakukan pada satuan atau unit terkecil dari kode program. Unit lainnya sebisa mungkin dianggap konstan atau tidak berubah. Dengan demikian, bila terjadi kegagalan pengujian pada sebuah unit, developer bisa yakin bahwa penyebab kegagalan terjadi pada unit tersebut (bukan pada unit lain yang mungkin dipanggil). Untuk membuat unit lain menjadi konstan, developer dapat menerapkan teknik seperti mocking dan stubbing.

Sebagai contoh, anggap saja saya perlu menguji kode program JavaScript seperti berikut ini:

function simpan(data, callback) {      
  $.ajax({
    url: 'simpan',
    type: 'POST',
    data: JSON.stringify(data),
    contentType: 'application/json; charset=utf-8',
    success: function(hasil) {
      if (hasil.ok) {
        data.id = hasil.id;
      }
      callback();          
    }
  });      
}

Function di atas akan memakai $.ajax dari jQuery untuk mengirim sebuah object yang hendak disimpan dalam bentuk JSON ke server. Setelah nilai dikembalikan dari server secara asynchronous, maka function callback() akan dikerjakan dimana argumen hasil berisi informasi dari server. Bila proses penyimpanan sukses, maka nilai hasil.ok adalah true. Selain itu, atribut id dari object akan di-isi dengan sebuah nilai yang dihasilkan secara otomatis oleh server. Bila server gagal melakukan penyimpanan, maka nilai hasil.ok adalah false.

Untuk memastikan apakah kode program yang saya buat sudah memenuhi skenario yang ditetapkan, saya perlu membuat pengujian QUnit dalam bentuk sebuah file HTML, misalnya seperti berikut ini:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Latihan</title>  
  <script src="jquery.js"></script>  
  <link rel="stylesheet" href="qunit.css" media="screen">  
  <script src="qunit.js"></script>      
  <script>
    function simpan(data, callback) {      
      $.ajax({
        url: 'simpan',
        type: 'POST',
        data: JSON.stringify(data),
        contentType: 'application/json; charset=utf-8',
        success: function(hasil) {
          if (hasil.ok) {
            data.id = hasil.id;
          }
          callback();          
        }
      });      
    }

    QUnit.test('simpan(data) sukses', function(assert) {
      var mahasiswa = { nama: 'Solid Snake', usia: 27 };
      simpan(mahasiswa, function(hasil) {
        assert.equal(hasil.ok, true, 'Nilai hasil.ok harus true bila penyimpanan sukses')
        assert.ok(mahasiswa.id !== undefined, 'Nilai id harus terisi');  
      });            
    });

    QUnit.test('simpan(data) gagal', function(assert) {
      var mahasiswa = { nama: 'Solid Snake', usia: 27 };
      simpan(mahasiswa, function(hasil) {
        assert.equal(hasil.ok, false, 'Nilai hasil.ok harus false bila penyimpanan gagal');
        assert.ok(mahasiswa.id === undefined, 'Nilai id harus masih kosong');        
      });            
    });
  </script>    
</head>
<body>  
  <div id="qunit"></div>  
</body>
</html>

Akan tetapi, bila saya menjalankan pengujian dengan membuka file HTML tersebut di browser, saya akan menemukan pesan kegagalan seperti pada gambar berikut ini:

Pengujian yang gagal

Pengujian yang gagal

Hal ini terjadi karena request Ajax tidak dilakukan sehingga callback() tidak pernah dipanggil. Untuk membuat pengujian sukses, saya perlu memperoleh hasil kembalian dari server. Akan tetapi karena ini adalah unit test, saya tidak ingin ada pemanggilan ke server secara nyata pada saat pengujian dilakukan. Oleh sebab itu, saya perlu mensimulasikan kembalian dari server.

Beruntungnya, karena JavaScript adalah bahasa yang dinamis, melakukan stubbing secara mudah bukanlah hal yang mustahil. Salah satu cara yang paling mudah adalah mengganti method jQuery.ajax() dengan method yang langsung memanggil success. Sebagai contoh, saya bisa mengubah test case saya menjadi seperti berikut ini:

QUnit.test('simpan(data) sukses', function(assert) {      
  var mahasiswa = { nama: 'Solid Snake', usia: 27 };
  jQuery.ajax = function(args) {
    args.success({ok: true, id: 999});
  } 
  simpan(mahasiswa, function(hasil) {
    assert.equal(hasil.ok, true, 'Nilai hasil.ok harus true bila penyimpanan sukses')
    assert.ok(mahasiswa.id !== undefined, 'Nilai id harus terisi');  
  });            
});

QUnit.test('simpan(data) gagal', function(assert) {
  var mahasiswa = { nama: 'Solid Snake', usia: 27 };
  jQuery.ajax = function(args) {
    args.success({ok: false});
  }
  simpan(mahasiswa, function(hasil) {
    assert.equal(hasil.ok, false, 'Nilai hasil.ok harus false bila penyimpanan gagal');
    assert.ok(mahasiswa.id === undefined, 'Nilai id harus masih kosong');        
  });            
});

Pada kasus sukses, saya membuat seolah-olah server mengirimkan respon berupa {ok: true, id: 999}. Pada kasus gagal, saya menganggap server mengirimkan respon berupa {ok: false}. Sekarang, bila saya menjalankan pengujian, semuanya akan sukses seperti pada gambar berikut ini:

Pengujian sukses setelah men-stub method jQuery.ajax()

Pengujian sukses setelah men-stub method jQuery.ajax()

Perihal Solid Snake
I'm nothing...

Apa komentar Anda?

Please log in using one of these methods to post your comment:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: