Panduan pemula ' s untuk menguji JavaScript berfungsi-tutorial js-php.cn

A Beginner's Guide to Testing Functional JavaScript

mata utama

Pengaturcaraan dan ujian berfungsi. Anda mungkin telah mencubanya secara berasingan, tetapi entah bagaimana anda tidak pernah memasukkan kedua -dua amalan biasa anda. Mereka mungkin terdengar mudah pada mereka sendiri, tetapi pengaturcaraan dan pengaturcaraan berfungsi dapat mewujudkan godaan yang tidak dapat dinafikan yang hampir memaksa anda untuk menulis lebih jelas, lebih padat, dan lebih banyak kod yang dapat dipelihara.

Berita baik ialah menggunakan kedua -dua teknologi secara serentak memberikan beberapa kelebihan praktikal. Sebenarnya, apabila anda mengalami kemanisan gabungan ini, anda mungkin ketagih seperti saya, dan saya yakin anda akan menginginkan lebih banyak lagi.

Tonton "Kod Tulisan Tulen Jelas Ikut Prinsip JavaScript Fungsian" untuk memecahkan kod anda dan memudahkan untuk mengekalkan ... mengapa tidak?

Tonton kursus ini dalam artikel ini, saya akan memperkenalkan anda kepada prinsip -prinsip ujian JavaScript berfungsi. Saya akan menunjukkan kepada anda bagaimana menggunakan kerangka Jasmine dan membina fungsi tulen menggunakan kaedah yang didorong oleh ujian.

Mengapa mengujinya?

Ujian adalah untuk memastikan bahawa kod dalam aplikasi berjalan seperti yang dijangkakan dan terus berjalan seperti yang diharapkan apabila anda membuat perubahan supaya anda mendapat produk yang tersedia apabila anda menyelesaikan kerja anda. Anda menulis ujian yang mentakrifkan fungsi yang dijangkakan dalam satu set situasi yang ditetapkan, menjalankan ujian terhadap kod, dan anda akan menerima amaran jika hasilnya tidak sepadan dengan ujian yang dikatakan. Dan anda terus mendapat amaran itu sehingga anda menetapkan kod tersebut.

maka anda akan mendapat ganjaran.

Ya, ini akan membuatkan anda berasa baik.

Terdapat banyak jenis ujian, dan terdapat banyak ruang untuk perbincangan tentang di mana sempadan dibahagikan, tetapi pendek:

ujian unit untuk mengesahkan fungsi mengasingkan kod
ujian integrasi mengesahkan interaksi antara aliran data dan komponen
Ujian Fungsi Lihat tingkah laku keseluruhan aplikasi

NOTA: Jangan terganggu oleh jenis ujian yang dipanggil ujian fungsional. Ini bukan apa yang kita mahu fokus dalam artikel ini mengenai ujian JavaScript berfungsi. Malah, sama ada anda menggunakan teknik pengaturcaraan fungsional dalam JavaScript atau tidak, kaedah ujian berfungsi yang anda gunakan untuk menguji kelakuan keseluruhan aplikasi anda mungkin tidak banyak berubah. Apa yang benar -benar membantu dalam pengaturcaraan berfungsi adalah apabila membina ujian unit.

Anda boleh menulis ujian pada bila -bila masa semasa proses pengekodan, tetapi saya selalu merasa paling berkesan untuk menulis ujian unit sebelum menulis fungsi yang merancang untuk diuji. Amalan ini, yang dikenali sebagai Pembangunan Bergerak Ujian (TDD), menggalakkan anda untuk memecahkan fungsi permohonan anda sebelum anda mula menulis dan menentukan hasil yang anda inginkan dari setiap bahagian kod anda, mula menulis ujian, dan kemudian tulis kod tersebut untuk menghasilkan hasil itu.

satu manfaat sampingan adalah bahawa TDD sering memaksa anda untuk mengadakan perbincangan terperinci dengan orang -orang yang membayar anda untuk menulis program untuk memastikan program yang anda tulis memang yang mereka cari. Lagipun, mudah untuk mendapatkan satu ujian untuk lulus. Kesukaran adalah untuk menentukan sama ada untuk memproses semua kemungkinan input yang mungkin anda hadapi dan memproses semua input dengan betul tanpa memecahkan apa -apa.

Mengapa memilih pengaturcaraan berfungsi?

