Menyiapkan lingkungan pengujian unit javascript

Pada awalnya ada fungsi dan menyebutnya di satu tempat. Kemudian kami ingin memanggilnya di tempat lain dengan fitur baru dan memperbaruinya. Kami sangat menyukai ini sehingga kami menyebutnya di tempat ketiga dan masih melakukan pengeditan fungsional dan ... di tempat pertama ada yang salah. Bagaimana cara mengetahuinya? Periksa di semua tempat di mana kami menggunakan fungsi ini, apakah semuanya berfungsi dengan benar? Itu mungkin, tetapi lebih baik menggunakan tes unit.

Halo semuanya. Terhubung anonim dari kotak pasir. Anda dapat menemukan cara yang benar untuk menguji kode Anda di baris pertama mesin pencari, tetapi Anda harus mengotak-atik pengaturan lingkungan. Jadi hari ini saya ingin membantu pengembang pemula mengatur lingkungan untuk pengujian unit kode mereka.

PS - masuk akal untuk membaca artikel lebih lanjut jika pembaca telah menguasai bekerja dengan npm atau manajer paket serupa.

Mari kita mulai dengan definisi kecil:

• unit testing adalah teknologi yang tujuannya adalah untuk mengurangi kemungkinan kesalahan dan efek samping (ketika bug lain diperkenalkan saat memperbaiki satu bug).
• karma adalah alat yang memungkinkan Anda untuk menjalankan tes java-script di browser.
• Jasmine adalah kerangka kerja untuk menguji kode javasctript.

Instruksi instalasi Karma (seperti banyak yang lainnya) mengatakan bahwa paket harus diinstal secara lokal dalam proyek.

# Install Karma: $ npm install karma --save-dev 

 # Install plugins that your project needs: $ npm install karma-jasmine karma-chrome-launcher jasmine-core --save-dev 

Untuk kenyamanan, kita juga dapat menginstal karma-cli npm install -g karma-cli , jika tidak, perintah akan tersedia dari terminal seperti itu ./node_modules/karma/bin/karma .

Kemudian kita dapat membuat file konfigurasi:

 karma init karma.conf.js 

• Pertama, kita akan ditanya kerangka pengujian yang digunakan. (melati)
• Apakah kita menggunakan pemuat file / modul Require.js. (Tidak)
• Browser mana yang ingin kita lihat (Chrome)
• File apa yang sedang kita dengarkan. (* [Ss] pec.js)
• Jika ada file yang dikecualikan
• Haruskah saya memonitor perubahan tes (ya)

Setelah menjawab pertanyaan, kami akan memiliki file konfigurasi.

 // Karma configuration // Generated on Thu May 09 2019 18:54:02 GMT+0300 (RTZ 2 ()) module.exports = function(config) { config.set({ // base path that will be used to resolve all patterns (eg. files, exclude) basePath: '', // frameworks to use // available frameworks: https://npmjs.org/browse/keyword/karma-adapter frameworks: ['jasmine'], // list of files / patterns to load in the browser files: [ '*[Ss]pec.js' ], // list of files / patterns to exclude exclude: [ ], // preprocess matching files before serving them to the browser // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor preprocessors: { }, // test results reporter to use // possible values: 'dots', 'progress' // available reporters: https://npmjs.org/browse/keyword/karma-reporter reporters: ['progress'], // web server port port: 9876, // enable / disable colors in the output (reporters and logs) colors: true, // level of logging // possible values: config.LOG_DISABLE || config.LOG_ERROR || config.LOG_WARN || config.LOG_INFO || config.LOG_DEBUG logLevel: config.LOG_INFO, // enable / disable watching file and executing tests whenever any file changes autoWatch: true, // start these browsers // available browser launchers: https://npmjs.org/browse/keyword/karma-launcher browsers: ['Chrome'], // Continuous Integration mode // if true, Karma captures browsers, runs the tests and exits singleRun: false, // Concurrency level // how many browser should be started simultaneous concurrency: Infinity }) } 

Buat file uji lain.

 // test.spec.js describe("A suite is just a function", function() { var a; it("and so is a spec", function() { a = true; expect(a).toBe(true); }); it("and so is a spec", function() { a = true; expect(a).toBe(false); }); }); 

Kita sudah dapat melihat bagaimana pengujian kita bekerja dengan menjalankan perintah karma start karma.conf.js , tapi saya sarankan untuk menunggu sebentar dan membuat add-on tambahan.

Instal paket npm i -D karma-jasmine-html-reporter , yang secara dinamis menampilkan hasil tes di browser. Mari tambahkan konfigurasi karma:

 ... reporters: ['progress', 'kjhtml'], client: { clearContext: false // leave Jasmine Spec Runner output visible in browser }, ... 

Sekarang kita sudah siap. Kami meluncurkan karma start karma.conf.js dan lanjutkan ke pengujian pertama kami: D