Hướng dẫn làm Golden Test cho UI Flutter

Golden Tests (Snapshot Tests) giúp bạn đảm bảo UI không thay đổi ngoài ý muốn bằng cách so sánh screenshots. Bài viết này sẽ hướng dẫn bạn setup và sử dụng Golden Tests.

Golden Test là gì?

Golden Test so sánh widget hiện tại với "golden file" (screenshot đã được approve) để phát hiện thay đổi UI.

Lợi ích:

✅ Phát hiện thay đổi UI không mong muốn
✅ Đảm bảo UI consistency
✅ Visual regression testing
✅ Document UI states

Setup

1. Dependencies

[object Object]

2. Install

[object Object]

Basic Golden Test

[object Object]

2. Viết Golden Test

[object Object]

3. Generate Golden Files

[object Object]

Advanced Golden Tests

1. Multiple States

[object Object]

2. Different Themes

[object Object]

Golden Toolkit

1. Setup

[object Object]

2. Multiple Devices

[object Object]

Best Practices

1. Stable Tests

[object Object]

2. Font Loading

[object Object]

3. Update Goldens

[object Object]

Troubleshooting

1. Font Issues

[object Object]

2. Size Issues

[object Object]

3. Platform Differences

[object Object]

Ba vấn đề chỉ gặp khi chạy golden test

Golden test thất bại vì ba lý do dưới đây thường xuyên hơn vì giao diện thật sự sai. Biết trước giúp bạn không mất thời gian sửa nhầm chỗ:

1. Chữ hiển thị thành ô vuông. Trong môi trường test, Flutter chỉ có một font mặc định rất hạn chế. Nếu bạn dùng font tuỳ chỉnh, ảnh chụp sẽ toàn ô vuông. Cách xử lý là nạp font trong flutter_test_config.dart trước khi chạy test:

[object Object]

2. Ảnh khác nhau giữa các máy. Kết xuất chữ và bóng đổ khác nhau giữa Windows, macOS và Linux. Vì vậy golden test nên chạy trên CI với một nền tảng cố định, và tệp ảnh mẫu phải được sinh trên đúng nền tảng đó. Nếu mỗi lập trình viên sinh ảnh mẫu trên máy mình, bộ test sẽ đỏ liên tục.

3. Kích thước màn hình thay đổi. Mặc định kích thước khung test là 800×600. Nếu bạn không cố định nó, việc chạy test trên màn hình khác có thể đổi kết quả. Hãy đặt cố định:

[object Object]

Khi nào nên và không nên dùng golden test

Golden test rất mạnh ở một số trường hợp:

Thành phần giao diện dùng lại nhiều nơi: nút, thẻ, badge, biểu đồ. Sửa một lần là biết ngay toàn bộ nơi dùng có bị ảnh hưởng không.
Kiểm tra theme sáng/tối: đổi màu theo theme là thứ khó kiểm bằng mắt khi dự án lớn.
Kiểm tra với cỡ chữ lớn: chạy cùng một golden với textScaleFactor lớn để phát hiện tràn khung.
Giao diện có trạng thái cố định: skeleton, trạng thái rỗng, thông báo lỗi.

Không nên dùng khi:

Màn hình có dữ liệu thay đổi liên tục như danh sách lấy từ API — mỗi lần dữ liệu đổi là phải sinh lại ảnh mẫu.
Giao diện có hiệu ứng động, vì ảnh chụp một khung hình không đại diện cho hành vi.
Thiết kế còn đang thay đổi nhanh — chi phí cập nhật ảnh mẫu sẽ lớn hơn giá trị thu được.

Quy trình cập nhật ảnh mẫu

Khi giao diện thay đổi có chủ đích, bạn cần sinh lại ảnh mẫu thay vì sửa từng tệp bằng tay:

[object Object]

Hai quy tắc cần giữ để golden test không mất giá trị:

Luôn xem ảnh khác biệt trước khi cập nhật. Nếu bạn cập nhật ảnh mẫu mà không xem, bộ test chỉ còn ghi lại hiện trạng — kể cả khi hiện trạng đó sai.
Đưa tệp ảnh mẫu vào review. Ảnh mẫu là một phần của mã nguồn; thay đổi nó cần người khác đọc, đúng như khi sửa logic.

Kết luận

Golden Tests giúp:

✅ Phát hiện UI changes
✅ Đảm bảo consistency
✅ Visual regression testing
✅ Document UI states

Tóm tắt:

Setup: Thêm golden_toolkit
Write Tests: Tạo golden tests
Generate: Tạo golden files
Maintain: Update khi UI thay đổi

Sử dụng Golden Tests sẽ giúp UI của bạn stable và consistent hơn! 🚀

Học Flutter bài bản theo lộ trình

Nếu bạn muốn học có người sửa bài thay vì tự ghép tài liệu, Flutter Hướng Nghiệp đào tạo theo 3 cấp:

Flutter Cơ Bản — Dart, widget, giao diện, 28 buổi.
Flutter Nâng Cao — state management, REST API, Firebase, 28 buổi.
Flutter Chuyên Sâu — back-end, AI/ML, publish lên store, 53 buổi.

Lớp online trực tiếp qua Zoom/Google Meet, có bản ghi lại — không bắt buộc đến cơ sở.
Xem lịch khai giảng hoặc so sánh 5 cách học lập trình mobile nếu còn phân vân.