mata utama
- QUnit dibangunkan dan dikekalkan oleh pasukan jQuery dan merupakan rangka kerja ujian unit JavaScript yang popular untuk kemudahan penggunaan dan kesederhanaan persediaan.
- Untuk memulakan dengan QUnit, muat turun versi terkini JavaScript dan fail CSS dari laman web QUNIT dan masukkannya dalam fail HTML anda.
- QUnit menyediakan dua cara untuk membuat ujian baru:
- untuk kod segerak dan
QUnit.test()
untuk kod tak segerak. Ujian ini mengandungi pernyataan yang mengesahkan bahawa kod berfungsi seperti yang diharapkan.QUnit.asyncTest()
QUnit menyediakan pelbagai kaedah penegasan termasuk - ,
deepEqual()
,equal()
,notDeepEqual()
,notEqual()
,propEqual()
,strictEqual()
,notPropEqual()
,notStrictEqual()
,ok()
,, , throws()
dan . Setiap kaedah mempunyai tujuan khusus dan menerima parameter tertentu. -
expect()
Apabila membuat ujian dengan QUNIT, amalan terbaik adalah untuk menetapkan bilangan pernyataan yang akan dilaksanakan menggunakan kaedah . Ini membantu memastikan semua pernyataan dilaksanakan dan jika satu atau lebih pernyataan tidak dilaksanakan, ujian akan gagal.
Tetapan QUnit
Salah satu sebab utama banyak pemaju menggunakan Qunit adalah kemudahan penggunaannya. Bermula dengan rangka kerja ini sangat mudah dan anda boleh menguasai konsep utama dalam beberapa jam. Langkah pertama untuk menggunakan QUnit jelas bermula dengan memuat turunnya. Terdapat beberapa cara untuk melakukan ini: Muat turun secara manual dari laman web, gunakan CDN, gunakan Bower, atau gunakan NPM. Nasihat saya ialah anda tidak boleh bergantung kepada CDN untuk menguji kod anda melainkan jika anda sedang membangunkan demo hidup yang mudah. Jadi berpegang pada pilihan lain. Untuk artikel ini, saya tidak mahu menetapkan sebarang prasyarat (baca Bower dan NPM), jadi kami akan mengambil pendekatan pertama. Oleh itu, lawati laman web QUNIT dan muat turun versi terkini fail JavaScript (bernama QUNIT-1.14.0.JS) dan fail CSS (bernama QUNIT-1.14.0.CSS). Letakkannya dalam folder di mana anda juga akan membuat index.html. Dalam fail ini, kami akan meletakkan kod HTML yang dipaparkan di halaman utama laman web, dan saya akan mengulanginya di bawah untuk kemudahan.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QUnit Example</title> <link rel="stylesheet" href="qunit-1.14.0.css"> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <??> <??> </body> </html>
Seperti yang anda lihat, kod ini menggunakan CDN untuk memasukkan fail CSS dan JavaScript. Oleh itu, anda perlu mengemas kini pautan untuk memasukkan fail yang anda muat turun sebelum ini. Dalam tanda, anda dapat melihat beberapa <div>
diletakkan. Yang pertama mempunyai Qunit sebagai IDnya, yang digunakan oleh rangka kerja untuk memaparkan antara muka penggunanya, di mana keputusan ujian dipaparkan. Yang kedua <div>
, yang ID adalah fixt Qunit, harus digunakan oleh anda (pemaju). Elemen ini membolehkan pemaju untuk menguji kod yang menambah, mengedit, atau menghilangkan elemen dari DOM tanpa bimbang tentang membersihkan DOM selepas setiap ujian. Jika anda meletakkan elemen yang anda buat oleh kod anda dalam <div>
ini, QUnit akan mengendalikan tetapan semula untuk kami. Akhirnya, kami memasukkan fail tests.js yang mewakili fail yang mengandungi ujian. Nasihat saya adalah menggunakan fail untuk menyimpan ujian apabila bekerja dengan projek sebenar. Dalam demo langsung yang saya buat untuk tutorial ini, saya menggunakan JSBIN dan pastinya tidak membenarkan memuat naik fail. Jadi dalam demo, anda akan melihat bahawa saya telah menggabungkan kod ujian. Sekarang anda memahami apa yang dimaksudkan untuk menandakan setiap bahagian, buka halaman index.html dalam penyemak imbas anda untuk melihat apa yang berlaku. Jika semuanya berjalan lancar, anda harus melihat antara muka demo langsung seperti yang ditunjukkan di bawah, yang juga disediakan sebagai contoh JSBIN: QUNIT. Pada peringkat ini, satu -satunya bahagian antara muka ini yang berkaitan dengan kami adalah bahagian yang menunjukkan masa Qunit menghabiskan ujian pemprosesan, bilangan pernyataan yang ditakrifkan, dan bilangan ujian yang diluluskan dan gagal. Demonstrasi di atas menunjukkan bahawa kita tidak menentukan sebarang ujian. Mari selesaikan masalah ini.
bagaimana membuat ujian menggunakan qunit
QUnit menyediakan dua cara untuk membuat ujian baru: QUnit.test()
dan QUnit.asyncTest()
. Yang pertama digunakan untuk menguji kod berjalan serentak, manakala yang kedua digunakan untuk menguji kod tak segerak. Dalam bahagian ini, saya akan menerangkan cara membuat ujian untuk kod segerak. Tandatangan kaedah QUnit.test()
adalah seperti berikut:
QUnit.test(name, testFunction)
Parameter pertama name
adalah rentetan yang membantu kita mengenal pasti ujian yang dibuat. Parameter kedua testFunction
adalah fungsi yang mengandungi pernyataan rangka kerja yang akan dilaksanakan. Rangka kerja ini melepasi parameter ke fungsi ini yang mendedahkan semua kaedah penegasan Qunit. Tukar keterangan ini ke kod, kami boleh mengemas kini fail tests.js dengan kod berikut:
QUnit.test('我的第一個(gè)測試', function(assert) { // 斷言在這里... });
Kod ini mencipta ujian baru yang dikenal pasti oleh rentetan "Ujian Pertama Saya" dan fungsi dengan badan kosong. Menambah ujian tanpa sebarang pernyataan tidak digunakan. Untuk menyelesaikan masalah ini, kita mesti mempelajari kaedah penegasan yang terdapat di Qunit.
Kaedah penegasan Qunit
(dalam contoh sebelumnya, QUnit.test()
). Senarai berikut meringkaskan kaedah yang ada, serta fungsi dan tandatangan mereka: assert
-
deepEqual(value, expected[, message])
: Perbandingan ketat rekursif yang berfungsi untuk semua jenis JavaScript. Jikavalue
danexpected
adalah sama dari segi sifat dan nilai, dan mempunyai prototaip yang sama, pernyataan itu diluluskan; - : Parameter
equal(value, expected[, message])
sama denganvalue
yang disediakan menggunakan pengesahan perbandingan bukan tegas (==).expected
- : Sama seperti
notDeepEqual(value, expected[, message])
, tetapi ujian ketidaksamaan;deepEqual()
: Sama seperti - , tetapi ujian ketidaksamaan;
notEqual(value, expected[, message])
equal()
: Perbandingan ketat sifat dan nilai objek. Jika semua atribut dan nilai adalah sama, pernyataan itu berlalu; - : Gunakan perbandingan ketat (===) pengesahan untuk menyediakan parameter
propEqual(value, expected[, message])
sama dengan ;
-
strictEqual(value, expected[, message])
: Sama sepertivalue
, tetapi ujian ketidaksamaan;expected
: Sama seperti - , tetapi ujian ketidaksamaan;
notPropEqual(value, expected[, message])
propEqual()
: Jika parameter pertama adalah nilai yang benar, pernyataan itu berlalu; - : Uji sama ada panggilan balik melemparkan pengecualian dan membandingkan kesilapan yang dibuang;
notStrictEqual(value, expected[, message])
strictEqual()
Parameter yang diterima oleh kaedah ini adalah seperti berikut: -
ok(value[, message])
: Nilai yang dikembalikan oleh fungsi, kaedah, atau nilai yang disimpan dalam pembolehubah yang mesti disahkan;
-
throws(function[, expected][, message])
: Nilai yang akan diuji. Untuk kaedah , ini boleh
: rentetan pilihan yang menerangkan pernyataan;
- : Fungsi yang akan dilaksanakan harus mengembalikan ralat;
value
Sekarang anda telah memahami kaedah dan parameter yang ada, sudah tiba masanya untuk menyemak beberapa kod. Daripada menulis pelbagai ujian untuk satu fungsi, saya cuba menghasilkan semula contoh yang lebih realistik. Bagaimanapun, ujian yang saya akan menunjukkan bahawa anda tidak boleh dianggap sebagai suite ujian lengkap, tetapi mereka harus memberi anda idea khusus untuk memulakannya. Untuk menulis ujian yang disebutkan, kita perlu menentukan beberapa kod untuk diuji. Dalam kes ini, saya akan menentukan objek literal seperti ini: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>QUnit Example</title> <link rel="stylesheet" href="qunit-1.14.0.css"> </head> <body> <div id="qunit"></div> <div id="qunit-fixture"></div> <??> <??> </body> </html>
seperti yang anda lihat, kami menentukan objek literal dengan tiga fungsi:
max()
,isOdd()
, dansortObj()
. Yang pertama menerima bilangan parameter dan mengembalikan nilai maksimum.isOdd()
Ambil nombor sebagai parameter dan ujian jika ia adalah nombor ganjil.sortObj()
menerima pelbagai objek, idealnya harus ada atribut bernama Timestamp dan menyusunnya mengikut nilai atribut ini. Set ujian kemungkinan fungsi ini adalah seperti berikut: (Contoh kod ujian yang panjang ditinggalkan di sini kerana had perkataan telah melebihi, tetapi prinsipnya konsisten dengan penerangan sebelumnya)Tetapkan jangkaan
Apabila membuat ujian, amalan terbaik adalah untuk menetapkan bilangan pernyataan yang kami harapkan untuk dilaksanakan. Melakukannya, jika satu atau lebih pernyataan tidak dilaksanakan, ujian akan gagal. Rangka kerja Qunit menyediakan kaedah
expect()
untuk tujuan ini. Kaedah ini amat berguna apabila berurusan dengan kod tak segerak, tetapi lebih baik menggunakannya semasa menguji fungsi segerak. Tandatangan kaedahexpect()
adalah seperti berikut:QUnit.test(name, testFunction)
Parameterdi mana
assertionsNumber
menentukan bilangan pernyataan yang dijangkakan. (Contoh mengemas kini kod ujian juga ditinggalkan di sini kerana had perkataan telah melebihi, tetapi prinsipnya konsisten dengan penerangan sebelumnya)QUnit PENGENALAN KESIMPULAN
Dalam tutorial ini, saya memperkenalkan anda kepada dunia pengujian yang ajaib, terutamanya bagaimana untuk menguji kod JavaScript menggunakan QUNIT. Kami telah melihat betapa mudahnya untuk menubuhkan kerangka Qunit dan kaedah apa yang disediakan untuk menguji fungsi penyegerakan. Di samping itu, anda juga telah mempelajari set fungsi penegasan yang disediakan oleh rangka kerja untuk menguji kod tersebut. Akhirnya, saya menyebutkan pentingnya menetapkan bilangan pernyataan yang kami harapkan untuk dijalankan dan bagaimana untuk menetapkannya menggunakan kaedah
expect()
. Saya harap anda menikmati siaran ini dan anda akan mempertimbangkan mengintegrasikan Qunit ke dalam projek anda. (Bahagian Soalan Lazim ditinggalkan di sini kerana had perkataan telah melebihi)Atas ialah kandungan terperinci Bermula dengan Qunit. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Java dan JavaScript adalah bahasa pengaturcaraan yang berbeza, masing -masing sesuai untuk senario aplikasi yang berbeza. Java digunakan untuk pembangunan aplikasi perusahaan dan mudah alih yang besar, sementara JavaScript digunakan terutamanya untuk pembangunan laman web.

JavaScriptcommentsareessentialformaintaining,reading,andguidingcodeexecution.1)Single-linecommentsareusedforquickexplanations.2)Multi-linecommentsexplaincomplexlogicorprovidedetaileddocumentation.3)Inlinecommentsclarifyspecificpartsofcode.Bestpractic

