7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Code
  2. Web Development

Cara untuk menguji kode JavaScript Anda dengan QUnit

Scroll to top
Read Time: 10 mins

Indonesian (Bahasa Indonesia) translation by Amar Shaleh (you can also view the original English article)

QUnit, dikembangkan oleh tim jQuery, adalah framework bagus untuk unit testing JavaScript Anda. Dalam tutorial ini, saya akan memperkenalkan apa itu QUnit secara khusus, dan mengapa Anda harus peduli tentang menguji kode Anda.

Apa yang dimaksud dengan QUnit

QUnit adalah JavaScript unit testing framework yang kuat yang membantu Anda untuk debug kode. Ini ditulis oleh anggota tim jQuery, dan suite resmi uji untuk jQuery. Tapi QUnit cukup umum untuk menguji kode JavaScript biasa, dan bahkan dapat menguji server-side JavaScript melalui beberapa engine JavaScript seperti Rhino atau V8.

Jika Anda tidak terbiasa dengan gagasan "unit testing", jangan khawatir. Hal ini tidak terlalu sulit untuk mengerti:

Dalam pemrograman komputer, unit testing adalah perangkat lunak verifikasi dan validasi metode di mana seorang programmer tes jika individual unit kode sumber adalah cocok untuk digunakan. Unit adalah bagian tes terkecil dari aplikasi. Dalam pemrograman prosedural unit mungkin fungsi individu atau prosedur.

Ini dikutip dari Wikipedia. Secara sederhana, Anda menulis tes untuk setiap fungsi dari kode Anda, dan jika semua tes ini sukses, Anda dapat yakin bahwa kode akan bug-free (sebagian besar, tergantung pada bagaimana menyeluruh tes Anda).

Mengapa Anda harus menguji kode Anda

Jika Anda belum menulis setiap unit test sebelumnya, Anda mungkin hanya menerapkan kode ke situs web secara langsung, klik untuk sementara untuk melihat apakah masalah terjadi, dan mencoba untuk memperbaikinya karena Anda melihat satu. Ada banyak masalah dengan metode ini.

Pertama, itu sangat membosankan. Mengklik sebenarnya bukanlah pekerjaan mudah, karena Anda harus memastikan bahwa segala sesuatu diklik dan kemungkinan besar Anda akan kehilangan satu hal atau dua. Kedua, semua yang Anda lakukan untuk pengujian ini tidak dapat digunakan kembali, yang berarti hal ini tidak mudah untuk menemukan regresi. Apa itu regresi? Bayangkan bahwa Anda menulis beberapa kode dan diuji, memperbaiki semua bug yang ditemukan, dan menerbitkannya. Kemudian, pengguna mengirimkan umpan balik tentang bug baru, dan meminta beberapa fitur baru. Anda pergi kembali ke kode, memperbaiki bug baru ini dan menambahkan fitur baru ini. Apa yang mungkin terjadi selanjutnya adalah bahwa beberapa bug lama datang lagi, yang disebut "regresi." Lihat, sekarang Anda harus melakukan klik lagi, dan kemungkinan besar Anda tidak akan menemukan bug ini lama lagi; bahkan jika Anda melakukannya, itu akan mengambil beberapa saat sebelum Anda mengetahui bahwa masalah ini disebabkan oleh regresi. Dengan unit testing, Anda menulis tes untuk menemukan bug, dan setelah kode diubah, Anda filter itu melalui tes lagi. Jika muncul regresi, beberapa tes pasti akan gagal, dan Anda dapat dengan mudah melihat mereka, mengetahui bagian mana dari kode mengandung bug. Karena Anda tahu apa yang baru saja memodifikasi, dapat dengan mudah diperbaiki.

Keuntungan lain dari unit testing adalah terutama untuk pengembangan web: ini memudahkan pengujian cross-broweser compatibility. Hanya menjalankan tes Anda pada browser yang berbeda, dan jika terjadi masalah pada satu browser, Anda memperbaikinya dan menjalankan tes ini lagi, membuat yakin itu tidak memperkenalkan regresi pada browser yang lain. Anda dapat yakin bahwa semua target browser yang didukung, setelah mereka semua melewati tes.

