component-checklist

name	component_checklist
description	Checklist component-level behaviors — áp dụng sau testing_dimensions khi feature có form, layout, hoặc data display. Tự động detect từ AC text hoặc Figma design.

Component Checklist

Cách dùng

Skill này không dùng độc lập — dùng kết hợp với rbt_manual_testing, áp dụng sau testing_dimensions.

Khi nào áp dụng: Component Type đã được /plan-tcs gắn sẵn cho từng component trong plan-tcs.md (Textbox/Dropdown/Checkbox/Radio/Table/Dialog/Button/File Upload/...). /gen-tcs tra thẳng theo Component Type đó vào Section tương ứng bên dưới — không đoán qua keyword AC text, không hỏi user xác nhận A/B/C (khác với việc gắn Component Type, vốn đã chốt ở /plan-tcs và user đã confirm plan ở bước đó rồi).

Component Type (từ plan-tcs.md)	Section áp dụng
Textbox/Input, Dropdown/Select, Checkbox, Radio, Button (Add/Update/Delete/Export/Import/Download/Upload)	Section A — Form Components
Dialog/Popup, Breadcrumb, Pager, Tooltip, Hyperlink/Link, Progress bar	Section B — Layout Components
Table/List (Search, Paging, Sort, Filter)	Section C — Data Display

Nếu Component Type không khớp entry cụ thể nào trong 3 Section trên (component đặc thù, ít gặp): dùng section gần nhất làm nền, tự bổ sung scenario theo đặc tính riêng của component đó — không bỏ qua bước checklist.

---

Section A — Form Components

Textbox / Input Field

Scenario	Cần verify
Empty/null	Submit với field bắt buộc để trống → validation error đúng message
Whitespace-only	Chỉ nhập dấu cách → treat như empty hay accept? (theo spec)
Max length	Nhập đúng max → accept; nhập max+1 → blocked hoặc truncated
Leading/trailing whitespace	Trim trước khi lưu? Hay giữ nguyên?
Special chars — injection	Nhập <script>alert(1)</script> → escaped khi display, không execute
Special chars — SQL	Nhập ' OR '1'='1 → blocked hoặc escaped, không execute
Null character	Nhập \0 hoặc ký tự null → không làm crash, không lưu corrupt data
Ký tự đặc ngôn ngữ	Kana/full-size/half-size (JP), dấu tiếng Việt, CJK, Arabic RTL — nhập và display đúng encoding
Copy/paste từ ngoài	Paste từ Word/Excel có rich text → plain text, không corrupt encoding
Readonly field	Không editable, không submit giá trị mới dù có thay đổi qua DevTools
Disabled field	Không focus được, style phân biệt rõ với enabled
Mask field (password)	Ký tự bị ẩn, không expose trong HTML source, không autocomplete không mong muốn

Select Box / Dropdown

Scenario	Cần verify
Default value	Đúng giá trị default khi mới mở, không phải placeholder trống
Option active/inactive	Inactive option: không chọn được, style phân biệt rõ
Single select	Chỉ 1 option được chọn tại 1 thời điểm
Multiple select	Mỗi option chọn/bỏ chọn độc lập; counter/tag hiển thị đúng số
Select all / Deselect all	Nếu có: check/uncheck đúng tất cả visible options
Search trong dropdown	Filter options đúng theo keyword; không kết quả → empty state rõ ràng
Dependent dropdown	Dropdown B reset khi Dropdown A thay đổi; không giữ giá trị cũ không hợp lệ

Checkbox

Scenario	Cần verify
Default state	Đúng trạng thái mặc định (checked/unchecked) theo spec
Check/Uncheck	Toggle đúng, không cần double-click
Required validation	Submit khi checkbox bắt buộc chưa check → error đúng message
Indeterminate state	Nếu có (VD "select all" cha với con được chọn 1 phần) → hiển thị đúng dấu gạch ngang, không nhầm với checked/unchecked
Disabled	Không toggle được, style phân biệt rõ
Nhóm checkbox độc lập	Check checkbox này không ảnh hưởng checkbox khác trong cùng nhóm (trừ khi có rule phụ thuộc)

Radio Button

Scenario	Cần verify
Default selection	Đúng option được chọn mặc định (hoặc không option nào nếu spec yêu cầu)
Chỉ chọn được 1	Chọn option khác tự động bỏ chọn option cũ trong cùng group
Required validation	Submit khi chưa chọn option nào (nếu bắt buộc) → error đúng message
Disabled option	Option bị disable không chọn được, style phân biệt rõ
Đổi selection kích hoạt logic phụ	Nếu chọn radio này làm hiện/ẩn field khác → verify đúng theo từng option

Button — theo loại hành động

Add / Register Button

