0Pricing
JavaScript Academy · บทเรียน

แนวคิดการทดสอบ — การตรวจยืนยันขนาดเล็ก AAA และแดง→เขียว→ปรับโครงสร้าง

สร้างนิสัยเขียนการทดสอบขนาดเล็ก ทำความเข้าใจการตรวจยืนยัน Arrange–Act–Assert และวงจรแดง→เขียว→ปรับโครงสร้าง

แนวคิดการทดสอบ — การตรวจยืนยันขนาดเล็ก AAA และแดง→เขียว→ปรับโครงสร้าง เป็นบทเรียน JavaScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน JavaScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

เหตุใดจึงต้องมีแนวคิดด้านการทดสอบ

เป้าหมาย: คิดโดยใช้การทดสอบขนาดเล็กที่เชื่อถือได้

  • assert ขนาดเล็กเพื่อตรวจสอบผลลัพธ์
  • AAA: จัดเตรียม → ดำเนินการ → ตรวจยืนยัน
  • วงจร แดง → เขียว → ปรับโครงสร้างใหม่
  • ตั้งชื่อการทดสอบตามพฤติกรรม
แนวคิดการทดสอบ — การตรวจยืนยันขนาดเล็ก AAA และแดง→เขียว→ปรับโครงสร้าง — ภาพประกอบ 1

การตรวจยืนยันขนาดเล็ก

assertEqual ขนาดเล็กจะแสดงว่าผ่านหรือล้มเหลว ซึ่งสะท้อนการทำงานของกรอบการทดสอบจริง

// Minimal assertEqual for quick checks
function assertEqual(actual, expected, name) {
  if (actual === expected) {
    console.log("✅", name);
  } else {
    console.log("❌", name, "expected:", expected, "got:", actual);
  }
}

// Demo check
assertEqual(2 + 3, 5, "adds numbers");
แนวคิดการทดสอบ — การตรวจยืนยันขนาดเล็ก AAA และแดง→เขียว→ปรับโครงสร้าง — ภาพประกอบ 2

จัดเตรียม–ดำเนินการ–ตรวจยืนยัน

AAA ทำให้การทดสอบอ่านง่าย ได้แก่ เตรียมข้อมูล เรียกใช้ฟังก์ชัน แล้วตรวจสอบผลลัพธ์

// AAA: Arrange → Act → Assert
// Arrange: prepare inputs
function sum(a, b) { return a + b; }
const a = 2;
const b = 4;

// Act: call the function
const result = sum(a, b);

// Assert: compare
assertEqual(result, 6, "sum returns a + b");
แนวคิดการทดสอบ — การตรวจยืนยันขนาดเล็ก AAA และแดง→เขียว→ปรับโครงสร้าง — ภาพประกอบ 3

แดง→เขียว→ปรับโครงสร้างใหม่

เขียนการทดสอบที่ล้มเหลว (สีแดง) ทำให้ผ่าน (สีเขียว) แล้วจึงปรับปรุงโครงสร้างโค้ด (ปรับโครงสร้างใหม่)

// Red → Green → Refactor with a tiny example
// 1) Red: write a failing test (expect wrong implementation)
function greet(name) { return "Hi " + name; } // simple implementation

// Intentionally failing expectation first (red)
assertEqual(greet("Ayla"), "Hello Ayla", "greet says Hello"); // likely fails

// 2) Green: fix the code to satisfy the test
function greetFixed(name) { return "Hello " + name; }
assertEqual(greetFixed("Ayla"), "Hello Ayla", "greet says Hello (fixed)");

// 3) Refactor: improve code without changing behavior
function greetRefined(name) {
  const cleaned = String(name).trim();
  return "Hello " + cleaned;
}
assertEqual(greetRefined(" Ayla "), "Hello Ayla", "greet trims input");
แนวคิดการทดสอบ — การตรวจยืนยันขนาดเล็ก AAA และแดง→เขียว→ปรับโครงสร้าง — ภาพประกอบ 4

