T15-T18, T20, T23: app shell, three screens, and the first UI tests
Theme, go_router shell, record screen, trips list with selection, trip detail with stats and charts, rename/delete/merge. 15 widget tests -- the first this project has ever had, closing the gap docs/v3/BACKLOG.md names as v2's largest. The theme sets bodyColor and displayColor explicitly rather than relying on a wrapping widget, so the black-on-black regression cannot recur by someone removing a container, and a widget test now asserts the headline names a colour distinct from the ground. Those tests immediately found a real layout bug: with a ride active the record screen grows to six stat rows and overflows a short screen. Compose clipped this silently, so it may be latent in the native app; Flutter reports it. Fixed by making the screen scrollable while still centring when there is room. Two harness lessons. pumpAndSettle never settles against a repeating timer, so the elapsed clock now runs only while a ride is active -- better behaviour anyway, since an idle screen has no clock to advance. And flutter_test asserts no Timer is pending after disposal, which Drift's stream-query keep-alive cache trips; tests now tear the tree down and pump past that window. 160 tests passing, analyze clean. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
341
test/widget_test.dart
Normal file
341
test/widget_test.dart
Normal file
@@ -0,0 +1,341 @@
|
||||
import 'package:drift/drift.dart' show driftRuntimeOptions;
|
||||
import 'package:drift/native.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
import 'package:rippr/src/app/providers.dart';
|
||||
import 'package:rippr/src/data/database.dart';
|
||||
import 'package:rippr/src/data/trip_repository.dart';
|
||||
import 'package:rippr/src/domain/models.dart';
|
||||
import 'package:rippr/src/recording/location_source.dart';
|
||||
import 'package:rippr/src/ui/detail/trip_detail_screen.dart';
|
||||
import 'package:rippr/src/ui/record/record_screen.dart';
|
||||
import 'package:rippr/src/ui/theme.dart';
|
||||
import 'package:rippr/src/ui/trips/trips_screen.dart';
|
||||
|
||||
/// **The first UI tests this project has ever had.**
|
||||
///
|
||||
/// `docs/v3/BACKLOG.md` names "zero UI tests across six screens" as v2's largest coverage
|
||||
/// gap: everything was verified by manual screenshot, which is how a 64 sp speed figure
|
||||
/// once shipped rendering black-on-black. Flutter makes these cheap enough that carrying
|
||||
/// that debt into the port would be indefensible.
|
||||
void main() {
|
||||
late AppDatabase db;
|
||||
late TripRepository repo;
|
||||
late FakeLocationSource source;
|
||||
|
||||
setUp(() {
|
||||
driftRuntimeOptions.dontWarnAboutMultipleDatabases = true;
|
||||
db = AppDatabase(NativeDatabase.memory());
|
||||
repo = TripRepository(db);
|
||||
source = FakeLocationSource();
|
||||
});
|
||||
|
||||
tearDown(() async {
|
||||
await source.dispose();
|
||||
await db.close();
|
||||
});
|
||||
|
||||
/// Runs a widget test and then tears the tree down cleanly.
|
||||
///
|
||||
/// `flutter_test` asserts that no `Timer` is pending once the tree is disposed. Two
|
||||
/// things here legitimately hold one: the elapsed clock on the record screen, and
|
||||
/// Drift's stream-query cache, which keeps a query alive briefly after its last
|
||||
/// listener leaves so re-subscribing is cheap. Removing the tree cancels the first;
|
||||
/// pumping past the keep-alive window clears the second.
|
||||
void screenTest(String description, Future<void> Function(WidgetTester) body) {
|
||||
testWidgets(description, (tester) async {
|
||||
await body(tester);
|
||||
await tester.pumpWidget(const SizedBox.shrink());
|
||||
await tester.pump(const Duration(seconds: 2));
|
||||
});
|
||||
}
|
||||
|
||||
/// Pumps a screen that has a live ride on it.
|
||||
///
|
||||
/// `pumpAndSettle` cannot be used once a ride is active: the elapsed clock ticks every
|
||||
/// second forever, so "settled" never arrives. Two explicit frames are enough to build
|
||||
/// and then reflect the streamed trip.
|
||||
Future<void> pumpLive(WidgetTester tester, Widget widget) async {
|
||||
await tester.pumpWidget(widget);
|
||||
await tester.pump();
|
||||
await tester.pump(const Duration(milliseconds: 50));
|
||||
}
|
||||
|
||||
/// Wraps a screen with the real theme and an in-memory stack.
|
||||
///
|
||||
/// The theme is deliberately included: the black-on-black bug was invisible to logic
|
||||
/// tests and only a rendered widget can catch its equivalent.
|
||||
Widget host(Widget child) => ProviderScope(
|
||||
overrides: [
|
||||
databaseProvider.overrideWithValue(db),
|
||||
locationSourceProvider.overrideWithValue(source),
|
||||
],
|
||||
child: MaterialApp(theme: ripprTheme(), home: child),
|
||||
);
|
||||
|
||||
Future<int> seedCompletedTrip({
|
||||
required int startedAt,
|
||||
required int endedAt,
|
||||
String? name,
|
||||
int points = 5,
|
||||
double startLat = 51.0,
|
||||
}) async {
|
||||
final h = await repo.startTrip(startedAt);
|
||||
await repo.appendPoints([
|
||||
for (var i = 0; i < points; i++)
|
||||
TrackPoint(
|
||||
tripId: h.tripId,
|
||||
segmentId: h.segmentId,
|
||||
timestamp: startedAt + i * 1000,
|
||||
latitude: startLat + i * 0.0001,
|
||||
longitude: -114.0,
|
||||
speedKmh: 40.0 + i,
|
||||
altitudeM: 1000.0 + i,
|
||||
),
|
||||
]);
|
||||
if (name != null) await repo.renameTrip(h.tripId, name);
|
||||
await repo.completeTrip(endedAt);
|
||||
await repo.recomputeAggregates(h.tripId);
|
||||
return h.tripId;
|
||||
}
|
||||
|
||||
group('record screen', () {
|
||||
screenTest('idle shows Ready and only START', (tester) async {
|
||||
await tester.pumpWidget(host(const RecordScreen()));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
expect(find.text('Ready'), findsOneWidget);
|
||||
expect(find.byKey(const Key('start')), findsOneWidget);
|
||||
expect(find.byKey(const Key('pause')), findsNothing);
|
||||
expect(find.byKey(const Key('stop')), findsNothing);
|
||||
// A resting screen must not look like a ride going nowhere.
|
||||
expect(find.text('Distance'), findsNothing);
|
||||
});
|
||||
|
||||
screenTest('the headline is live speed, not max speed', (tester) async {
|
||||
// v2.0 shipped max speed as the headline and it read as a frozen, broken screen on
|
||||
// a real ride, because a max figure only moves when you beat it. This guards the
|
||||
// 2.0.1 fix.
|
||||
await tester.pumpWidget(host(const RecordScreen()));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
expect(find.text('SPEED'), findsOneWidget);
|
||||
expect(find.text('MAX SPEED'), findsNothing);
|
||||
});
|
||||
|
||||
screenTest('recording swaps to PAUSE and STOP, with no DISCARD',
|
||||
(tester) async {
|
||||
await repo.startTrip(1000);
|
||||
await pumpLive(tester, host(const RecordScreen()));
|
||||
|
||||
expect(find.byKey(const Key('pause')), findsOneWidget);
|
||||
expect(find.byKey(const Key('stop')), findsOneWidget);
|
||||
// Destructive actions must not sit next to Pause during a live ride — a gloved
|
||||
// mis-tap at speed would lose the whole recording.
|
||||
expect(find.byKey(const Key('discard')), findsNothing);
|
||||
expect(find.byKey(const Key('start')), findsNothing);
|
||||
});
|
||||
|
||||
screenTest('paused offers RESUME, STOP and DISCARD', (tester) async {
|
||||
await repo.startTrip(1000);
|
||||
await repo.pauseTrip(2000);
|
||||
await pumpLive(tester, host(const RecordScreen()));
|
||||
|
||||
expect(find.byKey(const Key('resume')), findsOneWidget);
|
||||
expect(find.byKey(const Key('stop')), findsOneWidget);
|
||||
expect(find.byKey(const Key('discard')), findsOneWidget);
|
||||
expect(find.text('Paused'), findsOneWidget);
|
||||
});
|
||||
|
||||
screenTest('discard asks before destroying anything', (tester) async {
|
||||
await repo.startTrip(1000);
|
||||
await repo.pauseTrip(2000);
|
||||
await pumpLive(tester, host(const RecordScreen()));
|
||||
|
||||
await tester.tap(find.byKey(const Key('discard')));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
expect(find.text('Discard this ride?'), findsOneWidget);
|
||||
|
||||
await tester.tap(find.text('Cancel'));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
expect(await repo.activeTrip(), isNotNull,
|
||||
reason: 'cancelling must not delete the ride');
|
||||
});
|
||||
|
||||
screenTest('text is legible against the dark ground', (tester) async {
|
||||
// The regression this exists for: removing Compose's Surface left LocalContentColor
|
||||
// black, and a 64sp figure rendered invisibly on a near-black background. No logic
|
||||
// test could catch it. This asserts the rendered colour differs from the ground.
|
||||
await tester.pumpWidget(host(const RecordScreen()));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
final speed = tester.widget<Text>(
|
||||
find.descendant(
|
||||
of: find.byKey(const Key('speed')),
|
||||
matching: find.text('0'),
|
||||
),
|
||||
);
|
||||
final colour = speed.style?.color;
|
||||
expect(colour, isNotNull, reason: 'the headline must name its colour');
|
||||
expect(colour, isNot(ripprBackground));
|
||||
expect(colour, isNot(Colors.black));
|
||||
});
|
||||
});
|
||||
|
||||
group('trips list', () {
|
||||
screenTest('empty state explains what to do', (tester) async {
|
||||
await tester.pumpWidget(host(const TripsScreen()));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
expect(find.textContaining('No rides yet'), findsOneWidget);
|
||||
});
|
||||
|
||||
screenTest('completed rides are listed newest first', (tester) async {
|
||||
await seedCompletedTrip(
|
||||
startedAt: 1000, endedAt: 5000, name: 'Older ride');
|
||||
await seedCompletedTrip(
|
||||
startedAt: 100000, endedAt: 200000, name: 'Newer ride');
|
||||
|
||||
await tester.pumpWidget(host(const TripsScreen()));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
final newer = tester.getTopLeft(find.text('Newer ride')).dy;
|
||||
final older = tester.getTopLeft(find.text('Older ride')).dy;
|
||||
expect(newer, lessThan(older));
|
||||
});
|
||||
|
||||
screenTest('an active ride does not appear in the list', (tester) async {
|
||||
await seedCompletedTrip(
|
||||
startedAt: 1000, endedAt: 5000, name: 'Finished');
|
||||
await repo.startTrip(100000);
|
||||
|
||||
await tester.pumpWidget(host(const TripsScreen()));
|
||||
await tester.pump();
|
||||
await tester.pump(const Duration(milliseconds: 50));
|
||||
|
||||
expect(find.byKey(const Key('trip-1')), findsOneWidget);
|
||||
expect(find.text('Finished'), findsOneWidget);
|
||||
// Only the completed one.
|
||||
expect(find.byType(Card), findsOneWidget);
|
||||
});
|
||||
|
||||
screenTest('Merge enables at exactly two selections', (tester) async {
|
||||
final a = await seedCompletedTrip(startedAt: 1000, endedAt: 5000);
|
||||
final b = await seedCompletedTrip(startedAt: 10000, endedAt: 15000);
|
||||
final c = await seedCompletedTrip(startedAt: 20000, endedAt: 25000);
|
||||
|
||||
await tester.pumpWidget(host(const TripsScreen()));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
// One selected: merge is present but disabled.
|
||||
await tester.longPress(find.byKey(Key('trip-$a')));
|
||||
await tester.pumpAndSettle();
|
||||
expect(
|
||||
tester.widget<TextButton>(find.byKey(const Key('merge'))).onPressed,
|
||||
isNull,
|
||||
reason: 'merging one ride is meaningless',
|
||||
);
|
||||
|
||||
// Two: enabled.
|
||||
await tester.tap(find.byKey(Key('trip-$b')));
|
||||
await tester.pumpAndSettle();
|
||||
expect(
|
||||
tester.widget<TextButton>(find.byKey(const Key('merge'))).onPressed,
|
||||
isNotNull,
|
||||
);
|
||||
|
||||
// Three: ambiguous, so disabled again.
|
||||
await tester.tap(find.byKey(Key('trip-$c')));
|
||||
await tester.pumpAndSettle();
|
||||
expect(
|
||||
tester.widget<TextButton>(find.byKey(const Key('merge'))).onPressed,
|
||||
isNull,
|
||||
reason: 'merge combines exactly two rides',
|
||||
);
|
||||
});
|
||||
|
||||
screenTest('deleting asks first and then removes the ride',
|
||||
(tester) async {
|
||||
final a = await seedCompletedTrip(startedAt: 1000, endedAt: 5000);
|
||||
|
||||
await tester.pumpWidget(host(const TripsScreen()));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
await tester.longPress(find.byKey(Key('trip-$a')));
|
||||
await tester.pumpAndSettle();
|
||||
await tester.tap(find.byKey(const Key('delete')));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
expect(find.textContaining('Delete 1 ride'), findsOneWidget);
|
||||
// "Delete" appears both in the toolbar and in the dialog; target the dialog's.
|
||||
await tester.tap(find.descendant(
|
||||
of: find.byType(AlertDialog),
|
||||
matching: find.text('Delete'),
|
||||
));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
expect(await repo.tripById(a), isNull);
|
||||
});
|
||||
});
|
||||
|
||||
group('trip detail', () {
|
||||
screenTest('shows the authoritative summary', (tester) async {
|
||||
final id = await seedCompletedTrip(
|
||||
startedAt: 1000, endedAt: 5000, name: 'Sunday blast', points: 11);
|
||||
|
||||
await tester.pumpWidget(host(TripDetailScreen(tripId: id)));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
expect(find.text('Sunday blast'), findsOneWidget);
|
||||
expect(find.text('DISTANCE'), findsOneWidget);
|
||||
expect(find.text('Max speed'), findsOneWidget);
|
||||
expect(find.text('Segments'), findsOneWidget);
|
||||
});
|
||||
|
||||
screenTest('a missing ride says so instead of rendering blank',
|
||||
(tester) async {
|
||||
await tester.pumpWidget(host(const TripDetailScreen(tripId: 9999)));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
expect(find.textContaining('no longer exists'), findsOneWidget);
|
||||
});
|
||||
|
||||
screenTest('charts degrade gracefully below two points', (tester) async {
|
||||
final id = await seedCompletedTrip(
|
||||
startedAt: 1000, endedAt: 2000, points: 1);
|
||||
|
||||
await tester.pumpWidget(host(TripDetailScreen(tripId: id)));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
// Both charts need intervals; one point has none. An unexplained blank box would
|
||||
// read as a bug.
|
||||
//
|
||||
// The detail body is a ListView, so the second chart is not built until it is
|
||||
// scrolled into view -- asserting without scrolling would silently check only one.
|
||||
expect(find.textContaining('Not enough points'), findsOneWidget);
|
||||
await tester.drag(find.byType(ListView), const Offset(0, -600));
|
||||
await tester.pumpAndSettle();
|
||||
expect(find.textContaining('Not enough points'), findsWidgets);
|
||||
expect(find.text('Elevation profile'.toUpperCase()), findsOneWidget);
|
||||
});
|
||||
|
||||
screenTest('renaming updates the title', (tester) async {
|
||||
final id = await seedCompletedTrip(startedAt: 1000, endedAt: 5000);
|
||||
|
||||
await tester.pumpWidget(host(TripDetailScreen(tripId: id)));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
await tester.tap(find.byKey(const Key('rename')));
|
||||
await tester.pumpAndSettle();
|
||||
await tester.enterText(find.byKey(const Key('name-field')), 'Coast run');
|
||||
await tester.tap(find.text('Save'));
|
||||
await tester.pumpAndSettle();
|
||||
|
||||
expect(find.text('Coast run'), findsOneWidget);
|
||||
expect((await repo.tripById(id))!.name, 'Coast run');
|
||||
});
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user