183 lines
7.3 KiB
Dart
183 lines
7.3 KiB
Dart
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<void> 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<Text>(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<AppBar>(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<DecoratedBox>(find.byType(DecoratedBox))
|
|
.map((d) => d.decoration)
|
|
.whereType<BoxDecoration>()
|
|
.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<Text>(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<Icon>(find.byIcon(LucideIcons.arrowLeft));
|
|
expect(back.color, Colors.white);
|
|
|
|
final bar = tester.widget<AppBar>(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<AppBar>(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<AppBar>(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');
|
|
});
|
|
});
|
|
}
|