Module 9: Component Testing

Thời lượng: 1 tuần
Level: Advanced
Yêu cầu: Hoàn thành các module Foundation và Component (1-7)

Tổng quan Module

Trong Design System, một lỗi nhỏ trong component cơ bản có thể làm hỏng hàng ngàn trang web. Testing không chỉ là để tìm bug, mà là để đảm bảo tính ổn định (stability) và niềm tin (trust) của các team khác khi sử dụng thư viện của bạn.

Kết quả học tập

Sau module này, bạn sẽ:

• Thực hiện được Unit Testing cho components bằng Vitest & React Testing Library.
• Áp dụng các phương pháp tự động kiểm tra Accessibility.
• Thiết lập hệ thống Visual Regression Testing (Chụp ảnh so sánh giao diện).
• Hiểu về Testing Pyramid dành riêng cho Design System.

Bài 9.1: Unit Testing Components

Lý thuyết

Chúng ta không test "Implementation detail" (vd: state này có giá trị bao nhiêu). Chúng ta test Hành vi người dùng (User perspective).

Ví dụ Test Button:

test('gọi hàm onClick khi người dùng nhấn nút', async () => {
  const handleClick = vi.fn();
  render(<Button onClick={handleClick}>Click me</Button>);
  
  await userEvent.click(screen.getByText('Click me'));
  
  expect(handleClick).toHaveBeenCalledTimes(1);
});

Bài 9.2: Accessibility Testing

Lý thuyết

Ngoài việc test thủ công bằng Screen Reader, chúng ta có thể tự động hóa một phần quy trình này bằng:

1. axe-core: Thư viện tiêu chuẩn để tìm các lỗi A11y phổ biến (thiếu alt, contrast thấp).
2. jest-axe: Tích hợp Axe vào quy trình unit test.

test('should have no accessibility violations', async () => {
  const { container } = render(<Button>Accessible Button</Button>);
  const results = await axe(container);
  expect(results).toHaveNoViolations();
});

Thực hành: Visual Testing Simulator

Hãy thử nghiệm cách Visual Regression Testing phát hiện ra sự thay đổi giữa hai phiên bản component:

Bài 9.3: Visual Regression Testing

Lý thuyết

Tại sao Unit test không đủ? Vì unit test chỉ kiểm tra logic DOM, nó không biết bạn có lỡ tay xóa mất padding: 20px hay không.

Công cụ phổ biến:

• Chromatic: Chuyên dụng cho Storybook (Tự động chụp ảnh mọi states).
• Playwright / Puppeteer: Chụp ảnh màn hình so sánh theo kịch bản.

Câu hỏi thảo luận

1. Snapshoot Testing (Snapshot): Tại sao hiện nay snapshot testing bị coi là anti-pattern và tại sao Visual Regression lại tốt hơn?
2. Cost of Testing: Làm sao cân bằng giữa thời gian viết test và thời gian ra features?
3. Flaky Tests: Cách xử lý các test thỉnh thoảng pass thỉnh thoảng fail ("nháy").

Tổng kết Module

Bạn đã học:

• Cách viết Unit test tập trung vào giá trị người dùng.
• Tự động hóa kiểm tra Accessibility.
• Tầm quan trọng của Visual Regression trong việc duy trì giao diện.

Bước tiếp theo

Module 10 là đích đến cuối cùng: Documentation & Adoption Strategy - Học cách viết docs để hàng trăm người khác có thể dễ dàng sử dụng và yêu thích Design System của bạn.

Tiếp tục Module 10 →