reveal.js

# สัปดาห์ที่ 2

Debugging, Testing และ Source Code Maintenance

---

## เป้าหมายการเรียนรู้

- ใช้ Debugger เพื่อตรวจสาเหตุของ Bug
- ออกแบบ Test Case ให้ครอบคลุม
- เข้าใจ Unit, Integration, System และ Regression Test
- Refactor โค้ดโดยไม่เปลี่ยนพฤติกรรมเดิม
- ดูแล Source Code สำหรับการพัฒนาระยะยาว

---

## Debugging ไม่ใช่การเดาแก้

Debugging คือการหาสาเหตุด้วยหลักฐาน

- ทำให้ปัญหาเกิดซ้ำได้
- ตรวจ input/output และ error message
- ตั้งสมมติฐาน
- ใช้ Debugger ตรวจสอบ
- แก้เฉพาะสาเหตุจริง

---

## Debugging Workflow

```mermaid
flowchart TD
  A[พบอาการผิดปกติ] --> B[Reproduce]
  B --> C[Observe]
  C --> D[Hypothesize]
  D --> E[Inspect with Debugger]
  E --> F{Root Cause?}
  F -- No --> C
  F -- Yes --> G[Fix]
  G --> H[Verify]
  H --> I[Add Test]
```

---

## Debugger Tools

| เครื่องมือ | ใช้ทำอะไร |
|---|---|
| Breakpoint | หยุดโปรแกรมที่จุดสำคัญ |
| Step Over | รันบรรทัดถัดไป |
| Step Into | เข้าไปในฟังก์ชัน |
| Watch | ติดตามค่าตัวแปร |
| Call Stack | ดูลำดับการเรียกฟังก์ชัน |

---

## Bug Report to Root Cause

```mermaid
flowchart LR
  A[Bug Report] --> B[อาการ]
  B --> C[ข้อมูลประกอบ]
  C --> D[สมมติฐาน]
  D --> E[ตรวจด้วย Debugger]
  E --> F[Root Cause]
  F --> G[Fix + Test]
```

---

## Software Testing

Testing ช่วยยืนยันว่าโปรแกรมทำงานตรงตามความต้องการ

- ตรวจกรณีปกติ
- ตรวจค่าขอบเขต
- ตรวจข้อมูลผิดรูปแบบ
- ตรวจว่าการแก้ไขใหม่ไม่ทำให้ส่วนเดิมเสีย

---

## ประเภทของ Testing

| ประเภท | จุดประสงค์ |
|---|---|
| Unit Test | ตรวจฟังก์ชันหรือโมดูลย่อย |
| Integration Test | ตรวจหลายส่วนทำงานร่วมกัน |
| System Test | ตรวจทั้งระบบตาม flow ผู้ใช้ |
| Regression Test | ตรวจว่าของเดิมไม่เสียหลังแก้ |

---

## Testing Pyramid

```mermaid
flowchart TB
 A[System Test ตรวจทั้งระบบ]
 B[Integration Test ตรวจหลายโมดูล]
 C[Unit Test ตรวจหน่วยย่อย]
 A --> B --> C
```

Unit Test ควรมีจำนวนมาก เพราะรันเร็วและระบุตำแหน่งปัญหาได้ชัด

---

## Test Case Design

```mermaid
mindmap
  root((Test Case))
    Normal Case
    Boundary Case
    Invalid Case
    Regression Case
```

---

## ตัวอย่าง Test Case

| กรณี | Input | Expected |
|---|---:|---:|
| Normal | 1500 | 75 |
| Boundary | 1000 | 50 |
| Below Boundary | 999 | 0 |
| Invalid | -100 | Error หรือ 0 |

---

## Refactoring

Refactoring คือการปรับโครงสร้างโค้ดโดยไม่เปลี่ยนผลลัพธ์

- Extract Function
- Rename Variable
- Remove Duplication
- Split Module
- Simplify Condition

---

## Refactoring Loop

```mermaid
flowchart LR
  A[Code ทำงานได้] --> B[Test Case]
  B --> C[Refactor ทีละจุด]
  C --> D[Run Test]
  D --> E{ผลลัพธ์เดิม?}
  E -- Yes --> F[บันทึกการเปลี่ยนแปลง]
  E -- No --> G[ย้อนตรวจ]
  G --> C
```

---

## Code Smell

| สัญญาณ | แนวทางปรับ |
|---|---|
| ฟังก์ชันยาว | Extract Function |
| โค้ดซ้ำ | Reusable Function |
| ชื่อไม่สื่อ | Rename |
| เงื่อนไขซ้อน | Guard Clause |
| โมดูลทำหลายหน้าที่ | Split Module |

---

## Source Code Maintenance

```mermaid
flowchart TD
  A[Maintenance] --> B[Code Organization]
  A --> C[Documentation]
  A --> D[Dependency]
  A --> E[Issue Tracking]
  A --> F[Version Control]
```

---

## Checklist สำหรับโค้ดที่ดูแลได้

- รู้ว่าโปรแกรมเริ่มจากไฟล์ใด
- โมดูลแต่ละส่วนมีหน้าที่ชัดเจน
- มี README หรือเอกสารรันโปรแกรม
- ระบุ dependency ที่จำเป็น
- มี test หรือขั้นตอนตรวจซ้ำ
- มี commit หรือประวัติการเปลี่ยนแปลง

---

## Workshop

1. Reproduce Bug จากโค้ดตัวอย่าง
2. ใช้ Breakpoint, Watch และ Call Stack
3. ระบุ Root Cause
4. เขียน Test Case อย่างน้อย 6 กรณี
5. แก้ Bug และรัน Test ซ้ำ
6. Refactor โค้ด 1 จุด

---

## ชิ้นงาน

ส่งโค้ดที่แก้ Bug พร้อม:

- คำอธิบาย Root Cause
- Test Case ก่อนและหลังแก้
- หลักฐานการใช้ Debugger หรือบันทึกการตรวจ
- คำอธิบายการ Refactor

---

## คำถามทบทวน

- ทำไมต้อง Reproduce Bug ก่อนแก้
- Unit Test ต่างจาก Integration Test อย่างไร
- Regression Test สำคัญหลังแก้ Bug เพราะอะไร
- Refactoring ควรทำก่อนหรือหลังมี Test Case

---

## รูปแบบตามแม่แบบ

- **Key Concept:** Symptom -> Root Cause -> Regression Test
- Mermaid ใช้ Gruvbox และข้อความไทย-อังกฤษ
- มีสูตร Test Coverage ด้วย MathML ในบทเรียน
- Code example มี comment และ expected output

---

## Diagram สำหรับทบทวน

<pre class="mermaid">
%%{init: {'theme': 'base', 'themeVariables': {'background': '#282828','primaryColor': '#3c3836','primaryTextColor': '#fbf1c7','primaryBorderColor': '#fabd2f','lineColor': '#83a598'}}}%%
flowchart LR
 A[Bug ข้อผิดพลาด] --> B[Debug ตรวจสาเหตุ]
 B --> C[Test ทดสอบ]
 C --> D[Refactor ปรับโครงสร้าง]
</pre>