seperti yang anda boleh bayangkan, cara anda menulis kod anda berkait rapat dengan kesukaran ujian. Sesetengah corak kod, seperti gandingan ketat tingkah laku satu fungsi yang lain, atau bergantung pada pembolehubah global, membuat ujian unit kod lebih sukar. Kadang -kadang, anda mungkin perlu menggunakan teknik yang menyusahkan seperti "mensimulasikan" tingkah laku pangkalan data luaran atau mensimulasikan persekitaran runtime yang kompleks untuk mewujudkan parameter dan hasil yang boleh diuji. Kes -kes ini tidak selalu dapat dielakkan, tetapi sering kali mungkin untuk mengasingkan di mana kes -kes ini diperlukan dalam kod supaya seluruh kod dapat diuji dengan lebih mudah.

Pengaturcaraan berfungsi membolehkan anda mengendalikan data dan tingkah laku dalam aplikasi anda secara bebas. Anda boleh membina aplikasi anda dengan membuat satu set fungsi yang berasingan yang berfungsi secara bebas dan tidak bergantung kepada keadaan luaran. Akibatnya, kod anda menjadi kod yang hampir didokumenkan sendiri, menggabungkan fungsi-fungsi kecil yang jelas yang ditakrifkan secara konsisten dan mudah difahami.

Pengaturcaraan berfungsi biasanya berbeza dengan pengaturcaraan penting dan pengaturcaraan berorientasikan objek. JavaScript boleh menyokong semua teknologi ini, dan juga mencampurkannya. Pengaturcaraan fungsional boleh berfungsi sebagai alternatif lain yang berharga untuk mewujudkan urutan kod penting yang mengesan aplikasi aplikasi sehingga hasilnya dikembalikan. Atau membina aplikasi anda melalui interaksi merentasi objek kompleks yang merangkumi semua kaedah yang digunakan untuk struktur data tertentu.

bagaimana berfungsi fungsi tulen

Pengaturcaraan Fungsi menggalakkan anda untuk membina aplikasi anda menggunakan fungsi kecil, boleh diguna semula, boleh dilakukan hanya satu perkara tertentu dan mengembalikan nilai yang sama untuk input yang sama setiap kali. Fungsi sedemikian dipanggil fungsi tulen. Fungsi tulen adalah asas pengaturcaraan berfungsi, dan mereka semua mempunyai tiga ciri berikut:

tidak bergantung kepada keadaan luaran atau pembolehubah
tiada kesan sampingan atau perubahan kepada pembolehubah luaran
Sentiasa mengembalikan hasil yang sama untuk input yang sama

Satu lagi kelebihan menulis kod berfungsi ialah menjadikan ujian unit lebih mudah. Lebih banyak kod yang anda boleh ujian unit, lebih mudah untuk bergantung kepada keupayaan anda untuk refactor kod anda pada masa akan datang tanpa melanggar fungsi asas.

Apa yang menjadikan kod berfungsi mudah diuji?

Jika anda menganggap konsep yang baru dibincangkan, anda mungkin sudah memahami mengapa kod fungsi lebih mudah untuk diuji. Ujian menulis untuk fungsi tulen sangat mudah kerana setiap input mempunyai output yang konsisten. Anda hanya menetapkan nilai yang diharapkan dan menjalankannya terhadap kod. Tidak perlu mewujudkan konteks, tidak perlu mengesan kebergantungan antara fungsi, tidak perlu mensimulasikan keadaan perubahan di luar fungsi, dan tidak perlu mensimulasikan sumber data luaran pembolehubah.

Terdapat banyak pilihan ujian, dari rangka kerja lengkap ke perpustakaan utiliti dan alat ujian mudah. Ini termasuk Jasmine, Mocha, Enzyme, Jest dan banyak alat lain. Setiap alat mempunyai kebaikan dan keburukan yang berbeza, kes penggunaan terbaik dan pengikut yang setia. Jasmine adalah rangka kerja yang kuat yang boleh digunakan dalam pelbagai situasi, jadi di sini adalah demonstrasi cepat bagaimana untuk membangunkan fungsi tulen menggunakan melati dan TDD dalam penyemak imbas anda.

Anda boleh membuat dokumen HTML yang mengekstrak perpustakaan ujian Jasmine dari tempatan atau CDN. Contoh halaman yang mengandungi Perpustakaan Jasmine dan Runner Ujian mungkin kelihatan seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Jasmine Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.1/jasmine.min.css">
</head>
<body>
    <🎜>
    <🎜>
    <🎜>
</body>
</html>

Salin selepas log masuk

Ini memperkenalkan Perpustakaan Jasmine, serta skrip dan gaya boot Jasmine HTML. Dalam kes ini, badan dokumen itu kosong, menunggu JavaScript anda diuji dan ujian melati anda.

