import 'package:flutter/material.dart'; import 'package:lucide_icons_flutter/lucide_icons.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:miler/views/helpers/constants/Colorconstants.dart'; import 'package:miler/views/helpers/widgets/app_widgets.dart'; import 'package:miler/views/helpers/widgets/miler_app_bar.dart'; /// Two rules the bars now share, and both are the kind that quietly comes /// undone the next time someone adds a screen: /// /// • **One line.** The bar carries the page's name and nothing under it. Every /// caption that used to sit there duplicated a figure the page itself showed /// louder and lower down, and two sources for one number is how they drift. /// /// • **One surface.** A frosted brand wash, not a solid slab, so a tab and a /// pushed page read as the same app at the top of the screen. void main() { Future pump(WidgetTester tester, Widget page) async { tester.view.physicalSize = const Size(390 * 3, 844 * 3); tester.view.devicePixelRatio = 3.0; addTearDown(tester.view.resetPhysicalSize); addTearDown(tester.view.resetDevicePixelRatio); await tester.pumpWidget( ScreenUtilInit( designSize: const Size(390, 844), builder: (_, _) => MaterialApp(home: page), ), ); await tester.pumpAndSettle(); } group('MilerAppBar', () { testWidgets('shows the page name and nothing beneath it', (tester) async { await pump( tester, const Scaffold(appBar: MilerAppBar(title: 'Activity')), ); expect(find.text('Activity'), findsOneWidget); expect( tester.widgetList(find.byType(Text)), hasLength(1), reason: 'the caption under the title is gone from every bar', ); }); // ── The wash gave way to the brand ── // // The four tabs wore a 7% frosted brand wash flattened against white while // Home wore solid brand. Switching tab therefore changed the colour of the // top 76pt of the phone AND the colour of the status-bar glyphs, which // reads as arriving in a different app rather than a different page. // // One ground now, and everything on it inverts. The wash survives as // `milerGlassSurface()` for the sheets, which sit over content and still // want it. // ── The wash gave way to the brand, and the brand grew a gradient ── // // The four tabs wore a 7% frosted brand wash flattened against white while // Home wore solid brand, so switching tab changed the colour of the top // 76pt of the phone AND the colour of the status-bar glyphs — which reads // as arriving in a different app rather than a different page. // // One ground now. It is [kBrandGradient] rather than a flat fill: two stops // about eight per cent apart, enough that the bar reads as a surface with // light on it and not enough to be seen as a gradient. A colour cannot be a // gradient, so it rides as `flexibleSpace` — and the fill underneath stays // the brand red, so a bar that fails to paint its surface comes out the // right colour rather than transparent. Both halves are asserted, because // it is the pair that makes the fallback safe. testWidgets('is one brand ground, so every tab shares one chrome', ( tester, ) async { await pump( tester, const Scaffold(appBar: MilerAppBar(title: 'Activity')), ); final bar = tester.widget(find.byType(AppBar)); // ── The fill is transparent, and the surface paints ── // // It was the brand as a safety net behind [kBrandGradient]. It cannot be // one now: the bar's bottom corners are rounded so the page shows through // them (see [milerBrandSurface]), and an opaque rectangle behind a // rounded surface fills in exactly the two corners the curve exists to // open. What must hold is that the bar still *renders* the brand, which // is the gradient assertion below. expect(bar.backgroundColor, Colors.transparent); expect(bar.flexibleSpace, isNotNull); final painted = tester .widgetList(find.byType(DecoratedBox)) .map((d) => d.decoration) .whereType() .where((d) => d.gradient == kBrandGradient); expect(painted, isNotEmpty, reason: 'the bar does not wear the brand'); }); testWidgets('inverts everything drawn on it', (tester) async { await pump( tester, const Scaffold(appBar: MilerAppBar(title: 'Activity', showBack: true)), ); final title = tester.widget(find.text('Activity')); expect( title.style?.color, Colors.white, reason: 'white on #960019 is the only combination that clears AA here', ); final back = tester.widget(find.byIcon(LucideIcons.arrowLeft)); expect(back.color, Colors.white); final bar = tester.widget(find.byType(AppBar)); expect( bar.systemOverlayStyle?.statusBarIconBrightness, Brightness.light, reason: 'dark glyphs on maroon is the one contrast failure a rider ' 'cannot work around by tilting the phone', ); }); testWidgets('closes with no rule under it', (tester) async { await pump( tester, const Scaffold(appBar: MilerAppBar(title: 'Activity')), ); // The brand ground is a surface, and a surface against an untinted page // is already an edge. A hairline under it drew that boundary a second // time — the same doubled-up border this app has been pulling out of its // cards. final bar = tester.widget(find.byType(AppBar)); expect(bar.bottom, isNull); }); testWidgets('keeps a trailing slot for the pages that need one', ( tester, ) async { await pump( tester, Scaffold( appBar: MilerAppBar( title: 'My Bookings', trailing: const Icon(Icons.map_rounded), ), ), ); expect(find.byIcon(Icons.map_rounded), findsOneWidget); }); }); group('the pushed-page bar', () { // The rule is unchanged and is the whole point of this file: a pushed page // and a tab must be the same object at the top of the phone. Only the // answer changed — both are solid brand now, rather than both being a wash. testWidgets('is the same ground as the tab bars', (tester) async { await pump( tester, Scaffold(appBar: milerPageBar('Rewards', onBack: () {})), ); final bar = tester.widget(find.byType(AppBar)); // ── The fill is transparent, and the surface paints ── // // It was the brand as a safety net behind [kBrandGradient]. It cannot be // one now: the bar's bottom corners are rounded so the page shows through // them (see [milerBrandSurface]), and an opaque rectangle behind a // rounded surface fills in exactly the two corners the curve exists to // open. What must hold is that the bar still *renders* the brand, which // is the gradient assertion below. expect(bar.backgroundColor, Colors.transparent); expect(bar.flexibleSpace, isNotNull); expect(bar.bottom, isNull, reason: 'no rule under the bar here either'); }); }); }