Scenario	Cần verify
Confirm dialog	Hiện confirm trước khi submit (nếu có theo spec)
DB reflection	Record mới xuất hiện trong danh sách sau success
Double-click prevention	Click nhanh 2 lần → không tạo 2 records
Browser back sau submit	Không resubmit form → không tạo duplicate record
Concurrent register	2 user tạo cùng unique data → chỉ 1 thành công, user kia nhận error rõ ràng
Rollback khi lỗi	Nếu fail giữa chừng (network, server error) → không để data ở trạng thái orphan
Required fields	Submit thiếu required field → validation error, không submit

Update Button

Scenario	Cần verify
DB reflection	Data cập nhật đúng trong DB sau success
Chỉ update fields thay đổi	Fields không thay đổi không bị overwrite với giá trị cũ
Optimistic lock	2 user cùng edit record → user submit sau nhận conflict warning
Cancel / Discard	Hủy edit → dữ liệu gốc được restore, không lưu thay đổi
Form dirty state	Đóng tab/navigate away khi có unsaved changes → confirm dialog

Delete Button

Scenario	Cần verify
Confirm dialog bắt buộc	PHẢI có confirm trước khi xóa — không thể xóa 1 click
Soft delete	Record không hiện trong UI nhưng còn trong DB; có thể restore nếu spec yêu cầu
Hard delete	Record xóa khỏi DB hoàn toàn; không thể recover
Cascade delete	Dependencies liên quan (records con) xử lý đúng theo spec (xóa theo / block / detach)
Xóa hàng loạt	Multi-select + delete: confirm rõ số lượng, không xóa record không được chọn

Export Button

Scenario	Cần verify
Format đúng	CSV / Excel / PDF đúng format theo spec
Encoding	UTF-8 BOM cho Excel hiển thị tiếng Việt/Nhật đúng (không bị lỗi font)
Empty data export	Xuất file với 0 records → file hợp lệ với header, không crash
Large data export	Xuất 10,000+ records → không timeout, progress indicator nếu lâu
Tên file	Tên file đúng convention (VD: export_YYYYMMDD.csv)

Import Button

Scenario	Cần verify
File type validation	Chỉ accept đúng format (VD: .csv, .xlsx) — reject file khác
Max file size	File quá lớn → error rõ ràng với size limit cụ thể
Malformed file	File đúng extension nhưng nội dung sai format → error, không crash
Duplicate detection	Row trùng với data trong DB → reject và báo rõ row nào trùng
Rollback on partial failure	Row 5/100 lỗi → rollback toàn bộ hay import 99 rows thành công? (theo spec)
Preview trước import	Nếu có step preview: data hiển thị đúng trước khi confirm import
Import result report	Sau import: tổng thành công / thất bại / skip rõ ràng

Download Button

Scenario	Cần verify
File content đúng	Nội dung file khớp với data hiển thị trên màn hình
MIME type đúng	Content-Type header đúng để browser xử lý/download đúng
Tên file	Không bị generic tên như download — đúng tên theo spec
Encoding	Ký tự đặc biệt trong tên file không bị corrupt
File không tồn tại	Link download file đã bị xóa → 404 message rõ ràng, không crash
Large file	File lớn → progress indicator, không timeout sớm

Upload Button

Scenario	Cần verify
File type	Chỉ accept đúng MIME type — reject file giả extension
Max file size	File vượt giới hạn → error với size limit cụ thể
Min file size	File 0 bytes → reject
Preview	Image/video: preview trước khi confirm upload
Multiple files	Upload nhiều file: từng file được xử lý đúng, thất bại 1 file không block file khác
Upload progress	Progress bar / percentage hiện đúng, không freeze
Cancel upload	Hủy giữa chừng → không để file nửa vời trên server
Upload xong → DB reflection	File accessible ngay sau upload thành công
Virus scan	Nếu có: file độc hại → reject với message phù hợp, không lưu
Tên file đặc biệt	Tên có spaces, ký tự đặc biệt, unicode → handle đúng

---

Section B — Layout Components

Dialog / Modal

Scenario	Cần verify
Đóng bằng nút Confirm	Action được thực hiện, dialog đóng
Đóng bằng nút Cancel	Không có action nào xảy ra, dialog đóng
Đóng bằng nút X	Tương đương Cancel — không action
Đóng bằng phím Escape	Tương đương Cancel — không action
Click overlay (ngoài dialog)	Đóng (nếu spec cho phép) hoặc không đóng (nếu action quan trọng) — đúng theo spec
Focus trap	Tab chỉ di chuyển giữa các elements trong dialog, không ra ngoài
Scroll trong dialog	Nếu content dài: dialog scrollable, không bị cắt
Nested dialog	Dialog mở từ dialog: đóng đúng thứ tự stack

Breadcrumb

Scenario	Cần verify
Link từng level	Click vào mỗi cấp → navigate đúng trang
Active state	Level hiện tại không phải link (non-clickable), style phân biệt rõ
Overflow	Breadcrumb rất dài → truncate hoặc wrap đúng, không vỡ layout