การตั้งชื่อตามพฤติกรรม

ตั้งชื่อการตรวจสอบตาม สิ่งที่ฟังก์ชันควรทำ ได้แก่ กรณีขอบเขตและกรณีทั่วไป

// Clear names describe behavior, not internals
function isAdult(age) { return age >= 18; }

assertEqual(isAdult(18), true, "isAdult returns true at boundary 18");
assertEqual(isAdult(17), false, "isAdult returns false below boundary");
แนวคิดการทดสอบ — การตรวจยืนยันขนาดเล็ก AAA และแดง→เขียว→ปรับโครงสร้าง — ภาพประกอบ 5

การทดสอบขนาดเล็กที่มุ่งเน้น

เคล็ดลับ:

  • ทำให้การทดสอบมีขนาดเล็กและมุ่งเน้น (แต่ละรายการตรวจสอบแนวคิดเดียว)
  • ทดสอบเส้นทางปกติและกรณีขอบเขตหนึ่งกรณี
  • เลือกใช้ฟังก์ชันบริสุทธิ์เพื่อให้ทดสอบได้ง่าย
  • ค่อยทำให้เป็นอัตโนมัติด้วย Jest/Vitest ในภายหลัง โดยเริ่มจากแนวคิดก่อน
แนวคิดการทดสอบ — การตรวจยืนยันขนาดเล็ก AAA และแดง→เขียว→ปรับโครงสร้าง — ภาพประกอบ 6

แบบทดสอบรูปแบบ AAA

ตรวจสอบอย่างรวดเร็ว: รูปแบบ AAA

แนวคิดการทดสอบ — การตรวจยืนยันขนาดเล็ก AAA และแดง→เขียว→ปรับโครงสร้าง — ภาพประกอบ 7

ทบทวน

ทบทวน: ใช้ assert ขนาดเล็ก ทำตาม AAA และทำซ้ำตามวงจร แดง → เขียว → ปรับโครงสร้างใหม่ เริ่มจากสิ่งเล็ก ๆ เพราะความชัดเจนสำคัญกว่าความซับซ้อนสำหรับผู้เริ่มต้น

แนวคิดการทดสอบ — การตรวจยืนยันขนาดเล็ก AAA และแดง→เขียว→ปรับโครงสร้าง — ภาพประกอบ 8

คำถามที่พบบ่อย

บทเรียน “แนวคิดการทดสอบ — การตรวจยืนยันขนาดเล็ก AAA และแดง→เขียว→ปรับโครงสร้าง” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “แนวคิดการทดสอบ — การตรวจยืนยันขนาดเล็ก AAA และแดง→เขียว→ปรับโครงสร้าง” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส JavaScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส JavaScript Academy มีบทเรียนทั้งหมด 3 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “แนวคิดการทดสอบ — การตรวจยืนยันขนาดเล็ก AAA และแดง→เขียว→ปรับโครงสร้าง”

สร้างนิสัยเขียนการทดสอบขนาดเล็ก ทำความเข้าใจการตรวจยืนยัน Arrange–Act–Assert และวงจรแดง→เขียว→ปรับโครงสร้าง คุณปฏิบัติ JavaScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน JavaScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน JavaScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 1 จากทั้งหมด 3 บทเรียน

บทเรียน “แนวคิดการทดสอบ — การตรวจยืนยันขนาดเล็ก AAA และแดง→เขียว→ปรับโครงสร้าง” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน JavaScript Academy นี้ได้ไหม

ได้ บทเรียน JavaScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. แนวคิดการทดสอบ — การตรวจยืนยันขนาดเล็ก AAA และแดง→เขียว→ปรับโครงสร้าง
  2. การตรวจรูปแบบด้วย ESLint และการจัดรูปแบบด้วย Prettier
  3. พื้นฐาน CI — เรียกใช้ lint/test ทุกครั้งที่ push
← กลับไปที่ JavaScript Academy