Ujian Unit JavaScript anda menggunakan mocha dan chai

di bawah:

<!-- load your test files here -->

Sebaik sahaja anda telah menambah skrip, anda boleh memuatkan halaman Runner Ujian dalam penyemak imbas pilihan anda.

Hasil ujian

Apabila anda menjalankan ujian anda, hasil ujian akan kelihatan seperti ini:

Perhatikan bahawa apa yang kita masukkan ke dalam menggambarkan dan fungsi IT muncul dalam output - ujian dikelompokkan di bawah keterangan. Perhatikan bahawa ia juga mungkin untuk Nest menerangkan blok untuk membuat sub-kumpulan selanjutnya.

mari kita lihat bagaimana ujian gagal.

pada baris dalam ujian yang mengatakan:

assert.equal(arr.length, 0);

Gantikan nombor 0 dengan 1. Ini menjadikan ujian gagal, kerana panjang array tidak lagi sesuai dengan nilai yang diharapkan.

Jika anda menjalankan ujian lagi, anda akan melihat ujian gagal dengan warna merah dengan perihalan apa yang salah.

Salah satu manfaat ujian ialah mereka membantu anda mencari pepijat lebih cepat, namun kesilapan ini tidak begitu membantu dalam hal itu. Kita boleh memperbaikinya.

Kebanyakan fungsi penegasan juga boleh mengambil parameter mesej pilihan. Ini adalah mesej yang dipaparkan apabila penegasan gagal. Adalah idea yang baik untuk menggunakan parameter ini untuk membuat mesej ralat lebih mudah difahami.

kita boleh menambah mesej kepada pernyataan kita seperti:

Jika anda menjalankan semula ujian, mesej tersuai akan muncul dan bukannya lalai.

assert.equal(arr.length, 1, 'Array length was not 0');

mari kita menukar pernyataan kembali ke arahnya - ganti 1 dengan 0, dan jalankan ujian sekali lagi untuk memastikan mereka lulus.

meletakkannya bersama

Setakat ini kami telah melihat contoh yang agak mudah. Mari kita letakkan apa yang telah kita pelajari dan lihat bagaimana kita akan menguji sekeping kod yang lebih realistik.

Berikut adalah fungsi yang menambah kelas CSS ke elemen. Ini harus masuk dalam fail baru js/classname.js.

3

Dalam kes yang terbaik, kami akan menulis ujian untuk fungsi ini

function addClass(el, newClass) {
  if(el.className.indexOf(newClass) === -1) {
    el.className += newClass;
  }
}

sebelum

kami menulis kod tersebut. Tetapi pembangunan yang didorong oleh ujian adalah topik yang kompleks, dan sekarang kita hanya ingin memberi tumpuan kepada ujian menulis.

Untuk memulakan, mari kita ingat idea asas di sebalik ujian unit: kami memberikan fungsi input tertentu dan kemudian sahkan fungsi berkelakuan seperti yang diharapkan. Jadi apakah input dan tingkah laku untuk fungsi ini? diberi elemen dan nama kelas:

• Jika harta kelas unsur tidak mengandungi nama kelas, ia harus ditambah.
• Jika harta kelas elemen tidak mengandungi nama kelas, ia tidak boleh ditambah.

Mari menterjemahkan kes -kes ini ke dalam dua ujian. Dalam direktori ujian, buat fail baru classnametest.js dan tambahkan yang berikut:

<!-- load your test files here -->

Kami menukar kata -kata sedikit ke bentuk "ia harus lakukan x" yang digunakan dengan ujian. Ini bermakna ia membaca sedikit lebih baik, tetapi pada dasarnya masih bentuk yang boleh dibaca manusia yang sama yang kita disenaraikan di atas. Ia biasanya tidak lebih sukar daripada ini untuk pergi dari idea untuk menguji.

Tetapi tunggu, di manakah fungsi ujian? Nah, apabila kita menghilangkan parameter kedua kepadanya, Mocha menandakan ujian ini sebagai menunggu dalam keputusan ujian. Ini adalah cara yang mudah untuk menubuhkan beberapa ujian - seperti senarai todo tentang apa yang anda ingin tulis.

mari kita teruskan dengan melaksanakan ujian pertama.

assert.equal(arr.length, 0);

Dalam ujian ini, kami membuat pemboleh ubah elemen dan lulus sebagai parameter ke fungsi AddClass, bersama-sama dengan kelas ujian rentetan (kelas baru untuk ditambah). Kemudian, kami menyemak kelas dimasukkan ke dalam nilai menggunakan pernyataan.

Sekali lagi, kami pergi dari idea awal kami - diberi elemen dan nama kelas, ia harus dimasukkan ke dalam senarai kelas - dan diterjemahkan ke dalam kod dengan cara yang agak mudah. ​​