ujian JavaScript berfungsi - Ujian pertama kami

Pertama, mari tulis ujian pertama. Kita boleh melakukan ini dalam dokumen yang berasingan atau dengan memasukkannya dalam elemen <script> pada halaman. Kami akan menggunakan fungsi describe yang ditakrifkan oleh Perpustakaan Jasmine untuk menggambarkan tingkah laku yang dikehendaki fungsi baru yang belum ditulis.

Fungsi baru yang akan kita tulis akan dipanggil isPalindrome, dan jika rentetan yang diluluskan adalah sama sebelum dan selepas, ia akan kembali true, jika tidak, ia akan kembali false. Ujian akan kelihatan seperti ini:

describe("isPalindrome", () => {
  it("returns true if the string is a palindrome", () => {
    expect(isPalindrome("abba")).toEqual(true);
  });
});

Salin selepas log masuk

Apabila kami menambah ini ke skrip di halaman dan muatkannya ke dalam penyemak imbas, kami mendapat halaman Laporan Jasmine yang menunjukkan ralat. Inilah yang kita mahukan pada masa ini. Kami ingin tahu sama ada ujian berjalan dan jika gagal. Dengan cara ini, otak kita yang tidak sabar -sabar untuk mendapat pengiktirafan tahu bahawa kita perlu membetulkan sesuatu.

jadi mari kita tulis fungsi mudah dalam JavaScript di mana hanya terdapat logik yang cukup untuk mendapatkan ujian kami untuk lulus. Dalam kes ini, ia hanya satu fungsi yang menjadikan salah satu ujian kami lulus dengan mengembalikan nilai yang diharapkan.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Jasmine Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.1/jasmine.min.css">
</head>
<body>
    <🎜>
    <🎜>
    <🎜>
</body>
</html>

Salin selepas log masuk

Ya, betul -betul. Saya tahu ia kelihatan tidak masuk akal, tetapi tolong teruskan dengannya.

Apabila anda menjalankan program ujian ujian sekali lagi, ia akan lulus. Sudah tentu. Tetapi jelas, kod mudah ini tidak memenuhi jangkaan kami untuk program ujian Palindrome. Apa yang kita perlukan sekarang adalah jangkaan tambahan. Oleh itu mari kita tambahkan pernyataan lain ke fungsi describe kami:

describe("isPalindrome", () => {
  it("returns true if the string is a palindrome", () => {
    expect(isPalindrome("abba")).toEqual(true);
  });
});

Salin selepas log masuk

Muat semula halaman kami kini menyebabkan output ujian menjadi merah dan gagal. Kami menerima mesej yang menyatakan masalahnya dan hasil ujian menjadi merah.

merah!

otak kita merasakan sesuatu yang salah.

Sudah tentu ada masalah. Sekarang, fungsi mudah isPalindrome kami hanya mengembalikan true setiap masa, dan telah terbukti tidak dapat mensasarkan ujian baru dengan berkesan. Oleh itu, mari kita kemas kini isPalindrome dan tambahkan keupayaan untuk membandingkan fungsi sebelum dan selepas rentetan masuk.

const isPalindrome = (str) => true;

Salin selepas log masuk

Ujian adalah ketagihan

pergi hijau lagi. Ini memuaskan. Apabila anda memuatkan semula halaman, adakah anda mendapat sedikit lonjakan dopamin itu?

Dengan perubahan ini, ujian kami berlalu lagi. Kod baru kami dengan berkesan membandingkan sebelum dan selepas rentetan dan pulangan true apabila sebelum dan selepas rentetan adalah sama, jika tidak false.

Kod ini adalah fungsi tulen kerana ia hanya melakukan satu perkara dan secara konsisten dilaksanakan diberikan nilai input yang konsisten tanpa sebarang kesan sampingan, mengubah sebarang pembolehubah atau kebergantungan di luar dirinya atau dalam status permohonan. Setiap kali anda lulus rentetan ke fungsi ini, ia membandingkan antara rentetan depan dan belakang dan mengembalikan hasil tanpa mengira kapan atau bagaimana ia dipanggil.

Anda dapat melihat betapa mudahnya konsistensi ini menjadikan ujian unit fungsi ini. Malah, menulis kod yang didorong oleh ujian boleh menggalakkan anda menulis fungsi tulen kerana mereka lebih mudah untuk menguji dan mengubah suai.

dan anda ingin mendapat kepuasan lulus ujian. Saya tahu awak akan.

