Quy trình kiểm thử Front-End tương tác với smart contract

Tags: code, smart contract

Khi xây dựng dApp Web3, smart contract chỉ là một phần. Người dùng cuối sẽ tương tác qua frontend – thường là React, Vue hoặc NextJS – kết nối với smart contract viết bằng Solidity.

Nếu frontend gửi sai input, hiển thị sai balance, hay xử lý transaction lỗi kém… thì dù smart contract hoàn hảo, người dùng vẫn bỏ đi. Vì vậy, kiểm thử frontend tương tác với smart contract là bước QA bắt buộc trước khi mainnet.

Bài viết này sẽ hướng dẫn bạn quy trình kiểm thử frontend ↔ smart contract đầy đủ, có ví dụ, có cảnh báo lỗi dễ gặp, phù hợp cho cả QA lẫn dev frontend Web3.

---

Bước 1: Kiểm Tra Kết Nối Wallet

• Đảm bảo frontend kết nối đúng wallet (MetaMask, WalletConnect,…).
• Kiểm thử trên nhiều mạng: testnet (Goerli, Sepolia), mainnet.
• Kiểm tra các case:
  • Người dùng từ chối kết nối.
  • Không có ví cài đặt.
  • Đổi chain giữa chừng.

🔺 Dễ gặp lỗi:

• Dapp “đơ” khi người dùng không cấp quyền.
• Hiển thị sai chain (ví dụ đang ở BSC nhưng báo là Ethereum).
• Không xử lý được chainChanged event → bug khi chuyển mạng.

---

Bước 2: Kiểm Tra Đọc Dữ Liệu Từ Contract

• Gọi các hàm view, pure từ contract:
  Ví dụ: balanceOf(address), earned(address), totalStaked(), rewardRate()…
• Kiểm tra dữ liệu hiển thị đúng từng user.

🔺 Dễ gặp lỗi:

• Gọi sai address → hiển thị số dư user khác.
• Dùng callStatic nhưng quên xử lý BigNumber → hiển thị NaN hoặc 0.
• Không re-fetch khi user thực hiện giao dịch xong.

💡 Mẹo: Dùng ethers.js, wagmi, viem, web3.js để tương tác contract đúng chuẩn.

---

Bước 3: Kiểm Tra Gửi Giao Dịch (Transaction)

• Test các hành động như:
  • Stake/Deposit.
  • Withdraw.
  • Claim reward.
  • Approve token (ERC-20).
• Xác minh các bước:
  • Dữ liệu gửi đúng (input, amount, gas).
  • Transaction pending được xử lý (loading UI).
  • Sau khi mined → cập nhật dữ liệu.

🔺 Dễ gặp lỗi:

• Gửi transaction với số lượng 0 → bị revert.
• Không gửi approve trước khi transfer token.
• Gửi giao dịch khi user chưa kết nối → app crash.

💡 Mẹo: Tách write contract thành hàm riêng, xử lý lỗi qua try/catch.

---

Bước 4: Kiểm Tra Thao Tác Với ERC-20 Token

• Gửi token cần thực hiện 2 bước:
  1. approve() contract.
  2. deposit() token vào contract.
• Kiểm tra token decimals (6, 18,…), tránh nhập sai giá trị.

🔺 Dễ gặp lỗi:

• Không xử lý được lỗi khi user từ chối approve.
• Không kiểm tra allowance đủ trước khi gửi TX → bị revert.
• Không convert số về wei đúng cách → gửi nhầm số lượng.

---

Bước 5: Kiểm Tra Hiển Thị Sau Giao Dịch

• Sau khi TX được mined, frontend phải cập nhật dữ liệu:
  • Balance.
  • Rewards.
  • Trạng thái stake/unstake.
• Có thể dùng:
  • listen event từ contract (ví dụ: Staked, Withdrawn).
  • Gọi lại API hoặc refetch() dữ liệu on-chain.

🔺 Dễ gặp lỗi:

• Không hiển thị tx hash → user nghĩ chưa gửi.
• Cập nhật trễ → user tưởng TX fail.
• Hiển thị dữ liệu cũ từ cache.

---

Bước 6: Test UX Khi Giao Dịch Lỗi

• Gửi TX fail (input sai, không đủ gas, từ chối giao dịch).
• Đảm bảo app:
  • Không crash.
  • Có hiển thị lỗi rõ ràng.
  • Cho phép thử lại.

🔺 Dễ gặp lỗi:

• Lỗi Solidity hiện nguyên mã revert → không thân thiện.
• Dùng toast thông báo nhưng không ghi rõ lý do fail.
• Không cho phép retry → buộc F5.

---

Bước 7: Kiểm Tra Trên Nhiều Trình Duyệt + Wallet

• Test trên:
  • Chrome, Firefox, Brave.
  • MetaMask, Coinbase Wallet, WalletConnect, Rabby.
• Test trên desktop và mobile nếu dApp có hỗ trợ.

🔺 Dễ gặp lỗi:

• Một số wallet inject window.ethereum khác nhau → Dapp không nhận.
• Safari mobile hay lỗi gas estimation.
• Một số ví không hỗ trợ eth_signTypedData.

---

Gợi Ý Checklist Kiểm Thử Frontend ↔ Smart Contract

Tính năng	Đã test?	Ghi chú
Kết nối ví	✅	MetaMask, WalletConnect
Gọi balanceOf()	✅	Hiển thị đúng
Stake/Unstake	✅	Đã xử lý pending/loading
Approve ERC-20	✅	Có kiểm tra allowance
Hiển thị tx hash	✅	Toast notification
Retry khi fail	❌	Cần thêm nút “Thử lại”
Tương thích ví khác	❌	Chưa test Coinbase Wallet

---

Kết Luận

Kiểm thử frontend tương tác smart contract là một phần quan trọng trong QA Web3, không thể bỏ qua. Một dApp thành công không chỉ cần smart contract an toàn, mà còn phải có giao diện dễ dùng, phản hồi tốt và không gây bối rối cho người dùng khi có lỗi xảy ra.

Quay lại bài viết Tìm hiểu đầy đủ quy trình các bước kiểm thử smart contract.

Hướng dẫn các bước kiểm thử (QA) Smart Contract