Repository navigation
feat(storybook): ProviderResult visual testing with Storybook screenshots - #172
Merged
Merged
Conversation
…-only configs - Add getNativeBalance() method to EtherscanProvider - Use Blockscout/Etherscan API balance endpoint (?module=account&action=balance) - Fix ethereum-blockscout-only panel showing no assets in Storybook comparison - Add test to verify blockscout-v1 provider balance support - Cache balance queries for 30s with proper invalidation tags
…nguish fallback from empty data
BREAKING CHANGE: ChainProvider query methods now return ProviderResult<T> instead of raw data
- Add ProviderResult<T> type with { supported, data, reason? } structure
- ChainProvider.getNativeBalance/getTokenBalances/getTransactionHistory now return ProviderResult
- isSupported() type guard to check if query succeeded
- ProviderFallbackWarning component shows yellow warning when all providers fail
- UI components display fallback warning when supported: false
Files changed:
- src/types/provider-result.ts (new)
- src/components/common/provider-fallback-warning.tsx (new)
- src/services/chain-adapter/providers/chain-provider.ts
- src/services/chain-adapter/providers/types.ts
- src/components/wallet/wallet-address-portfolio-*.tsx
- src/queries/use-address-*.ts
- src/hooks/use-send.web3.ts
- src/stores/wallet.ts
- src/services/transaction/web.ts
- src/pages/address-transactions/index.tsx
- All related tests updated
…llbackWarning component
Screenshots captured via Playwright E2E: - 01-default-normal-data.png: Normal state with tokens/transactions - 02-fallback-warning-tokens-tab.png: Yellow warning when providers fail (tokens) - 03-fallback-warning-transactions-tab.png: Yellow warning (transactions tab) - 04-empty-no-warning.png: Empty data WITHOUT warning (providers ok) - 05-loading-state.png: Skeleton loading state - 06-compare-providers-full.png: Real provider comparison across chains
- Add script to collect real provider data from Storybook addresses - Create provider-fallback-warning.mock.spec.ts with fixtures-based tests - Generate screenshots to e2e/__screenshots__/ per best practices - Remove manually created screenshots/ directory Fixtures collected from: - Ethereum: Vitalik address (23.68 ETH) - Bitcoin: Satoshi address (54.46 BTC) - Tron: 163,377 TRX - Binance: BSC address
- Configure playwright.storybook.config.ts for Mobile-Chrome (393x851) - Add screenshots to storybook-e2e/__screenshots__/Mobile-Chrome/ - Create Storybook visual testing best practices doc - Add provider-fallback-warning.spec.ts with 10 test cases - Update white-book test chapter index
- Remove e2e/provider-fallback-warning.mock.spec.ts (migrated to storybook-e2e) - Update collect-provider-fixtures.mjs with Etherscan V2 API - Add mock transaction data based on real API responses: - Bitcoin (mempool.space): 4 transactions with real txids - Ethereum: 3 transactions (send/receive ETH/USDC) - Tron (TronGrid): 3 transactions with real format - Binance: 2 transactions - Update stories to use new mock transaction arrays - Expand storybook-e2e tests from 10 to 14 cases: - 4 chains x 2 (Assets + Transactions) for normal data - 4 chains x Fallback Warning - 2 mixed scenarios (Partial Fallback, Empty But Supported) - Rename screenshots: *-normal-data.png -> *-normal-assets.png
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
实现 ProviderResult 类型系统的 Storybook 视觉测试，覆盖四条链的资产和交易列表场景。
Changes
新增功能
Mock 数据
基于真实 API 响应创建的交易数据：
配置更新
playwright.storybook.config.ts: Mobile-Chrome (393x851)storybook-e2e/__screenshots__/Mobile-Chrome/文档
docs/white-book/08-测试篇/03-Playwright配置/storybook-visual-testing.mdTesting
Screenshots
截图位于
storybook-e2e/__screenshots__/Mobile-Chrome/：*-normal-assets.png- 资产列表*-normal-transactions.png- 交易列表*-fallback-warning.png- Provider 降级警告