Ketika proyek NG menjadi lebih besar dan lebih besar, pengujian unit harus dimasukkan ke dalam agenda. Terkadang tim mengambil pengujian terlebih dahulu, beberapa fungsi menerapkan terlebih dahulu, dan kemudian menguji modul fungsional. Ini memiliki kelebihan dan kekurangannya sendiri. Hari ini, kami terutama berbicara tentang menggunakan Karma dan Jasmine untuk melakukan pengujian unit modul NG.
Apa itu karma
Karma adalah kerangka kontrol unit uji coba, menyediakan tes unit yang berjalan di lingkungan yang berbeda, seperti chrome, firfox, phantomjs, dll. Kerangka kerja uji mendukung Jasmine, Mocha, Qunit, dan merupakan modul NPM dengan nodej sebagai lingkungan.
Disarankan untuk menggunakan parameter ---- save-dev saat menginstal dan menguji modul NPM terkait, karena ini terkait dengan pengembangan. Secara umum, jika Anda menjalankan karma, hanya dua perintah NPM berikut yang diperlukan.
Salinan kode adalah sebagai berikut:
NPM menginstal karma-save-dev
NPM Instal Karma-Junit-Reporter --Save-Dev
Saat memasang karma, beberapa modul yang umum digunakan akan diinstal secara otomatis. Lihat properti Peerdependencies dari file package.json dalam kode karma.
Salinan kode adalah sebagai berikut:
"Peerdependencies": {
"Karma-Jasmine": "~ 0,1.0",
"Karma-Requirejs": "~ 0.2.0",
"Karma-Coffee-Preprocessor": "~ 0,1,0",
"karma-html2js-preprocessor": "~ 0,1,0",
"Karma-Chrome-Launcher": "~ 0.1.0”,
"Karma-Firefox-Launcher": "~ 0,1,0",
"Karma-Phantomjs-Launcher": "~ 0,1,0",
"Karma-Script-Launcher": "~ 0,1.0"
}
Kemudian kerangka kerja yang biasa biasanya membutuhkan file konfigurasi. Dalam karma, itu bisa menjadi karma.conf.js. Kode di dalamnya adalah gaya nodejs. Contoh umum adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
module.exports = function (config) {
config.set ({
// direktori dasar dalam file berikut
Basepath: '../',
// informasi JS yang perlu dimuat di lingkungan pengujian
File: [
'App/Bower_Components/Angular/Angular.js',
'App/Bower_Components/Angular-route/Angular-route.js',
'App/Bower_Components/Angular-Mocks/Angular-Mocks.js',
'app/js/**/*. js',
'Tes/Unit/**/*. JS'
],
// Apakah akan secara otomatis mendengarkan perubahan dalam file di atas, secara otomatis menjalankan tes
Autowatch: Benar,
// Kerangka Tes Aplikasi
Kerangka kerja: ['Jasmine'],
// Lingkungan apa yang digunakan untuk menguji kode? Ini Chrome`
Browser: ['chrome'],
// plugin yang digunakan, seperti browser chrome dan jasmine plug-in
Plugin: [
'Karma-Chrome-Launcher',
'Karma-Firefox-Launcher',
'Karma-Jasmine',
'Karma-Junit-Reporter'
],
// Output dari konten tes dan nama modul yang digunakan untuk mengekspor
Reporter: ['Kemajuan', 'Junit'],
// Atur informasi file konten uji output
junitreporter: {
outputFile: 'test_out/unit.xml',
Suite: 'Unit'
}
});
};
Ketika Anda perlu memperhatikan hal ini, sebagian besar plug-in di atas tidak perlu diinstal secara terpisah, karena telah diinstal saat memasang karma. Hanya plug-in ekspor-junit-junit-reporter yang perlu diinstal secara terpisah. Jika Anda ingin tahu lebih banyak tentang file konfigurasi, klik di sini
Itu semua tentang karma. Jika Anda ingin tahu lebih banyak tentang itu, klik di sini
Apa itu Jasmine
Jasmine adalah kerangka kerja pengembangan yang digerakkan oleh perilaku untuk menguji kode JavaScript. Itu tidak tergantung pada kerangka kerja JavaScript lainnya. Itu tidak memerlukan dom. Dan itu memiliki sintaks yang bersih dan jelas sehingga Anda dapat dengan mudah menulis tes.
Di atas adalah penjelasannya dalam dokumen resmi Jasmine, dan berikut ini adalah terjemahan sederhana dalam bahasa Cina
Jasmine adalah kerangka pengujian yang digerakkan oleh perilaku yang tidak bergantung pada kerangka kerja dan DOM JS. Ini adalah perpustakaan uji API yang sangat bersih dan ramah.
Berikut adalah contoh sederhana untuk menggambarkan penggunaannya
Tentukan perintah file uji sebagai test.js
Salinan kode adalah sebagai berikut:
jelaskan ("A Spec (With Setup and Tear-Down)", function () {
var foo;
sebelum kembali (function () {
foo = 0;
foo += 1;
});
aftereach (function () {
foo = 0;
});
itu ("hanyalah fungsi, sehingga dapat berisi kode apa pun", function () {
harapkan (foo) .toequal (1);
});
itu ("dapat memiliki lebih dari satu ekspektasi", function () {
harapkan (foo) .toequal (1);
harapkan (benar) .toequal (true);
});
});
Contoh di atas berasal dari situs web resmi. Berikut adalah beberapa API penting. Untuk penggunaan lebih lanjut, silakan klik di sini
1. Pertama, setiap kasus uji didefinisikan oleh fungsi menjelaskan. Ini memiliki dua parameter. Yang pertama digunakan untuk menggambarkan konten sentral keseluruhan dari tes, dan parameter kedua adalah fungsi, yang menulis beberapa kode uji nyata.
2. Ini digunakan untuk mendefinisikan satu tugas pengujian spesifik tunggal, dan juga memiliki dua parameter. Yang pertama digunakan untuk menggambarkan konten tes, dan parameter kedua adalah fungsi, yang menyimpan beberapa metode pengujian.
3. Harapan terutama digunakan untuk menghitung nilai variabel atau ekspresi, dan kemudian membandingkannya dengan nilai yang diharapkan atau melakukan beberapa peristiwa lain.
4. Beforeach dan Aftereach terutama digunakan untuk melakukan beberapa hal sebelum dan sesudah tugas pengujian dieksekusi. Contoh di atas adalah mengubah nilai variabel sebelum eksekusi, dan kemudian mengatur ulang nilai variabel setelah eksekusi selesai.
Akhirnya, ruang lingkup dalam fungsi menggambarkan dapat diakses dalam subfungsi di dalamnya, seperti halnya di atas mengakses variabel foo
Jika Anda ingin menjalankan contoh tes di atas, Anda dapat menjalankannya melalui Karar. Contoh perintah adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
Karma Mulai Tes/Karma.conf.js
Selanjutnya, kami akan fokus pada pengujian unit pengontrol, instruksi, dan modul layanan di NG.
Tes unit untuk NG
Karena kerangka NG itu sendiri, modul dimuat dan dipakai melalui DI, jadi untuk memfasilitasi penulisan skrip uji dengan melati, pejabat menyediakan kelas alat uji mock.js untuk memberikan definisi modul, pemuatan, injeksi, dll.
Mari kita bicara tentang beberapa metode umum di NG-mock
1.Sangular.mock.module Metode ini juga ada di jendela namespace, yang sangat nyaman untuk dihubungi.
Modul digunakan untuk mengonfigurasi informasi modul yang disuntikkan dengan metode injeksi. Parameter dapat berupa string, fungsi, dan objek. Mereka dapat digunakan seperti berikut ini.
Salinan kode adalah sebagai berikut:
Sebelum ada (modul ('myapp.filters'));
Sebelum bereach (module (function ($ invice) {
$ tersedia.Value ('versi', 'test_ver');
}));
Ini umumnya digunakan dalam metode sebelum kembali, karena ini dapat memastikan bahwa metode injeksi dapat memperoleh konfigurasi modul saat menjalankan tugas pengujian.
1.Sangular.mock. Metode ini juga ada di jendela namespace, yang sangat nyaman untuk dihubungi.
Suntikan digunakan untuk menyuntikkan modul NG yang dikonfigurasi di atas. Itu disebut dalam fungsi uji itu. Contoh panggilan umum adalah sebagai berikut:
Salinan kode adalah sebagai berikut:
angular.module ('myApplicationModule', [])
.value ('mode', 'aplikasi')
.value ('versi', 'v1.0.1');
jelaskan ('myapp', function () {
// Anda perlu memuat modul yang ingin Anda uji,
// Ini memuat hanya modul "ng" secara default.
Sebelum ada (modul ('MyApplicationModule'));
// inject () digunakan untuk menyuntikkan argumen dari semua fungsi yang diberikan
itu ('harus menyediakan versi', inject (function (mode, versi) {
harapkan (versi) .toequal ('v1.0.1');
harapkan (mode) .toequal ('app');
}));
// Metode injeksi dan modul juga dapat digunakan di dalamnya atau sebelum kembali
itu ('harus mengganti versi dan menguji versi baru disuntikkan', function () {
// modul () mengambil fungsi atau string (modul alias)
modul (fungsi ($ berikan) {
$ tersedia. // Versi override di sini
});
inject (function (versi) {
harapkan (versi) .toequal ('ditimpa');
});
});
});
Di atas adalah beberapa contoh suntikan yang disediakan oleh pejabat, dan kodenya mudah dimengerti. Faktanya, injeksi adalah instance injeksi ketergantungan bawaan yang dibuat menggunakan metode Angular.Inject. Maka injeksi modul sama dengan pemrosesan ketergantungan dalam modul NG biasa.
Setelah secara singkat memperkenalkan NG-mock, kami akan menulis tes unit sederhana menggunakan pengontrol, instruksi, dan filter.
Uji unit pengontrol
Tentukan pengontrol sederhana
Salinan kode adalah sebagai berikut:
var myapp = angular.module ('myapp', []);
myapp.controller ('mycontroller', function ($ scope) {
$ scope.spices = [{"name": "pasilla", "spiciness": "ringan"},
{"Name": "Jalapeno", "Spiciness": "Hot Hot Hot!"},
{"name": "habanero", "spiciness": "lava hot !!"}];
$ scope.spice = "Halo feenan!";
});
Lalu kami menulis skrip tes
Salinan kode adalah sebagai berikut:
jelaskan ('function mycontroller', function () {
jelaskan ('mycontroller', function () {
var $ scope;
sebelum ada (modul ('myapp'));
Sebelum ada (suntikan (fungsi ($ rootscope, $ controller) {
$ scope = $ rootscope. $ new ();
$ controller ('mycontroller', {$ scope: $ scope});
}));
itu ('harus membuat model "rempah -rempah" dengan 3 rempah -rempah', function () {
harapkan ($ scope.spices.length) .tobe (3);
});
itu ('harus mengatur nilai default spice', function () {
harapkan ($ scope.spice) .tobe ('halo umpan balik!');
});
});
});
Di atas menggunakan $ rootscope untuk membuat subscope, dan kemudian meneruskan parameter ini ke dalam metode konstruksi pengontrol $ pengontrol. Akhirnya, metode di atas akan dieksekusi. Kemudian kami memeriksa apakah jumlah array dalam subscope dan apakah variabel string sama dengan nilai yang diharapkan.
Jika Anda ingin tahu lebih banyak tentang pengontrol di NG, Anda dapat mengklik di sini
Uji unit instruksi di NG
Tentukan instruksi sederhana
Salinan kode adalah sebagai berikut:
var app = angular.module ('myapp', []);
app.directive ('agreateye', function () {
kembali {
Batasi: 'e',
Ganti: Benar,
Template: '<H1> Tanpa Tutup, Tersesat dalam Api, 1 kali </h1>'
};
});
Lalu kami menulis skrip tes sederhana
Salinan kode adalah sebagai berikut:
jelaskan ('unit testing great quotes', function () {
var $ compile;
var $ rootscope;
// Muat modul myApp, yang berisi arahan
sebelum ada (modul ('myapp'));
// Simpan referensi ke $ rootscope dan $ compile
// jadi mereka tersedia untuk semua tes di blok yang menjelaskan ini
sebelum kembali (inject (function (_ $ compile_, _ $ rootscope _) {
// Injektor membuka bungkus garis bawah (_) dari sekitar nama parameter saat mencocokkan
$ compile = _ $ compile_;
$ rootscope = _ $ rootscope_;
}));
itu ('menggantikan elemen dengan konten yang sesuai', function () {
// Kompilasi sepotong html yang berisi arahan
var elemen = $ compile ("<a-great-eye> </a-great-eye>") ($ rootscope);
// menembakkan semua jam tangan, jadi ekspresi lingkup 1 akan dievaluasi
$ rootscope. $ digest ();
// Periksa apakah elemen yang dikompilasi berisi konten templated
harapkan (element.html ()). Tocontain ("Lidless, Lost In Flame, 2 kali");
});
});
Contoh di atas berasal dari yang resmi, dan perintah di atas akan digunakan dalam HTML.
Salinan kode adalah sebagai berikut:
<a-great-eye> </a-great-eye>
Skrip uji pertama -tama menyuntikkan dua layanan $ kompilasi dan $ rootscope, satu digunakan untuk mengkompilasi HTML dan yang lainnya digunakan untuk membuat ruang lingkup. Perhatikan bahwa _ digunakan di sini. Ketika layanan yang disuntikkan di NG ditambahkan sebelum dan sesudah, itu akan diproses oleh NG. Kedua layanan ini disimpan dalam dua variabel internal, sehingga kasus uji berikut dapat dipanggil.
Metode $ kompilasi diteruskan ke instruksi asli HTML, dan kemudian fungsi yang dikembalikan disahkan dalam $ rootscope, yang melengkapi ikatan ruang lingkup dan tampilan. Akhirnya, hubungi $ rootscope. $ Digest untuk memicu semua mendengarkan, memastikan bahwa konten model dalam tampilan diperbarui
Kemudian dapatkan konten HTML dari elemen yang sesuai dari instruksi saat ini dan bandingkan dengan nilai yang diharapkan.
Jika Anda ingin tahu lebih banyak tentang instruksi di NG, Anda dapat mengklik di sini
Uji unit filter di NG
Tentukan filter sederhana
Salinan kode adalah sebagai berikut:
var app = angular.module ('myapp', []);
app.filter ('interpolate', ['versi', function (versi) {
return function (teks) {
return string (teks) .replace (//%versi/%/mg, versi);
};
}]);
Kemudian tulis skrip tes sederhana
Salinan kode adalah sebagai berikut:
jelaskan ('filter', function () {
sebelum ada (modul ('myapp'));
jelaskan ('interpolate', function () {
Sebelum bereach (module (function ($ invice) {
$ tersedia.Value ('versi', 'test_ver');
}));
itu ('harus mengganti versi', inject (function (interpolateFilter) {
harapkan (interpolateFilter ('sebelum % versi % setelah')). Toequal ('sebelum test_ver setelah');
}));
});
});
Kode di atas pertama kali mengkonfigurasi modul filter dan kemudian menentukan nilai versi. Karena interpolat tergantung pada layanan ini, akhirnya menyuntikkan filter interpolasi dengan suntikan. Perhatikan bahwa filter di sini harus diikuti oleh sufiks filter, dan akhirnya melewati konten teks ke dalam fungsi filter untuk dieksekusi, dan membandingkannya dengan nilai yang diharapkan.
Meringkaskan
Ada banyak manfaat untuk menggunakan tes untuk mengembangkan NG, yang dapat memastikan stabilitas modul. Hal lain adalah Anda dapat memiliki pemahaman mendalam tentang mekanisme operasi internal NG, sehingga disarankan agar siswa yang menggunakan NG mengembangkan harus mengisi tes sesegera mungkin!