Titik berikut harus diperhatikan apabila tarikh pemprosesan dan masa di JavaScript: 1. Terdapat banyak cara untuk membuat objek tarikh. Adalah disyorkan untuk menggunakan rentetan format ISO untuk memastikan keserasian; 2. Dapatkan dan tetapkan maklumat masa boleh diperoleh dan tetapkan kaedah, dan ambil perhatian bahawa bulan bermula dari 0; 3. Tarikh pemformatan secara manual memerlukan rentetan, dan perpustakaan pihak ketiga juga boleh digunakan; 4. Adalah disyorkan untuk menggunakan perpustakaan yang menyokong zon masa, seperti Luxon. Menguasai perkara -perkara utama ini secara berkesan dapat mengelakkan kesilapan yang sama.

PlacingtagsatthebottomofablogpostorwebpageservespracticalpurposesforSEO,userexperience,anddesign.1.IthelpswithSEObyallowingsearchenginestoaccesskeyword-relevanttagswithoutclutteringthemaincontent.2.Itimprovesuserexperiencebykeepingthefocusonthearticl

JavaScriptispreferredforwebdevelopment, whersjavaisbetterforlarge-scalebackendsystemsandandroidapps.1) javascriptexcelsinceleatinginteractiveWebexperienceswithitsdynamicnatureanddommanipulation.2) javaoffersstrongyblectionandobjection