Walaupun fungsi ini direka untuk bekerja dengan elemen DOM, kami menggunakan objek JS biasa di sini. Kadang -kadang kita boleh menggunakan sifat dinamik JavaScript dalam fesyen ini untuk memudahkan ujian kita. Jika kita tidak melakukan ini, kita perlu membuat elemen sebenar dan ia akan merumitkan kod ujian kami. Sebagai manfaat tambahan, kerana kita tidak menggunakan DOM, kita juga boleh menjalankan ujian ini dalam node.js jika kita mahu.

menjalankan ujian dalam penyemak imbas

Untuk menjalankan ujian dalam penyemak imbas, anda perlu menambah classname.js dan classnametest.js kepada pelari:

assert.equal(arr.length, 1, 'Array length was not 0');

Anda kini harus melihat satu pas ujian dan ujian lain muncul sebagai menunggu, seperti yang ditunjukkan oleh codepen berikut. Perhatikan bahawa kod berbeza sedikit dari contoh untuk menjadikan kod berfungsi dalam persekitaran codepen.

lihat ujian pen unit pen dengan mocha (1) oleh sitepoint (@sitePoint) pada codepen.

Seterusnya, mari kita melaksanakan ujian kedua ...

function addClass(el, newClass) {
  if(el.className.indexOf(newClass) === -1) {
    el.className += newClass;
  }
}

Ia adalah kebiasaan yang baik untuk menjalankan ujian anda dengan kerap, jadi mari kita periksa apa yang berlaku jika kita menjalankan ujian sekarang. Seperti yang dijangkakan, mereka harus lulus.

Berikut adalah satu lagi codepen dengan ujian kedua yang dilaksanakan.

lihat ujian pen unit pen dengan mocha (2) oleh sitepoint (@sitePoint) pada codepen.

Tetapi tunggu! Saya sebenarnya menipu anda sedikit. Terdapat tingkah laku ketiga untuk fungsi ini yang belum kita pertimbangkan. Terdapat juga bug dalam fungsi - yang agak serius. Ia hanya fungsi tiga baris tetapi adakah anda melihatnya?

mari kita tulis satu lagi ujian untuk tingkah laku ketiga yang mendedahkan bug sebagai bonus.

<!-- load your test files here -->

Kali ini ujian gagal. Anda dapat melihatnya dalam tindakan dalam codepen berikut. Masalahnya di sini adalah mudah: nama kelas CSS dalam unsur -unsur harus dipisahkan oleh ruang. Walau bagaimanapun, pelaksanaan ADDClass semasa kami tidak menambah ruang!

lihat ujian pen unit pen dengan mocha (3) oleh sitepoint (@sitePoint) pada codepen.

mari kita selesaikan fungsi dan buat pas ujian.

assert.equal(arr.length, 0);

Dan inilah codepen terakhir dengan fungsi tetap dan ujian lulus.

Lihat ujian unit pen dengan mocha (4) oleh sitepoint (@sitePoint) pada codepen.

menjalankan ujian pada nod

Dalam nod, perkara hanya dapat dilihat dengan perkara lain dalam fail yang sama. Sebagai classname.js dan classnametest.js berada dalam fail yang berbeza, kita perlu mencari cara untuk mendedahkan satu ke yang lain. Cara standard untuk melakukan ini adalah melalui penggunaan modul.exports. Sekiranya anda memerlukan penyegaran, anda boleh membaca semua perkara di sini: pemahaman modul.exports dan eksport dalam node.js

Kod pada dasarnya tetap sama, tetapi berstruktur sedikit berbeza:

assert.equal(arr.length, 1, 'Array length was not 0');

function addClass(el, newClass) {
  if(el.className.indexOf(newClass) === -1) {
    el.className += newClass;
  }
}

dan seperti yang anda lihat, ujian lulus.

Apa yang akan datang?

Seperti yang anda lihat, ujian tidak perlu rumit atau sukar. Sama seperti aspek lain menulis aplikasi JavaScript, anda mempunyai beberapa corak asas yang diulangi. Sebaik sahaja anda mengenali mereka, anda boleh terus menggunakannya lagi dan lagi.

tetapi ini hanya menggaru permukaan. Terdapat banyak lagi untuk belajar tentang ujian unit.

Menguji sistem yang lebih kompleks
bagaimana menangani Ajax, pangkalan data, dan lain -lain perkara "luaran"?
Pembangunan yang didorong oleh ujian

Jika anda ingin terus belajar ini dan banyak lagi, saya telah mencipta siri ujian JavaScript percuma. Jika anda mendapati artikel ini berguna, anda pasti perlu menyemaknya di sini.

Sebagai alternatif, jika video lebih banyak gaya anda, anda mungkin berminat dalam kursus SitePoint Premium: Pembangunan yang didorong oleh ujian dalam node.js.

