เมื่อโครงการ NG มีขนาดใหญ่ขึ้นเรื่อย ๆ การทดสอบหน่วยจะต้องวางในวาระการประชุม บางครั้งทีมทำการทดสอบก่อนบางฟังก์ชั่นใช้งานก่อนจากนั้นทดสอบโมดูลการทำงาน สิ่งนี้มีข้อดีและข้อเสียของตัวเอง วันนี้เราส่วนใหญ่พูดคุยเกี่ยวกับการใช้กรรมและดอกมะลิเพื่อทำการทดสอบหน่วยของโมดูล NG
กรรมคืออะไร
Karma เป็นเฟรมเวิร์กการควบคุมการทดสอบหน่วยโดยให้การทดสอบหน่วยการทำงานในสภาพแวดล้อมที่แตกต่างกันเช่น Chrome, Firfox, Phantomjs ฯลฯ กรอบการทดสอบรองรับ Jasmine, Mocha, Qunnit และเป็นโมดูล NPM ที่มี nodejs เป็นสภาพแวดล้อม
ขอแนะนำให้ใช้พารามิเตอร์ ---- Save-Dev เมื่อติดตั้งและทดสอบโมดูล NPM ที่เกี่ยวข้องเนื่องจากสิ่งนี้เกี่ยวข้องกับการพัฒนา โดยทั่วไปหากคุณเรียกใช้กรรมจำเป็นต้องใช้คำสั่ง NPM สองคำต่อไปนี้เท่านั้น
การคัดลอกรหัสมีดังนี้:
NPM ติดตั้ง Karma-Save-Dev
NPM ติดตั้ง karma-junit-reporter--save-dev
เมื่อติดตั้งกรรมโมดูลที่ใช้กันทั่วไปบางตัวจะถูกติดตั้งโดยอัตโนมัติ อ้างถึงคุณสมบัติ PeerDependencies ของไฟล์ package.json ในรหัส Karma
การคัดลอกรหัสมีดังนี้:
"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"
-
จากนั้นกรอบการทำงานทั่วไปมักจะต้องใช้ไฟล์การกำหนดค่า ในกรรมมันสามารถเป็น karma.conf.js รหัสด้านในเป็นสไตล์ NodeJS ตัวอย่างทั่วไปมีดังนี้:
การคัดลอกรหัสมีดังนี้:
module.exports = function (config) {
config.set ({
// ไดเรกทอรีพื้นฐานในไฟล์ต่อไปนี้
Basepath: '../',
// ข้อมูล JS ที่ต้องโหลดในสภาพแวดล้อมการทดสอบ
ไฟล์: [
'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'
'ทดสอบ/หน่วย/**/*. js'
-
// ว่าจะฟังการเปลี่ยนแปลงในไฟล์ข้างต้นโดยอัตโนมัติหรือไม่ให้เรียกใช้การทดสอบโดยอัตโนมัติ
Autowatch: จริง
// กรอบทดสอบแอปพลิเคชัน
Frameworks: ['Jasmine'],
// สภาพแวดล้อมใดที่จะใช้ในการทดสอบรหัส นี่คือ Chrome`
เบราว์เซอร์: ['Chrome'],
// ปลั๊กอินที่ใช้เช่นเบราว์เซอร์โครเมี่ยมและปลั๊กอินจัสมิน
ปลั๊กอิน: [
'Karma-Chrome-Launcher'
'Karma-Firefox-Launcher'
'Karma-Jasmine'
'Karma-Junit-Reporter'
-
// เอาต์พุตของเนื้อหาทดสอบและชื่อโมดูลที่ใช้ในการส่งออก
ผู้สื่อข่าว: ['ความคืบหน้า', 'Junit'],
// ตั้งค่าข้อมูลของไฟล์เนื้อหาทดสอบเอาต์พุต
JunitReporter: {
outputFile: 'test_out/unit.xml'
Suite: 'Unit'
-
-
-
เมื่อคุณต้องการให้ความสนใจกับสิ่งนี้ปลั๊กอินส่วนใหญ่ไม่จำเป็นต้องติดตั้งแยกต่างหากเนื่องจากได้รับการติดตั้งเมื่อติดตั้งกรรม ต้องติดตั้งปลั๊กอินส่งออก Karma-Junit-Reporter เท่านั้น หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับไฟล์การกำหนดค่าคลิกที่นี่
นั่นคือทั้งหมดที่เกี่ยวกับกรรม หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับเรื่องนี้คลิกที่นี่
ดอกมะลิคืออะไร
จัสมินเป็นกรอบการพัฒนาที่ขับเคลื่อนด้วยพฤติกรรมสำหรับการทดสอบรหัสจาวาสคริปต์ มันไม่ได้ขึ้นอยู่กับกรอบ JavaScript อื่น ๆ ไม่จำเป็นต้องมี DOM และมีไวยากรณ์ที่สะอาดและชัดเจนเพื่อให้คุณสามารถเขียนการทดสอบได้อย่างง่ายดาย
ข้างต้นคือคำอธิบายของมันในเอกสารอย่างเป็นทางการของจัสมินและต่อไปนี้เป็นคำแปลง่ายๆในภาษาจีน
จัสมินเป็นกรอบการทดสอบที่ขับเคลื่อนด้วยพฤติกรรมที่ไม่พึ่งพากรอบ JS และ DOM ใด ๆ เป็นห้องสมุดทดสอบ API ที่สะอาดและเป็นมิตรมาก
นี่คือตัวอย่างง่ายๆในการแสดงการใช้งาน
กำหนดคำสั่งไฟล์ทดสอบเป็น test.js
การคัดลอกรหัสมีดังนี้:
อธิบาย ("สเป็ค (พร้อมการตั้งค่าและการฉีกขาด)", function () {
var foo;
ก่อนหน้า (ฟังก์ชั่น () {
foo = 0;
foo += 1;
-
aftereach (function () {
foo = 0;
-
มัน ("เป็นเพียงฟังก์ชั่นดังนั้นจึงสามารถมีรหัสใด ๆ ", function () {
คาดหวัง (foo) .toequal (1);
-
มัน ("สามารถมีมากกว่าหนึ่งความคาดหวัง", function () {
คาดหวัง (foo) .toequal (1);
คาดหวัง (จริง) .toequal (จริง);
-
-
ตัวอย่างข้างต้นมาจากเว็บไซต์ทางการ นี่เป็นเพียง API ที่สำคัญเพียงไม่กี่แห่ง สำหรับการใช้งานเพิ่มเติมโปรดคลิกที่นี่
1. ก่อนอื่นกรณีทดสอบใด ๆ จะถูกกำหนดโดยฟังก์ชันอธิบาย มันมีสองพารามิเตอร์ ครั้งแรกใช้เพื่ออธิบายเนื้อหาส่วนกลางโดยรวมของการทดสอบและพารามิเตอร์ที่สองเป็นฟังก์ชันซึ่งเขียนรหัสทดสอบจริงบางอย่าง
2. มันใช้เพื่อกำหนดงานทดสอบที่เฉพาะเจาะจงเพียงครั้งเดียวและยังมีพารามิเตอร์สองตัว อันแรกใช้เพื่ออธิบายเนื้อหาการทดสอบและพารามิเตอร์ที่สองเป็นฟังก์ชั่นซึ่งเก็บวิธีการทดสอบบางอย่าง
3. คาดว่าจะใช้เป็นหลักในการคำนวณค่าของตัวแปรหรือนิพจน์จากนั้นเปรียบเทียบกับค่าที่คาดหวังหรือทำเหตุการณ์อื่น ๆ
4. ก่อนหน้าและ aftereach ส่วนใหญ่จะใช้ทำบางสิ่งก่อนและหลังงานทดสอบจะถูกดำเนินการ ตัวอย่างข้างต้นคือการเปลี่ยนค่าของตัวแปรก่อนที่จะดำเนินการจากนั้นรีเซ็ตค่าของตัวแปรหลังจากการดำเนินการเสร็จสมบูรณ์
ในที่สุดขอบเขตในฟังก์ชั่นอธิบายสามารถเข้าถึงได้ในฟังก์ชั่นย่อยในนั้นเช่นเดียวกับข้างต้นมันเข้าถึงตัวแปร FOO
หากคุณต้องการเรียกใช้ตัวอย่างการทดสอบด้านบนคุณสามารถเรียกใช้ผ่าน Karar ตัวอย่างคำสั่งมีดังนี้:
การคัดลอกรหัสมีดังนี้:
Karma Start Test/Karma.conf.js
ต่อไปเราจะมุ่งเน้นไปที่การทดสอบหน่วยของคอนโทรลเลอร์คำแนะนำและโมดูลบริการใน NG
การทดสอบหน่วยสำหรับ NG
เนื่องจากเฟรมเวิร์กของ NG เองโมดูลจึงถูกโหลดและอินสแตนซ์ผ่าน DI ดังนั้นเพื่ออำนวยความสะดวกในการเขียนสคริปต์ทดสอบด้วยดอกมะลิอย่างเป็นทางการอย่างเป็นทางการ
มาพูดคุยเกี่ยวกับวิธีการทั่วไปใน NG-mock
1.Angular.mock.Module วิธีนี้ยังอยู่ในเนมสเปซหน้าต่างซึ่งสะดวกมากในการโทร
โมดูลใช้เพื่อกำหนดค่าข้อมูลโมดูลที่ฉีดด้วยวิธีการฉีด พารามิเตอร์สามารถเป็นสตริงฟังก์ชั่นและวัตถุ พวกเขาสามารถใช้งานได้ดังต่อไปนี้
การคัดลอกรหัสมีดังนี้:
ก่อนหน้า (โมดูล ('myapp.filters'));
ก่อนหน้า (โมดูล (ฟังก์ชั่น ($ ให้) {
$ prevent.value ('เวอร์ชัน', 'test_ver');
-
โดยทั่วไปจะใช้ในวิธีการก่อนหน้านี้เพราะสามารถมั่นใจได้ว่าวิธีการฉีดสามารถรับการกำหนดค่าโมดูลเมื่อดำเนินการทดสอบงาน
1.Angular.mock.inject วิธีนี้ยังอยู่ในเนมสเปซหน้าต่างซึ่งสะดวกมากในการโทร
การฉีดใช้เพื่อฉีดโมดูล NG ที่กำหนดค่าไว้ด้านบน มันถูกเรียกในฟังก์ชั่นการทดสอบของมัน ตัวอย่างการโทรทั่วไปมีดังนี้:
การคัดลอกรหัสมีดังนี้:
Angular.module ('myapplicationModule', [])
.Value ('โหมด', 'แอป')
.Value ('เวอร์ชัน', 'v1.0.1');
อธิบาย ('MyApp', function () {
// คุณต้องโหลดโมดูลที่คุณต้องการทดสอบ
// มันโหลดเฉพาะโมดูล "NG" โดยค่าเริ่มต้น
ก่อนหน้า (โมดูล ('myapplicationModule'));
// inject () ใช้เพื่อฉีดอาร์กิวเมนต์ของฟังก์ชั่นที่กำหนดทั้งหมด
มัน ('ควรให้เวอร์ชัน', inject (ฟังก์ชั่น (โหมด, เวอร์ชัน) {
คาดหวัง (เวอร์ชัน) .toequal ('v1.0.1');
คาดหวัง (โหมด) .toequal ('แอป');
-
// วิธีการฉีดและโมดูลสามารถใช้ภายในของ IT หรือก่อนหน้า
มัน ('ควรแทนที่เวอร์ชันและทดสอบเวอร์ชันใหม่ถูกฉีด', function () {
// โมดูล () ใช้ฟังก์ชันหรือสตริง (นามแฝงโมดูล)
โมดูล (ฟังก์ชั่น ($ ให้) {
$ PRISTION.VALUE ('เวอร์ชัน', 'OverRidden'); // แทนที่เวอร์ชันที่นี่
-
ฉีด (ฟังก์ชั่น (เวอร์ชัน) {
คาดหวัง (เวอร์ชัน) .toequal ('overridden');
-
-
-
ข้างต้นเป็นตัวอย่างการฉีดบางส่วนที่จัดทำโดยเจ้าหน้าที่และรหัสนั้นเข้าใจง่าย ในความเป็นจริงการฉีดเป็นอินสแตนซ์การฉีดขึ้นอยู่กับการพึ่งพาในตัวที่สร้างขึ้นโดยใช้วิธีเชิงมุม จากนั้นการฉีดโมดูลจะเหมือนกับการประมวลผลการพึ่งพาในโมดูล NG สามัญ
หลังจากแนะนำ NG-mock สั้น ๆ เราจะเขียนการทดสอบหน่วยอย่างง่ายโดยใช้คอนโทรลเลอร์คำแนะนำและตัวกรอง
การทดสอบหน่วยของคอนโทรลเลอร์
กำหนดคอนโทรลเลอร์อย่างง่าย
การคัดลอกรหัสมีดังนี้:
var myapp = angular.module ('myapp', []);
myapp.controller ('myController', ฟังก์ชั่น ($ scope) {
$ scope.spices = [{"ชื่อ": "pasilla", "เผ็ด": "อ่อน"},
{"ชื่อ": "Jalapeno", "เผ็ด": "ร้อนแรงร้อนแรง!"},
{"ชื่อ": "HABANERO", "เผ็ด": "ลาวาร้อน !!"}];
$ scope.spice = "สวัสดี Feenan!";
-
จากนั้นเราเขียนสคริปต์ทดสอบ
การคัดลอกรหัสมีดังนี้:
อธิบาย ('MyController function', function () {
อธิบาย ('MyController', function () {
var $ scope;
ก่อนหน้า (โมดูล ('myapp'));
ก่อนหน้า (ฉีด (ฟังก์ชั่น ($ rootscope, $ controller) {
$ scope = $ rootscope. $ new ();
$ controller ('myController', {$ scope: $ scope});
-
มัน (ควรสร้างโมเดล "เครื่องเทศ" ด้วย 3 เครื่องเทศ ', function () {
คาดหวัง ($ scope.spices.length) .tobe (3);
-
มัน ('ควรตั้งค่าเริ่มต้นของเครื่องเทศ', function () {
คาดหวัง ($ scope.spice) .tobe ('สวัสดีคำติชม!');
-
-
-
ข้างต้นใช้ $ rootscope เพื่อสร้าง subscope จากนั้นส่งผ่านพารามิเตอร์นี้ไปยังวิธีการก่อสร้างของคอนโทรลเลอร์ $ controller ในที่สุดวิธีการข้างต้นจะถูกดำเนินการ จากนั้นเราตรวจสอบว่าจำนวนอาร์เรย์ใน subscope และตัวแปรสตริงมีค่าเท่ากับค่าที่คาดหวังหรือไม่
หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับคอนโทรลเลอร์ใน NG คุณสามารถคลิกที่นี่
การทดสอบหน่วยของคำแนะนำใน NG
กำหนดคำสั่งง่ายๆ
การคัดลอกรหัสมีดังนี้:
var app = angular.module ('myapp', []);
app.directive ('AgreateYe', function () {
กลับ {
จำกัด : 'e',
แทนที่: จริง
เทมเพลต: '<H1> ไม่มีการสูญหายในเปลวไฟ 1 ครั้ง </h1>'
-
-
จากนั้นเราเขียนสคริปต์ทดสอบง่ายๆ
การคัดลอกรหัสมีดังนี้:
อธิบาย ('การทดสอบหน่วยคำพูดที่ยอดเยี่ยม', function () {
var $ compile;
var $ rootscope;
// โหลดโมดูล MyApp ซึ่งมีคำสั่ง
ก่อนหน้า (โมดูล ('myapp'));
// จัดเก็บข้อมูลอ้างอิงถึง $ rootscope และ $ compile
// ดังนั้นพวกเขาจึงพร้อมสำหรับการทดสอบทั้งหมดในบล็อกนี้อธิบาย
ก่อนหน้า (ฉีด (ฟังก์ชั่น (_ $ compile_, _ $ rootscope _) {
// หัวฉีดจะคลายขีดล่าง (_) จากรอบชื่อพารามิเตอร์เมื่อจับคู่
$ compile = _ $ compile_;
$ ROOTSCOPE = _ $ ROOTSCOPE_;
-
มัน ('แทนที่องค์ประกอบด้วยเนื้อหาที่เหมาะสม', function () {
// รวบรวมชิ้นส่วนของ html ที่มีคำสั่ง
องค์ประกอบ var = $ compile ("<a-greatee> </a-great-eye>") ($ rootscope);
// ยิงนาฬิกาทั้งหมดดังนั้นขอบเขตการแสดงออก 1 จะได้รับการประเมิน
$ rootscope. $ digest ();
// ตรวจสอบว่าองค์ประกอบที่รวบรวมมีเนื้อหาแบบ templated
คาดหวัง (element.html ()). tocontain ("lidless, หายไปในเปลวไฟ, 2 ครั้ง");
-
-
ตัวอย่างข้างต้นมาจากอย่างเป็นทางการและคำสั่งข้างต้นจะใช้ใน HTML
การคัดลอกรหัสมีดังนี้:
<a-greate-eye> </a-great-eye>
สคริปต์ทดสอบแรกฉีดสองบริการ $ compile และ $ rootscope หนึ่งใช้เพื่อรวบรวม HTML และอื่น ๆ ใช้เพื่อสร้างขอบเขต โปรดทราบว่าใช้ _ ที่นี่ เมื่อมีการเพิ่มบริการใน NG ก่อนและหลังมันจะถูกประมวลผลโดย NG บริการทั้งสองนี้ถูกเก็บไว้ในตัวแปรภายในสองตัวเพื่อให้สามารถเรียกกรณีทดสอบต่อไปนี้ได้
วิธีการคอมไพล์ $ จะถูกส่งผ่านไปยังคำสั่งดั้งเดิม HTML จากนั้นฟังก์ชั่นที่ส่งคืนจะถูกส่งผ่านใน $ Rootscope ซึ่งทำให้การเชื่อมโยงของขอบเขตและมุมมองเสร็จสมบูรณ์ ในที่สุดโทร $ rootscope $ digest เพื่อทริกเกอร์การฟังทั้งหมดเพื่อให้แน่ใจว่าเนื้อหาโมเดลในมุมมองได้รับการอัปเดต
จากนั้นรับเนื้อหา HTML ขององค์ประกอบที่เกี่ยวข้องของคำสั่งปัจจุบันและเปรียบเทียบกับค่าที่คาดหวัง
หากคุณต้องการทราบข้อมูลเพิ่มเติมเกี่ยวกับคำแนะนำใน NG คุณสามารถคลิกที่นี่
การทดสอบหน่วยตัวกรองใน NG
กำหนดตัวกรองอย่างง่าย
การคัดลอกรหัสมีดังนี้:
var app = angular.module ('myapp', []);
app.filter ('interpolate', ['เวอร์ชัน', ฟังก์ชัน (เวอร์ชัน) {
ฟังก์ชั่นส่งคืน (ข้อความ) {
return string (text) .retlace (//%version/%/mg, เวอร์ชัน);
-
-
จากนั้นเขียนสคริปต์ทดสอบง่าย ๆ
การคัดลอกรหัสมีดังนี้:
อธิบาย ('ตัวกรอง', function () {
ก่อนหน้า (โมดูล ('myapp'));
อธิบาย ('interpolate', function () {
ก่อนหน้า (โมดูล (ฟังก์ชั่น ($ ให้) {
$ prevent.value ('เวอร์ชัน', 'test_ver');
-
มัน ('ควรแทนที่เวอร์ชัน', inject (function (interpolateFilter) {
คาดหวัง (InterpolateFilter ('ก่อน % veres % หลังจาก')). toequal ('ก่อน test_ver หลังจาก');
-
-
-
รหัสด้านบนกำหนดค่าโมดูลตัวกรองก่อนแล้วกำหนดค่าเวอร์ชัน เนื่องจากการแทรกแซงขึ้นอยู่กับบริการนี้ในที่สุดจึงฉีดฟิลเตอร์แทรกซึมด้วยการฉีด โปรดทราบว่าตัวกรองที่นี่จะต้องตามด้วยคำต่อท้ายตัวกรองและในที่สุดก็ส่งผ่านเนื้อหาข้อความลงในฟังก์ชันตัวกรองเพื่อดำเนินการและเปรียบเทียบกับค่าที่คาดหวัง
สรุป
มีประโยชน์มากมายในการใช้การทดสอบเพื่อพัฒนา NG ซึ่งสามารถมั่นใจได้ถึงความเสถียรของโมดูล อีกสิ่งหนึ่งคือคุณสามารถมีความเข้าใจในเชิงลึกเกี่ยวกับกลไกการทำงานภายในของ NG ดังนั้นขอแนะนำให้นักเรียนที่ใช้ NG เพื่อพัฒนาควรเติมเต็มในการทดสอบโดยเร็วที่สุด!