JavascripthassevenfundamentalDatypes: nombor, rentetan, boolean, undefined, null, objek, andsymbol.1) numberuseadouble-precisionformat, bergunaforwidevaluangesbutbecautiouswithfloating-pointarithmetic.2)

Penangkapan dan gelembung acara adalah dua peringkat penyebaran acara di Dom. Tangkap adalah dari lapisan atas ke elemen sasaran, dan gelembung adalah dari elemen sasaran ke lapisan atas. 1. Penangkapan acara dilaksanakan dengan menetapkan parameter useCapture addeventlistener kepada benar; 2. Bubble acara adalah tingkah laku lalai, useCapture ditetapkan kepada palsu atau ditinggalkan; 3. Penyebaran acara boleh digunakan untuk mencegah penyebaran acara; 4. Acara menggelegak menyokong delegasi acara untuk meningkatkan kecekapan pemprosesan kandungan dinamik; 5. Penangkapan boleh digunakan untuk memintas peristiwa terlebih dahulu, seperti pemprosesan pembalakan atau ralat. Memahami kedua -dua fasa ini membantu mengawal masa dan bagaimana JavaScript bertindak balas terhadap operasi pengguna.

Java dan JavaScript adalah bahasa pengaturcaraan yang berbeza. 1.Java adalah bahasa yang ditaip dan disusun secara statik, sesuai untuk aplikasi perusahaan dan sistem besar. 2. JavaScript adalah jenis dinamik dan bahasa yang ditafsirkan, terutamanya digunakan untuk interaksi web dan pembangunan front-end.