Soalan Lazim mengenai JavaScript Ujian Unit dengan Mocha dan Chai

Bagaimana saya memasang mocha dan chai untuk ujian unit dalam javascript?

Untuk memasang mocha dan chai, anda perlu mempunyai node.js dan npm dipasang pada sistem anda. Sebaik sahaja anda mempunyai ini, anda boleh memasang mocha dan chai menggunakan npm. Buka terminal anda dan navigasi ke direktori projek anda. Kemudian, jalankan arahan berikut:

NPM Install--Save-Dev Mocha Chai

Perintah ini memasang mocha dan chai sebagai kebencian untuk projek anda. Bendera--Save-dev digunakan untuk menambahkan ini sebagai kebergantungan pembangunan dalam fail pakej.json anda.

Bagaimana saya menulis ujian asas menggunakan mocha dan chai?

Menulis ujian asas Dengan Mocha dan Chai melibatkan membuat fail ujian dan menulis kes ujian anda di dalamnya. Berikut adalah contoh mudah:

var jangkaan = memerlukan ('chai'). bilangan charachters dalam rentetan ', fungsi () { mengharapkan (' hello '). to.have.lengthof (5); ); Contoh ini, Huraikan adalah suite ujian yang menguji ujian kumpulan, dan ia adalah kes ujian. Fungsi yang diharapkan dari chai digunakan untuk menegaskan output yang diharapkan.

Bagaimana saya boleh menjalankan ujian mocha saya? Perintah berikut:

./ node_modules/.bin/mocha

Perintah ini menjalankan binari mocha yang dipasang di folder node_modules anda. Sekiranya anda ingin menjalankan arahan ini hanya sebagai mocha, anda boleh memasang mocha secara global menggunakan NPM Install -g mocha.

Apakah gaya pernyataan yang berbeza yang terdapat di chai? Gaya - harus, mengharapkan, dan menegaskan. Gaya harus memanjangkan setiap objek dengan harta harus memulakan rantai anda. Gaya yang diharapkan memberikan pendekatan yang lebih tradisional, berasaskan fungsi. Gaya menegaskan menyediakan cara klasik dan mudah untuk menulis pernyataan.

Bagaimana saya boleh menguji kod asynchronous dengan mocha dan chai?

mocha dan chai menyediakan beberapa cara untuk menguji kod asynchronous. Anda boleh menggunakan panggilan balik, janji, atau async/menunggu. Berikut adalah contoh menggunakan async/menunggu:

ia ('ujian async', fungsi async () { const result = menunggu myAsyncfunction (); ); ); Kata kunci menunggu digunakan untuk menunggu janji untuk menyelesaikannya sebelum meneruskan ujian.

Bagaimana saya boleh menggunakan cangkuk di mocha?

Mocha menyediakan cangkuk seperti sebelum, selepas, sebelum, dan kemudiannya anda boleh gunakan untuk menubuhkan prasyarat dan membersihkan selepas ujian anda. Berikut adalah contoh:

menerangkan ('cangkuk', fungsi () {
sebelum (function () {
// berjalan sekali sebelum ujian pertama di blok ini
});

selepas (fungsi () { // berjalan sekali selepas ujian terakhir di blok ini
}); Setiap ujian dalam blok ini
}); // berjalan selepas setiap ujian di blok ini
});
Bagaimana saya boleh menguji pengecualian dengan chai?

Chai menyediakan pernyataan lemparan untuk pengujian pengujian. Inilah contoh:

ia ('melemparkan ralat', fungsi () {
mengharapkan (fungsi () {membuang ralat baru ('nilai salah');}). nilai '); ); Pernyataan lemparan digunakan untuk menegaskan bahawa fungsi melemparkan ralat dengan mesej 'nilai salah'.

Bagaimana saya boleh menggunakan mata -mata, stub, dan mengejek dengan mocha dan chai? Spies, stubs, dan mengejek dengan mocha dan chai, anda boleh menggunakan perpustakaan seperti sinon.js. Sinon.js dapat dengan mudah diintegrasikan dengan mocha dan chai untuk menyediakan fungsi ini. , Nyan, dan banyak lagi. Anda boleh menentukan wartawan untuk digunakan dengan pilihan -Reporter semasa menjalankan ujian anda. Sebagai contoh, Mocha -Reporter Nyan.

Bagaimana saya boleh membuat ujian saya lebih mudah dibaca dengan chai? Sebagai contoh, bukannya menulis jangkaan (myvar) .to.be.true;, anda boleh menulis jangkaan (myvar) .to.be.true;. Ini menjadikan ujian anda lebih semula jadi dan lebih mudah difahami.

Atas ialah kandungan terperinci Ujian Unit JavaScript anda menggunakan mocha dan chai. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!