การเขียนการทดสอบ jQuery ที่มีประสิทธิภาพ
ฝึกเขียนการทดสอบหน่วยสำหรับการจัดการ DOM ตัวจัดการเหตุการณ์ และการเรียก AJAX เพื่อให้มั่นใจว่าองค์ประกอบ jQuery ของคุณแข็งแกร่งและปราศจากข้อบกพร่อง
การเขียนการทดสอบ jQuery ที่มีประสิทธิภาพ เป็นบทเรียน jQuery Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน jQuery Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน
เชี่ยวชาญการเขียนการทดสอบ jQuery
ยินดีต้อนรับ ในบทเรียนนี้ เราจะเจาะลึกการเขียนการทดสอบหน่วยที่มีประสิทธิภาพสำหรับแอปพลิเคชัน jQuery โดยเน้นกลยุทธ์เชิงปฏิบัติสำหรับตรวจสอบการปรับเปลี่ยน DOM การจัดการเหตุการณ์ และการเรียก AJAX แบบไม่พร้อมกัน
การทดสอบที่แข็งแกร่งช่วยรับรองว่าโค้ดทำงานตามที่คาดไว้ และช่วยป้องกันการถดถอยเมื่อโครงการพัฒนาไป
การตรวจสอบการเปลี่ยนแปลง DOM
เมื่อโค้ด jQuery ของคุณปรับเปลี่ยน Document Object Model (DOM) การทดสอบควรตรวจสอบการเปลี่ยนแปลงเหล่านั้น ซึ่งรวมถึงการตรวจสอบการสร้างหรือลบองค์ประกอบ การเปลี่ยนแปลงแอตทริบิวต์ หรือการอัปเดตข้อความ
โดยทั่วไป คุณจะเลือกองค์ประกอบหลังจากดำเนินการแล้วตรวจสอบคุณสมบัติขององค์ประกอบนั้น
<!DOCTYPE html>
<html>
<head>
<title>Test DOM Change</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="app"></div>
<script>
$(document).ready(function() {
// Simulate a jQuery operation
$('#app').append('<p class="message">Hello world!</p>');
// Simulate a test assertion
if ($('#app .message').length === 1 && $('#app .message').text() === 'Hello world!') {
console.log("PASS: Element appended and text is correct.");
} else {
console.log("FAIL: Element not found or text is incorrect.");
}
});
</script>
</body>
</html>การแยกการทดสอบ DOM
เพื่อให้การทดสอบ DOM น่าเชื่อถือ สิ่งสำคัญคือต้องทำให้การทดสอบแต่ละครั้งทำงานในสภาพแวดล้อมที่สะอาดและแยกเป็นอิสระ กรอบการทดสอบส่วนใหญ่มีฮุก beforeEach และ afterEach
beforeEach: ตั้งค่าสถานะ DOM เริ่มต้นสำหรับการทดสอบใหม่afterEach: ล้างการเปลี่ยนแปลง DOM ที่เกิดจากการทดสอบ
วิธีนี้ช่วยป้องกันไม่ให้การทดสอบต่าง ๆ รบกวนกัน
การทดสอบการเปลี่ยนแปลงคลาส
มาทดสอบการปรับเปลี่ยน DOM ที่พบบ่อยกัน นั่นคือการเพิ่มหรือลบคลาส CSS คุณสามารถยืนยันได้ว่าองค์ประกอบนั้น .hasClass() คลาสที่ระบุหรือไม่หลังจากฟังก์ชัน jQuery ทำงาน
<!DOCTYPE html>
<html>
<head>
<title>Test Class Toggle</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="toggleBtn" class="active">Toggle</button>
<script>
$(document).ready(function() {
// Function to test
function toggleActiveClass(element) {
$(element).toggleClass('active');
}
// Test Case 1: Active class is present initially
if ($('#toggleBtn').hasClass('active')) {
console.log("PASS: Initial state has 'active' class.");
} else {
console.log("FAIL: Initial state missing 'active' class.");
}
// Run the function
toggleActiveClass('#toggleBtn');
// Test Case 2: Active class should be removed
if (!$('#toggleBtn').hasClass('active')) {
console.log("PASS: 'active' class removed after toggle.");
} else {
console.log("FAIL: 'active' class not removed.");
}
});
</script>
</body>
</html>การจำลองเหตุการณ์ของผู้ใช้
หากต้องการทดสอบตัวจัดการเหตุการณ์ คุณต้องจำลองการโต้ตอบของผู้ใช้ เมธอด .trigger() ของ jQuery เหมาะสำหรับงานนี้ โดยสามารถทำให้เกิดเหตุการณ์ใด ๆ (เช่น 'click', 'submit', 'change') กับองค์ประกอบที่เลือกได้
หลังจากทำให้เกิดเหตุการณ์แล้ว ให้ยืนยันผลลัพธ์ที่คาดไว้ เช่น การเปลี่ยนแปลง DOM หรือการเรียกใช้ฟังก์ชัน
การตรวจสอบเหตุการณ์คลิก
ต่อไปนี้คือวิธีทดสอบว่าเหตุการณ์คลิกอัปเดตส่วนหนึ่งของส่วนติดต่อผู้ใช้ได้ถูกต้องหรือไม่ เราจะทำให้เกิดการคลิก แล้วตรวจสอบเนื้อหาข้อความใหม่ขององค์ประกอบ
<!DOCTYPE html>
<html>
<head>
<title>Test Click Event</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="myButton">Click Me</button>
<p id="status">Not clicked yet.</p>
<script>
$(document).ready(function() {
// Attach the event handler
$('#myButton').on('click', function() {
$('#status').text('Button was clicked!');
});
// Simulate the click event
$('#myButton').trigger('click');
// Simulate assertion
if ($('#status').text() === 'Button was clicked!') {
console.log("PASS: Status updated after click.");
} else {
console.log("FAIL: Status not updated correctly.");
}
});
</script>
</body>
</html>การยืนยันสถานะของเหตุการณ์
ตัวจัดการเหตุการณ์มักทำมากกว่าการเปลี่ยน DOM เพียงอย่างเดียว อาจอัปเดตแอตทริบิวต์ข้อมูลหรือสถานะภายในของแอปพลิเคชันด้วย การทดสอบของคุณควรตรวจสอบการเปลี่ยนแปลงที่มองเห็นได้ไม่ชัดเจนเหล่านี้ด้วย
คุณสามารถตรวจสอบค่าของ .data() หรือคุณสมบัติอื่น ๆ หลังจากเกิดเหตุการณ์ได้
<!DOCTYPE html>
<html>
<head>
<title>Test Event Data</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<button id="counterBtn" data-count="0">Increase Count</button>
<script>
$(document).ready(function() {
// Attach event handler
$('#counterBtn').on('click', function() {
let currentCount = parseInt($(this).data('count'));
$(this).data('count', currentCount + 1);
});
// Initial check
if ($('#counterBtn').data('count') === 0) {
console.log("PASS: Initial count is 0.");
} else {
console.log("FAIL: Initial count is not 0.");
}
// Trigger click
$('#counterBtn').trigger('click');
// Assert after first click
if ($('#counterBtn').data('count') === 1) {
console.log("PASS: Count is 1 after first click.");
} else {
console.log("FAIL: Count is not 1.");
}
// Trigger another click
$('#counterBtn').trigger('click');
// Assert after second click
if ($('#counterBtn').data('count') === 2) {
console.log("PASS: Count is 2 after second click.");
} else {
console.log("FAIL: Count is not 2.");
}
});
</script>
</body>
</html>การทดสอบ AJAX แบบไม่พร้อมกัน
การทดสอบการเรียก AJAX จริงอาจช้า ไม่น่าเชื่อถือ และขึ้นอยู่กับบริการภายนอก วิธีแก้คือจำลองคำขอ AJAX
การจำลองหมายถึงการแทนที่การเรียกเครือข่ายจริงด้วยการตอบกลับที่ควบคุมและกำหนดไว้ล่วงหน้า ทำให้การทดสอบทำงานได้รวดเร็วและสม่ำเสมอ โดยมุ่งเน้นเฉพาะตรรกะฝั่งไคลเอ็นต์ของคุณ
การสร้างตัวจำลอง AJAX
คุณสามารถใช้เครื่องมืออย่าง Sinon.js หรือในกรณีง่าย ๆ ให้แทนที่พฤติกรรม AJAX ของ jQuery โดยตรง วิธีพื้นฐานในการจำลองการตอบกลับ AJAX ที่สำเร็จสำหรับการทดสอบคือแก้ไข $.ajax ชั่วคราว หรือใช้ไลบรารีจำลอง
ในที่นี้ เราจะจำลองการเรียกกลับเมื่อสำเร็จโดยไม่ส่งคำขอเครือข่ายจริง
<!DOCTYPE html>
<html>
<head>
<title>Mock AJAX Test</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="data-display">Loading...</div>
<script>
$(document).ready(function() {
// Store original $.ajax for restoration
const originalAjax = $.ajax;
// Mock $.ajax for this test
$.ajax = function(options) {
// Simulate a successful response
const deferred = $.Deferred();
deferred.resolve({ message: "Mocked data received!" });
return deferred.promise();
};
// Your function that makes an AJAX call
function fetchDataAndDisplay() {
$.ajax({
url: '/api/data',
method: 'GET'
}).done(function(response) {
$('#data-display').text(response.message);
}).fail(function() {
$('#data-display').text('Error fetching data.');
});
}
// Run the function under test
fetchDataAndDisplay();
// Simulate assertion after a short delay (for async effect)
setTimeout(function() {
if ($('#data-display').text() === 'Mocked data received!') {
console.log("PASS: AJAX call successfully mocked and handled.");
} else {
console.log("FAIL: AJAX mock failed or handler incorrect.");
}
// Restore original $.ajax (important for real apps)
$.ajax = originalAjax;
}, 10); // Small delay to allow promise resolution
});
</script>
</body>
</html>ตรวจสอบอย่างรวดเร็ว
คุณได้เรียนรู้เกี่ยวกับการทดสอบการปรับเปลี่ยน DOM เหตุการณ์ และ AJAX แล้ว โดยทั่วไปใช้เมธอด jQuery ใดเพื่อทำให้เกิดเหตุการณ์กับองค์ประกอบโดยทางโปรแกรมในการทดสอบ
ทบทวน: การทดสอบ jQuery อย่างมีประสิทธิภาพ
ยินดีด้วย คุณได้สำรวจวิธีเขียนการทดสอบหน่วยที่มีประสิทธิภาพสำหรับแง่มุมต่าง ๆ ของแอปพลิเคชัน jQuery แล้ว
- เราได้ครอบคลุมการยืนยันการเปลี่ยนแปลงของ DOM รวมถึงการตรวจสอบคุณสมบัติและเนื้อหาขององค์ประกอบ
- เราได้เรียนรู้การจำลองการโต้ตอบของผู้ใช้และการทดสอบตัวจัดการเหตุการณ์โดยใช้
.trigger() - สุดท้าย เราได้พูดถึงการจำลองคำขอ AJAX เพื่อให้การทดสอบการทำงานแบบไม่พร้อมกันรวดเร็วและน่าเชื่อถือ
เทคนิคเหล่านี้มีความสำคัญอย่างยิ่งต่อการสร้างโค้ด jQuery ที่แข็งแกร่งและดูแลรักษาได้ง่าย
คำถามที่พบบ่อย
บทเรียน “การเขียนการทดสอบ jQuery ที่มีประสิทธิภาพ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การเขียนการทดสอบ jQuery ที่มีประสิทธิภาพ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส jQuery Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส jQuery Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การเขียนการทดสอบ jQuery ที่มีประสิทธิภาพ”
ฝึกเขียนการทดสอบหน่วยสำหรับการจัดการ DOM ตัวจัดการเหตุการณ์ และการเรียก AJAX เพื่อให้มั่นใจว่าองค์ประกอบ jQuery ของคุณแข็งแกร่งและปราศจากข้อบกพร่อง คุณปฏิบัติ jQuery Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน jQuery Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน jQuery Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 3 บทเรียน
บทเรียน “การเขียนการทดสอบ jQuery ที่มีประสิทธิภาพ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน jQuery Academy นี้ได้ไหม
ได้ บทเรียน jQuery Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- บทนำสู่การทดสอบหน่วย jQuery
- การตั้งค่าสภาพแวดล้อมการทดสอบ
- การเขียนการทดสอบ jQuery ที่มีประสิทธิภาพ