Pager / Pagination

Scenario	Cần verify
Trang đầu	Nút Previous/First bị disabled
Trang cuối	Nút Next/Last bị disabled
Direct input	Nhập số trang trực tiếp: đúng trang → navigate, trang không hợp lệ → error
Tổng trang	Số trang tính đúng khi total records thay đổi

Hyperlink / Link

Scenario	Cần verify
Internal link	Navigate đúng màn hình trong app
External link	Mở tab mới (nếu spec), không navigate rời khỏi app
Link với role restriction	User không có quyền → link ẩn hoặc disabled, không 403 khi click
Broken link	Link target không tồn tại → 404 page rõ ràng, không crash

Visual Elements

Element	Cần verify
Tooltip	Hiện khi hover, ẩn khi mouse rời hoặc click ra ngoài
Progress bar	Phần trăm chính xác, không stuck ở 99%, hoàn thành → 100%
Loading / Skeleton	Hiện trong khi chờ async, ẩn sau khi data load xong
Empty state	Khi không có data: message rõ ràng + action gợi ý, không blank
Tab navigation	Thứ tự Tab đúng theo visual layout, Shift+Tab reverse đúng

---

Section C — Data Display

Table (khung hiển thị dữ liệu — độc lập với Search/Paging/Sort/Filter bên dưới)

Scenario	Cần verify
Column mapping	Mỗi cột hiển thị đúng data field, đúng định dạng (ngày/số/tiền tệ/trạng thái)
Column header	Tên cột đúng, không thiếu/thừa cột so với spec
Row rendering	Số dòng đúng số record; không dòng nào bị lặp/thiếu
Empty table	Không có data → empty state rõ ràng, không hiện bảng trống/lỗi
Row action	Action theo dòng (Edit/Delete/View...) đúng gắn với đúng record của dòng đó
Row selection	Nếu có checkbox chọn dòng: chọn/bỏ chọn đúng, "select all" hoạt động đúng
Column resize/reorder	Nếu cho phép: thao tác đúng, state được giữ khi reload (tùy spec)
Sticky header/column	Nếu có: header/cột cố định đúng khi scroll ngang/dọc
Long text trong cell	Truncate + tooltip đầy đủ, hoặc wrap đúng theo spec — không vỡ layout

Search

Scenario	Cần verify
Free-word — partial match	Nhập 1 phần keyword → tìm thấy records có chứa keyword đó
Free-word — case-insensitive	"ABC" và "abc" cho cùng kết quả
Free-word — trim whitespace	Nhập " keyword " → tìm như "keyword"
Multiple keywords	"từ A từ B": AND (cả 2 phải có) hay OR (1 trong 2)? Đúng theo spec
Special chars trong query	Nhập %, _, *, ?, <script> → không break query, không SQL inject
Empty search	Không nhập gì → hiển thị tất cả hoặc empty state (theo spec)
No result	Keyword không khớp → empty state rõ ràng, không blank
Search by role	User chỉ thấy records thuộc scope quyền của mình
Search result count	Tổng số kết quả hiển thị chính xác
Cache	Search cùng keyword lần 2 → kết quả nhất quán với lần 1 (không stale cache)

Paging trong Data Display

Scenario	Cần verify
Page size đúng	Mỗi trang hiển thị đúng số items theo page size config
Trang cuối	Số items ≤ page size, không hiện row trống
Tổng số records	Đếm đúng kể cả khi có filter/search active
Giữ sort state	Chuyển sang trang 2 → vẫn đúng thứ tự sort đang áp
Giữ filter state	Chuyển trang → filter không bị reset
Deep link	URL có thể share để đến thẳng trang X với sort/filter hiện tại
Reload	F5 trên trang X → về trang X (không về trang 1) nếu URL có state

Sort

Scenario	Cần verify
Default sort	Thứ tự mặc định đúng theo spec khi không sort thủ công
Toggle asc/desc	Click cột đang sort → đổi chiều; icon sort indicator cập nhật đúng
Sort cột khác	Sort column B → clear sort column A (hoặc multi-sort theo spec)
Null values	null/empty sort về đầu hay cuối? Đúng theo spec hoặc consistent
Sort + paging	Sau sort, page 2 vẫn chứa đúng records theo thứ tự
Sort + search	Sort không mất kết quả search, search không reset sort

Filter

Scenario	Cần verify
Single filter	Filter theo 1 criteria → kết quả đúng
Multi-filter	Nhiều filter cùng lúc: AND logic — records phải thỏa hết
Filter + search	Kết hợp filter và search: áp dụng cả 2 điều kiện
Clear 1 filter	Bỏ 1 filter → kết quả update, các filter khác vẫn còn
Clear all filters	Reset về initial state hoàn toàn
Filter state	Navigate back → filter state còn giữ hay reset? (theo spec)
Filter result count	Tổng records sau filter hiển thị đúng