feat(flutter): 重设计登录页视觉

test/auth/auth_visual_test.dart

@@ -0,0 +1,311 @@
+import 'dart:async';
+
+import 'package:flutter/material.dart';
+import 'package:flutter_test/flutter_test.dart';
+import 'package:provider/provider.dart';
+import 'package:shared_preferences_platform_interface/in_memory_shared_preferences_async.dart';
+import 'package:shared_preferences_platform_interface/shared_preferences_async_platform_interface.dart';
+
+import 'package:fruitshorts/core/data/models/auth_session.dart';
+import 'package:fruitshorts/core/data/remote/api_client.dart';
+import 'package:fruitshorts/core/data/remote/auth_api.dart';
+import 'package:fruitshorts/core/data/services/auth_controller.dart';
+import 'package:fruitshorts/core/data/services/auth_session_store.dart';
+import 'package:fruitshorts/core/platform/haptics.dart';
+import 'package:fruitshorts/core/theme/app_colors.dart';
+import 'package:fruitshorts/l10n/app_localizations.dart';
+import 'package:fruitshorts/pages/auth/auth_view.dart';
+
+import '../support/fake_haptics.dart';
+import '../support/fake_http_adapter.dart';
+
+void main() {
+  setUp(() {
+    SharedPreferencesAsyncPlatform.instance =
+        InMemorySharedPreferencesAsync.empty();
+  });
+
+  Future<void> pumpAuthPage(
+    WidgetTester tester, {
+    AuthApi? api,
+    FakeHaptics? haptics,
+  }) async {
+    final auth = AuthController(
+      api ??
+          AuthApi(
+            ApiClient(
+              baseUrl: 'http://127.0.0.1:1',
+              adapter: FakeHttpAdapter(
+                (_) async => FakeHttpResponse('{}', 500),
+              ),
+            ),
+          ),
+      AuthSessionStore(),
+    );
+    await tester.pumpWidget(
+      MultiProvider(
+        providers: [
+          ChangeNotifierProvider<AuthController>.value(value: auth),
+          Provider<Haptics>.value(value: haptics ?? FakeHaptics()),
+        ],
+        child: MaterialApp(
+          locale: const Locale('en'),
+          localizationsDelegates: AppLocalizations.localizationsDelegates,
+          supportedLocales: AppLocalizations.supportedLocales,
+          home: const AuthPage(),
+        ),
+      ),
+    );
+    await tester.pump(const Duration(milliseconds: 220));
+  }
+
+  testWidgets(
+    'should_render_branded_dark_layout_with_approved_tokens_when_page_opens',
+    (tester) async {
+      await pumpAuthPage(tester);
+
+      expect(find.byKey(const Key('auth-brand')), findsOneWidget);
+      expect(find.text('FruitShorts'), findsOneWidget);
+      expect(find.text('Short dramas made for Indonesia'), findsOneWidget);
+      expect(
+        tester.getSize(find.byKey(const Key('auth-brand-mark'))),
+        const Size(48, 48),
+      );
+
+      final glow = tester.widget<Container>(
+        find.byKey(const Key('auth-background-glow')),
+      );
+      final glowDecoration = glow.decoration! as BoxDecoration;
+      final gradient = glowDecoration.gradient! as LinearGradient;
+      for (final color in gradient.colors) {
+        expect(color.a, lessThanOrEqualTo(0.18));
+      }
+
+      final card = tester.widget<Container>(find.byKey(const Key('auth-card')));
+      final cardDecoration = card.decoration! as BoxDecoration;
+      expect(cardDecoration.color, AppColors.card);
+      expect(cardDecoration.borderRadius, BorderRadius.circular(20));
+      expect(
+        (cardDecoration.border! as Border).top.color,
+        AppColors.outlineVariantDark,
+      );
+      expect((cardDecoration.border! as Border).top.width, 1);
+
+      final email = tester.widget<TextField>(
+        find.byKey(const Key('auth-email')),
+      );
+      expect(email.decoration?.fillColor, AppColors.bar);
+      expect(tester.getSize(find.byKey(const Key('auth-email'))).height, 52);
+      final emailBorder = email.decoration!.border! as OutlineInputBorder;
+      expect(emailBorder.borderRadius, BorderRadius.circular(14));
+
+      final submit = tester.widget<FilledButton>(
+        find.byKey(const Key('auth-submit')),
+      );
+      expect(submit.style!.backgroundColor!.resolve(const {}), AppColors.blue);
+      expect(
+        submit.style!.backgroundColor!.resolve(const {WidgetState.pressed}),
+        AppColors.bluePressed,
+      );
+      expect(tester.getSize(find.byKey(const Key('auth-submit'))).height, 52);
+      expect(
+        (submit.style!.shape!.resolve(const {})! as RoundedRectangleBorder)
+            .borderRadius,
+        BorderRadius.circular(26),
+      );
+
+      expect(find.text('Sign In'), findsWidgets);
+      expect(find.text('Sign Up'), findsOneWidget);
+      expect(
+        tester.widget<Text>(find.text('Sign In').first).style?.fontSize,
+        isNot(0),
+      );
+    },
+  );
+
+  testWidgets('should_fade_and_slide_content_in_within_220ms', (tester) async {
+    await pumpAuthPage(tester);
+
+    final animation = tester.widget<TweenAnimationBuilder<double>>(
+      find.byKey(const Key('auth-enter-animation')),
+    );
+    expect(
+      animation.duration,
+      lessThanOrEqualTo(const Duration(milliseconds: 220)),
+    );
+    expect(animation.tween.begin, 0);
+    expect(animation.tween.end, 1);
+  });
+
+  testWidgets(
+    'should_switch_between_sign_in_and_sign_up_when_segment_is_tapped',
+    (tester) async {
+      await pumpAuthPage(tester);
+      expect(find.text('Welcome back'), findsOneWidget);
+
+      await tester.tap(find.byKey(const Key('auth-mode-sign-up')));
+      await tester.pumpAndSettle();
+
+      expect(find.text('Create your account'), findsOneWidget);
+      expect(find.text('Welcome back'), findsNothing);
+      expect(_segmentColor(tester, 'auth-mode-sign-up'), AppColors.blue);
+      expect(_segmentColor(tester, 'auth-mode-sign-in'), Colors.transparent);
+
+      await tester.tap(find.byKey(const Key('auth-mode-sign-in')));
+      await tester.pumpAndSettle();
+
+      expect(find.text('Welcome back'), findsOneWidget);
+      expect(find.text('Create your account'), findsNothing);
+      expect(_segmentColor(tester, 'auth-mode-sign-in'), AppColors.blue);
+      expect(_segmentColor(tester, 'auth-mode-sign-up'), Colors.transparent);
+    },
+  );
+
+  testWidgets(
+    'should_move_focus_and_toggle_password_when_auth_controls_are_used',
+    (tester) async {
+      await pumpAuthPage(tester);
+      await tester.tap(find.byKey(const Key('auth-email')));
+      await tester.testTextInput.receiveAction(TextInputAction.next);
+      await tester.pump();
+
+      expect(
+        FocusManager.instance.primaryFocus?.debugLabel,
+        'auth-password-focus',
+      );
+
+      await tester.tap(find.byKey(const Key('auth-email')));
+      await tester.pump();
+      final email = tester.widget<TextField>(
+        find.byKey(const Key('auth-email')),
+      );
+      final focusedBorder =
+          email.decoration!.focusedBorder! as OutlineInputBorder;
+      expect(focusedBorder.borderSide.color, AppColors.blue);
+      expect(focusedBorder.borderSide.width, 1.5);
+      expect(
+        tester.widget<Icon>(find.byIcon(Icons.mail_outline_rounded)).color,
+        AppColors.blueSoft,
+      );
+
+      await tester.tap(find.byKey(const Key('auth-password-visibility')));
+      await tester.pump();
+      expect(
+        tester
+            .widget<TextField>(find.byKey(const Key('auth-password')))
+            .obscureText,
+        isFalse,
+      );
+      expect(find.byTooltip('Hide password'), findsOneWidget);
+    },
+  );
+
+  testWidgets(
+    'should_disable_form_mode_switch_and_submit_when_sign_in_is_pending',
+    (tester) async {
+      final api = _PendingAuthApi();
+      final haptics = FakeHaptics();
+      await pumpAuthPage(tester, api: api, haptics: haptics);
+      await tester.enterText(find.byKey(const Key('auth-email')), 'a@b.com');
+      await tester.enterText(
+        find.byKey(const Key('auth-password')),
+        'abcd1234',
+      );
+      await tester.tap(find.byKey(const Key('auth-submit')));
+      await tester.pump();
+
+      expect(api.loginCalls, 1);
+      expect(haptics.lightImpacts, 1);
+      expect(
+        tester.widget<TextField>(find.byKey(const Key('auth-email'))).enabled,
+        isFalse,
+      );
+      expect(
+        tester
+            .widget<TextField>(find.byKey(const Key('auth-password')))
+            .enabled,
+        isFalse,
+      );
+      expect(
+        tester
+            .widget<TextButton>(find.byKey(const Key('auth-switch-mode')))
+            .onPressed,
+        isNull,
+      );
+      expect(
+        tester
+            .widget<FilledButton>(find.byKey(const Key('auth-submit')))
+            .onPressed,
+        isNull,
+      );
+
+      api.release();
+      await tester.pumpAndSettle();
+    },
+  );
+
+  testWidgets('should_show_validation_message_inside_semantic_error_capsule', (
+    tester,
+  ) async {
+    await pumpAuthPage(tester);
+    await tester.enterText(find.byKey(const Key('auth-email')), 'a@b.com');
+    await tester.enterText(find.byKey(const Key('auth-password')), 'abcdefgh');
+    await tester.tap(find.byKey(const Key('auth-submit')));
+    await tester.pumpAndSettle();
+
+    final capsuleFinder = find.byKey(const Key('auth-error-capsule'));
+    expect(capsuleFinder, findsOneWidget);
+    final capsule = tester.widget<Container>(capsuleFinder);
+    final decoration = capsule.decoration! as BoxDecoration;
+    expect(decoration.borderRadius, BorderRadius.circular(12));
+    expect(decoration.color?.a, closeTo(0.1, 0.001));
+
+    final errorFinder = find.byKey(const Key('auth-error'));
+    final error = tester.widget<Text>(errorFinder);
+    final scheme = Theme.of(tester.element(errorFinder)).colorScheme;
+    expect(error.style?.color, scheme.error);
+    expect(
+      find.descendant(
+        of: capsuleFinder,
+        matching: find.byIcon(Icons.error_outline_rounded),
+      ),
+      findsOneWidget,
+    );
+  });
+}
+
+Color? _segmentColor(WidgetTester tester, String key) {
+  final segment = find.byKey(Key(key));
+  final animated = tester.widget<AnimatedContainer>(
+    find.descendant(of: segment, matching: find.byType(AnimatedContainer)),
+  );
+  return (animated.decoration! as BoxDecoration).color;
+}
+
+class _PendingAuthApi extends AuthApi {
+  _PendingAuthApi()
+    : super(
+        ApiClient(
+          baseUrl: 'http://127.0.0.1:1',
+          adapter: FakeHttpAdapter((_) async => FakeHttpResponse('{}', 500)),
+        ),
+      );
+
+  final _gate = Completer<void>();
+  int loginCalls = 0;
+
+  void release() => _gate.complete();
+
+  @override
+  Future<AuthSession> login({
+    required String email,
+    required String password,
+    required String deviceId,
+    String platform = '',
+    String appVersion = '',
+  }) async {
+    loginCalls++;
+    await _gate.future;
+    throw const ApiException(500, 'pending failure');
+  }
+}