Rekonstruksi fungsi tulen

Pada ketika ini, sangat mudah untuk menambah fungsi lain (seperti pengendalian input bukan rentetan, mengabaikan perbezaan antara huruf besar dan bawah, dll.). Cuma tanya pemilik produk bagaimana mereka mahu program dijalankan. Oleh kerana kita sudah mempunyai ujian untuk mengesahkan bahawa rentetan akan diproses secara konsisten, kini kita boleh menambah pemeriksaan ralat atau pemutus rentetan atau apa-apa tingkah laku yang kita suka kepada nilai bukan rentetan.

Contohnya, mari kita lihat apa yang berlaku jika kita menambah ujian untuk nombor 1001, yang boleh ditafsirkan sebagai palindrome jika ia adalah rentetan:

describe("isPalindrome", () => {
  it("returns true if the string is a palindrome", () => {
    expect(isPalindrome("abba")).toEqual(true);
  });
  it("returns false if the string isn't a palindrome", () => {
    expect(isPalindrome("Bubba")).toEqual(false);
  });
});

Salin selepas log masuk

Melakukan ini akan menjadikan skrin kami merah lagi dan menyebabkan ujian gagal kerana fungsi

semasa kami tidak tahu bagaimana untuk mengendalikan input bukan rentetan. isPalindrome

Panik bermula. Kami melihat merah. Ujian gagal.

Tetapi sekarang kita dapat mengemas kini dengan selamat untuk mengendalikan input bukan rentetan, membuangnya ke rentetan dan kemudian periksa. Kami mungkin datang dengan fungsi yang kelihatan seperti ini:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Jasmine Test</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.6.1/jasmine.min.css">
</head>
<body>
    <🎜>
    <🎜>
    <🎜>
</body>
</html>

Salin selepas log masuk

Sekarang bahawa semua ujian diluluskan, kita melihat dopamin yang hijau, manis menuangkan ke dalam otak yang didorong oleh ujian kami.

Dengan menambah toString() ke rantaian penilaian, kami dapat menyesuaikan diri dengan input bukan rentetan dan menukarnya ke rentetan sebelum ujian. Paling penting, kerana ujian kami yang lain dijalankan setiap kali, kami dapat memastikan bahawa dengan menambahkan ciri baru ini ke fungsi tulen kami, kami tidak melanggar fungsi yang telah kami perolehi sebelum ini. Hasil akhir adalah seperti berikut:

(kod codepen harus dimasukkan di sini, tetapi kerana saya tidak dapat mengakses laman web luaran, saya tidak dapat memberikan pautan codepen.)

Cuba ujian ini dan mula menulis ujian anda sendiri, menggunakan Jasmine atau mana -mana perpustakaan ujian lain yang berfungsi untuk anda.

Sebaik sahaja anda memasukkan ujian ke dalam aliran kerja reka bentuk kod anda dan mula menulis fungsi tulen untuk ujian unit, anda mungkin merasa sukar untuk kembali ke kehidupan masa lalu anda. Tetapi anda tidak akan mahu melakukannya.

(artikel ini telah dikaji semula oleh Vildan Softic. Terima kasih kepada semua pengulas rakan sebaya untuk mendapatkan kandungan SitePoint untuk yang terbaik!)

Soalan Lazim Mengenai Ujian JavaScript Fungsian (FAQ)

Apakah ujian JavaScript berfungsi?

Ujian JavaScript berfungsi adalah ujian yang memeriksa fungsi pelbagai bahagian kod (seperti fungsi) untuk memastikan ia berfungsi seperti yang diharapkan. Ini melibatkan kes ujian menulis yang memanggil fungsi menggunakan input yang berbeza dan membandingkan output dengan hasil yang diharapkan. Ia adalah bahagian penting dalam pembangunan perisian dan membantu mengesan kesilapan dalam proses pembangunan seawal mungkin dan memastikan kualiti dan kebolehpercayaan kod.

Bagaimana menulis ujian fungsional dalam JavaScript?

Menulis ujian fungsional dalam JavaScript melibatkan membuat kes ujian yang memanggil fungsi untuk diuji menggunakan input tertentu dan kemudian memeriksa jika output sepadan dengan hasil yang diharapkan. Ini boleh dilakukan menggunakan pelbagai rangka ujian, seperti Jest, Mocha, atau Jasmine. Rangka kerja ini menyediakan fungsi untuk menentukan kes ujian, menjalankannya, dan memeriksa hasil.

Apakah kaedah ujian REGEXP dalam JavaScript?

