wangjia
f97ae8186b
对照 design/ui_kits mobile+tablet 原型逐屏补齐 Flutter 客户端: - l10n 资源层(strings_zh/en,单显)+ Riverpod 状态层(连接状态机/免费额度/ 节点选择/语言/主题),UI 与数据解耦,mock 数据接 API 不动 UI。 - 连接键严格三态(off 虚线轨道环 / connecting 旋转弧 / on 满环+计时+光晕), 状态来自 connectionProvider,点击只派发事件——禁止乐观显示。 - 节点页置顶「智能选择」推荐卡(clay 渐变 zap + 推荐胶囊,默认选中); 免费额度卡(剩余分钟+进度条 ≤3 分钟切 warning + 看广告解锁变绿)。 - Tab 左右滑动切换(手势竞技场仲裁,子页滚动不误触发,200ms 方向感知滑入)。 - iPad/宽屏 ≥900 LayoutBuilder 切侧栏分栏(导航行高 ≥48,连接页双栏/节点双列网格), 复用同一批原子组件,不 fork 页面。 - 语义 token 零硬编码;文案全部走 l10n;套餐数字对齐 §7;无支付表单/emoji 国旗。 - CI 红线词扫描扩展到 client/lib;新增 Flutter analyze+test CI 任务。 - 测试:连接状态机/额度/节点单测、连接键三态与卡片组件测试、 golden(连接键三态/推荐卡/额度卡 × 明暗)。 Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
88 lines
3.0 KiB
Dart
88 lines
3.0 KiB
Dart
// components_golden_test.dart — 关键组件 golden(明/暗两主题)
|
|
//
|
|
// 覆盖:连接键三态、智能选择推荐卡、免费额度卡。
|
|
// 首次生成基准图:`flutter test --update-goldens test/golden`。
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter_test/flutter_test.dart';
|
|
import 'package:pangolin_vpn/l10n/strings_zh.dart';
|
|
import 'package:pangolin_vpn/state/connection_provider.dart';
|
|
import 'package:pangolin_vpn/state/quota_provider.dart';
|
|
import 'package:pangolin_vpn/widgets/connect_button.dart';
|
|
import 'package:pangolin_vpn/widgets/quota_card.dart';
|
|
import 'package:pangolin_vpn/widgets/smart_select_card.dart';
|
|
|
|
import '../helpers/harness.dart';
|
|
|
|
void main() {
|
|
setUpAll(disableGoogleFontsFetching);
|
|
const t = StringsZh();
|
|
|
|
Future<void> goldenOf(
|
|
WidgetTester tester,
|
|
Widget child,
|
|
Finder finder,
|
|
String name, {
|
|
bool dark = false,
|
|
Duration settle = Duration.zero,
|
|
}) async {
|
|
await tester.pumpWidget(wrapThemed(child, dark: dark));
|
|
if (settle == Duration.zero) {
|
|
await tester.pump();
|
|
} else {
|
|
await tester.pump(settle); // 固定帧,确保连接中旋转角确定
|
|
}
|
|
await expectLater(finder, matchesGoldenFile('goldens/$name.png'));
|
|
}
|
|
|
|
ConnectButton btn(VpnPhase phase, {Duration elapsed = Duration.zero}) => ConnectButton(
|
|
phase: phase,
|
|
elapsed: elapsed,
|
|
offLabel: t.connectNow,
|
|
secureLabel: t.secure,
|
|
onTap: () {},
|
|
);
|
|
|
|
for (final dark in [false, true]) {
|
|
final suffix = dark ? 'dark' : 'light';
|
|
|
|
testWidgets('连接键 off · $suffix', (tester) async {
|
|
await goldenOf(tester, btn(VpnPhase.off), find.byType(ConnectButton), 'connect_off_$suffix', dark: dark);
|
|
});
|
|
|
|
testWidgets('连接键 connecting · $suffix', (tester) async {
|
|
await goldenOf(tester, btn(VpnPhase.connecting), find.byType(ConnectButton), 'connect_connecting_$suffix',
|
|
dark: dark, settle: const Duration(milliseconds: 700));
|
|
});
|
|
|
|
testWidgets('连接键 on · $suffix', (tester) async {
|
|
await goldenOf(tester, btn(VpnPhase.on, elapsed: const Duration(seconds: 5)), find.byType(ConnectButton),
|
|
'connect_on_$suffix', dark: dark);
|
|
});
|
|
|
|
testWidgets('推荐卡 · $suffix', (tester) async {
|
|
await goldenOf(tester, SmartSelectCard(t: t, selected: true, onTap: () {}), find.byType(SmartSelectCard),
|
|
'smart_card_$suffix', dark: dark);
|
|
});
|
|
|
|
testWidgets('额度卡(低额度警示)· $suffix', (tester) async {
|
|
await goldenOf(
|
|
tester,
|
|
QuotaCard(quota: const FreeQuotaState(remainingMinutes: 2), t: t, onWatchAd: () {}),
|
|
find.byType(QuotaCard),
|
|
'quota_low_$suffix',
|
|
dark: dark,
|
|
);
|
|
});
|
|
|
|
testWidgets('额度卡(已解锁)· $suffix', (tester) async {
|
|
await goldenOf(
|
|
tester,
|
|
QuotaCard(quota: const FreeQuotaState(adUnlocked: true), t: t, onWatchAd: () {}),
|
|
find.byType(QuotaCard),
|
|
'quota_unlocked_$suffix',
|
|
dark: dark,
|
|
);
|
|
});
|
|
}
|
|
}
|