หลังจากเปลี่ยนแปลงหรือเพิ่มโค้ดแล้ว คุณควรเรียกใช้การทดสอบหน่วยที่มีอยู่และลองเขียนเพิ่ม การทดสอบทั้งหมดจะดําเนินการกับโค้ดเวอร์ชันที่ไม่ได้บีบอัด
การทดสอบ 1 ชุดมี 2 ชุด ได้แก่ การทดสอบ JS และการทดสอบเครื่องมือสร้างบล็อก
การทดสอบ JS
การทดสอบ JS จะยืนยันการทำงานของฟังก์ชัน JavaScript ภายในในแกนของ Blockly เราใช้ Mocha ในการทดสอบ 1 หน่วย, Sinon เพื่อทดสอบทรัพยากร Dependency และใช้ Chai เพื่อยืนยันโค้ด
การทดสอบที่ทำงานอยู่
npm run test
จะทำการทดสอบ 1 หน่วยทั้งในตัวอย่างแบบบล็อกและแบบบล็อก การบล็อกครั้งนี้จะทำการทดสอบอื่นๆ เช่น การวิเคราะห์ซอร์สโค้ดและการคอมไพล์ นอกจากนี้ คุณยังเปิด tests/mocha/index.html
ในเบราว์เซอร์เพื่อทดสอบมอคคาทั้งหมดแบบอินเทอร์แอกทีฟได้ด้วย
แบบทดสอบการเขียน
เราใช้อินเทอร์เฟซ Mocha TDD ในการทำการทดสอบ การทดสอบจะแบ่งออกเป็นชุดย่อย
ซึ่งอาจมีทั้งชุดย่อยและ/หรือการทดสอบเพิ่มเติม โดยทั่วไปแล้ว องค์ประกอบแต่ละรายการของ Blockly (เช่น toolbox
หรือ workspace
) จะมีไฟล์ทดสอบของตัวเองซึ่งมีชุดโปรแกรมอย่างน้อย 1 รายการ แต่ละชุดจะมีเมธอด setup
และ teardown
ซึ่งจะมีการเรียกใช้ก่อนและหลังการทดสอบแต่ละรายการในชุดนั้น
ผู้ช่วยทดสอบ
เรามีฟังก์ชันตัวช่วยมากมายสำหรับ Blockly โดยเฉพาะ ซึ่งอาจมีประโยชน์เมื่อเขียนการทดสอบ ซึ่งจะปรากฏในรูปแบบแกนและตัวอย่างบล็อก
ฟังก์ชันตัวช่วยประกอบด้วย sharedTestSetup
และ sharedTestTeardown
ซึ่งต้องระบุสำหรับการเรียกใช้ก่อนและหลังการทดสอบ (ดูส่วนข้อกำหนด)
sharedTestSetup
:
- ตั้งค่าตัวจับเวลา Sinon ปลอม (คุณจะต้องใช้
this.clock.runAll
ในการทดสอบบางรายการ) - Stubs Blockly.Events.fire เริ่มทำงานทันที (กำหนดค่าได้)
- ตั้งค่าการล้าง blockTypes ที่กำหนดผ่าน
defineBlocksWithJsonArray
โดยอัตโนมัติ - ประกาศพร็อพเพอร์ตี้ 2-3 รายการในบริบทของ
this
ที่ต้องเข้าถึงได้this.clock
(แต่ไม่ควรกู้คืนเพราะจะทำให้เกิดปัญหาในsharedTestTeardown
)this.eventsFireStub
this.sharedCleanup
(ใช้กับaddMessageToCleanup
และaddBlockTypeToCleanup
) (หมายเหตุ: คุณไม่จำเป็นต้องใช้addBlockTypeToCleanup
หากคุณกำหนดการบล็อกโดยใช้defineBlocksWithJsonArray
)
ฟังก์ชันนี้มีพารามิเตอร์ options
ที่ไม่บังคับ 1 รายการเพื่อกําหนดการตั้งค่า ปัจจุบันใช้เพื่อระบุว่าจะระงับ Blockly.Events.fire
ให้เริ่มทำงานทันทีหรือไม่เท่านั้น (จะสตับโดยค่าเริ่มต้น)
sharedTestTeardown
:
- การกำจัดพื้นที่ทำงาน
this.workspace
(ขึ้นอยู่กับตำแหน่งที่กำหนดไว้ โปรดดูข้อมูลเพิ่มเติมในส่วนข้อกำหนดการทดสอบ) - กู้คืนต้นขั้วทั้งหมด
- ล้างการบล็อกทุกประเภทที่เพิ่มผ่าน
defineBlocksWithJsonArray
และaddBlockTypeToCleanup
- ล้างข้อความทั้งหมดที่เพิ่มผ่าน
addMessageToCleanup
ข้อกำหนดในการทดสอบ
- การทดสอบแต่ละครั้งต้องเรียก
sharedTestSetup.call(this);
เป็นบรรทัดแรกในการตั้งค่าชุดโปรแกรมด้านนอกสุดและsharedTestTeardown.call(this);
เป็นบรรทัดสุดท้ายในส่วนท้ายสุดของชุดโปรแกรมที่อยู่ด้านนอกสุดของไฟล์ - หากต้องการพื้นที่ทำงานซึ่งมีกล่องเครื่องมือทั่วไป คุณจะใช้กล่องเครื่องมือที่กำหนดล่วงหน้าแบบใดแบบหนึ่งในการทดสอบ
index.html
ได้ โปรดดูตัวอย่างด้านล่าง - คุณต้องกำจัด
this.workspace
อย่างเหมาะสม ในการทดสอบส่วนใหญ่ คุณจะกำหนดthis.workspace
ในชุดรายการด้านนอกสุดและใช้สำหรับการทดสอบที่ตามมาทั้งหมด แต่ในบางกรณี คุณอาจกำหนดหรือกำหนดขีดจำกัดใหม่ในชุดรายการด้านใน (ตัวอย่างเช่น การทดสอบรายการใดรายการหนึ่งต้องใช้พื้นที่ทำงานซึ่งมีตัวเลือกแตกต่างจากที่ตั้งค่าไว้ในตอนแรก) โดยจะต้องกำจัดทิ้งเมื่อสิ้นสุดการทดสอบ- หากคุณกำหนด
this.workspace
ในชุดรายการด้านนอกสุดและไม่ได้กำหนดใหม่เลย ก็ไม่ต้องดำเนินการใดๆ เพิ่มเติม ระบบจะกำจัดรายการนี้โดยsharedTestTeardown
โดยอัตโนมัติ - ถ้าคุณกำหนด
this.workspace
เป็นครั้งแรกในชุดรายการด้านใน (เช่น คุณไม่ได้กำหนดในชุดรายการชั้นนอก) คุณต้องกำจัดด้วยตนเองโดยเรียกworkspaceTeardown.call(this, this.workspace)
ในการดึงค่าดังกล่าวของชุดเครื่องมือดังกล่าว - หากคุณกำหนด
this.workpace
ในชุดรายการชั้นนอกสุด แต่กำหนดใหม่ในชุดการทดสอบด้านใน คุณต้องเรียกใช้workspaceTeardown.call(this, this.workspace)
ก่อนที่จะกำหนดใหม่เพื่อแยกพื้นที่ทำงานเดิมที่กำหนดไว้ในชุดโปรแกรมระดับบนสุด คุณต้องทิ้งค่าใหม่ด้วยตัวเองโดยเรียกworkspaceTeardown.call(this, this.workspace)
อีกครั้งในส่วนเนื้อหาของชุดชั้นในนี้
- หากคุณกำหนด
โครงสร้างการทดสอบ
โดยทั่วไปแล้ว การทดสอบ 1 หน่วยจะเป็นไปตามโครงสร้างชุดเดียวกัน ซึ่งสรุปได้เป็นจัดเรียง ดำเนินการ ยืนยัน
- จัดเรียง: กำหนดสภาพของโลกและเงื่อนไขใดๆ ที่จำเป็นสำหรับลักษณะการทำงานภายใต้การทดสอบ
- ดำเนินการ: เรียกใช้โค้ดที่อยู่ระหว่างการทดสอบเพื่อทริกเกอร์ลักษณะการทำงานที่กำลังทดสอบ
- ยืนยัน: ยืนยันค่าที่แสดงผลหรือการโต้ตอบกับออบเจ็กต์ที่จำลองเพื่อยืนยันความถูกต้อง
ในการทดสอบง่ายๆ อาจไม่มีลักษณะการทำงานให้จัดเรียง และระบบสามารถรวมขั้นตอนการแสดงและการยืนยันด้วยการใส่การเรียกใช้โค้ดภายใต้การทดสอบในการยืนยัน สำหรับกรณีที่ซับซ้อนมากขึ้น การทดสอบจะอ่านง่ายขึ้นหากคุณทำตาม 3 ขั้นตอนนี้
ต่อไปนี้เป็นตัวอย่างไฟล์ทดสอบ (เข้าใจง่ายๆ จากของจริง)
suite('Flyout', function() {
setup(function() {
sharedTestSetup.call(this);
this.toolboxXml = document.getElementById('toolbox-simple');
this.workspace = Blockly.inject('blocklyDiv',
{
toolbox: this.toolboxXml
});
});
teardown(function() {
sharedTestTeardown.call(this);
});
suite('simple flyout', function() {
setup(function() {
this.flyout = this.workspace.getFlyout();
});
test('y is always 0', function() {
// Act and assert stages combined for simple test case
chai.assert.equal(this.flyout.getY(), 0, 'y coordinate in vertical flyout is 0');
});
test('x is right of workspace if flyout at right', function() {
// Arrange
sinon.stub(this.flyout.targetWorkspace, 'getMetrics').returns({
viewWidth: 100,
});
this.flyout.targetWorkspace.toolboxPosition = Blockly.TOOLBOX_AT_RIGHT;
this.flyout.toolboxPosition_ = Blockly.TOOLBOX_AT_RIGHT;
// Act
var x = this.flyout.getX();
// Assert
chai.assert.equal(x, 100, 'x is right of workspace');
});
});
});
สิ่งที่ควรทราบจากตัวอย่างนี้
- ห้องสวีทจะมีห้องสวีทอื่นๆ ที่มีเมธอด
setup
และteardown
เพิ่มเติม - ห้องสวีทและการทดสอบแต่ละรายการมีชื่อที่สื่อความหมาย
- คำยืนยันของ Chai ใช้สำหรับยืนยันความถูกต้องของโค้ด
- คุณสามารถระบุอาร์กิวเมนต์สตริงที่ไม่บังคับซึ่งจะแสดงขึ้นหากการทดสอบล้มเหลว วิธีนี้จะช่วยให้แก้ไขข้อบกพร่องของการทดสอบที่เสียหายได้ง่ายขึ้น
- ลำดับของพารามิเตอร์คือ
chai.assert.equal(actualValue, expectedValue, optionalMessage)
หากคุณสลับactual
กับexpected
ข้อความแสดงข้อผิดพลาดจะไม่สมเหตุสมผล
- Sinon จะใช้เพื่อขัดขวางเมธอดเมื่อคุณไม่ต้องการเรียกใช้โค้ดจริง ในตัวอย่างนี้ เราไม่ต้องการเรียกฟังก์ชันเมตริกจริงเพราะไม่เกี่ยวข้องกับการทดสอบนี้ เราสนใจเฉพาะวิธีใช้ผลลัพธ์ใน
การทดสอบเท่านั้น Sinon จะตรึงฟังก์ชัน
getMetrics
เพื่อแสดงผลคำตอบสำเร็จรูปที่เราสามารถตรวจสอบได้โดยง่ายในการยืนยันการทดสอบ - เมธอด
setup
สำหรับแต่ละชุดควรมีเฉพาะการตั้งค่าทั่วไปที่ใช้กับการทดสอบทั้งหมด หากการทดสอบพฤติกรรมอย่างใดอย่างหนึ่งอาศัยเงื่อนไขบางอย่าง ควรระบุเงื่อนไขดังกล่าวไว้ในการทดสอบที่เกี่ยวข้องให้ชัดเจน
การทดสอบการแก้ไขข้อบกพร่อง
- คุณสามารถเปิดการทดสอบในเบราว์เซอร์และใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อตั้งค่าเบรกพอยท์ และตรวจสอบว่าการทดสอบของคุณล้มเหลวโดยไม่คาดคิดหรือไม่ (หรือผ่านไปโดยไม่คาดคิด)
ตั้งค่า
.only()
หรือ.skip()
ในการทดสอบหรือชุดโปรแกรมให้เรียกใช้เฉพาะชุดการทดสอบดังกล่าวหรือข้ามการทดสอบ เช่นsuite.only('Workspace', function () { suite('updateToolbox', function () { test('test name', function () { // ... }); test.skip('test I don’t care about', function () { // ... }); }); });
อย่าลืมนำสิ่งเหล่านี้ออกก่อนที่จะมอบรหัส
การทดสอบตัวสร้างบล็อก
แต่ละบล็อกมีการทดสอบ 1 หน่วยของตัวเอง การทดสอบเหล่านี้ยืนยันว่าการบล็อกสร้างโค้ด มากกว่าฟังก์ชันที่ตั้งใจไว้
- โหลด
tests/generators/index.html
ใน Firefox หรือ Safari โปรดทราบว่า Chrome และ Opera มีข้อจำกัดด้านความปลอดภัยที่ป้องกันไม่ให้โหลดการทดสอบจากระบบ "file://" ในเครื่อง (ปัญหา 41024 และ 47416) - เลือกส่วนที่เกี่ยวข้องของระบบที่จะทดสอบจากเมนูแบบเลื่อนลง แล้วคลิก "โหลด" การบล็อกควรปรากฏในพื้นที่ทำงาน
- คลิกที่ "JavaScript"
คัดลอกและเรียกใช้โค้ดที่สร้างขึ้นในคอนโซล JavaScript หากเอาต์พุตลงท้ายด้วย "OK" แสดงว่าผ่านการทดสอบ - คลิก "Python"
คัดลอกและเรียกใช้โค้ดที่สร้างขึ้นในอินเตอร์พรีเตอร์ Python หากเอาต์พุตลงท้ายด้วย "OK" แสดงว่าผ่านการทดสอบ - คลิก "PHP"
คัดลอกและเรียกใช้โค้ดที่สร้างขึ้นในล่าม PHP หากเอาต์พุตลงท้ายด้วย "OK" แสดงว่าผ่านการทดสอบ - คลิก "Lua"
คัดลอกและเรียกใช้โค้ดที่สร้างขึ้นในล่ามของ Lua หากเอาต์พุตลงท้ายด้วย "OK" แสดงว่าผ่านการทดสอบ - คลิก "Dart"
คัดลอกและเรียกใช้โค้ดที่สร้างขึ้นในDartลองดู หากเอาต์พุตลงท้ายด้วย "OK" แสดงว่าผ่านการทดสอบ
การแก้ไขการทดสอบเครื่องมือสร้างบล็อก
- โปรดโหลด
tests/generators/index.html
ในเบราว์เซอร์ - เลือกส่วนที่เกี่ยวข้องของระบบจากเมนูแบบเลื่อนลง และคลิก "โหลด" การบล็อกควรปรากฏในพื้นที่ทำงาน
- เปลี่ยนแปลงหรือเพิ่มเติมสิ่งที่บล็อก
- คลิกที่ "XML"
- คัดลอก XML ที่สร้างขึ้นลงในไฟล์ที่เหมาะสมใน
tests/generators/