Saya ingin menyebutkan salah satu proyek John Resig's: TestSwarm. Membuat JavaScript unit pengujian untuk tingkat yang baru, dengan membuatnya didistribusikan. Ini adalah website yang berisi banyak tes, siapa pun bisa pergi ke sana, menjalankan beberapa tes, kemudian kembali hasilnya kembali ke server. Dengan cara ini, kode dapat diuji pada browser yang berbeda dan bahkan berbeda platform benar-benar cepat.

Bagaimana menulis Unit Test dengan QUnit

Jadi bagaimana Anda menulis unit test dengan QUnit sebenarnya? Pertama, Anda perlu mengatur lingkungan pengujian:

Seperti yang Anda lihat, versi host dari QUnit framework digunakan di sini.

Kode yang akan diuji harus dimasukkan ke dalam myProject.js, dan tes Anda harus dimasukkan ke dalam myTests.js. Untuk menjalankan tes ini, cukup membuka file HTML ini dalam browser. Sekarang saatnya untuk menulis beberapa tes.

Blok bangunan unit test adalah assertion.

Assertion ini adalah pernyataan yang memprediksi hasil kembalian kode Anda. Jika prediksi false, assertion telah gagal, dan Anda tahu bahwa sesuatu yang salah.

Untuk menjalankan assertion, Anda harus memasukkannya ke dalam test case:

Di sini kita didefinisikan fungsi, isEven, yang mendeteksi apakah sebuah bilangan merupakan even, dan kami ingin menguji fungsi ini untuk memastikan tidak mengembalikan jawaban yang salah.

Kami pertama memanggil test(), yang membangun test case; parameter pertama adalah string yang akan ditampilkan dalam hasil, dan parameter kedua merupakan fungsi callback yang berisi assertion kami. Fungsi callback ini akan dipanggil sekali QUnit dijalankan.

Kami menulis lima assetion, yang semuanya boolean. Pernyataan boolean mengharapkan parameter pertamanya untuk menjadi true. Parameter kedua adalah juga pesan yang akan ditampilkan dalam hasil.

Berikut adalah apa yang Anda dapatkan, setelah Anda menjalankan tes:

a test for isEven()a test for isEven()a test for isEven()

Karena semua assertion ini telah berhasil, kita dapat cukup yakin bahwa isEven() akan bekerja seperti yang diharapkan.

Mari kita lihat apa yang terjadi jika assertion telah gagal.

Inilah hasilnya:

a test contains failed assertion for isEven()a test contains failed assertion for isEven()a test contains failed assertion for isEven()

Pernyataan telah gagal karena kami sengaja menulis salah, tetapi dalam proyek Anda sendiri, jika tidak lulus tes, dan semua pernyataan benar, Anda tahu bug telah ditemukan.

Assertion lain

ok() ini tidak hanya assertion yang disediakan QUnit. Ada jenis lain dari assertion yang berguna ketika pengujian proyek Anda:

Perbandingan Assertion

Perbandingan assertion, equals(), mengharapkan parameter pertamanya (yang merupakan nilai aktual) sama dengan parameter kedua (yang merupakan nilai yang diharapkan). Hal ini mirip dengan ok(), tetapi output keduanya aktual dan nilai-nilai diharapkan, membuat debugging jauh lebih mudah. Seperti ok(), dibutuhkan parameter opsional ketiga sebagai pesan akan ditampilkan.

Jadi alih-alih:

a boolean assertiona boolean assertiona boolean assertion

Anda harus menulis:

a comparison assertiona comparison assertiona comparison assertion

Perhatikan terakhir "1", yang merupakan nilai perbandingan.

Dan jika nilai berikut tidak sama:

a failed comparison assertiona failed comparison assertiona failed comparison assertion

Ini memberikan lebih banyak informasi, membuat hidup jauh lebih mudah.

Perbandingan penegasan menggunakan "==" untuk membandingkan parameternya, sehingga ia tidak menangani perbandingan array atau objek:

Untuk menguji jenis kesetaraan, QUnit menyediakan penilaian jenis lain: assertion identik.

Identik Assertion

Assertion yang identik, same(), mengharapkan parameter yang sama sebagai equals(), tetapi itu adalah pernyataan perbandingan rekursif mendalam yang bekerja tidak hanya pada tipe primitif, tetapi juga array dan objek. Pernyataan-pernyataan, dalam contoh sebelumnya, akan sukses semua jika Anda mengubah mereka ke identik assertion:

Perhatikan bahwa same() menggunakan ' ===' untuk melakukan perbandingan bila mungkin, sehingga ia akan datang di berguna ketika membandingkan nilai-nilai khusus:

Struktur Assertion Anda

Menempatkan semua assertion dalam satu kasus uji adalah ide yang sangat buruk, karena sangat sulit untuk mempertahankan, dan tidak mengembalikan hasil yang bersih. Apa yang harus Anda lakukan adalah untuk struktur mereka, menempatkan mereka dalam kasus-kasus uji yang berbeda, setiap bertujuan untuk fungsi tunggal.

Anda bahkan dapat mengatur kasus uji ke dalam modul yang berbeda dengan memanggil fungsi modul:

structure assertionsstructure assertionsstructure assertions

Tes Asynchronous

Dalam contoh sebelumnya, semua assertion dipanggil synchronously, yang berarti mereka berjalan satu demi satu. Di dunia nyata, ada juga banyak fungsi yang asynchronous, seperti ajax panggilan atau fungsi disebut oleh setTimeout () dan setInterval (). Bagaimana kita dapat menguji jenis fungsi? QUnit menyediakan jenis khusus kasus uji yang disebut "asynchronous tes," yang didedikasikan untuk asynchronous pengujian:

Mari kita pertama kali mencoba untuk menulis secara normal:

an incorrent example of asychronous testan incorrent example of asychronous testan incorrent example of asychronous test

Lihat? Ianya seolah-olah kita tidak menulis pernyataan apapun. Hal ini karena assertion asynchronously, pada saat itu dipanggil, kasus uji sudah selesai.

Berikut ini adalah versi yang benar:

a correct example of asychronous testa correct example of asychronous testa correct example of asychronous test

Di sini, kami menggunakan stop() untuk menunda kasus uji, dan setelah assertion dipanggil, kita menggunakan start() untuk melanjutkan.

Memanggil stop() segera setelah panggilan test() sangat umum; sehingga QUnit menyediakan jalan pintas: asyncTest(). Anda dapat menulis ulang contoh sebelumnya seperti ini:

Ada satu hal yang perlu diperhatikan: setTimeout () akan selalu memanggil fungsi callback, tapi bagaimana jika fungsi kustom (misalnya, panggilan ajax). Bagaimana Anda dapat yakin fungsi calback akan dipanggil? Dan jika callback tidak dipanggil, start() tidak akan dipanggil, dan seluruh unit pengujian akan menggantung:

unit testing hangsunit testing hangsunit testing hangs

Jadi di sini adalah apa yang Anda lakukan:

Anda memasukan timeout ke stop(), yang menceritakan QUnit, "jika start() tidak dipanggil setelah timeout itu, Anda harus gagal tes ini." Anda dapat yakin bahwa seluruh pengujian tidak menggantung dan Anda akan diberitahu jika sesuatu yang tidak beres.

Bagaimana tentang beberapa asynchronous fungsi? Di mana Anda menempatkan start()? Anda meletakkannya di setTimeout ():

Batas waktu harus cukup cukup lama untuk memungkinkan kedua callback untuk dipanggil sebelum tes berlanjut. Tapi bagaimana jika salah satu callback tidak dipanggil? Bagaimana Anda bisa tahu itu? Ini adalah tempat expect() datang:

Anda memasukan dalam sejumlah untuk expect() untuk memberitahu QUnit yang Anda harapkan X banyak assertion untuk menjalankan, jika salah satu pernyataan tidak dipanggil, nomor akan tidak cocok, dan Anda akan diberitahu bahwa sesuatu ada yang salah.

Ada juga cara pintas untuk expect(): Anda hanya memasukan angka sebagai parameter kedua ke test() atau asyncTest():

Kesimpulan

Itu saja yang perlu Anda ketahui untuk mendapatkan dimulai witih QUnit. Unit testing merupakan metode yang bagus untuk menguji kode Anda sebelum mempublikasikannya. Jika Anda belum ditulis setiap unit test sebelumnya, sudah waktunya untuk memulai! Terima kasih untuk membaca!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.