FizzBuzz TDD Step-by-Step

บทปฏิบัติที่พาเขียนฟังก์ชัน `fizzBuzz` ด้วยจังหวะ Red-Green-Refactor แบบทีละขั้น โดยใช้ Vitest + TypeScript และจัดเนื้อหาเป็น accordion เพื่อโฟกัสทีละรอบของ TDD

TDD Workshop

เดิน TDD กับโจทย์ FizzBuzz แบบทีละขั้นผ่าน Accordion

แต่ละ step จะมีเป้าหมายของรอบนั้น, ตัวอย่าง test, implementation ขั้นต่ำ, และ note สำหรับ refactor/ระวัง regression เพื่อให้คุณทำตามได้จริงในโค้ดของตัวเอง

เดิน TDD กับโจทย์ FizzBuzz แบบทีละขั้นผ่าน Accordion

Testing

FizzBuzz TDD Step-by-Step

เดิน TDD กับโจทย์ FizzBuzz แบบทีละขั้นผ่าน Accordion

Loading

Testing

FizzBuzz TDD Step-by-Step

เดิน TDD กับโจทย์ FizzBuzz แบบทีละขั้นผ่าน Accordion

Testing

เดิน TDD กับโจทย์ FizzBuzz แบบทีละขั้นผ่าน Accordion

Step 01เริ่มจากเคสเล็กที่สุด: 1 -> "1"

Step 02เพิ่มกติกาแรก: หาร 3 ลงตัวต้องเป็น Fizz

Step 03เพิ่มกติกาที่สอง: หาร 5 ลงตัวต้องเป็น Buzz

Step 04ชนกันของกติกา: 15 ต้องได้ FizzBuzz

Step 05ยืนยันเลขทั่วไป: 2, 4, 7 ต้องคืนเป็น string เดิม

Step 06ทำ test ให้กระชับด้วย table-driven tests

Step 07Refactor: แยก helper เพื่อให้อ่านโค้ดง่ายขึ้น

Step 08ป้องกัน regression ของลำดับเงื่อนไข (%15 ต้องมาก่อน)

Step 09ตัดสินใจเรื่อง 0 ให้ชัด: 0 -> FizzBuzz

Step 10จัดโครงสร้าง test ให้ maintain ง่ายขึ้น

Step 11สรุปวงจร Red -> Green -> Refactor จากโจทย์ FizzBuzz

Loading

Testing

เดิน TDD กับโจทย์ FizzBuzz แบบทีละขั้นผ่าน Accordion

Step 01เริ่มจากเคสเล็กที่สุด: 1 -> "1"

Step 02เพิ่มกติกาแรก: หาร 3 ลงตัวต้องเป็น Fizz

Step 03เพิ่มกติกาที่สอง: หาร 5 ลงตัวต้องเป็น Buzz

Step 04ชนกันของกติกา: 15 ต้องได้ FizzBuzz

Step 05ยืนยันเลขทั่วไป: 2, 4, 7 ต้องคืนเป็น string เดิม

Step 06ทำ test ให้กระชับด้วย table-driven tests

Step 07Refactor: แยก helper เพื่อให้อ่านโค้ดง่ายขึ้น

Step 08ป้องกัน regression ของลำดับเงื่อนไข (%15 ต้องมาก่อน)

Step 09ตัดสินใจเรื่อง 0 ให้ชัด: 0 -> FizzBuzz

Step 10จัดโครงสร้าง test ให้ maintain ง่ายขึ้น

Step 11สรุปวงจร Red -> Green -> Refactor จากโจทย์ FizzBuzz