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/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/theme/app_dimens.dart';
import 'package:fruitshorts/core/theme/app_theme.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,
    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(),
    );
    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: 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('FruitShorts'), findsOneWidget);
      expect(
        find.text('Sign in to sync progress, favorites and coins'),
        findsOneWidget,
      );
      expect(
        tester.getSize(find.byKey(const Key('auth-brand-logo'))),
        const Size(72, 72),
      );
      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,
        50,
      );
      expect(
        tester.getSize(find.byKey(const Key('auth-entry-email'))).height,
        50,
      );
      final phoneButton = tester.widget<Material>(
        find.descendant(
          of: find.byKey(const Key('auth-entry-phone')),
          matching: find.byType(Material),
        ),
      );
      expect(phoneButton.color, AppColors.blue);
      final emailButton = tester.widget<Material>(
        find.descendant(
          of: find.byKey(const Key('auth-entry-email')),
          matching: find.byType(Material),
        ),
      );
      expect(emailButton.color, AppColors.card);
      expect(
        (emailButton.shape! as RoundedRectangleBorder).side.color,
        AppColors.border,
      );

      final glow = tester.widget<Container>(
        find.byKey(const Key('auth-background-glow')),
      );
      final glowDecoration = glow.decoration! as BoxDecoration;
      final gradient = glowDecoration.gradient! as RadialGradient;
      expect(gradient.colors.first, AppColors.surfaceTop);
      expect(gradient.colors.last.a, 0);

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

      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(AppDimens.authCardRadius),
      );
      expect(cardDecoration.boxShadow, contains(AppTheme.cardShadow));
      expect(card.padding, const EdgeInsets.all(20));

      final email = tester.widget<TextField>(
        find.byKey(const Key('auth-email')),
      );
      expect(email.decoration?.fillColor, AppColors.card);
      expect(email.style?.color, AppColors.onSurface);
      expect(email.style?.fontSize, 15);
      expect(email.cursorColor, AppColors.blue);
      expect(tester.getSize(find.byKey(const Key('auth-email'))).height, 52);
      final emailBorder =
          email.decoration!.enabledBorder! as OutlineInputBorder;
      expect(emailBorder.borderRadius, BorderRadius.circular(14));
      expect(emailBorder.borderSide.color, AppColors.border);
      expect(emailBorder.borderSide.width, 1);
      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.blue);

      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, 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_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/fruitshorts.png',
      );
      expect(
        tester.getTopLeft(find.byKey(const Key('auth-brand-logo'))).dy,
        84,
      );
    },
  );

  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.card,
    );
  });

  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);
      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<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(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 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 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'),
        ),
      ),
    );
  }
}