reveal.js

# Unit Testing ด้วย Jasmine และ Karma (Angular default)

Lesson 1 - Testing, DevOps และการ Deploy

**Unit Testing** คือการทดสอบหน่วยย่อยของโปรแกรม เช่น Component, Service หรือ Function เพื่อยืนยันว่าแต่ละส่วนทำงานถูกต้องก่อนนำไปรวมกับระบบใหญ่

---

## Timeline/ประวัติศาสตร์

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart LR
  subgraph Era1["ยุค Manual Test / ทดสอบด้วยมือ"]
    A["เปิดเว็บแล้วลองกด<br/>Manual checking"]
  end
  subgraph Era2["ยุค Unit Test / Automated Test"]
    B["Jasmine<br/>describe it expect"]
    C["Karma<br/>รันใน Browser"]
  end
  subgraph Era3["ยุค Angular Testing Utility"]
    D["TestBed<br/>สร้าง test module"]
    E["HttpClientTestingModule<br/>mock HTTP"]
  end
  A --> B --> C --> D --> E
</pre>

---

## แนวคิดสำคัญ

- **Jasmine** คือ Testing Framework ที่ใช้ `describe()`, `it()`, `expect()`
- **Karma** คือ Test Runner ที่รัน test ใน Browser จริง
- **TestBed** คือ Angular Testing Utility สำหรับสร้าง Component ใน Test
- **ComponentFixture** ใช้ควบคุม Component และ Template
- **Spy** ใช้ Mock Service เช่น `spyOn(service, 'method').and.returnValue()`
- **HttpClientTestingModule** ใช้ Mock HTTP Requests
- **`ng test --code-coverage`** ใช้ดู Coverage Report

---

## ตารางเครื่องมือทดสอบ

| เครื่องมือ | หน้าที่ | ตัวอย่าง |
|---|---|---|
| Jasmine | เขียน test case | `describe`, `it`, `expect` |
| Karma | รัน test | Browser runner |
| TestBed | สร้าง Angular test module | `configureTestingModule` |
| Fixture | ควบคุม Component | `detectChanges()` |
| Spy | Mock method | `spyOn()` |

---

## Mermaid Diagram: Angular Unit Test Flow

<pre class="mermaid">
%%{init: {"theme": "base", "themeVariables": {"primaryColor": "#fabd2f", "primaryTextColor": "#282828", "primaryBorderColor": "#b57614", "lineColor": "#7c6f64", "secondaryColor": "#83a598", "tertiaryColor": "#b8bb26", "background": "#fbf1c7", "mainBkg": "#ebdbb2", "fontFamily": "Tahoma, sans-serif"}}}%%
flowchart TD
  A["Test Spec<br/>ไฟล์ .spec.ts"] --> B["TestBed<br/>ตั้งค่า module"]
  B --> C["ComponentFixture<br/>สร้าง component"]
  C --> D["detectChanges<br/>render template"]
  D --> E["expect<br/>ตรวจผลลัพธ์"]
  E --> F["Karma Browser<br/>รัน test"]
</pre>

---

## Code Example

```ts
// lesson-card.component.ts
// Component ตัวอย่างสำหรับทดสอบ
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-lesson-card',
  template: `<h2>{{ title }}</h2><button (click)="complete()">Done</button>`
})
export class LessonCardComponent {
  @Input() title = '';
  completed = false;

complete(): void {
    this.completed = true;
  }
}
```

```ts
// lesson-card.component.spec.ts
// Unit test ด้วย Jasmine + TestBed
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { LessonCardComponent } from './lesson-card.component';

describe('LessonCardComponent', () => {
  let fixture: ComponentFixture<LessonCardComponent>;
  let component: LessonCardComponent;

beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [LessonCardComponent]
    }).compileComponents();

fixture = TestBed.createComponent(LessonCardComponent);
    component = fixture.componentInstance;
  });

it('should render lesson title', () => {
    component.title = 'Angular Testing';
    fixture.detectChanges();

const heading = fixture.nativeElement.querySelector('h2');
    expect(heading.textContent).toContain('Angular Testing');
  });

it('should mark lesson as completed', () => {
    component.complete();
    expect(component.completed).toBeTrue();
  });
});

// ตัวอย่างการใช้งาน:
// ng test --code-coverage
```

---

## วิดีโอแนะนำ

- [YouTube: Angular Unit Testing Jasmine Karma](https://www.youtube.com/results?search_query=Angular+unit+testing+Jasmine+Karma)

---

## กิจกรรมท้ายบท

1. สร้าง component `LessonCardComponent`
2. เขียน test ตรวจ title
3. เขียน test ตรวจ method `complete()`
4. รัน `ng test --code-coverage`

---

## End

<a href="/web-programming/14-testing-deploy/index.md" style="display:inline-block;padding:0.6em 1em;border-radius:8px;background:#fabd2f;color:#282828;text-decoration:none;font-weight:700;">กลับหน้าบทเรียน</a>