Apabila projek ng semakin besar, ujian unit akan dimasukkan ke dalam agenda Kadangkala pasukan akan menguji terlebih dahulu, dan ada yang akan melaksanakan fungsi itu dahulu dan kemudian menguji modul berfungsi itu kemudian . Hari ini saya akan bercakap tentang Mari kita bercakap tentang menggunakan karma dan melati untuk melaksanakan ujian unit modul ng.
Apakah itu Karma
Karma ialah rangka kerja kawalan larian ujian unit yang menyediakan ujian unit berjalan dalam persekitaran yang berbeza, seperti chrome, firfox, phantomjs, dll. Rangka kerja ujian menyokong melati, mocha, qunit dan merupakan modul npm menggunakan nodejs sebagai persekitaran .
Adalah disyorkan untuk menggunakan parameter ----save-dev untuk memasang modul npm yang berkaitan dengan ujian, kerana ini berkaitan dengan pembangunan Secara amnya, untuk menjalankan karma, anda hanya memerlukan dua arahan npm berikut
Apabila memasang karma, beberapa modul yang biasa digunakan akan dipasang secara automatik Sila rujuk atribut peerDependencies fail package.json dalam kod karma
Rangka kerja berjalan biasa biasanya memerlukan fail konfigurasi Dalam karma, ia boleh menjadi karma.conf.js Kod di dalam adalah dalam gaya nodejs. Contoh biasa adalah seperti berikut
};
Perlu diingatkan di sini bahawa kebanyakan pemalam di atas tidak perlu dipasang secara berasingan, kerana ia sudah dipasang semasa memasang karma Hanya pemalam eksport karma-junit-reporter perlu dipasang secara berasingan. Saya ingin mengetahui lebih lanjut mengenai maklumat fail tersedia, Klik di sini
Itu sahaja untuk karma Jika anda ingin mengetahui lebih lanjut mengenainya, Klik di sini
Apa itu melati
Jasmine ialah rangka kerja pembangunan dipacu tingkah laku untuk menguji kod JavaScript. Ia tidak memerlukan DOM dan mempunyai sintaks yang bersih dan jelas supaya anda boleh menulis ujian dengan mudah.
Di atas adalah penjelasannya dalam dokumentasi rasmi melati Di bawah adalah terjemahan mudah dalam bahasa Cina
jasmine ialah rangka kerja ujian untuk pembangunan dipacu tingkah laku Ia tidak bergantung pada mana-mana rangka kerja js atau DOM Ia adalah perpustakaan ujian API yang sangat bersih dan mesra.
Berikut ialah contoh mudah untuk menggambarkan penggunaannya
Takrifkan arahan fail ujian sebagai test.js
sebelumSetiap(fungsi() {
foo = 0;
foo = 1;
});
selepasSetiap(fungsi() {
foo = 0;
});
it("hanya fungsi, jadi ia boleh mengandungi sebarang kod", function() {
Jangkakan(foo).toEqual(1);
});
it("boleh mempunyai lebih daripada satu jangkaan", function() {
Jangkakan(foo).toEqual(1);
Jangkakan(benar).toEqual(benar);
});
});
Contoh di atas adalah daripada tapak web rasmi Berikut adalah beberapa API penting untuk kegunaan lanjut, sila Klik di sini
1. Pertama, mana-mana kes ujian ditakrifkan dengan fungsi huraikan, yang mempunyai dua parameter yang pertama digunakan untuk menerangkan kandungan pusat umum ujian, dan parameter kedua ialah fungsi di mana beberapa kod ujian sebenar tertulis
2.ia digunakan untuk mentakrifkan satu tugas ujian khusus Ia juga mempunyai dua parameter Yang pertama digunakan untuk menerangkan kandungan ujian, dan parameter kedua ialah fungsi yang menyimpan beberapa kaedah ujian
.3.expect digunakan terutamanya untuk mengira nilai pembolehubah atau ungkapan, dan kemudian membandingkannya dengan nilai yang dijangkakan atau melakukan beberapa peristiwa lain
4.beforeEach dan afterEach digunakan terutamanya untuk melakukan sesuatu sebelum dan selepas melaksanakan tugas ujian Contoh di atas adalah untuk menukar nilai pembolehubah sebelum pelaksanaan, dan kemudian menetapkan semula nilai pembolehubah selepas pelaksanaan selesai. 🎜>
Perkara terakhir untuk dikatakan ialah skop dalam fungsi huraikan boleh diakses dalam sub-fungsi seperti JS biasa, sama seperti ia mengakses pembolehubah foo di atasJika anda ingin menjalankan contoh ujian di atas, anda boleh menjalankannya melalui karar Contoh arahan adalah seperti berikut:
Ujian unit NG
Disebabkan rangka kerja ng itu sendiri, modul dimuatkan dan dijadikan instantiated melalui di. . , memuatkan, suntikan, dsb.Mari kita bincangkan tentang beberapa kaedah biasa dalam ng-mock
1.angular.mock.module Kaedah ini juga dalam ruang nama tetingkap dan sangat mudah untuk dipanggil
modul digunakan untuk mengkonfigurasi maklumat modul yang disuntik oleh kaedah suntikan Parameter boleh menjadi rentetan, fungsi dan objek, dan boleh digunakan seperti berikut
$provide.value('version', 'TEST_VER');
}));
1.angular.mock.inject Kaedah ini juga dalam ruang nama tetingkap dan sangat mudah untuk dipanggil
inject digunakan untuk menyuntik modul ng yang dikonfigurasikan di atas, yang dipanggil dalam fungsi ujian contoh panggilan biasa adalah seperti berikut:
describe('MyApp', function() {
// Anda perlu memuatkan modul yang ingin anda uji,
// ia hanya memuatkan modul "ng" secara lalai.
beforeEach(modul('myApplicationModule'));
// inject() digunakan untuk menyuntik argumen semua fungsi yang diberikan
ia('harus menyediakan versi', inject(fungsi(mod, versi) {
jangkakan(versi).toEqual('v1.0.1');
jangkakan(mod).toEqual('app');
}));
// Kaedah suntikan dan modul juga boleh digunakan di dalam atau sebelumSetiap
it('sepatutnya mengatasi versi dan menguji versi baharu disuntik', function() {
// module() mengambil fungsi atau rentetan (alias modul)
modul(fungsi($provide) {
$provide.value('versi', 'overridden'); // mengatasi versi di sini
});
inject(fungsi(versi) {
expect(version).toEqual('override');
});
});
});
上面是官方提供的一些inject例子,代码很好看懂,其实inject里面就是利用angular.inject上的爩用angular.inject徹的用angular.赖注入实例,然后里面的模块注入跟普通ng模块里的依赖处理是一样的
简单的介绍完ng-mock之后,下面我们分别以控制器,指令,过滤器来编写一卅们分别以控制器,指令,过滤器来编写一卅个管.
ng里控制器的单元测试
定义一个简单的控制器
$scope.spices = [{"name":"pasilla", "spiciness":"mild"},
{"name":"jalapeno", "spiciness":"panas panas panas!"},
{"nama":"habanero", "kepedasan":"PANAS LAVA!!"}];
$scope.spice = "hello feenan!";
});
var $skop;
beforeEach(inject(function($rootScope, $controller) {
$scope = $rootScope.$new();
$controller('MyController', {$scope: $scope});
}));
jangkakan($scope.spices.length).toBe(3);
});
jangkakan($scope.spice).toBe('hello feenan!');
});
});
想要了解更多关于ng里的控制器的信息,可以
ng里指令的单元测试
定义一个简单的指令
app.directive('aGreatEye', fungsi () {
kembali {
hadkan: 'E',
gantikan: benar,
templat: '
然后我们编写一个简单的测试脚本
// Muatkan modul myApp, yang mengandungi arahan
beforeEach(modul('myApp'));
// Simpan rujukan kepada $rootScope dan $compile
// jadi ia tersedia untuk semua ujian dalam blok huraikan ini
beforeEach(inject(function(_$compile_, _$rootScope_){
// Penyuntik membuka balutan garis bawah (_) dari sekeliling nama parameter apabila memadankan
$compile = _$compile_;
$rootScope = _$rootScope_;
}));
it('Menggantikan elemen dengan kandungan yang sesuai', function() {
// Susun sekeping HTML yang mengandungi arahan
elemen var = $compile("
// pecat semua jam tangan, jadi ungkapan skop 1 akan dinilai
$rootScope.$digest();
// Semak bahawa elemen yang disusun mengandungi kandungan templat
expect(element.html()).toContain("tanpa penutup, dililit dalam api, 2 kali");
});
});
上面的例子来自于官方提供的,最终上面的指令将会这用在html里使用
测试脚本里首先注入$compile与$rootScope两个服务,一个用来编译html,一个用来创建,一个用来编译html,一个用来创建,埨用来创建,一个用来编译html默认ng里注入的服务前后加上_时,最后会被ng处理掉的,这两个服务保存在内部的两个变量里,方便下面的测试用例能调$compile方法传入原指令html,然后在返回的函数里传入$rootScope,这样就完成了作完成了作甎埆作甎埆调用$rootScope.$digest来触发所有监听,保证视图里的模型内容得到更新
然后获取当前指令对应元素的html内容与期望值进行对比.
想要了解更多关于ng里的指令的信息,可以
ng里的过滤器单元测试
定义一个简单的过滤器
huraikan('interpolate', function() {
sebelumSetiap(modul(fungsi($provide) {
$provide.value('version', 'TEST_VER');
}));
Ia('sepatutnya menggantikan VERSI', inject(function(interpolateFilter) {
Jangkakan(interpolateFilter('sebelum %VERSION% selepas')).toEqual('sebelum TEST_VER selepas');
}));
});
});
Kod di atas mula-mula mengkonfigurasi modul penapis, kemudian mentakrifkan nilai versi, kerana interpolate bergantung pada perkhidmatan ini, dan akhirnya menggunakan inject untuk menyuntik penapis interpolate Ambil perhatian bahawa akhiran Penapis mesti ditambah selepas penapis di sini, dan akhirnya kandungan teks dihantar kepada Dilaksanakan dalam fungsi penapis dan dibandingkan dengan nilai yang dijangkakan.
Ringkasan
Terdapat banyak faedah menggunakan ujian untuk membangunkan NG Ia dapat memastikan kestabilan modul ialah ia boleh mempunyai pemahaman yang mendalam tentang mekanisme operasi dalaman ng yang berkembang dengan ng cepat menebus ujian!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
