ReelShort/test/auth/auth_visual_test.dart

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/app_config_controller.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/core/widgets/remote_image.dart';
import 'package:fruitshorts/l10n/app_localizations.dart';
import 'package:fruitshorts/pages/auth/auth_view.dart';

import '../support/fake_app_config.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,
    String loginBackgroundUrl = '',
    bool openEmail = true,
    bool asRoute = false,
  }) async {
    final auth = AuthController(
      api ??
          AuthApi(
            ApiClient(
              baseUrl: 'http://127.0.0.1:1',
              adapter: FakeHttpAdapter(
                (_) async => FakeHttpResponse('{}', 500),
              ),
            ),
          ),
      AuthSessionStore(),
    );
    final appConfig = await fakeAppConfigController(
      loginBackgroundUrl: loginBackgroundUrl,
    );
    await tester.pumpWidget(
      MultiProvider(
        providers: [
          ChangeNotifierProvider<AuthController>.value(value: auth),
          ChangeNotifierProvider<AppConfigController>.value(value: appConfig),
          Provider<Haptics>.value(value: haptics ?? FakeHaptics()),
        ],
        child: MaterialApp(
          locale: const Locale('en'),
          localizationsDelegates: AppLocalizations.localizationsDelegates,
          supportedLocales: AppLocalizations.supportedLocales,
          home: asRoute ? const _AuthRouteHost() : const AuthPage(),
        ),
      ),
    );
    await tester.pump(const Duration(milliseconds: 220));
    if (asRoute) {
      await tester.tap(find.byKey(const Key('auth-open')));
      await tester.pumpAndSettle();
    }
    if (openEmail) {
      await tester.ensureVisible(find.byKey(const Key('auth-entry-email')));
      await tester.tap(find.byKey(const Key('auth-entry-email')));
      await tester.pumpAndSettle();
    }
  }

  testWidgets(
    'should_render_branded_dark_layout_with_approved_tokens_when_page_opens',
    (tester) async {
      await pumpAuthPage(tester, openEmail: false);

      expect(find.byKey(const Key('auth-landing')), findsOneWidget);
      // 落地页只留图标，不再显示品牌文字。
      expect(find.text('ymb'), findsNothing);
      expect(
        tester.getSize(find.byKey(const Key('auth-brand-logo'))),
        const Size(88, 88),
      );
      expect(find.byKey(const Key('auth-entry-google')), findsNothing);
      expect(find.byKey(const Key('auth-entry-phone')), findsOneWidget);
      expect(find.byKey(const Key('auth-entry-email')), findsOneWidget);
      expect(find.byKey(const Key('auth-legal')), findsOneWidget);
      expect(
        tester.getSize(find.byKey(const Key('auth-entry-phone'))).height,
        52,
      );
      expect(
        tester.getSize(find.byKey(const Key('auth-entry-email'))).height,
        52,
      );
      final phoneButton = tester.widget<Material>(
        find.descendant(
          of: find.byKey(const Key('auth-entry-phone')),
          matching: find.byType(Material),
        ),
      );
      expect(phoneButton.color, AppColors.brandRed);
      expect(
        (phoneButton.shape! as RoundedRectangleBorder).borderRadius,
        BorderRadius.circular(26),
      );
      final emailButton = tester.widget<Material>(
        find.descendant(
          of: find.byKey(const Key('auth-entry-email')),
          matching: find.byType(Material),
        ),
      );
      // 次按钮是「白 6%」玻璃拟态，不再有描边。
      expect(emailButton.color, Colors.white.withValues(alpha: 0.06));

      final glow = tester.widget<DecoratedBox>(
        find.byKey(const Key('auth-red-glow')),
      );
      final glowDecoration = glow.decoration as BoxDecoration;
      final gradient = glowDecoration.gradient! as RadialGradient;
      expect(gradient.colors, const [
        AppColors.primaryBorder,
        AppColors.transparent,
      ]);

      await tester.tap(find.byKey(const Key('auth-entry-email')));
      await tester.pumpAndSettle();

      // 新版表单不再套卡片盒子，直接排在光晕背景上。
      expect(find.byKey(const Key('auth-card')), findsOneWidget);

      final email = tester.widget<TextField>(
        find.byKey(const Key('auth-email')),
      );
      expect(email.decoration?.fillColor, Colors.white.withValues(alpha: 0.05));
      expect(email.style?.color, AppColors.onSurface);
      expect(email.style?.fontSize, 15);
      expect(email.cursorColor, AppColors.brandRed);
      expect(tester.getSize(find.byKey(const Key('auth-email'))).height, 52);
      final emailBorder =
          email.decoration!.enabledBorder! as OutlineInputBorder;
      expect(emailBorder.borderRadius, BorderRadius.circular(12));
      expect(emailBorder.borderSide, BorderSide.none);
      final password = tester.widget<TextField>(
        find.byKey(const Key('auth-password')),
      );
      expect(password.style?.color, AppColors.onSurface);
      expect(password.style?.fontSize, 15);
      expect(password.cursorColor, AppColors.brandRed);

      final submit = tester.widget<FilledButton>(
        find.byKey(const Key('auth-submit')),
      );
      expect(
        submit.style!.backgroundColor!.resolve(const {}),
        AppColors.brandRed,
      );
      expect(
        submit.style!.backgroundColor!.resolve(const {WidgetState.pressed}),
        AppColors.brandRedPressed,
      );
      expect(tester.getSize(find.byKey(const Key('auth-submit'))).height, 50);
      expect(
        (submit.style!.shape!.resolve(const {})! as RoundedRectangleBorder)
            .borderRadius,
        BorderRadius.circular(25),
      );

      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_use_backend_login_background_when_configured', (
    tester,
  ) async {
    await pumpAuthPage(
      tester,
      openEmail: false,
      loginBackgroundUrl: '/files/login_bg/bg.jpg',
    );

    final backdrop = tester.widget<RemoteImage>(
      find.byKey(const Key('auth-poster-backdrop')),
    );
    expect(backdrop.path, '/files/login_bg/bg.jpg');
  });

  testWidgets(
    'should_fall_back_to_bundled_login_background_when_not_configured',
    (tester) async {
      await pumpAuthPage(tester, openEmail: false);

      final backdrop = tester.widget<RemoteImage>(
        find.byKey(const Key('auth-poster-backdrop')),
      );
      expect(backdrop.path, isEmpty);
      // 兜底图是我们塞给 RemoteImage 的 fallbackWidget，用 auth-poster-default 定位。
      expect(
        find.byKey(const Key('auth-poster-default')),
        findsOneWidget,
      );
    },
  );

  testWidgets('should_show_app_logo_lower_on_the_page_when_landing_opens', (
    tester,
  ) async {
    tester.view.physicalSize = const Size(390, 844);
    tester.view.devicePixelRatio = 1;
    addTearDown(tester.view.resetPhysicalSize);
    addTearDown(tester.view.resetDevicePixelRatio);
    await pumpAuthPage(tester, openEmail: false);

    final image = tester.widget<Image>(
      find.descendant(
        of: find.byKey(const Key('auth-brand-logo')),
        matching: find.byType(Image),
      ),
    );
    expect((image.image as AssetImage).assetName, 'assets/icon/ymb.png');
    // 新版落地页用三等分 Spacer 排版，Logo 居中且落在两个入口按钮上方。
    final logo = find.byKey(const Key('auth-brand-logo'));
    expect(tester.getCenter(logo).dx, closeTo(195, 0.1));
    expect(
      tester.getBottomLeft(logo).dy,
      lessThan(tester.getTopLeft(find.byKey(const Key('auth-entry-phone'))).dy),
    );
  });

  testWidgets('should_render_40px_back_button_when_page_is_pushed', (
    tester,
  ) async {
    await pumpAuthPage(tester, openEmail: false, asRoute: true);

    final back = find.byKey(const Key('auth-back'));
    expect(tester.getSize(back), const Size(40, 40));
    expect(
      tester
          .widget<Material>(
            find.descendant(of: back, matching: find.byType(Material)),
          )
          .color,
      AppColors.transparent,
    );
  });

  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.brandRed);
      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.brandRed);
      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);
      expect(
        tester.widget<Icon>(find.byIcon(Icons.mail_outline_rounded)).color,
        AppColors.blue,
      );

      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<GestureDetector>(find.byKey(const Key('auth-mode-sign-up')))
            .onTap,
        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(error.style?.fontSize, 12);
    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 underline = tester.widget<Container>(
    find.descendant(of: segment, matching: find.byType(Container)),
  );
  return (underline.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 osVersion = '',
    String appVersion = '',
  }) async {
    loginCalls++;
    await _gate.future;
    throw const ApiException(500, 'pending failure');
  }
}

class _AuthRouteHost extends StatelessWidget {
  const _AuthRouteHost();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: TextButton(
          key: const Key('auth-open'),
          onPressed: () => Navigator.of(
            context,
          ).push<void>(MaterialPageRoute(builder: (_) => const AuthPage())),
          child: const Text('Open auth'),
        ),
      ),
    );
  }
}