Kaedah ujian REGEXP dalam JavaScript adalah cara untuk menguji perlawanan dalam rentetan. Pulangan true Jika perlawanan dijumpai, jika tidak, pulangan false. Kaedah ini amat berguna apabila anda perlu mengesahkan input pengguna atau mencari corak dalam rentetan.

Bagaimana menggunakan kaedah ujian REGEXP dalam JavaScript?

Untuk menggunakan kaedah ujian REGEXP dalam JavaScript, anda perlu membuat objek REGEXP menggunakan corak yang anda ingin padankan. Anda kemudian memanggil kaedah ujian objek ini, lulus rentetan untuk diuji sebagai parameter. Sekiranya perlawanan dijumpai, kaedah itu kembali true, jika tidak false.

Apakah perbezaan antara ujian fungsional dan ujian unit dalam JavaScript?

Ujian fungsional dan ujian unit adalah kedua -dua komponen penting dalam proses ujian, tetapi tujuan mereka berbeza. Ujian unit memberi tumpuan kepada mengasingkan pelbagai bahagian kod ujian (seperti fungsi atau kaedah) dan mengasingkan dari seluruh sistem. Ujian fungsional, sebaliknya, menguji ciri -ciri yang lebih besar sistem (seperti modul atau keseluruhan aplikasi) untuk memastikan ia berfungsi seperti yang diharapkan apabila diintegrasikan.

Bagaimana untuk meningkatkan ujian fungsional dalam JavaScript?

Meningkatkan ujian fungsional dalam JavaScript biasanya melibatkan memastikan ujian anda meliputi semua situasi yang mungkin, termasuk situasi yang melampau dan keadaan ralat yang berpotensi. Ia juga penting untuk memastikan ujian anda bebas dan boleh dijalankan dalam apa -apa perintah, kerana ini menjadikan mereka lebih dipercayai dan mudah dikekalkan. Menggunakan rangka kerja ujian juga boleh membantu membina ujian dan menyediakan alat yang berguna untuk memeriksa hasil dan melaporkan kesilapan.

Apakah beberapa amalan yang baik untuk ujian fungsional dalam JavaScript?

Beberapa amalan yang baik untuk ujian fungsional dalam JavaScript termasuk menulis kes ujian yang jelas dan ringkas, menguji senario positif dan negatif, dan memastikan bahawa ujian adalah bebas dan boleh dijalankan dalam apa -apa perintah. Menggunakan kerangka ujian juga merupakan idea yang baik kerana ia menyediakan alat dan struktur yang berguna untuk ujian anda.

Bagaimana untuk debug ujian fungsional dalam JavaScript?

Pelbagai alat dan teknik boleh digunakan untuk debug ujian fungsional dalam JavaScript. Kaedah yang sama ialah menggunakan pernyataan console.log untuk mencetak nilai semasa pelaksanaan ujian. Anda juga boleh menggunakan alat penyahpepijatan yang disediakan oleh persekitaran pembangunan atau kerangka ujian yang membolehkan anda melangkah melalui kod dan menyemak pembolehubah pada masa yang berbeza.

Apakah beberapa cabaran biasa dalam ujian fungsional dalam JavaScript?

Beberapa cabaran umum dalam ujian fungsional dalam JavaScript termasuk pengendalian kod asynchronous, kod ujian yang berinteraksi dengan sistem luaran, dan menguruskan kerumitan suite ujian besar. Pelbagai teknologi dan alat boleh digunakan untuk menyelesaikan cabaran -cabaran ini, seperti menggunakan janji atau async/await untuk kod asynchronous, mensimulasikan sistem luaran, dan ujian bangunan dengan mudah difahami dan diselenggarakan.

Bagaimana untuk mempelajari ujian fungsional di JavaScript?

Terdapat banyak sumber untuk mengetahui lebih lanjut mengenai ujian fungsional dalam JavaScript. Ini termasuk tutorial dalam talian, buku dan kursus. Laman web seperti W3Schools, Rangkaian Pemaju Mozilla, dan Geeks untuk Geeks menyediakan panduan dan tutorial yang komprehensif mengenai topik tersebut. Anda juga boleh menemui banyak tutorial video di platform seperti YouTube. Di samping itu, banyak rangka kerja ujian JavaScript seperti Jest, Mocha, dan Jasmine menyediakan dokumentasi dan bimbingan terperinci di laman web rasmi mereka.

Atas ialah kandungan terperinci Panduan pemula ' s untuk menguji JavaScript berfungsi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!